diseno-interaccion
Teoría

Qué es: Diseño de Interacción (IxD)

¿Cómo planear el comportamiento de un producto digital?¿Cómo definir cómo reacciona cada elemento? ¿Cómo facilitar la comprensión humano-máquina? El Diseño de Interacción es la disciplina que se encarga de ello.

Cada vez que haces doble tap para dar un like en Instagram, cada vez que mueves tu mouse para seleccionar un icono del escritorio, cada vez que llenas un formulario y recibes un mensaje de error, hubo un diseño de interacción.

El diseño de interacción es una disciplina que nació de la necesidad de estudiar y facilitar las interacciones entre las personas y su ambiente. Aunque la interacción puede darse con casi cualquier objeto físico, en el mundo digital la asociamos cuando queremos utilizar un producto o dispositivo para alcanzar un objetivo y esperamos que responda a nuestras acciones. El diseño de interacción, así como la usabilidad, la arquitectura de información y otras disciplinas, nos ayudan a planear para ofrecer una buena experiencia de usuario.

A continuación te explico de qué trata, sus principios y mejores prácticas para crear productos intuitivos, amigables y fáciles de usar 😉

 

Qué es el Diseño de Interacción

La IxDA (Interaction Design Association), lo define como:

El diseño de interacción (IxD) define la estructura y el comportamiento de sistemas interactivos. Los diseñadores de interacción buscan crear relaciones significativas entre las personas y los productos o servicios que estos usan, desde computadoras hasta dispositivos móviles, aparatos y más…

Usability.gov lo define como:

El diseño de interacción se enfoca en crear interfaces bien pensadas en los comportamientos. Entender cómo los usuarios y la tecnología se comunican entre sí es fundamental para esta disciplina. Con este entendimiento, se puede anticipar cómo alguien interactúa con el sistema para corregir problemas de manera temprana, así como inventar nuevas formas de hacer las cosas.

 

Las cuatro dimensiones del Diseño de Interacción

Gillian Crampton Smith, introdujo el concepto de las cuatro dimensiones para el lenguaje de diseño de interacción. Aunque cada dimensión funciona de manera individual, es la suma de todas las que generan una mejor interacción entre el usuario y la interfaz.

1º Dimensión – Palabras: las palabras deben de ser sencillas de entender y de permitir la interacción.

2º Dimensión – Representaciones visuales: cada gráfico, ilustración, diagrama, icono, foto, etc debe de ser usada con cautela, pero sobre todo debe de tener un fundamento. Evita el uso como decoración.

3º Dimensión – Espacio: con lo que interactúa el usuario en el mundo real. Estos pueden ser objetos físicos de hardware como un mouse, apuntador, teclado, joystick, que son utilizados como herramientas de mando.

4º Dimensión – Tiempo: se refiere a la duración que el usuario pasa interactuando con las palabras, representaciones visuales y el espacio.

5º Dimensión (propuesta por Kevin Silver) – Comportamiento:  en la que se incluyen las emociones y reacciones que tiene el usuario al operar, presentar, utilizar o realizar una acción en el sistema.

 

6 Tips a seguir para el Diseño de Interacción

 

1. Define cómo se interactúa

Para definir esto es necesario establecer si habrá alguna parte del hardware con la que el usuario deba de interactuar con la interfaz (un mouse quizá), o bien, si es con algún gesture. Por ejemplo, si fuera aplicación móvil quizá será necesario definir qué acciones de los dedos provocan qué resultados. Por otra parte, si existieran usuarios más avanzados, habría comandos que estos pudieran utilizar para ser más eficientes y rápidos para controlar la interfaz. Un ejemplo podría ser comandos tan sencillos como copy / paste (Ctrl+C / Ctrl+V).

Tip: Define los gestures para móviles, o comandos de interacción. Mira esta guía de IBM.

1-define-como-se-interactua

 

2. Da pistas del comportamiento

Un botón debe de parecer un botón, por lo cual es importante que la apariencia tanto de color, forma, tamaño, etc, demuestre o de una pista clara de que puede ser oprimido. Además, intenta dar también algunas pistas de qué pasaría si el usuario decidiera continuar, esto puede incluir un tooltip, una advertencia, o el rotulado en sí del botón.

Por ejemplo en la siguiente aplicación se dan pistas sobre cómo empezar a utilizarla.

2-Da-pistas-comportamiento

 

3. Anticípate a errores potenciales

