Lecciones UI para creativos

Cuando salgo de casa tengo tendencia a dejarme algo. A menudo tal como salgo entro de nuevo 20 segundos después, cojo lo que me he dejado y parto definitivamente.

Para que no te pase lo mismo y no te dejes lo fundamental al explicar una noticia, en el cole te enseñan las 5 w’s.

Con este mnemotécnico tan sencillo, puedes hacer un rápido repaso y comprobar que tu historia tiene por lo menos la información básica e imprescindible.

¡Debería crearme un mnemotécnico igual de eficaz para mi revisión pre-salida de casa! Aún no lo tengo, por lo que seguiré pensando en ello. Lo que sí que tengo es una lista de puntos para repasar rápidamente el diseño de interacción de una web, una app, o incluso una visualización antes de pasar a su implementación.

En estos casos no te puedes dejar en el tintero nada relacionado con el IxD. Para que a ti tampoco se te pase nada por alto, en el episodio de hoy comparto esta lista contigo.

¿Empezamos?

En los episodios 29 y 30 hablamos sobre el diseño de interacción:

• En el episodio 29 hicimos una primera pasada a este término viendo qué quiere decir el término Diseño de Interacción, y las áreas que cubría. Fue un capítulo de introducción al tema.
• En el episodio 30 vimos 5 diferentes metodologías para llevarlo al a práctica.

Tal y como vimos en esos episodios, el diseño de interacción es fundamental para conseguir un entendimiento total humano- máquina, es decir, entre el usuario y el sistema interactivo. De esta forma, consigues una elevada experiencia de usuario en las páginas web y apps que diseñes, y también en las visualizaciones de datos.

El caso es que ambos episodios tenían un enfoque muy teórico. Por eso, en el episodio de hoy vamos a ver 6 aspectos a considerar a la hora de aplicar el diseño de interacción, y también a la hora de repasar, corregir y asegurar que tenemos el nivel de diseño de interacción deseado.

Para hacerlo de forma práctica analizaremos una visualización online real llamada Selfiecity. Si lo tuyo es el diseño web o app, tranquilo, verás que todo lo que tratemos hoy te será súper útil también para garantizar un buen diseño de interacción (IxD) en tus proyectos también.

Después de esta aproximación más práctica, acabaremos el capítulo de forma aún más práctica todavía con una checklist de revisión del diseño de interacción que puedes utilizar en tus proyectos, ya sean de diseño web, app o visualización de datos.

Contenidos del episodio

Para poder ver todo este contenido de hoy, he dividido este episodio en dos partes:

1. Breve recordatorio necesario para no tener dudas y comprender entonces perfectamente las siguientes secciones.
2. 6 puntos a considerar para el diseño de interacción. Para entenderlos de forma práctica, veremos su aplicación en una visualización.
3. Lista muy útil para que podáis repasar el diseño de interacción en vuestros proyectos web, app o de visualización de datos.

1. Recuerda: Diseño de Interacción (IxD) no es Diseño de Interfaz (UI) ni Usabilidad (UX)

Los límites entre el diseño de interacción y el diseño de interfaz de usuario o el diseño de UX no están claramente marcados y separados.

En realidad, esos límites a veces incluso se pueden superponer un poco y ambas áreas a menudo están mezcladas.

Sin embargo, tal y como dijimos en el episodio 29, no son lo mismo. El diseño de interacción se centra en crear el lenguaje y la conversación correcta para que el hombre y la máquina puedan entenderse. De esta manera, el hombre puede interaccionar con la interfaz o el sistema interactivo para conseguir sus objetivos.

En cambio, el UI se centra en el diseño de la interfaz como su nombre indica. Por tanto, define los elementos que tendrá visualmente la web o app, que son precisamente los elementos concretos que se utilizarán para la interacción.

El IxD tampoco es UX. Recuerda, el IxD realmente es sólo una parte o ámbito del UX. Por tanto, la UX abarca mucho más.

2. Qué considerar para el diseño de interacción

En el episodio 30 de Lecciones UI para Creativos vimos 5 metodologías diferentes llevar a cabo el diseño de interacción.

Considerar unos principios de usabilidad relacionados con el sistema interactivo era la segunda metodología planteada. Hoy me gustaría llevar esta metodología más a la práctica tomando las recomendaciones de usability.gov.

6 aspectos clave para el Diseño de Interacción

Ellos nos presentan 6 aspectos o principios a considerar para construir un buen sistema de interacción. Estos 6 principios son:

