Cómo resolver el problema del icono de la hamburguesa

post
Cómo resolver el problema del icono de la hamburguesa

 
Al hilo de las tendencias en el diseño del menú de webs de las que hablamos en nuestro último artículo, os traemos la reflexión que la diseñadora irlandesa Paddi MacDonnell ofreció en la revista digital Web Designer Depot sobre el uso del icono de la hamburguesa. En su artículo, MacDonnell explica por qué se recurre a este símbolo, qué consecuencias negativas tiene en la navegación web y cuál es la solución para evitar tener que recurrir a este tipo de técnicas.
 
——
 
El icono de la hamburguesa -tres pequeñas barras usadas para indicar un acceso a un menú- es una de las técnicas más controvertidas en el área web en estos momentos. Se nos dice que los diseñadores, todos ellos, lo odian; que los consumidores también lo odian. Entonces, ¿por qué está por todas partes?
 
El icono de la hamburguesa es fácilmente escalable y encaja limpiamente en una estructura web. Originalmente fue diseñado como un icono que representaba una lista, y puesto que un menú es simplemente una lista de opciones, en teoría resulta correcto su uso para representarlo.
 
Ha habido un montón de debate, de pruebas de eficacia, de diatribas en blogs y de estudios sobre este icono, pero estos estudios casi siempre se centran en el diseño de aplicaciones. Cuando hablamos de uso del icono de la hamburguesa en diseño web, hablamos de un problema bastante más relevante.
 
El problema con el icono de la hamburguesa
 
Hay un montón de diseñadores que cuestionan el valor del icono en sí mismo. A menudo se cree que es un icono al estilo de iOS, aunque en realidad ya se usaba antes de que Apple lo adoptase.
 
De hecho, hay un montón de pruebas contradictorias sobre si el icono se puede utilizar como una indicación de un menú o no. Algunos diseñadores argumentan que este símbolo es fácilmente reconocible por el público más joven, otros sugieren que los mayores alfabetizados digitalmente también lo reconocen. La única conclusión que podemos extraer realmente de estas evidencias es que las pruebas de accesibilidad han demostrado ser inconclusas, ofreciendo a menudo resultados contradictorios.
 
Lo que es universalmente aceptado es que los usuarios no reconocen el icono de la hamburguesa como un simple enlace (probablemente porque está diseñado como un grupo de elementos más que como uno solo). Y también se ha demostrado que rodear el símbolo con un borde o ponerle un fondo, haciendo que se parezca a un botón, conlleva que más usuarios pinchen en el mismo.
 
Más problemas con el icono de la hamburguesa
 
Al margen del diseño del icono, la forma de usarlo también está plagado de problemas.
 
Quizás el más significativo es que este símbolo añade una acción extra a la navegación por la web: cuando llegar a una determinada página sólo debería conllevar un ‘click’, el uso de la hamburguesa obligará al usuario a pinchar en dos ocasiones para obtener el mismo resultado. La regla de oro de los diseñadores web siempre ha pasado por no superar los tres ‘clicks’, por lo que en lugar de resolver un problema, el icono de la hamburguesa simplemente intercambia uno por otro. Por supuesto, esto no es sólo un problema de este símbolo, sino de cualquier estructura diseñada de la misma forma. Puedes usar la palabra ‘Menú’ en lugar del icono y forzarás igualmente al usuario a hacer dos movimientos en lugar de uno.
 
Eso sí, la hamburguesa además oculta su contenido. Desde el punto de vista de la experiencia del usuario, el visitante no debería tener que adoptar una acción para averiguar qué acciones puede adoptar cuando navega por una web. Los usuarios no van a buscar un enlace si no saben que existe ese enlace.
 
Y además este icono oculta información sobre la página web y sobre lo que ofrece al visitante. La presencia de un menú ofrece al usuario una información y un contexto que la hamburguesa esconde.
 
¿Qué hace el icono de la hamburguesa bien?
 
Puesto que el icono de la hamburguesa es universalmente odiado y conlleva un montón de problemas, ¿por qué es tan utilizado?
 
