Menús de hamburguesas en el diseño de sitios web.

Cualquiera que use Internet probablemente haya visto docenas de ejemplos de menús de hamburguesas en Internet. Este ícono simple de tres líneas se encuentra entre los botones más reconocibles en la actualidad. Muchos sitios web lo utilizan para ocultar elementos de navegación a menudo robustos y ahorrar espacio. Sin embargo, a pesar de su utilidad, los menús de hamburguesas en el diseño de sitios web siguen estando entre las opciones de diseño web más discutibles . Para algunos, es una solución genuina que debería integrarse por completo en todos los diseños receptivos. Para otros, es un efecto secundario desafortunado que proviene de una mala interpretación del diseño estructural práctico.

Una introducción a los menús de hamburguesas en el diseño de sitios web

No exclusivamente, pero los menús de hamburguesas generalmente se encuentran en sitios web y aplicaciones receptivos cuando se ajustan a pantallas pequeñas. Ya sea que estén en el lado izquierdo o derecho, los diseñadores y desarrolladores profesionales usan hamburguesas para ahorrar espacio valioso. Esta es una solución popular porque ocultan la navegación principal para dejar más espacio para el resto del contenido . Pero, no todo el mundo piensa que es una solución adecuada. Muchos afirman todo lo contrario.

Para ayudarlo a comprender mejor el menú de hamburguesas, aquí analizaremos:

• Qué son los menús de hamburguesas
• El concepto de menús de hamburguesas en el diseño de sitios web
• La polémica detrás
• Implementación alternativa
• Pros y contras generales de los menús de hamburguesas en el diseño de sitios web

¿Qué son los menús de hamburguesas?

En pocas palabras, un menú de hamburguesas es una alternativa simple y más pequeña a las grandes barras de navegación . Básicamente sirve como un cajón donde puedes colocar todo, desde la navegación que abarrota tu sitio web. Los menús de hamburguesas generalmente se ven como tres líneas una encima de la otra. El nombre proviene de su evidente parecido con las hamburguesas.

Todo comenzó en 1981, en la estación de trabajo Xerox Star. Norm Cox, el diseñador de interfaz gráfica de usuario de la época, creó un icono para abrir una lista de elementos ocultos. La intención era dar una solución alternativa que ahorrara espacio para las largas listas de opciones . Algo similar al menú conceptual del botón derecho en las computadoras de escritorio. Pero, hasta 2009, la carta de hamburguesas no conoció mucha gloria. Solo cuando Facebook y algunos otros sitios web lo introdujeron nuevamente, el menú de hamburguesas comenzó su viaje. Era una solución casi perfecta para ahorrar un valioso espacio en la pantalla de los dispositivos móviles emergentes en ese momento.

Pero, ¿lo fue?

La eterna discusión sobre el menú de hamburguesas

La intención del creador original era crear algo simple pero efectivo. Un pequeño botón que reducirá el desorden siguiendo el mismo principio detrás del menú contextual. Se suponía que era similar, memorable y fácil de usar. Y lo es, incluso en su forma actual, para la que no estaba destinado originalmente.

Sin embargo, no todos comparten el mismo entusiasmo cuando se trata de menús de hamburguesas . Muchos diseñadores lo critican porque oculta la parte más importante de la navegación del sitio web. En consecuencia, los visitantes tendrán dificultades para encontrarlo. Recomiendan usar el menú Hamburguesa solo cuando hay más de cuatro elementos de navegación en el menú. Por otro lado, estas afirmaciones podrían cambiar en el futuro, ya que la mayoría de las personas ya se están acostumbrando a la forma en que se ven y funcionan los menús de hamburguesas.

Uso e implementación alternativos

Además de la regla de los “cuatro elementos” , hay otras sugerencias sobre cómo mejorar la usabilidad del menú de hamburguesas.

