UI-UX

En los últimos años estamos viendo una clara tendencia al diseño minimalista y una navegación más fluída dentro de los sitios web y es ahí de dónde parte el cada vez más extendido menú hamburguesa.

Pero...¿qué es el menú hamburguesa?

Este menú principalmente oculta los elementos del menú de forma que únicamente  aparecen  cuando los usuarios, pinchan en él. La forma gráfica de representar este nuevo menú es mediante la disposición horizontal de tres líneas paralelas, de ahí su nombre por la similitud con una hamburguesa. Seguro que lo habéis visto principalmente en vuestros teléfonos inteligentes y tablets aunque el uso cada vez se está extendiendo más a las páginas webs que quieren dar una mayor prioridad a sus contenidos y que no quieren sobrecargar el diseño de su web. Sus beneficios de uso más importantes son tres principalmente:

• Navegación más práctica y simple: Este diseño consigue recoger todos los elementos del menú de forma que sólo serán visibles cuando el usuario pinche en el icono, todo esto con el uso de un sólo botón.
• Estilo minimalista para nuestra web: Gracias al uso de un sólo icono para representar un menú que en ocasiones tiene más de 7 elementos ( aunque las buenas prácticas de UX lo desaconsejen), conseguimos un estilo limpio, simple y organizado en nuestra web.
• Fácil adaptación a dispositivos móviles: Al tratarse de un simple icono, es fácil adaptar el diseño de nuestra web a los diferentes dispositivos móviles en los que vaya a visualizarse a la vez que ocupan un pequeño espacio dentro de ellos.

La polémica está servida 

A pesar de sus bondades y de ser una clara tendencia de diseño, el menú hamburguesa tiene tantos detractores como defensores que lo avalan con datos y estadísticas de uso y conversión debido a que:

• Muchos usuarios no reconocen este icono. A veces a la gente que trabajamos en comunicación y marketing online se nos olvida que hay mucha gente cuyos conocimientos sobre internet son escasos o nulos. Aunque cada vez lo vamos viendo en más webs y aplicaciones, lo primero que debemos hacer es conocer bien a nuestro público para saber si este icono será reconocido por la mayoría.
• Los elementos del menú son invisibles para muchos. Derivado del punto anterior, si tu público no conoce ese icono, es probable que no pinche en él por lo que no verá las diferentes secciones de tu web.

   

• Se añade un clic extra para llegar a cualquier sección. Esto genera un incremento del tiempo que va a necesitar tu público para acceder a cualquier información.
• Las webs tienden a parecerse. El hecho de que muchas páginas lo utilicen, puede provocar que tu público perciba tu web como un sitio más, sin personalidad a pesar de que sea un elemento innovador.

  Lo que parece claro es que los usuarios se están acostumbrando cada vez más a su uso (quizás muy lentamente) por lo que su uso es una opción más al establecer el criterio de diseño de nuestra web. Dicho esto, la mejor forma de comprobarlo siempre será hacer una revisión de nuestra web  y realizar un test A/B para ver qué funciona mejor en nuestro caso. Como siempre, las recomendaciones generales pueden guiarnos pero siempre será necesario hacer una reflexión sobre nuestros usuarios y sobre qué es lo que quieren encontrar en nuestro sitio web. De esta forma podremos elegir la mejor manera de mostrarles el contenido y conseguir una mejor experiencia de usuario.   [embed]https://twitter.com/Irudigital/status/871438726928486401[/embed]

Cuando se habla de usabilidad, necesariamente sale a relucir el término eyetracking. Eyetracking es una tecnología que se utiliza para saber el seguimiento del ojo cuando aterriza en un sitio web. A través de esta tecnología, los profesionales de UX son capaces de recomendar el ordenamiento de los elementos dentro de una web o los cambios de diseño, según la importancia que le dan los usuarios que la visionan.

Jakob Nielsen, el number one de la usabilidad, demostró a través de estos estudios que el patrón de lectura de los usuarios en es F, lo cual quiere decir que los internautas no leemos linealmente sino que escaneamos, dando mayor importancia a la primera línea superior.

¿En qué nos afecta a nosotros, los mortales que escribimos para la web?, en tener que esforzarnos para captar la atención del lector en esas primeras líneas. Amigo, si estás leyendo esto, es que he hecho bien mi trabajo, sino, evidentemente tengo que entonar el mea culpa y replantear el post.

Al final, hemos de tener en cuenta que los lectores sólo leen el 20% del contenido que hay en una pantalla, por tanto hemos de esforzarnos con los titulares, las entradillas, listas, etc.. llamadas de atención que resuelvan en poco tiempo lo que está buscando el usuario.

Por otro lado Google, que es muy listo, también posiciona mejor nuestra web si metemos nuestras keywords principales en esta F, así que encima de captar la atención del usuario, también tenemos que satisfacer a la araña de Mr Google. Para que luego digan que hacer una web es fácil!

Si tienes curiosidad por saber cómo navegan los usuarios por tu web, te animamos a que pruebes la herramienta gratuita Feng GUI y te sacará un mapa de calor de tu web.

¿Quieres saber cómo está tu web? pídenos un estudio sin compromiso, seguro que te podemos ayudar.

Otro día más.

Mónica Carratalá

Actualizado en 2021: 👉 (podéis leer artículos más actualizados con ejemplos de menú hamburguesa y barra de navegación mobile modernas) Han pasado ya 10 años casi desde que escribí este artículo. Los palabros responsive web design sonaban alto y claro. Google ya nos estaba dando pistas claras de por dónde venían los tiros. A nosotros nos costaba el cambio, adaptarnos a las nuevas formas de diseño móvil, pero ahora, en 2021, hemos tenido a adaptarnos sí o sí. Tantos años oyendo que venía el lobo, y efectivamente el lobo llegó con el algoritmo de Google Mobilegeddon, que nos puso las pilas a todo correr. Después de 10 años de luchar por estar en primera página de Google, nos damos cuenta que dónde queremos estar es en la primera página de las pantallas de nuestros smartphones, porque es realmente allí donde se ganan las batallas. Nadie pone ya en duda que las webs deber estar adaptadas a dispositivos móviles, de que los diseños web pasan por tener una versión escritorio y otra mobile. Y yo miro con nostalgia cuando hablábamos de "responsive web design" como si fuera la novedad más grande del mundo. Bueno, con cariño os dejo el post que escribí entonces.  

Hoy me decido a hablar del responsive web design, porque parece que últimamente oigo esta palabras por doquier... y seguro, que más de uno no sabe qué es el responsive web design, verdad? Aunque yo no soy la más experta del mundo mundial, sí es verdad que estoy rodeada de grandes profesionales, que se mueven como pez en el agua con esta nueva corriente de diseño. A mí personalmente, me llama la atención, pero no tengo muy claro si me tiene del todo cautivada.. Hasta ahora, si queríamos que nuestra web se visualizara bien en los dispositivos móviles, lo que necesitábamos es una versión móvil de nuestra web. Ahora el responsive design permite que nuestra web se adapte a todo tipo de dispositivos. La web va cambiando el número de columnas (se va adaptando a la pantalla) según la anchura del dispositivo en cuestión. Esto permite que el contenido no sea excesivamente pequeño al ojo humano y no tendremos que andar ampliando la imagen continuamente. Si queréis ver cómo se va mostrando una web realizada con un diseño adaptado, podéis utilizar la herramienta screenqueri.es . Tenéis que meter la url y arrastrar el contorno, así iréis viendo como se van moviendo los elementos. Ya nos contaréis qué tal! ;-)