Historia del icon hamburger

Iconburger fué creado por Norm Cox en 1981. Norm es el creador de Xerox Star,  el primer sistema comercial informático que disponía de un conjunto de tecnologías como una interfaz gráfica con ventanas, carpetas, iconos, ethernet, ratón, servidor de impresoras... diciéndolo de otra forma, el creador de los ordenadores tal y como los conocemos actualmente. Norm no solo es el creador del famoso icono hamburguesa, también es el creador del "icono documentos" entre muchas otras cosas. El icono acabó desapareciendo con XeroxStar.

En el siguiente video podéis ver la presentación del icon hamburger, mirar a partir del minuto 21:07.

Más de 20 años pasaron para que la aplicación de Tweetie de iPad lo incorporara en su menú. Aunque el uso no era el mismo, Loren Brichter, ex-trabajador de Apple lo incorporó en la aplicación. ¿Veis alguna relación entre Apple y Xerox? :)

Solo tuvo que pasar un año (2009), cuando Facebook lanzo una actualización de su App con el famoso icono, situado en la parte superior izquierda. A partir de ese momento todos siguieron ha Facebook. No hay que olvidar que las apps para móviles venían con una estructura de menú en forma de matriz.
 

Facebook App 2008 y 2009
Facebook App 2008 y 2009

El "icon hamburger" tiene cosas buenas y malas, aunque desde mi punto de vista las malas pesan más sobre las buenas. En el siguiente post, hablo sobre el uso del icono y sus consecuencias.


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.