Krypton Solid

Cómo resolver el problema del icono de hamburguesa

Cómo resolver el problema del icono de hamburguesa

El icono de la hamburguesa, tres pequeñas barras que se utilizan para indicar un enlace a un menú, es una de las técnicas más controvertidas en la Web en este momento. Los diseñadores, nos dicen, todos lo odian; los clientes, les decimos a todos, también lo odian. Entonces, ¿por qué está en todas partes?

El icono de la hamburguesa se puede escalar fácilmente y encaja perfectamente en una cuadrícula de píxeles. Originalmente era un ícono de lista que se ha presionado en su función actual, pero dado que 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, comentarios de blogs y estudios de usuarios realizados sobre el tema, pero estos estudios casi siempre se centran en el diseño de aplicaciones. Cuando se utiliza el icono de la hamburguesa en el diseño web, indica un problema mucho más importante.

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 iOS a pesar de que se usó de esta manera antes de que Apple lo adoptara.

enormeinc

De hecho, existe una gran cantidad de pruebas contradictorias sobre si el icono de la hamburguesa se puede utilizar como indicación de un menú. Algunos diseñadores argumentan que el ícono es fácilmente reconocido por un grupo demográfico más joven, otros sugieren que un grupo demográfico mayor lo reconoce si tiene conocimientos de Internet. La única conclusión que realmente podemos sacar de esta evidencia es que las pruebas de usabilidad no han resultado concluyentes, y las pruebas paralelas 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 a una sola cosa. Algo que se admite es que rodear el ícono de la hamburguesa con un borde, o darle un fondo, para que se vea más parecido a un botón, me atrevo a decir, más esquemórfico, resultará en más clics.

perspectivas futuras

Más problemas con el icono de la hamburguesa

Aparte del diseño del ícono en sí, el enfoque para usar un ícono de hamburguesa también está plagado de problemas.

En primer lugar, y quizás lo más significativo, el icono de hamburguesa agrega una acción adicional a su navegación; cuando debería necesitar un clic para llegar a una página en particular, ahora necesitará dos. La regla general para los diseñadores web siempre ha sido un máximo de tres clics (siempre que sea posible), hasta que, lejos de resolver un problema de navegación, la técnica del icono de hamburguesa simplemente intercambia un problema por otro. Por supuesto, eso no es solo un problema para el ícono de hamburguesa, es un problema para cualquier navegación diseñada de esta manera. Puedes usar la palabra ‘Menú’ en lugar del ícono de la hamburguesa y tendrás la misma obstrucción, la diferencia es que el ícono de la hamburguesa no se puede usar de ninguna otra manera.

hobbit
jam3

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 saber qué acciones pueden realizar. Es muy fácil olvidarse de «compartir en Twitter» o «ir a la caja», 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 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 la técnica del icono de hamburguesa oculta.

londres-se

¿Qué hace bien el icono de la hamburguesa?

Dado que el ícono de la hamburguesa es odiado universalmente y da lugar a una serie de problemas, ¿por qué se usa en todas partes?

En mi experiencia, ciertamente entre ciertos grupos demográficos, el ícono de la hamburguesa ha llegado recientemente al punto de ser fácilmente reconocido. Estudios que refutan que tienden a tener un año o más y un año es mucho tiempo en Internet.

De hecho, el icono de enlace es mucho más reconocible que el Enlace icono o Cuota icono, cuyas formas definitivas aún no han emergido. El icono de la hamburguesa es coherente en varios diseños diferentes.

olimpica

Lo más importante es que el icono de la hamburguesa hace lo que se propone hacer: nos ahorra un montón de espacio en la pantalla. Si un cliente le presenta una lista de un montón de elementos que deben agregarse a un menú, sacarlos de la pantalla y vincularlos es una forma tosca pero efectiva de hacer espacio para el contenido que el cliente también desea.

Me gustaría decir que el icono de la hamburguesa resuelve el problema mejor que otras soluciones, pero no es cierto. En cambio, diré que el icono de la hamburguesa resuelve el problema menos mal que otras soluciones.

La raíz del problema

El ícono de la hamburguesa tiende a emplearse porque los diseñadores, o más a menudo, los clientes, no están completamente comprometidos con un enfoque basado en dispositivos móviles. Quieren un sitio «normal», pero en el teléfono de su nieta.

Quienes se oponen al icono de la hamburguesa tienden a reemplazarlo con la palabra «Menú»; al hacerlo, no entienden por completo. El icono de la hamburguesa, nos guste o no, ha adquirido su significado ahora, pero que los usuarios comprendan para qué sirve el botón no resuelve el mayor problema, que es que ocultar nuestra navegación, ocultar las opciones de nuestros usuarios, es un acto terrible de uno mismo. -sabotaje.

En resumen, el icono de la hamburguesa es un síntoma de nuestro fracaso colectivo para abrazar de todo corazón todos los aspectos del enfoque móvil primero.

pono
mccollcenter

Una mejor solucion

Para solucionar el problema de las hamburguesas, tenemos que aceptar que la Web tal como la conocemos no funciona. El auge de la web móvil significa mucho más que reducir la cantidad de columnas que usamos y eliminar algunos de los archivos de imagen más pesados.

La web móvil se utiliza 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, vio conversiones mejoradas. Pero Facebook ha hecho algo mucho más significativo que intercambiar diseños de menú. Recientemente lanzaron su aplicación Messenger, y el gran problema 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 hamburguesa.

Las buenas aplicaciones están muy enfocadas y han evolucionado de esa manera a través de pruebas de usuario mucho más rigurosas que las que está sujeta la Web. Para crear una experiencia al estilo de una aplicación, necesitamos simplificar nuestros sitios, simplificar nuevamente y luego simplificar un poco más. Si es necesario, divida su arquitectura en pedazos manejables del tamaño de un bocado, casi micrositios. Cuando presentamos a nuestros usuarios un conjunto simple de opciones, nunca surge el problema de un menú complejo.

Hacer uso del icono de la hamburguesa es como poner una tirita en una herida: la repara, pero debajo algo todavía está roto.

Solo si adoptamos por completo un enfoque centrado en los dispositivos móviles y lo aplicamos no solo a nuestro diseño, sino también a nuestro contenido y nuestra arquitectura de información, dejaremos el menú de hamburguesas en la historia.

Imagen destacada / miniatura, usos Imagen de hamburguesa vía Mononc ‘Paul

Deja un comentario