# Diseño de Interacción

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

## Objetivos

- Entender que es el Diseño de Interacción
- Conocer los orígenes y la evolución del diseño de interacción.
- Entender los principios de IxD
- Comprender las cinco dimensiones de IxD
- **What Human-Computer Interaction means**
- History of HCI
- ¨The Human¨ and ¨The Computer¨ and how they interact
- What Mental Models are
- Fitts's Law in HCI

## ¿Qué es el diseño de interacción?


El Diseño de Interacción(IxD) es una práctica relacionada con el Diseño de Interfaces de Usuario. El objetivo principal es mejorar la experiencia del usuario mediante el estudio de la interacción (a través de una interfaz) entre un sistema y su usuario.

Una buena experiencia en la interfaz por parte del usuario es uno de los puntos principales en la experiencia general del usuario. El IxD se preocupa por cómo los usuarios interactúan con la interfaz de usuario y cómo responderá esa interfaz para que los usuarios sepan cómo lograr sus objetivos.

- El diseño de interacción se centra en el diseño del comportamiento de la interacción de una persona con una interfaz digital.

- El diseño de interacción toma en cuenta la teoría y la técnica del diseño tradicional, la usabilidad y las disciplinas de ingeniería; y con ésto creo sus **métodos y prácticas únicos**

- El diseño de interacción también toma en cuenta satisfacer las necesidades y deseos de las personas que interactuarán con un producto o servicio.

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

## Encontramos IxD en todos lados


Como personas, interactuamos con herramientas y objetos durante todo el día. Cuando manejamos un auto, calentamos algo en el microondas o hasta cuando nos cepillamos los dientes. En un sentido más amplio, el diseño de interacción se trata de entender como una persona interactúa con cualquier entidad, y como diseñar el proceso de interacción entre ambos.

- Esa entidad puede ser cualquier cosa: un automóvil, una tostadora, un navegador web y un sitio web que vea en un navegador.

Debido a que el diseño de interacción depende tanto de la cosa con la que interactúa el usuario (y de la tecnología disponible para facilitar esta interacción) dentro del ámbito de los productos digitales, es un campo que ha evolucionado drásticamente en las últimas décadas y, por lo tanto, su definición se sigue adaptando a éstos cambios.

A lo largo de las últimas décadas, tuvimos un cambio en el enfoque de la interacción humano-sistema: de un enfoque en permitir que las personas operen una máquina a un compromiso de **crear una experiencia en la que los objetivos del usuario estén a la vanguardia**. Las máquinas y las complejidades técnicas de su funcionamiento pasan a un segundo plano.

El IxD cubre solo una parte del campo interacción persona-computadora.

:::info
:bulb: A medida que las máquinas se hacen más pequeñas y rápidas, y la democratización de las laptops e Internet ha puesto una computadora en la mano de cada persona (y se ha convertido en una parte integral de nuestras vidas), el papel de IxD se ha redefinido y refinado enormemente.
:::

## Where it comes from?

La historia del término *Diseño de interacción* realmente empezó con la invención de la computadora. Aunque el término aún no existía, los primeros diseñadores de computadoras tuvieron que incorporar **un medio a través del cual los operadores humanos pudieran ingresar información y las computadoras pudieran generar resultados de los cálculos**.

> The first operational Alto computer at Xerox PARC

En 1973, los diseñadores de Xerox PARC utilizaron el diseño de interacción para construir una de las primeras computadoras personales: un modelo de escritorio con un teclado y un monitor de mapa de bits.

