UX Writer, el nuevo perfil UX

Hace 10 años nadie había escuchado hablar de las siglas UX, algunos nos hacíamos llamar "expertos en usabilidad" o algo un poco más moderno como "Diseñadores Centrados en el Usuario".

Acabamos de empezar el 2017 y podemos decir que desde hace un tiempo UX está de moda. Durante el 2016 pudimos ver como algunos perfiles diseñadores  se ponían las siglas UX delante de las siglas UI, quedando UX/UI Designers. Podía parecer que era la moda del "UX"  pero este 2017 todo apunta a algo nuevo. Quiero dar la bienvenida a los "UX Writers" y los "UX Developer".  Vamos  a darle vuelta a "UX Writer".Read more


UX Tooltips - Question mark Vs Info icon y Mouse Over Vs Click

Antes de todo lo confieso, soy un amante de los tooltips y siempre que puedo utilizo tooltips, ya sea en aplicaciones mobile o en páginas web. La razón es simple, ofrecer ayuda a los usuarios sin que esta ensucie la estructura de la información o diseño y a su vez, sin que el usuario tenga que abrir ventanas modales o popups. A pesar de esto, no siempre se recomienda el uso, todo depende de la casuística en la que nos encontremos. Por otro lado podemos hablar de un estándar en la iconografía de tooltips, "question mark" y "info icon". ¿Pero cuando se usa cada icono? Como veis, son diferentes las dudas que me salieron estos días en uno de los proyectos en los que he estado trabajando.

(Este post hace referencia a los tooltips orientados a la explicación de una información).

¿Qué es un tooltip?

Los tooltips  suelen ser pequeños iconos donde al pasar el ratón por encima o pulsar sobre ellos muestran un pequeño texto. La principal función consiste en dar información explicativa, descriptiva o simplemente consejos para poder solucionar las dudas que puedan surgir. El tooltip aparecerá cuando el usuario pulse con el ratón o pase el ratón por encima. A su vez, desaparecerá cuando mueva el ratón, pulse en una área diferente del tooltip o lo cierre si existe la acción de cerrar.

Mouse over vs click

Normalmente la discusión entre click o hover depende mucho de la finalidad de la acción, pero en nuestro caso solo queremos mostrar una información. Queremos que el usuario haga el mínimo número de clics.  Por lo tanto, lo mejor es que muestre la información cuando pasemos el ratón por encima. Pero por otro lado queremos que sea el usuario el que vea la información y la oculte cuando quiera con un click, es decir, que el usuario tenga el control sobre la información. Como podemos ver, estas dos teorías se contradicen entre ellas. ¿Realmente el usuario tiene que tener el control de un tooltip cuando este solo muestra una pequeña información aclaratoria? La respuesta sería "no hace falta", pero la acción de hover puede tener problemas de usabilidad:

  • El control tanto "flickable" de "on" como de "off" puede ser problemático, aquí empezarían a venir los principales problemas con los dispositivos touch.
  • La área de control para abrir o cerrar el tooltip.

Desde mi punto de vista el mouse over es una buena alternativa ya que la información que mostramos es muy corta (el tiempo que utilizará el usuario para leerla será corto), el usuario va a interacción con ella y evitaremos que este deba "clickar" en el icono para mostrarle esa información. Desde el punto de vista de accesibilidad no es un problema ya que existen acciones de "onMouveOver" y los screen readers  o las acciones de teclado permiten leer esta información.  El problema lo tenemos en que no existe la acción de "onFingerOver" :) . En el caso que sepamos que esa web o herramienta se utilizará mediante gestos touch deberemos hacer que el tooltip se muestre mediante la acción de "touch" (click), si no es así ya nos podemos olvidar de utilizar la acción de hover sobre nuestros tooltips.

Question Mark vs Info icon

Teniendo en cuenta los dos elemento en la interfaz de usuario, el elemento "?" es una información pasiva y el "i" nos ofrece una información activa.

  • "?" : Ofrece una información al usuario que ha necesitado para resolver una duda. (ofrecemos una ayuda)
  • "i" : Se usa cuando queremos mostrar una información adicional, incluso será útil cuando no hay dudas al respeto. (ofrecemos una información)

Por lo tanto, se recomienda utilizar el "i" cuando mostramos una información que realmente no va a pedir el usuario o esta información contiene detalles que no van afectar directamente a la toma de decisiones.  En el caso que la información que se muestra afecta a la toma de decisiones utilizamos el "?".

Si tenéis más dudas os animo a leer este artículo de Microsoft que lo explica muy bien.

Desde mi punto del vista los tooltips son una pequeña gran herramienta informativa para los usuarios. Mostramos ayuda de forma simple sin la necesidad de llenar la pantalla de información. Es lógico que el uso excesivo de tooltips puede provocar el efecto contrario. Si utilizamos muchos tooltips tendremos que preguntarnos si alguna cosa de nuestra interfaz o información está fallando. Por otro lado no debemos utilizar un tooltip cuando este hace una explicación de una explicación. (sería extraño...).

Conclusiones

  • Click or Touch : Si queremos que nuestra web / app / interfaz sea usable para todos los usuarios, es recomendable mostrar el tooltip mediante click.
  • Iconos estándars: Todos los iconos pueden ser tooltips, pero se recomienda utilizar los estándars comentados anteriormente, question marks o icon info. A su vez, es recomendable que el icono esté contorneado por un círculo o un cuadrado, ayudará al usuario a clicar en una área más grande. "?" o "i", utiliza el que creas que es mejor para tu información.
  • Utiliza el mínimo de tooltips: Nuestra interfaz o información debe ser lo suficientemente descriptiva como para que el usuario no tenga dudas.
  • Información clara y simple: Muestra el mínimo número de información en el tooltip.
  • Acción secundaria: Un tooltip nunca puede ser más visible que una acción principal. Utilizamos un tooltip para que nuestro diseño sea simple y ahorrar texto. No hay que olvidar que el usuario lo consultará en un momento concreto.
  • Visbilidad de la información: Cuando cliquemos sobre el tooltip mostraremos una información que aparecerá por encima del contenido. Hay que vigilar que se pueda leer de forma correcta y que este no se esconda bajo el scroll. Debemos mostrar el tooltip de tal manera que no esconda información que realmente sea útil para el usuario en el momento que lo consulta.
  • Forma parte del diseño: No olvides que el diseño del tooltip (su icono y su capa modal) es igual de importante que el resto de información.