+
# Interaction Design


>Photo credit: “Interaction Design Disciplines”. Wikimedia. Creative Commons 2.0

## Learning Goals

En esta lección:

- Aprenderás qué es Interaction Design (IxD)
- Aprenderás los orígenes y la evolución de IxD
- Aprenderás principios de IxD
- Entenderás las 5 dimensiones de IxD
- Distinguirás las diferencias entre macrointeracciones y microinteracciones
- Aprenderás dónde deben usarse microinteracciones y por qué son importantes para la experiencia de usuario

## ¿Qué es Diseño de Interacciones?


El diseño de interacciones (IxD) es una práctica relacionada con el diseño de Interfaces de Usuario (UI). Su objetivo principal es mejorar el disfrute de un usuario a través de la examinación de la interacción en la interfaz de un sistema.

Si un usuario disftuta el uso de una interfaz, está un paso más cerca del disfrute de todo el producto, lo cual resulta en una mejor experiencia de usuario general. IxD se preocupa de cómo los usuarios se acoplan a la interfaz de usuario y cómo esa UI responderá para que el usuario cumpla sus objetivos.

- El diseño de interacciones está enfocado en el diseño del comportamiento de una interacción entre una persona y una interfaz digital
- Utiliza teorías y técnicas del diseño tradicional, usabilidad y otras disciplinas de ingeniería para conseguir su propios métodos y técnicas
- También se encarga de satisfacer los deseos y necesidades de las personas que van a interactuar con un producto o servicio

>Alan Cooper, “About Face - The Essentials of Interaction Design” (1995)

## ¿De dónde viene?

La historia del término *Diseño de Interacciones* comienza con la invención del ordenador. A pesar de que el término como tal no existía, los primeros diseñadores de ordenadores tenían que incorporar una manera a través de la cual **operadores humanos pudiesen insertar información para que los ordenadores operaran con dicha data y los ordenadores pudiesen devolver los resultados de estas operaciones**.


> El primer ordenador Alto en Xerox PARC

En 1973, los diseñadores en Xerox PARC utilizaron diseño de interacciones para construir uno de los primeros ordenadores personales: un modelo de escritorio con un teclado y un monitor de bits.