1. Define cómo los usuarios pueden interactuar con la interfaz
2. Da a los usuarios pistas claras sobre el comportamiento de los elementos antes de que se tomen acciones
3. Anticípate y mitiga errores
4. Ten en cuenta el feedback del sistema y el tiempo de respuesta
5. Piensa de forma estratégica sobre cada elemento.
6. Simplicidad para el aprendizaje.

Aplicación a la práctica

Veamos ahora cómo aplicaríamos estos principios a la práctica cuando diseñásemos. Lo vamos a hacer viendo las preguntas que nos deberemos hacer para cada uno de ellos analizando Selfiecity.

Selfiecity es una investigación del estilo en las selfies, los autoretratos que tarde o temprano todos nos acabamos haciendo en algún momento. Para ello, la investigación se centra en las selfies hechas en 5 ciudades del mundo (Nueva York, Sao Paulo, Berlín, Bangkok y Moscú).

La cantidad de datos inicial es de infarto:

• De un total de 650.000 fotos de Instagram de personas de estas ciudades, seleccionaron de 20.000 a 30.000 fotos de cada ciudad.
• Obtuvieron un total de 120.000. Luego, mediante programas de reconocimiento facial, empezaron a filtrar para obtener las que sólo fueran selfies.
• De las obtenidas se quedaron con 1000 fotos/ciudad. Todas ellas estaban etiquetadas como fotos de una única persona.
• Se preguntaron cuáles eran realmente selfies, y querían poder etiquetarlas también por género y edad. Para lo primero, tuvieron que hacer una repasada manual. Para lo segundo, volvieron a la programación.
• Al final del proceso, obtuvieron 640 fotos /ciudad y consiguieron poder etiquetarlas mediante programación para saber género, edad, estado de humor, posición, posición de los ojos y si llevaba gafas.
• Los resultados se muestran en la misma página.

La web tiene diferentes maneras de mostrar los diferentes resultados. yo en concreto me quiero centrar hoy en la visualización tan interesante que han creado para que los usuarios puedan explorar los datos. Se trata de la sección selfiexploratory.

Pasemos ahora pues a ver estos 6 puntos que comentaba antes y su análisis práctico en selfiexploratory:

1. Define cómo los usuarios pueden interactuar con la interfaz

Debe estar muy claro cómo se va a relacionar de forma física el usuario con la interfaz cuando intente interaccionar con ella. Pregúntate:

• ¿Qué pueden hacer los usuarios con el ratón o el dedo para interactuar directamente con la interfaz?
• ¿Qué comandos puede usar el usuario para interactuar con el producto digital aunque no son directamente parte de él?

Si vamos a selfiecity veremos que los creadores tenían muy claro que desde un ordenador, la interacción sería posible a través del mouse.

Por eso, la exploración muestra unos filtros para que el usuario pueda elegir qué quiere ver. La genialidad en este diseño es que los filtros son los gráficos de la visualización en sí.

Por ejemplo, el estado de humor son tres gráficas: calmado, contento o enfadado. Si en el gráfico de género haces clic en los hombres, automáticamente el resto de gráficos se regeneran basándose sólo en los datos de los hombres. Entonces puedes ir a estado de ánimo y filtrar haciendo clic y arrastrando el ratón por el gráfico.

De esta manera puedes seleccionar el filtro que desees, por ejemplo:  hombres con gran nivel de enfado. Automáticamente te saldrán en la parte inferior las fotografías que forman el conjunto que has filtrado.

Puedes hacer clic sobre cada una de las fotos obtenidas en el resultado y ver el detalle de los resultados obtenidos. Si después de todo el filtro anterior sólo pudieses ver las miniaturas, te decepcionaría. Pero si te puedes adentrar y explorar viendo una por una como son todos sus detalles, el nivel de exploración percibido como usuario es completa.

Por tanto, al diseñarlo definieron cómo podría el usuario  filtrar mediante los gráficos usando el ratón, ya fuera haciendo clic o arrastrando. Consideraron en desktop las difertentes opcines con el ratón: clicar, hover  y arrastrar. 

2. Da a los usuarios pistas claras sobre el comportamiento de los elementos antes de que se tomen acciones

Tal y como hablamos en el episodio 29, los elementos diseñados deben indicar por sí mismos que son interactuables. Es decir, que el usuario puede hacer algo con ellos, el qué, y qué debe esperar como resultado.

Por ejemplo, si el usuario ve un botón con el símbolo de más en un listado de ítems, el botón por sí mismo le indicará ya que es clicable, el símbolo de más con el texto nuevo ítem indicará claramente que su función es añadir un nuevo ítem y que el resultado es que se permita introducir los datos de un nuevo ítem para que una vez hecho se añada en la lista de ítems.

