Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
UX móvil: buenas prácticas al utilizar el menú con icono hamburguesa
Diseño UX
05/2/2016
|
Samuel Gimeno Artigas
Con el auge de Material Design y otros frameworks de diseño web adaptable, se ha generalizado el uso del icono de menú hamburguesa (icono con tres rayas horizontales), que indica que tras ese botón hay un menú con opciones. Este icono normalmente se ha generalizado en el diseño de interfaces móviles o adaptables para ahorrar espacio. Incluso, a veces, se usa fuera de ese contexto móvil.
Sus ventajas son claras: puedes incluir una gran cantidad de información y, al mismo tiempo, ofrecer una forma coherente de encontrar opciones adicionales. Además, se trata de un estándar de facto, que los usuarios han aprendido a reconocer, y muchos frameworks de diseño adaptable ya llevan integrada esta solución, lo que facilita el despliegue y ese reconocimiento de los usuarios.
Sin embargo, ya comentamos en la entrada sobre tendencias de UX en 2016 que este menú tiene muchos detractores. Parece los usuarios se están acostumbrando al botón hamburguesa, aunque lentamente.
Sin ánimo de ser dogmáticos, desde Torresburriel Estudio os vamos a dar unas pautas y buenas prácticas al utilizar este menú, de forma que incremente o no limite la experiencia de usuario de vuestros productos digitales:
- Preferentemente, utilizar el menú hamburguesa para interfaces para dispositivos móviles. Este icono fue diseñado para interfaces de baja resolución a principios de los 80 (GUI de Xerox Star) para indicar que había algunas opciones no visibles, pero dejó de usarse hasta que reapareció a finales de los 90 en las interfaces de dispositivos móviles.
Cualquier dispositivo de escritorio actual tiene suficiente resolución como para hacer innecesario su uso, a no ser que pretendas replicar tu interfaz en el escritorio y dispositivos móviles, como hace Google con Chrome. - Al trabajar tu arquitectura de información, este menú no es recomendable para esconder menús con pocas opciones: si tu menú tiene pocas opciones (entre 3 y 5) es mejor no esconderlo tras el icono, porque lo haces invisible. En su lugar, es preferible una lista desordenada con enlaces a cada una de las páginas, porque es mucho más claro y evitamos crear confusión al usuario. Con dos o menos opciones, de ninguna manera deberías usar un menú hamburguesa. Además, debes tener en cuenta que este tipo de menús suelen estar desarrollados con Javascript. En este caso, incumplen una norma básica de accesibilidad, ya que al desactivarlo impide la correcta navegación.
- Comprueba que el botón se pueda distinguir del fondo, en muchas plantillas de WordPress (por poner un ejemplo muy usual) el botón hamburguesa va en la cabecera incrustado y al modificarlas el fondo y el botón pueden ser del mismo color sin darnos cuenta, por lo cual el menú hamburguesa es indistinguible y hace que nuestros usuarios no entiendan del todo nuestra interfaz, al no ver ningún sitio donde hacer clic. Lo que siempre decimos aquí es la mejor solución, prueba, prueba, prueba y en cuantos más entornos diferentes mejor todavía 😉
- Finalmente, y somos muy pesados con esto, pero haz pruebas de usuario para averiguar si los usuarios lo comprenden en el contexto de tu interfaz. Siempre es saludable hacer tests A/B de interfaz, pero con el menú hamburguesa hay que tener cierta atención porque puede generar confusión al usuario. Haz un test A/B entre un icono hamburguesa y una opción “Menú”para incluirlo en tu interfaz. Si tu entorno de usuarios es Android y Google (ya sea de Chrome o de sus aplicaciones), probablemente tendrás un elevado porcentaje de reconocimiento porque son elementos usuales en los interfaces de Google y Android.
Ya sabes, en diseño de interacción es más que conveniente hacer pruebas de usuario para descubrir debilidades del diseño y encontrar propuestas de solución. A veces, los resultados de los tests son sorprendentes y, aquello que pensamos que se entiende sin problemas, genera más confusión en nuestros usuarios. No hay una solución aplicable a todos los casos.
Si quieres que te ayudemos con las pruebas de usuario de tu producto o servicio digital, ya sabes dónde encontrarnos. ¡Cuéntanos tu proyecto! 🙂
Directamente 🙂 el icon burger no se debería de utilizar… Rompe con unos cuantos principios de interacción. Es el típico cajón del desastre al que vas cuando no encuentras una cosa en tu web/app.
Más que revisar la arquitectura, hablaría de «content first».
Podemos ver casos muy claros de apps o webs que lo tenían y ya no lo tienen, Facebook es un ejemplo. Fueron uno de los pioneros en utilizarlo y fueron los primeros en sacarlo.
Al final la idea es pasar a «Pizzaicon» (tabs), tal como hace facebook o youtube. Pero la idea es generar el contenido de dentro (información más importante) a fuera (información residual), en pocas palabras «Content Priority».
Gracias por tu comentario Xavi.
Facebook lo quitó porque como se dice en el post si en el menú tienes pocas opciones (hasta 5) el icono hamburguesa confunde al usuario, más que otra cosa. En Facebook se tienen pocas opciones en la aplicación por lo cual el icono no tiene sentido y ellos mismos se dieron cuenta de ello y lo eliminaron. Eso no quiere decir que se pueda hacer lo mismo en todas las webs y aplicaciones.
Uno de los principios de interacción es la «descubribilidad»(discoverability en inglés), la facultad por parte del usuario de poder descubrir opciones o acciones. En ese sentido hay que hacer pruebas y ver lo que nuestros usuarios descubren mejor. Pero siendo Chrome el navegador más utilizado, que utiliza el icono hamburguesa para su menú de opciones, decir que no se debería usar es una afirmación un poco osada, hay que mirar los contextos, hacer tests con usuarios y hacer lo que esos tests nos prueben.
Bueno, es cierto que la curva de aprendizaje hace que los usuarios se acostumbren a este tipo de cosas… tanto si son o no son correctas.
Claro, hay que hacer pruebas, pero te haré una pregunta. ¿Crees que irá mejor utilizar un menú en formato «pizza»(tabs) o un iconburguer?. La lógica dirá que el formato pizza. Vaya… hay muchos test A/B que lo confirman. (https://www.nngroup.com/articles/hamburger-menu-vs-pizza/). Con eso no quiero decir que no funcione, simplemente que el uso que se le hace es erróneo y nosotros mismos, los diseñadores, deberíamos evitarlo.
El tema que dices de «Chrome el navegador más utilizado, que utiliza el icono hamburguesa para su menú de opciones»… es un error… ya dejando de lado que el menú de chrome, son opciones «secundarias», es decir, un usuario que utiliza chrome lo utiliza para navegar no para hacer acciones que hay en el menú… ¿no?. Tu teoría es la misma que la que dice que como lo hace «Apple» está bien. (http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name).
Sigo afirmando de forma «osada» que no debemos utilizar el menú hamburguesa. Y si lo usamos, solo usarlo en opciones secundarias… da igual el número de opciones que tenemos.
Tal como dice Samuel Gimeno, el icono tiene una función concreta y se debe usar según las necesidades de tu audiencia. Partiendo de la base en que el diseño de tu web debería enfocarse a tu público objetivo.
En los móviles cada vez se usa más y ya hemos heredado este conocimiento gracias al mismo bombardeo inagotable de las apps. Al fin y al cabo lo ves por todos lados y ya nos hemos acostumbrado a él.
De hecho en la última actualización en la interfaz del eCommerce de Apple ya usa solo dos líneas.
Primero de todo me gustaría comentar que Apple no es un referente por lo que hace referencia a los principios de interacción. Os invito a leer el artículo que puse en mi anterior comentario. En los últimos tiempos Apple ha sido muy criticada al respecto por muchos referentes del mundo de UX / usabilidad.
El simple hecho que comentes que «como todos lo hacen» ya es una cosa que todo el mundo conoce no dice mucho… es decir, actualmente el Icon Burger no cumple con dos principios elementales (Predictability i Discoberability) y un affordance que podemos pillar por los pelos.
Todos los estudios que se hicieron hasta ahora demuestran que este menú es mucho menos efectivo que cualquier otra solución (te invito a que revises esos estudios). No hay que olvidar que grandes del sector como Facebook y Youtube han dejado de utilizarlo.
¿Publico objetivo?, claro! las personas son importantes y con ellas la experiencia que tengan para utilizar tu web, pero una cosa no esconde a la otra. Que los usuarios sepan que eso es un menú hamburguesa y no sepan utilizar, no significa que por esa simple razón ya vamos a poner ese menú.
Recuerda una frase «What’s out of sight, is out of mind». La cosa no va de si los usuarios saben o no utilizarlo, sino si los usuarios saben que hay allí y el correcto uso que se le debe dar.
[…] ya explicamos hablando del menú hamburguesa, Kollin explica que no es recomendable “esconder la navegación” tras un icono. La mejor […]
[…] conclusiones tampoco nos sorprenden, en el post del menú hamburguesa ya os dijimos que el uso del menú hamburguesa no os lo aconsejabamos en interfaces de escritorio, […]
[…] No diseñar la arquitectura de información: La arquitectura de la información es algo esencial en un producto digital, si no se diseñan bien los flujos de información y la manera en que la información se organiza puede dar lugar a interfaces confusas, menús priorizados o categorizados inadecuadamente. […]
[…] que facilita el acceso a la mayor parte de secciones del diario. La propuesta utiliza el icono del menú hamburguesa, junto al logotipo del diario. Quizá la mayor pega que hemos encontrado es colocar este icono del […]
Buenos días, mi pregunta es sencilla: el botón de tres lineas(hamburguesa) en una app móvil es preferible ubicarlo en la parte superior derecha o superior izquierda
[…] menú oculto está creciendo en popularidad ya que permite ahorrar espacio en la pantalla, y los de tipo hamburguesa (tan comunes y útiles para dispositivos móviles) activan varios tipos de animaciones para mostrar […]