Cómo resolver el problema del icono de la hamburguesa
El ícono de la hamburguesa, tres pequeñas barras utilizadas para indicar un enlace a un menú, es uno de los métodos más polémicos en la Web en este momento. Los diseñadores, nos dicen, todos lo odian; clientes, les decimos a todos, lo odian también. ¿Por qué entonces, está en todas partes?
El ícono de la hamburguesa es fácilmente escalable y se adapta perfectamente a una cuadrícula de píxeles. Originalmente era un ícono de lista que se había agrupado en su rol actual, pero como un menú es simplemente una lista de opciones, es semánticamente correcto usar el elemento de la lista de esta manera.
Ha habido una gran cantidad de debate, pruebas A / B, resúmenes de blogs y estudios de usuarios realizados sobre el tema, pero estos estudios casi siempre se centran en el diseño de aplicaciones. Cuando el icono de la hamburguesa se utiliza en el diseño web, indica un problema mucho más significativo.
El problema con el icono de la hamburguesa
Hay muchos diseñadores que cuestionan el valor del icono de la hamburguesa en sí. Con frecuencia se ve como un ícono de estilo de iOS aunque se usó de esta manera antes de que Apple lo adoptara.
De hecho, hay una gran cantidad de pruebas contradictorias sobre si el icono de la hamburguesa es utilizable como una indicación de un menú. Algunos diseñadores argumentan que el icono es fácilmente reconocido por un grupo demográfico más joven, otros sugieren que un grupo demográfico más antiguo lo reconoce si sabe leer y escribir. La única conclusión que realmente podemos extraer de esta evidencia es que las pruebas de usabilidad han demostrado no ser concluyentes, con pruebas paralelas que a menudo arrojan resultados contradictorios.
Lo que se acepta universalmente es que los usuarios no reconocen el icono de la hamburguesa como un enlace único, probablemente porque está diseñado para parecerse a un grupo de enlaces, en lugar de una sola cosa. Algo que se admite es que rodear el icono de la hamburguesa con un borde, o darle un fondo, para que se vea más como un botón, me atrevo a decir, más esquemático, dará como resultado más clics.
Más problemas con el ícono de la hamburguesa
Además del diseño del icono en sí, el enfoque para usar un icono de hamburguesa también está plagado de problemas.
En primer lugar, y quizás lo más significativo, el ícono de la hamburguesa agrega una acción extra a su navegación; cuando debería tomar un clic para llegar a una página en particular, ahora tomará dos. La regla de oro para los diseñadores web siempre ha sido un máximo de tres clics (siempre que sea posible), lejos de resolver un problema de navegación, la técnica del icono de hamburguesas simplemente intercambia un problema por otro. Por supuesto, eso no es solo un problema para el icono de la hamburguesa, es un problema para cualquier navegación presentada de esta manera. Puede usar la palabra 'Menú' en lugar del ícono de hamburguesa y tendrá la misma obstrucción, la diferencia es que el ícono de hamburguesa no se puede usar de ninguna otra manera.
La técnica de la hamburguesa también oculta su contenido. Desde el punto de vista de UX, los usuarios no deberían tener que realizar una acción para averiguar qué acciones pueden realizar. Es muy fácil olvidarse de 'compartir en Twitter' o 'ir a Checkout', cuando esas opciones no están inmediatamente frente a usted. Los usuarios simplemente no buscarán un enlace que no saben que existe.
Finalmente, la técnica del icono de la hamburguesa oculta el estado actual de su sitio y la posición del usuario en él. Los estados hacia abajo en un menú proporcionan información contextual a un usuario que oscurece la técnica del icono de hamburguesas.
¿Qué hace bien el ícono de la hamburguesa?
Dado que el ícono de la hamburguesa es universalmente odiado y resulta en una serie de problemas, ¿por qué se usa en todas partes?
En mi experiencia, sin duda entre ciertos datos demográficos, el ícono de la hamburguesa ha llegado recientemente al punto de ser fácilmente reconocible. Los estudios que refutan que tienden a ser un año o más viejos y un año son mucho tiempo en el interweb.
De hecho, el ícono de enlace es mucho más reconocible que el ícono del enlace o el ícono de compartir , cuyas formas definitivas aún deben emerger. El ícono de la hamburguesa es consistente en cualquier cantidad de diseños diferentes.
Lo más importante es que el ícono de hamburguesas hace lo que se propone: nos ahorra una tonelada de espacio en la pantalla. Si un cliente le presenta una lista de un montón de elementos que deben agregarse a un menú, quitarlos de la pantalla y vincularlos a ellos es una forma cruda pero efectiva de hacer espacio para el contenido que el cliente también desea.
Me gustaría decir que el ícono de la hamburguesa resuelve el problema mejor que otras soluciones, pero no es verdad. En cambio, diré que el ícono de la hamburguesa resuelve el problema menos que otras soluciones.
La raíz del problema
El ícono de la hamburguesa tiende a emplearse porque los diseñadores, o más frecuentemente, los clientes, no están totalmente comprometidos con un enfoque de movilidad. Quieren un sitio 'normal', pero lo aprietan en el teléfono de su nieta.
Quienes se oponen al ícono de la hamburguesa tienden a reemplazarlo con la palabra 'Menú'; al hacerlo, no tienen idea del punto. El icono de la hamburguesa tiene o no significado ahora, pero los usuarios que entienden para qué sirve el botón no resuelven el problema más importante, que es que esconder nuestra navegación, ocultando las opciones de nuestros usuarios, es un acto terrible de sí mismo. -sabotaje.
En resumen, el ícono de la hamburguesa es un síntoma de nuestra falla colectiva para abrazar de todo corazón todos los aspectos del enfoque de la tecnología móvil.
Una mejor solución
Para resolver el problema de la hamburguesa, debemos aceptar que la Web tal como la conocemos no funciona. El aumento de la web móvil significa mucho más que reducir el número de columnas que usamos y eliminar algunos de los archivos de imagen más pesados.
La web móvil se usa de forma diferente a la web de antaño. La web móvil existe en el contexto de aplicaciones dedicadas, y los usuarios esperan que la Web se experimente de manera similar.
La aplicación de Facebook cambió su ícono de hamburguesa por una barra de pestañas y, como resultado, mejoró las conversiones. Pero Facebook ha hecho algo mucho más significativo que los diseños de menú de intercambio. Recientemente lanzaron su aplicación Messenger, y la gran diferencia es que ya tenían una aplicación perfectamente funcional y popular con la que podrían haber integrado la mensajería. Facebook ha compartimentado sus funciones, al enfocar el rol de cada aplicación, han llegado a dos aplicaciones simples, en lugar de una compleja. La funcionalidad reducida da como resultado un conjunto reducido de opciones de menú y menos necesidad de un menú de hamburguesas.
Las buenas aplicaciones están muy enfocadas, y han evolucionado de esa manera a través de pruebas de usuario mucho más rigurosas de las que la Web está sujeta. Para crear una experiencia de estilo de aplicación, debemos simplificar nuestros sitios, simplificar nuevamente y luego simplificar un poco más. Si es necesario, divida su arquitectura en fragmentos manejables del tamaño de un bocado, micrositios casi. Cuando presentamos a nuestros usuarios un conjunto simple de opciones, nunca surge el problema de un menú complejo.
Hacer uso del ícono de la hamburguesa es como golpear una tirita en una herida: la arregla, pero debajo de algo todavía está roto.
Solo si adoptamos por completo un enfoque de tecnología móvil y lo aplicamos no solo a nuestro diseño, sino a nuestro contenido y nuestra arquitectura de información, enviaremos el menú de hamburguesas a la historia.
Imagen / miniatura destacada, usos Imagen de hamburguesa a través de Mononc 'Paul