• Combina el menú de hamburguesas con otras prestaciones . Por ejemplo, puede colocar la función de búsqueda y el menú de hamburguesas uno al lado del otro.
• Use marcadores de posición de diferentes formas , bordes y colores para que la "hamburguesa" sea más distinguible.
• Encuentre un posicionamiento alternativo que no sea necesariamente una de las esquinas.
• Cree un menú de hamburguesa flotante con una posición fija una vez que los visitantes comiencen a desplazarse por la página.

La idea es proporcionar un diseño limpio pero distinguible conveniente para los usuarios móviles, independientemente del tamaño de la pantalla de su dispositivo.

Pros y contras generales de los menús de hamburguesas en el diseño de sitios web

Desde el aspecto de UX (experiencia de usuario), los menús de hamburguesas pueden ser un arma de dos filos. Si bien puede funcionar en la mayoría de las situaciones, en otras puede crear confusión. Para entender cuándo usarlo, es mejor revisar todos los Pros y Contras de los menús de hamburguesas.

Ventajas:

• El menú de hamburguesas reduce el desorden : funciona cuando más importa. El uso adecuado del espacio a veces puede significar todo para los sitios web y las aplicaciones móviles. Teniendo en cuenta el tamaño de la pantalla que tienes a tu disposición, cualquier cosa que pueda darte más espacio es buena. Además, demasiados elementos en la pantalla solo pueden distraer a los visitantes de prestar atención al contenido correcto.
• Mantiene la navegación comprensible : hoy en día, casi todos entienden para qué se usa cuando ven el menú de hamburguesas. Somos seres visuales y notar un ícono que parece tres líneas horizontales en una columna es fácil. Sobre todo si nos recuerda a una de las comidas rápidas favoritas de todos. Solo piense en cuántos íconos y logotipos de marcas diferentes conoce por el nombre.
• Puede ser una excelente opción para mantener el elemento de navegación secundario fuera del camino : no existe una regla que diga que debe colocar toda su navegación en el menú de hamburguesas. Muy a menudo, una de las mejores soluciones es dejar los elementos principales de navegación en el sitio web y colocar todas las demás opciones secundarias en el menú de hamburguesas. Básicamente, esto toma lo mejor de ambos mundos y aún cumple su propósito.

Contras:

• La navegación importante no es visible : cuando transforma su navegación en un menú de hamburguesas, la hace casi invisible. Algunas investigaciones confirman que la participación en el sitio web puede disminuir considerablemente debido a este motivo. En otras palabras, algunas personas no harán más clic porque no les llama la atención de inmediato.
• No todos lo entienden , menos probable, pero todavía hay visitantes que se encuentran con los menús de hamburguesas por primera vez. Puede parecer familiar, pero no lo suficientemente motivador o autoexplicativo para que realicen la acción. Lo dejarán como está porque no hay otras indicaciones sobre para qué se usa. Esto está cambiando, pero a veces puede no ser intuitivo. Especialmente cuando los diseñadores usan demasiada libertad y la hacen completamente abstracta. O la "hamburguesa" en sí misma no se distingue visualmente lo suficiente.
• El menú de hamburguesas requiere un "esfuerzo" adicional para usarlo : aunque puede sonar tonto, técnicamente, un menú de hamburguesas requiere algunos pasos más que la navegación típica. Sin mencionar el hecho de que no todos pueden alcanzarlo con los pulgares cuando sostienen sus teléfonos en una mano.

Sea cual sea tu opinión subjetiva, nunca olvides considerar cuál es la mejor opción para tus usuarios. Puede que te gusten los menús de hamburguesas pero, aun así, acabes no usándolos si las circunstancias no te parecen las adecuadas. O bien, puede odiarlo por completo, pero podría ser la mejor solución para su sitio web o aplicación. Recuerde que la aplicación correcta de hamburger manus en el diseño de sitios web puede ser situacional y diferente de un caso a otro . Para ver si es para ti, realiza algunas pruebas A/B y mira lo que piensa tu audiencia al respecto.