Las preguntas que nos haremos pues en este punto son:

• ¿La apariencia de cada elemento con el que el usuario puede interaccionar, le da una pista sobre cómo puede funcionar? Por ejemplo: El color, forma, tamaño, etc. ayudan al usuario a comprender cómo se puede usar cada elemento, es decir: si es clicable, seleccionable, arrastrable, etc.
  En una visualización podría pasar que la primera parte fuera a full height de la pantalla, de manera que para muchos usuarios no fuera claro que la visualización continúa hacia abajo, así que no verían las sigiuentes secciones ni explorarían por ellas.
• ¿Qué información proporcionas para que un usuario sepa qué sucederá antes de realizar una acción? Esto incluye, en el ejemplo anterior, una etiqueta significativa en el botón. Pero podría tratarse incluso de instrucciones antes de un envío final, etc,

En el caso de la visualización, un botón claramente identificado como tal con un texto que dijera “Scroll down” también dejaría claro al usuario lo que pasaría al apretarlo, y tb le indicaría que hay más partes de la visualización a continuación!

En este punto, en selfiecity, lo único que se muestra claramente como botones clicables en el ordenador son los tres botones que se encuentran en la esquina superior derecha. Uno de ellos es precisamente el de ayuda. Así que ya va bien que uno sea este para yudar a los usuarios que vayan más perdidos.

El resto de elementos (los gráficos-filtro y las fotografías) no parecen clicables hasta que pasas el ratón por encima. Eso sí, encuanto pasas el ratón por encima de los gra´ficos el cursor se convierte en una cruz que indica claramente que algo pasa ahí si haces clic.

Al ver que son gráficos enseguida empiezas a hacer clic y a probar a arrastrar. Entre este comportamiento y el botón de ayuda, es un buen comienzo para ayudar a los usuarios, aunque me temo que habría algunos usuarios que tendrían problemas al principio para utilizarlo.
De nuevo, en este punto, al diseñar tuvieron en cuenta cómo conseguir indicar al usuario las interacciones posibles y que entienda lo que va a pasar. Y lo resolvieron con botones muy claros con texto que indican lo que obtendrás, o con cambios en el cursor para que puedas intuir que puedes jugar con los gráficos.

3. Anticipar y mitigar errores

En vez de esperar a que el usuario tropiece en el sistema y pensar cómo ayudarle a sliar de ahí, lo más interesante es evitar que caíga en ese pozo primero. Una vez tenemos claro cómo intentar evitar que caíga, debemos considerar también cómo ayudarle a salir si igualmente cae en él.

• ¿Hay restricciones establecidas para ayudar a prevenir errores? El Principio Poka-Yoke dice que colocar estas restricciones obliga al usuario a ajustar el comportamiento para avanzar con su acción prevista.
  En los formularios sería un gran ejemplo. Por ejemplo, si un input es sólo para cifras, no permitas que pongan caracteres.
• ¿Los mensajes de error proporcionan una manera para que el usuario corrija el problema o explique por qué ocurrió el error? Los mensajes de error útiles brindan soluciones y contexto.

Mirando ahora como lo hacen en selfiecity, no he conseguido crear ningún error, así que no sé aún cómo lo han gestionado. Lo máximo que he conseguido es crear un filtro que no de ningún resultado. No es un error pero podría dar lugar a hacer creer al usuario que ha habido un error y por eso no muestra nada.

Para evitar esta situación, en los resultados hay un mensajes siempre que indica cuántas fotos cumplen tu filtro del total de fotos del conjunto.

Así pues, cuando no obtienes ningún resultado ves el mensaje: 0 de 3840 selfies. Por tanto, te queda claro que es sólo que tu búsqueda no da ningún resultado. Puedes dar al botón de eliminar filtros y seguir.

4. Considerar el sistema de feedback y el tiempo de respuesta

Cuando un usuario se involucra y realiza una acción, el sistema debe responder para reconocer la acción y dejar que el usuario sepa lo que está haciendo. Por tanto, deberemos considerar qué información recibe el usuario una vez se realiza una acción.

Tendrás, pues, que pensar durante la fase de diseño de interacción qué feedback recibirá el usuario ante cada posible acción que pueda hacer.

A la hora de analizar el diseño de interacción desde el punto de vista del feedback, también es importnte incluir el tiempo de respuesta. Según usability.gov, el tiempo de respuesta se puede caracterizar en 4 niveles:

• Inmediato: menos de 0.1 segundos.
• Vacilación, Tartamudeo o balbuceo: 0.1 a 1 segundo
• Interrupción: 1 a 10 segundos.
• Disrupción o ruptura: más de 10 segundos.