Más tarde, a mediados de la década de 1980, dos diseñadores industriales, **Bill Moggridge** y **Bill Verplank**, que estaban trabajando en lo que se considera la [primera computadora portátil](https://en.wikipedia.org/ wiki / Grid_Compass), acuñaron el término diseño de interacción para lo que estaban haciendo. Pasarían otros 10 años antes de que otros diseñadores redescubrieran este término y lo llevaran al uso generalizado.

## Principios del IxD

### **Principio 1: Un buen diseño de interacción es coherente**

Diseñar la interfaz de usuario correctamente nos permitirá crear un sistema coherente:

- Los componentes con un comportamiento similar deben tener una apariencia similar
- Los componentes con comportamiento diferente deben tener una apariencia diferente


La coherencia en la interfaz de usuario se expresa mediante el uso de:

- Colores
- Tallas
- Formas
- Comportamientos (transiciones, efectos de desplazamiento, etc.)
- Voz
- Patrones de UI (con interacciones y resultados consistentes en la web, estos comportamientos se vuelven predecibles)

### **Principio 2: Un buen diseño de interacción es visible**


Una buena visibilidad, de acuerdo con los principios de Hogue, significa que están presentes indicaciones y pistas obvias, que:

- Guian al usuario a través de una interacción
- Guian a través de una serie de tareas.
- Indican qué posibles acciones están disponibles para ellos
- Comunican el contexto de la situación.

### **Principio 3: El buen diseño de interacción se puede aprender**

Normalmente, la capacidad de aprendizaje de un producto se mide en:

- **Eficacia:** ¿Cuántas funciones están aprendiendo los usuarios, qué porcentaje de usuarios tienen éxito?
- **Eficiencia:** ¿Cuánto tiempo se tarda en aprender, qué tan fácil es de usar?
- **Satisfacción:** Valor percibido del tiempo, el esfuerzo y la inversión en costos para aprender a usar el producto
- **Errores:** Número de errores, capacidad de recuperación, tiempo que lleva hacerlo


### **Principio 4: Un buen diseño de interacción es predecible**

En el famoso libro **No me hagas pensar**, Steve Krug explica cómo se puede lograr la previsibilidad preguntándote si los usuarios podrán responder estas preguntas:

- ¿Dónde estoy?
- ¿Como llegué acá?
- ¿Qué puedo hacer acá?
- ¿A dónde puedo ir desde acá?

Krug dice que si puede hacer que un usuario comience en cualquier parte de un sitio/plataforma/app, haga estas cuatro preguntas y obtenga las respuestas correctas a las cuatro, entonces:

- Proporcionamos un fuerte sentido de la ubicación.
- Establecimos las expectativas correctas
- Hicimos posible que las personas pudieran predecir con precisión los resultados de sus interacciones

### **Principio 5: Un buen diseño de interacción proporciona feedback**

La retroalimentación comunica los resultados de cualquier interacción, haciéndola visible y comprensible. Su trabajo es darle al usuario una señal de que él (o el producto) han tenido éxito o no en la realización de una tarea.


Según Hogue, la retroalimentación responde preguntas en cuatro categorías:

**Ubicación:** ¿Dónde estoy?
**Estado actual:** ¿Qué está sucediendo y sigue sucediendo?
**Estado futuro:** ¿Qué pasará después?
**Resultados:** ¿Qué acaba de pasar?

## Cualidades clave del IxD

Los principios guían nuestras decisiones antes de diseñar la experiencia. Pero en el mundo real, es posible que nos distraigan otros requisitos. Para asegurarse de que todavía está en el camino hacia un buen Diseño de Interacción, tenga en cuenta las cualidades de IxD a nivel macro:

### **Comentarios tranquilizadores**, para que sepamos lo que hicimos cuando lo hicimos


La retroalimentación y el tiempo de respuesta son características "muy buenas" del diseño de interacción.
- **La retroalimentación** es clave para el diseño de interacción. El producto debe comunicarse con los usuarios y proporcionar comentarios cuando se complete la tarea deseada y lo que el usuario debe hacer a continuación.
- El tiempo que tarda esta acción (tiempo de respuesta) también determina la calidad del IxD.

### **Asequibilidad**

La asequibilidad son pistas sobre cómo se debe usar un objeto, generalmente proporcionadas por el propio objeto o su contexto.

- Un objeto debe ser autoexplicativo y sugerir cómo funciona.

- Los significantes son una pista de la posibilidad

Por ejemplo, uno de los puntos de asequibilidad más comunes es el subrayado azul para el texto del enlace. Esta es una señal para casi todos los usuarios, entendemos que hacer clic en el texto lo llevará a una nueva página. Sin significantes, los usuarios no podrán percibir la oferta.


> El botón de reproducción de un video te invita a verlo, mientras que un video sin botón de reproducción puede confundirse con una fotografía estática.

### **Navegación**, dónde se encuentra, dónde puede ir, cómo regresar.

Su contenido debe estar agrupado de manera lógica y priorizado para que los usuarios puedan encontrar y utilizar la navegación primaria y secundaria de manera rápida.

### **Consistencia**, para que sepa exactamente qué hacer.

Hemos mencionado esto antes como principio.

**Cuando la coherencia está presente en el diseño, las personas pueden transferir conocimientos a nuevos contextos y aprender cosas nuevas rápidamente sin fricciones**. De esta manera, pueden concentrarse en ejecutar la tarea y no aprender cómo funciona la interfaz de usuario del producto cada vez que cambian el contexto. El principio de coherencia también es importante en otros aspectos de sus diseños (elementos, contenido, etc.)

### **Intuitividad**, para reducir la carga cognitiva (esfuerzo mental).

La atención del usuario es un recurso frágil y debe asignarse en consecuencia. El término "carga cognitiva" fue acuñado originalmente por psicólogos para describir el esfuerzo mental requerido para aprender nueva información.

Los usuarios deben aprender a utilizar la navegación, el diseño y los formularios. Incluso cuando la interfaz es bastante familiar, los usuarios deben retener la información relevante para su objetivo.

- Por ejemplo, al planificar unas vacaciones, la carga cognitiva de los usuarios incluye el conocimiento relacionado con la interfaz y las limitaciones específicas relacionadas con las vacaciones que puedan tener (como el precio y el plazo).

## Las cinco dimensiones

Estas dimensiones configuran las interacciones en sí mismas y, en consecuencia, conforman la comunicación entre un usuario y la pantalla:

- **1D: Las palabra** deben ser fáciles de entender y estar escritas de tal manera que comuniquen información fácilmente al usuario final.
- **2D: Representaciones visuales** son todos los gráficos o imágenes, esencialmente todo lo que no es texto. Deben usarse con moderación, para no abrumar.
- **3D: objetos físicos o espacio** se refiere al hardware físico, ya sea un mouse y un teclado, o un dispositivo móvil con el que interactúa el usuario.
- **4D: tiempo** es el tiempo que el usuario pasa interactuando con las primeras tres dimensiones. Incluye las formas en que el usuario puede medir el progreso, así como el sonido y la animación.
- **5D: Comportamiento** fue agregado por Kevin Silver en su artículo [What Puts the Design in Interaction Design](http://www.uxmatters.com/mt/archives/2007/07/what-puts-the-design-in-interacción-design.php). Son las emociones y reacciones que tiene el usuario al interactuar con el sistema.

Usando estas cinco dimensiones, un diseñador de interacción puede prestar atención a la propia experiencia que tiene el usuario cuando se comunica y se conecta con un sistema.

## Recursos adicionales

- [Alan Cooper, “About Face - The Essentials of Interaction Design”](https://www.amazon.com/gp/product/1118766571/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1118766571&linkCode=as2&tag=theelearningc-20&linkId=UGCWVT7YH6HPYF5Y)
- [Jonas Lowgren, “Interaction Design - brief intro“](https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/interaction-design-brief-intro)
- [Los principios de Don Norman para el diseño de interacciones](https://medium.com/@sachinrekhi/don-normans-principles-of-interaction-design-51025a2c0f33)
- [Los principios del diseño de interacción por Joe Natoli](http://www.givegoodux.com/use-5-principles-interaction-design-supercharge-ui-part-1-5)
- [Bill Verplank - Las preguntas de entrevista del diseño de interacción](https://vimeo.com/83683447)