Según mi experiencia, entre cierto tipo de público este icono se ha convertido en algo fácilmente reconocible. Los estudios que contradicen esta afirmación suelen tener más de un año de antigüedad. De hecho, el icono de la hamburguesa es mucho más reconocible que el icono del enlace o el de compartir, porque, además, es consistente en cualquier tipo de diseño.
 
Lo más importante que la hamburguesa nos ofrece es la posibilidad de ahorrar un montón de elementos en la portada cuando nos encontramos con clientes que quieren insertar en el menú numerosas secciones.
 
Me gustaría decir que el icono de la hamburguesa resuelve este problema mejor que otras soluciones, pero no es cierto. En lugar de esto, diré que este símbolo lo resuelve menos mal que otras opciones.
 
La raíz del problema
 
El icono de la hamburguesa suele ser utilizado porque los diseñadores -o más a menudo, los clientes- no están plenamente comprometidos con el diseño ‘responsive’. Quieren una web normal, pero que encaje apretujándose en el móvil de su nieta.
 
Los detractores de la hamburguesa suelen reemplazarla por la palabra ‘Menú’, pero al hacer esto demuestran que no entienden el problema. El icono en sí mismo, nos guste o no, ha adquirido su propio significado, pero que los usuarios entiendan lo que representa no resuelve el principal asunto, que es que esconde la navegación, ocultándole a los usuarios sus opciones, convirtiéndose así en un terrible acto de auto-sabotaje.
 
En resumen, el icono de la hamburguesa es un síntoma de nuestro fracaso colectivo para comprometernos en profundidad con el enfoque ‘móvil primero’.
 
Una solución mejor
 
Para resolver el asunto de la hamburguesa, tenemos que aceptar que la web tal y como la conocemos no funciona. El auge de la web móvil significa mucho más que reducir el número de columnas y eliminar algunos de los archivos de imágenes más pesados. La web en el móvil es utilizada de una forma distinta a como se usaba hasta ahora, ya que existe en un contexto de aplicaciones específicas y los usuarios esperan que las páginas web funcionen de una forma similar.
 
La aplicación de Facebook cambió el icono de la hamburguesa por una barra de pestañas y como resultado vio mejorar sus conversiones. Pero Facebook ha hecho algo mucho más importante que cambiar los diseños de sus menús. Recientemente ha lanzado su aplicación Messenger, pese a que ya tenía una aplicación popular y que funcionaba perfectamente en la que podrían haber integrado el servicio de mensajería. Pero Facebook optó por separar sus funciones, simplificando en dos aplicaciones sus servicios en lugar de apostar por una sola aplicación más compleja. De esta forma, redujo las opciones de sus menús y pudo prescindir de la hamburguesa.
 
Las buenas aplicaciones móviles están muy enfocadas en el usuario y han evolucionado de una forma mucho más rigurosa que el diseño web. Para crear en una página web una experiencia similar a la que ofrece una aplicación móvil debemos simplificar nuestras páginas, volver a simplificarlas y después simplificarlas un poco más. Cuando a nuestros usuarios les ofrecemos un catálogo de opciones sencillo, el problema de afrontar menús complejos nunca se presenta.
 
Usar el icono de la hamburguesa es como pegar una tirita en una herida: la parchea por la superficie, pero la herida sigue ahí.
 
Únicamente si aceptamos plenamente un enfoque de ‘móvil primero’, y lo aplicamos no sólo a nuestro diseño, sino también a nuestro contenido y a la estructura de la información, conseguiremos que el icono de la hamburguesa sea historia.
 
——
 
Puedes leer el artículo original aquí.
 
——
 
¿Te gustó el artículo? Puedes leer más como éste si te suscribes a nuestro boletín. ¡Pincha aquí y suscríbete!
 
 

Un comentario sobre “Cómo resolver el problema del icono de la hamburguesa

  • avatar
    Bitacoras.com on junio 25th, 2014

    Información Bitacoras.com

    Valora en Bitacoras.com:   Al hilo de las tendencias en el diseño del menú de webs de las que hablamos en nuestro último artículo, os traemos la reflexión que la diseñadora irlandesa Paddi MacDonnell ofreció en la revista digital Web Designer Depot s..…

Comentar

(Spamcheck Enabled)