En el 4º nivel estaríamos hablando de una interacción tan pobre que la conversación humano máquina se ha roto. Probablemente el usuario abandone por mucho que le interese la web, la app o la visualización.

Si analizamos ahora selfiecity, se podría clasificar de inmediato. La página en sí puede tardar un poco en cargar, pero una vez lo hace, cada vez que el usuario interacciona con los filtros, el resultado es inmediato.

5. Piensa estratégicamente en cada elemento

En este punto combiene plantearse:

• ¿Los límites/bordes y las esquinas están siendo estratégicamente utilizadas para localizar elementos interactivos como menús? Precisamente porque el móvil y los dedos no pueden ir más allá de los límites de la pantala, son un buen lugar para situar menús y botones.
• ¿Sigue los estándares y las convenciones establecidas que funcionan? Asegura que tu diseño sólo se separa de ellas cuando de maneras que las mejoren.

En este punto, de nuevo, selfiecity lo ha tenido en cuenta. Pese a que se trata de una página poco estándar porque no es una web corporativa ni una ecommerce, si no una visualización, Selfiecity no ha reinventado nada en los elementos a los que todos estamos acostumbrados.

Cuando la mires verás que el logo está en las esquina superior izquierda y que el menú, en forma de botones, está colocado en la esquina superior derecha. Una disposición completamente clásica pero muy funcional y efectiva.

6. Simplificar para la capacidad de aprendizaje

• Asegúrate que la información se divide en 7 (más/menos 2) ítems cada vez. George Miller descubrió que las personas son capaces de recordar sólo de 5 a 9 ítems en su memoria a corto plazo antes de que olviden o tengan errores.
• ¿Has simplificado el lado del usuario lo máximo posible? Se trata de simplificar al máximo, diseñando sin permitir considerar que haya complejidad siempre y cuando la funcionalidad siga siendo la esperada y correcta.
• La ley de Hick afirma que el tiempo de decisión está afectado por cómo es de familiar u formato para el usuario, cómo de familiar son las opciones para el usuario y el número de opciones diferentes entre las que elegir.

Este punto puede llegar a ser muy subjetivo. Desde mi punto de vista, al convertir los gráficos en filtros, se simplifica muchísimo el nivel de elementos y por tanto la complejidad. El resultado es una visualización que ocupa el tamaño de la pantalla en el ordenador y que muestra los gráficos de los resultados, y los datos (fotografías) que los forman, todo en uno. Para el usuario es fácil de entender el concepto y la forma de utilizarla.

No hay listados de ítems a recordar por el usuario ni decisiones a tomar más que jugar con la vizualialización para explorar los resultados, y eso lo consigue. Acabas jugando con ella y sacando tus propias conclusiones sobre los puntos en común a la hora de hacer las selfies pese a que sean de culturas muy distintas, y también viendo dónde el peso cultural afecta.

3. Checklist de revisión de Diseño de Interacción

Llegamos finalmente a la tercera y última parte del episodio de hoy. Se trata de la checklist para comprobar el diseño de interacción. Esta es una lista que encontré cuando intentaba crearme la mía propia.

Podrás acceder a ella a través del enlace que encontrarás en el apartado de enlaces de este episodio, el número 31, de Lecciones UI Para creativos.

También podrás descargarla en español (la original está en inglés) suscribiéndote a la newsletter de Lecciones UI para Creativos.

Esta checklist está pensada para diseño de webs y apps, pero te servirá también para una visualización interactiva.
Como ves, tal y como como te comenté en el episodio anterior, aunque me centre a menudo de forma concreta de la aplicación en una visualización, este tipo de materiales te servirán también para tus diseños de web o apps, por lo que esta lista también te será igualmente muy útil para tu trabajo.

Conclusiones

Hoy hemos visto la aplicación del diseño de interacción en una visualización en concreto, para así ver a la práctica qué quiere decir el diseño de interacción y cómo puedes considerarlo en tus proyectos.

Espero que hayas disfrutado y lo puedas poner ya en práctica muy pronto.

Muchas gracias por escucharme.

Si te ha gustado y te ha parecido interesante este podcast, puedes subscribirte a mi newsletter en maria-pascual.es para no perderte los próximos capítulos y poder acceder a la checklist de aplicación de IxD en español.

A través de la página de contacto también podrás contactarme si quieres que hablemos de un proyecto web o app que quieres realizar y para el cual te gustaría contar conmigo.

Te espero en el episodio de la semana que viene con más herramientas, estrategias, metodologías y sistemas para proyectos y negocios User Interface que te ayuden cada vez a empoderarte más y más, y llegar más y más lejos.