Luego, a mediados de los 80, dos diseñadores industriales, **Bill Moggridge** y **Bill Verplank**, que trabajaban en lo que fue considerado el [primer ordenador portátil](https://en.wikipedia.org/wiki/Grid_Compass), acunaron el término **diseño de interacciones** para lo que estaban haciendo. Pero pasarían 10 años más para que más diseñadores descubrieran el término y lo llevaran a un uso común.

## Principios de IxD

### **Principio 1: El Buen Diseño de Interacciones es Consistente**

Darle estilos correctos a tu Interfaz de Usuario se traduce en un sistema consistente:

- Componentes con comportamientos similares deben tener apariencias similares
- Componentes con comportamientos diferentes deben tener apariencias diferentes


Para crear consistencia, como hemos hecho anteriormente, debemos usar:
- Colores
- Tamaños
- Formas
- Comportamientos (transiciones, efectos de hover, etc.)
- Voz
- Patrones de diseño de UI (con interacciones consistentes y resultados en todas las aplicaciones, de forma tal, que estos comportamientos se tornen predecibles)

### **Principio 2: El Buen Diseño de Interacciones es Visible**


La buena visibilidad, de acuerdo a los principios de Hogue, significa que las señales están presentes. Señales que:

- Guían al usuario a través de la interacción
- Guían al usuario a través de una serie de tareas
- Indican qué acciones posibles tiene a su disposición
- Comunica el contexto de la situación

### **Principio 3: El Buen Diseño de Interacciones facilita el Aprendizaje**

La facilidad para aprender a usar un producto se mide en:
- **Efectividad**: Cuántas funciones hay que aprender y qué porcentaje de usuarios logran aprenderlas
- **Eficiencia**: Cuánto tarda un usuario en aprender a usar el producto y qué tan fácil es
- **Errores:** Cuántos errores comete un usuario, qué tan fácil es para un usuario recuperarse de un error y cuánto tiempo le toma


### **Principio 4: El Buen Diseño de Interacción es Predecible**

En el famoso libro **Don't Make Me Think** (No me hagas pensar), Steve Krug explica que la predecibilidad puede ser lograda si un usuario es capaz de responderse las siguientes preguntas ante una interacción posible:
- ¿Dónde estoy?
- ¿Cómo llegué aquí?
- ¿Qué puedo hacer aquí?
- ¿A dónde puedo ir desde acá?

Krug explica que si puedes lograr que un usuario se conteste correctamente estas preguntas en cualquier lugar de una aplicación digital, entonces:

- Has provisto un buen sentido de ubicación
- Has creado las expectativas correctas
- Has hecho posible que las personas predigan qué va a ocurrir después de una interacción

### **Principio 5: El Buen Diseño de Interacciones provee Feedback (Retroalimentación)**

La retroalimentación comunica los resultados de cualquier interacción, haciendola visible y entendible. Su función es darle al usuario una señal de que ellos o el producto ha logrado o ha fallado a la hora de realizar una tarea.


## Las Cinco Dimensiones

Estas dimensiones crean las interacciones y como resultado, desarrollan la comunicación entre un usuario y la pantalla:

- **1D: Palabras** Las palabras deben ser fáciles de entender y escritas de tal forma que comuniquen información al usuario
- **2D: Representación Visual** La constituyen todos los gráficos, imágenes y todo lo que no es texto
- **3D: Objetos físicos o espacio** Se refiere al hardware físico, un mouse, un teclado, la pantalla de un móvil o tablet o cualquier otro [periférico de entrada](https://es.wikipedia.org/wiki/Perif%C3%A9rico_de_entrada) con el que un usuario interactúa en la vida real
- **4D: Tiempo** Es la duración de la interacción del usuario con las primeras tres dimensiones. Incluye las formas en las que un usuario puede medir progreso, también como el sonido y la animación.
- **5D: Comportamiento** fue añadido por Kevin Silver en este artículo [What Puts the Design in Interaction Design](http://www.uxmatters.com/mt/archives/2007/07/what-puts-the-design-in-interaction-design.php). Incluye las emociones y reacciones que el usuario tiene cuando está interactuando con el sistema

Usando estas cinco dimensiones, un diseñador de interacciones puede prestar atención a la verdadera experiencia que un usuario tiene cuando se comunica y conecta con un sistema o producto digital.

## Macrointeracciones y Microinteracciones


## Interacciones Digitales

Como ya sabemos, el diseño de Interacciones (IxD) define la ESTRUCTURA y el COMPORTAMIENTO de los sistemas interactivos. Y en este espacio es donde se genera la conversación entre el usuario y el sistema. Entonces, el sistema se comporta en respuesta a las acciones del usuario.

La parte **estructural** de las interacciones está diseñado a nivel *macro*, mientras que la parte **conductual** o de comportamiento se diseña a nivel *micro*.

> Si las interacciones individuales son las células que crean la Experiencia de Usuario, las micro interacciones son los átomos dentro de estas células.
> -- UXPin

Cuando diseñamos interacciones es importante diferenciar las interacciones que están orientadas a cumplir objetivos (macrointeracciones) y las interacciones orientadas al detalle que tienen foco en momentos pequeños (microinteracciones).

### Macrointeractions

- Las macrointeracciones tienen que ver con **alcanzar objetivos** que están relacionados al trabajo del usuario
- Se ocupan de la forma en la que los usuarios interactúan con la interfaz de usuario para **llevar a cabo tareas claves y significativas**
- Conlleva principalmente la navegación del usuario y cómo se usan las funcionalidades del sistema, los widgets y componentes de control

### Microinteractions

- Las microinteracciones definen el **comportamiento de los componentes** como una reacción a acciones muy puntuales del usuario
- Se enfocan en el comportamiento de widgets individuales sin tomar en cuenta interacciones en escala más grandes (como el sistema)
- Las microinteracciones no se encargan del flujo de trabajo del usuario. Por ello, se concentran en componentes específicos sin requerir un contexto

> El diseño de macrointeracciones provee el entorno en el cual el diseño de microinteracciones se despliega y determina, entre otras cosas, qué controles deben ser usados. Tras determinar este entorno, se pueden establecer las microinteracciones.

:::success
Mira la imagen superior. ¿Puedes definir cuáles son las interacciones macro y micro?
:::

Este ejemplo de una barra de direcciones de un navegador es una gran manera de explicar las diferencias:

- Las **macrointeracciones** se diseñan para ayudar al usuario a conseguir sus objetivos (completar una tarea)
- El usuario quiere navegar a un site y la interfaz de usuario provee soporte al mostrar una lista de direcciones del historial que coincida con lo que el usuario ha tipeado hasta ahora en el campo de búsqueda

- Las **microinteracciones**, por otro lado, se enfocan en detalles menores, que mejoran la experiencia.
- El 'mejor resultado' se completa automáticamente en el campo de la dirección así que, en cualquier momento mientras el usuario tipee, puede presionar la tecla Enter para navegar directamente a esa dirección

Al hacer esto, evitas que un usuario que esté buscando el primer resultado tenga que:
1. Navegar a la primera sugerencia
2. Usar las teclas arriba o abajo para ir a la selección
3. Presionar Enter

## La importancia de las microinteracciones

>Las microinteracciones pueden tener un impacto significativo en la experiencia de usuario general... y también pueden darle forma al comportamiento de los usuarios. Por ejemplo, los usuarios pueden acostumbrarse tanto a un comportamiento que puede ser difícil utilizar una interfaz en la que las cosas se manejen de otra forma
>-- Markus Weber

### Las microinteracciones te ayudan a:

- Comunicar un estado o dar feedback
- Ver el resultado de una acción
- Ayudar al usuario a manipular un elemento de la interfaz

### Las microinteracciones pueden ayudar a un usuario a:

- Encender o apagar cosas
- Comentar en medios digitales
- Cambiar una configuración o proceso
- Refrescar un contenido (piensa en el gesto que hacemos en los móviles para refrescar el Inbox de un correo)
- Interactuar con data (como consultar la previsión de clima)
- Completar una tarea
- Conectar dispositivos o imprimir
- Compartir una foto o video en una aplicación

Todos estos momentos específicos proveen una oportunidad para humanizar la conversación entre el sistema y el usuario. Este concepto de hacer que los dispositivos sean más 'humanos' en estos momentos cortos pero impactantes es clave para conseguir que el usuario enganche con nuestro producto y se produzca la usabilidad.

:::info
La diferencia entre un producto competente y un producto alucinante son las microinteracciones
:::

Este video resume la importancia de las microinteracciones en nuestros productos y provee algunos buenos ejemplos.

{%vimeo 84927718 %}

> Los mejores productos hacen dos cosas bien: funcionalidad y detalles. La funcionalidad es lo que atrae a la gente a tu producto. Los detalles son lo que la retiene. Y los detalles son lo que hacen que tu aplicación resalte por encima de la competencia.
> -- Dian Gunawan