UX de cajón #1 - Call to Action SEUR

Hace unos días hice una compra por Amazon, el paquete me tiene que llegar con la empresa SEUR. Me han dado un número de seguimiento, hasta aquí todo bien. Vamos a ver como es el formulario de validación para saber donde está tu producto.

Formulario seguimiento SEUR

Ya de entrada me sale un mensaje de Error... ¿Cómo me puede salir un mensaje de error si no hice nada en ese formulario?. Esto no sería un problema para el usuario, el problema es que la validación de Captcha está después del CTA del formulario.  Lo más seguro es que el 100% de los usuarios tendrá un mensaje de error en ese formulario.

NUNCA pongas campos de tu formulario por debajo del botón de tu formulario

Ahora entiendo el error de formulario que aparece cuando accedo en la página. Lo más seguro que han detectado el problema y la mejor solución que han encontrado es mostrar directamente un error para que se vea bien lo que deben hacer.


Android Patterns - Diseño de Apps Android

Son diferentes los problemas que nos podemos encontrar cuando tenemos que hacer por primera vez un sketch, wireframe, diseño o prototipado para una interfaz que desconocemos. Hoy os presento una de esas webs (Android Patterns) que os pueden sacar de un buen apuro o ayudaros cuando queráis hacer vuestra App para Android Mobile.

Android Pattern ofrece un conjunto de patrones de interacción que pueden ayudar a diseñar aplicaciones de Android. Un "patrón de interacción" es una explicación/resumen de como diseñar una acción a partir de ejemplos o diseños que actualmente sabemos que están funcionando. Los patrones son una guía, por lo tanto pueden modificarse, no debemos aferrarnos a ellos.

¿Qué patrones describe Android Patterns?

  • Como mostramos los datos o información
  • De que forma podemos introducir datos
  • Patrones de navegación
  • Las notificaciones
  • Interacciones en la pantalla
  • Formularios y personalización de campos
  • Compartir elementos en las apps (Share buttons).

Estructuración de los patrones

Una de las cosas que me gusta más de esta guía-web es el formato que tiene y a su vez la "socialización" de la misma. Son los mismos usuarios los que crean los patrones y a su vez ponen ejemplos y crean debates. Muchas veces puede ser complicado como explicar un patrón pero Android Pattern muestra con ilustraciones el funcionamiento de los mismos.

Cada página de patrón se estructura de la siguiente forma:

  • It works like this: Ilustración de como funciona actualmente el patrón. Explican paso a paso como debe hacerse.
  • Use when:  Explica cuando debemos utilizar este patrón. A su vez los usuarios pueden explicar "Cosas buenas" y "Cosas malas" del patrón y a su vez cuando debemos utilizarlo y cuando no debemos utilizarlo.
  • Ejemplos: Los usuarios pueden subir ejemplos con screenshots de aplicaciones y explicar el funcionamiento del mismo.
  • Debate: Finalmente hay un apartado donde se comentan diferentes puntos y a su vez podemos hacer preguntas.

Os invito que visitéis la página de  Android Patterns y que trasteéis un poco. Seguro que en el momento que necesitéis pensar como hacer el boceto de vuestra app, wireframe, prototipado o todo lo que haga referencia a una app para Android os ayudará mucho.

Es cierto que AndroidPatterns hace bastante que no se actualiza pero mantiene la idea y la ayuda.

¿Conocéis alguna página parecida para iOS o otra interfaz?


Icon hamburger el mal uso y la solución

Hoy voy hablar de una batalla, la cosa va de comida y como siempre nos decían en casa, con la comida no se juega. Hablaré del "icon hamburger" o menú hamburguesa, ese icono de 3 barras que ha pasado a ser un "indispensable" en la mayoría de los diseños o rediseños de las apps y las páginas web. Me gusta hablar de indispensable ya que parece que sea "guay" utilizar este recurso, parece que el simple hecho de utilizarlo te hace ser rompedor y seguir la moda. Son muchos responsables de marketing o PO's de equipos que les gusta entrar en el diseño y la interacción de las webs o apps y tenemos que saber defender nuestra idea al respecto.

Descripción gráfica del director de marketing feliz al ver el icon hamburger en su diseño
Director de Marketing Feliz

"Me encanta, la web se ve bien en mi iPhone! Por fin tenemos una web Responsive y que se adapta a todos los dispositivos. ¡Nos abrazamos al cambio!."

  1. La cosa va de comida
  2. Ventajas y desventajas del icon hamburger
  3. ¿Tienes una hipótesis?. Testea tu menú
  4. Soluciones al icon hamburger
  5. Conclusiones

 


 1. ¿La cosa va de comida?

Buscando un poco por internet, podemos pensar que esto del icono hamburguesa se nos ha ido de las manos. No solo tenemos iconos con esa similitud, son muchos los que se han subido al carro y han querido ser igual de rompedores. Luke Wroblewski empezó a ser uno de los contrarios al icono y empezó a buscar similitudes al mismo para mofarse de la situación.

iconhamburger_friends

 

Pero son muchos los otros ejemplos que he podido encontrar por internet, sushi-icon, frankfurt-icon, chips-icon.

2. Ventajas y desventajas de icon hamburger

Después de hacer estas similitudes, vamos a intentar ver las ventajas (las tiene) y los inconvenientes.

Ventajas:

  • Todo queda más limpio: Esta es la principal razón por la cual la mayoría de las webs o apps se pasan a esta moda, simplifican sus diseños y lo hacen todo mucho más limpio.
  • Rápida implementación: Hoy en día es muy rápido pasar un menú tanto vertical como horizontal a un menú hamburguesa, en internet podemos encontrar muchos "how to". 
  • Los usuarios lo conocen: Nos guste o no, como ya he comentado, el icon hamburger a pasado a ser un elemento muy común. Podemos decir que el usuario ha aprendido a utilizar este menú y ha aprendido a reconocerlo. Tristemente el usuario sabe que si no encuentra algo, estará allí, en ese cajón del sastre.

Desventajas:

    • Javascript: Muchos de los icon hamburger de la web están desarrollados con javascript. Ya sabemos que sucede con muchos navegadores web. Por esta razón podríamos decir que no es suficiente, pero el problema es que hay un % muy elevado en internet que por dificultades de accesibilidad tiene Javascript desactivado.
    • 1 click más: Para los anti-click, hay que resaltar que el simple hecho de esconder las opciones de menú, tendremos que hacer un click más, aunque ya no creo que el efecto click sea el problema hoy en día.
    • Hay usuarios que no lo identifican o no lo ven (Predictability):  Aunque serían dos cosas por separado, hay un % muy alto de usuarios que no saben que es ese icono y a su vez, muchos no identifican el icono como clicable. En este caso podríamos decir que el icon hamburger no cumple con un principio importante de diseño de interacción, "lo predecible que es una cosa".
    • "What's out of sight, is out of mind" (Discoberability): Este es el segundo principio que no cumple el icon hamburger. Lógicamente si no podemos ver, no sabemos que podemos hacer. Antes comenté que este menú es el cajón del sastre, el icono es ese sitio al que iremos si no encontramos algo y antes de pulsar no sabemos que encontraremos en el.
  • "Icon Drawer Disaster" y el mal uso: Realmente hay muchos elementos que actúan igual que el icon hamburger, empezando por el típico icono de una persona situado en la parte superior derecha de muchas páginas. Podríamos decir que es algo parecido pero no lo es. Este icono sirve para esconder opciones relacionadas con el perfil del usuario (cerrar sesión, editar perfil...), son opciones que desde mi punto de vista son secundarias. A pesar de que las opciones están escondidas estas no son "principales" para los usuarios. La mayoría de veces, los icon hamburger tienen opciones principales o CTA's de las páginas. Por lo tanto, estamos escondiendo opciones no secundarias al usuario.

3. ¿Tienes una hipótesis? Testea tu menú

3.1 ¿Icon hamburger o no?

Siempre que tenemos una duda en el mundo de UX hay que testearla y eso hicieron ya muchas empresas para saber si el icon hamburger realmente funciona o no funciona. Una de las primeras empresas que sacó el icon hamburger fue Facebook, si lo recordamos, facebook fue la primera empresa que puso el icono en su App. ¿Más ejemplos? Youtube hizo lo mismo con tu app

Facebook-iconburger-app

Como podéis ver, Facebook tenía el icono de la hamburguesa en la parte superior izquierda, pero acabó por quitar el icono, poniendo las acciones principales en un menú Tab. Algunas de las opciones más secundarias las ha mantenido en un icon burger "More".

Facebook no se despertó un día y hizo el cambio, hizo test A/B para saber cual era la merjor forma. Hay un post de Luke W. donde pone diferentes ejemplos donde se ha testeado el icono vs menú de tabs. El resultado es claro, el menú en forma tabs o "pizza" (si queremos hablar de comida), gana por goleada. Hay otro estudio muy interesante de la empresa Zeebox, sobre el mismo tema, donde vieron que el engagement caía en picado.

La empresa Polar, quiso hacer el cambio de menú Tab a toggle menu. No es el mismo icono ni situación pero la idea es la misma, esconder las opciones de menú. Realmente pasar a un menú  "toggle" era mucho más bonito que mantener un menú con taps. ¿Queremos que nuestra app sea más bonita o sea más usable?. Eso se preguntaron en Polar y quisieron testear el resultado y esto es lo que les salió.

Estudio Polar App - Tab Menú to Icon Burger Menu

3.2 ¿Cómo debemos usar el icon hamburguer?

Dejando de lado los principios de diseño y las desventajas del icon hamburger, muchas de las veces que se utiliza este icono se utiliza de forma incorrecta. Veamos las diferentes formas en que se muestra este icono.

iconhamburger_app_header
Icon Hamburger con borde y sin borde

Estas son dos formas que hasta ahora podíamos ver en las páginas web,  sin borde y con borde. Como vemos, la primera opción podría ser la más bonita, pero es la menos eficaz, es la opción que se ve menos y por lo tanto, no identificamos el icono como clicable.

Hay diferentes personas que hicieron test A/B para saber cual era la mejor forma de mostrar el icon hamburger. Las propuestas fueron sin y con borde, añadiendo el label de "Menú" y otra opción donde solo aparece el label "Menú".

iconhamburger-type

El resultado fue bastante claro:

    • Las opciones donde aparece la palabra "Menu", son más clicables.

 

  • Los usuarios identifican mejor el icono o menú como "clicables" si tenemos un borde.
  • Los usuarios de iPhone identifican 3 veces más el icono que los usuarios de Android.
  • Hay diferencias entre Desktop y Mobile, los usuarios Desktop identifican menos el icono que los usuarios de Mobile.

4. Soluciones al icon hamburger

  • Revisa la AI: Lo primero que tendríamos que hacer es revisar la arquitectura de información de nuestra app o web. La principal idea es quitar la acciones o opciones principales del menú para introducirlo en el contenido. A su vez analizar si la estructura de nuestra app o web es la correcta. Tenemos que hacer justamente lo contrario del icon hamburger, hacer visibles las acciones principales y esconder o minimizar la fuerza de las acciones secundarias. La aplicación de Youtube aplicó esta técnica con el nuevo rediseño de su app. Realmente lo que hizo youtube fue aplicar una estrategia de "Content First".

Youtube Icon Hamburger to Content Strategy

  • Tab menú: Quita el icon hamburger y añade las acciones principales en un menú con formato tabs. Es cierto que este menú es utilizado bastante en aplicaciones Android pero no es un desconocido para iOS. En el caso de Web, situaría el menú en la parte superior en formato tab igual que en las aplicaciones Android.

 

Web Mobile de McDonalds
Web Mobile de McDonalds
Whatapp Android App
Whatapp Android App - Tab Menu

En el caso de iOS, situaría el menú en la parte inferior de la aplicación, tal y como ya hacen muchas aplicaciones en iOS. 

Menu Tab iOS - Instagram
Menu Tab iOS - Instagram

5. Conclusiones

  • No utilices icon hamburger ni en mobile ni en Desktop, los usuarios no lo identifican como clicable.
  • Icon Hamburger no cumple con 3 de los 5 principales principios del diseño de interacción, Predictability, Discoberability. No menos importante, aunque no lo parezca tiene un affordance muy bajo, y este principio es uno de los primordiales en la interacción.
  • Piensa en tu contenido y quita las principales acciones del menú.
  • Utiliza soluciones como el menú en formato tabs o "pizza icon".
  • Testea tu menú antes de hacer cualquier cambio y utilízalo como arma de defensa ante los diseñadores, fronts, PO's o todas esas personas defensoras del menú.
  • Prioriza la usabilidad por encima del "diseño bonito o simple".
  • En el caso de tener que utilizar el icon hamburger, busca una solución que sea accesible y no haga falta utilizar Javascript. Por otro lado, intenta que el icono vaya acompañado de un borde y con el label "Menú". No pongas opciones principales en el menú.

 

Espero que este Post os haya ayudado a entender un poco mejor la relación entre el icon hamburger y UX. A su vez, ayudaros a buscar soluciones para mejorar o quitar el icono de vuestra app o web.

Os animo a escribir en el post si pensáis de forma diferente o expliquéis vuestra experiencia con el menú.


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.