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ú.