Un buen diseñador de interacción entiende la importancia de anticiparse a los errores y diseñar para que los usuarios puedan prevenirlos o bien, recuperarse de ellos. Un buen ejemplo de cómo hacerlo es limitando las acciones que el usuario puede realizar. Por ejemplo, si debe llenar todos los campos de un formulario, será bueno marcar como opcionales únicamente lo que podría saltarse, así como desactivar el botón de continuar, o utilizar una validación oportuna en cada campo a fin de saber si se ha llenado de manera correcta o no.

Pero también, será necesario proveer claramente cómo el usuario podría recuperarse de un error con el que se enfrente, por lo cual es importante explicar qué ha pasado, dónde, por qué y qué se debería hacer para corregirlo o revertir la acción.

Twitter lo hace bien con Ajax al momento de ir ingresando los caracteres.

3-Anticipate-a-errores-potenciales

 

4. Considera la retroalimentación oportuna

Cuando el usuario ejecuta una acción, el sistema debe de responder haciéndole saber si fue efectiva o no, pues el no tener retroalimentación podría significar dos cosas: 1) aún no se ha realizado nada (guardar, cancelar) ó 2) ya se hizo (y pudiera ser que no).

Por ejemplo, aquí en Mailchimp intenté agendar el envío de un newsletter para el mismo día en una hora pasada, cuando en realidad era para “mañana”, por lo que me mostró un mensaje de que no fue posible ya que “es imposible viajar en el tiempo” (con algo de humor eh 😉 )

4-Retroalimentacion-oportuna

 

5. Diseña pensando de manera estratégica

Diseñar para web, móvil o wearables es completamente distinto. Por ello es indispensable conocer los lineamientos de cada dispositivo y las mejores prácticas. No obstante, por ejemplo la Ley de Fitts aplica para todos. La Ley de Fitts se refiere a  un modelo en el cual se toma en cuenta la velocidad y precisión del movimiento de un humano para apuntar a un objetivo. En otras palabras, cómo podemos utilizar nuestros dedos o mouse desplazándonos con éxito hacia un botón por ejemplo.

La Ley de Fitts requiere pensar de manera estratégica en algunos aspectos como:

  • Los botones y widgets deben de tener un tamaño apropiado. Cuidado con que no sean muy pequeños.
  • Los botones más usados deben estar más cerca del cursor (o del alcance de los dedos para touch screens)
  • Los menús visibles son más rápidos que utilizar pull-down

¿Por qué crees que las opciones de navegación son utilizadas en la parte posterior de muchas aplicaciones móviles? Correcto, son más rápidas de alcanzar.

5-Ley-Fitts

 

6. Simplifica lo más que puedas

Muchos estudios han comprobado que nuestro cerebro es capaz de retener de 5 a 9 elementos en la memoria de corto plazo (7± 2 es el número secreto), más de ello se vuelve complicado de recordar o induce al error. Esto es conocido como la Ley de Miller, la cual nos ayuda a estar conscientes al momento de diseñar y poderla emplear al dividir la información en pedazos. ¿Te has dado cuenta que las tarjetas de crédito dividen los dígitos en bloques o pedazos de 4 dígitos? 🙂

Por otra parte, ¿te has topado con sitios donde tienes una cantidad de opciones tan grande que terminas por abandonar? esto se debe a la Ley de Hick, la cual cuenta que entre más opciones le demos a una persona, más tiempo tardará en tomar una decisión. Sitios llenos de links o de elementos generalmente causan una desventaja en términos de conversión.

Mira Yelp, quién lo hace bien dando únicamente un par de opciones para que el usuario inicie con su búsqueda.

6-Ley-Hick

 

Referencias y lecturas sobre Diseño de Interacción

  1. Usability.gov (2000). What and Why, Interaction Design
  2. Moggridge, B. Designing Interactions. Cambridge, MA: The MIT Press, 2007.
  3. Shneiderman, B. (1986) Designing the User Interface: Strategies for Effective Human-Computer Interaction

¿Qué opinas de este artículo? ¿Fue claro? Me gustaría saber tus comentarios abajo. ¡Suscríbete al newsletter mensual para informarte de nuevos artículos!

2 comentarios

  1. Hola Andrea acabo de descubrir tu blog y me gusto mucho tu artículo, como lectura agregada me gustaría sugerir “About Face: The Essentials of Interaction Design” de Alan Cooper, creo que esta en el 101 de diseño de interacción. Saludos!

  2. Diana

    Hola, Andrea, me acabo de enterear de tu blog, muy interesante, además sencillo de leer; me declaro una fan. Gracias por compartir tu experiencia.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *