Menú Pizza o Hamburguesa? (UX/UI)

Posted by | · · · · · | Blog | Sense comentaris a Menú Pizza o Hamburguesa? (UX/UI)

Como si de un restaurante se tratara, en la vida digital (no por ello menos real) también hay que tomar decisiones y últimamente hay un tema interesante sobre la mesa de los diseñadores de interfaz (UX/UI) y es el de elegir que menú utilizaremos en nuestro diseño de interfaz para web en modo responsive o para dispositivos móviles, si el menú hamburguesa o el menú pizza.

 

El menú hamburguesa son las tres lineas horizontales que aparecen hoy en día en muchos diseños web responsive y versiones móviles escondiendo la navegación principal de la web con lo que se gana mucho espacio (muy importante en versiones para móvil). Lo podemos encontrar incluso en la interfaz de yomvi.

 

menu-hamburguesa-interfaz-yomvi
Parece muy moderno, pero en realidad apareció en los 80 en el “Xerox Star personal station”, una de las primeras interfaces gráficas de usuario, cuando aun no existía ni Mac OS. Hoy en día se usa en la mayoría de templates y frameworks como Bootstrap.

 

interfaz-XEROX-star-personal-station

 

Aunque haya muchos detractores contra la utilización del menú hamburguesa, la solución parecía maravillosa y rapidamente le salieron primos hermanos a los que Luke Wroblewski les puso nombres creando una interesante colección charcutera, soluciones que hasta llegan a convivir en una misma barra de navegación.
meat-mobile-navigation-in-interfaz
Podemos describir el menú pizza como las pestañas/botones que ayudan al usuario en su interacción con la web o aplicación. Suelen ser iconos en las versiones para móviles, un ejemplo fácil es Facebook en su aplicación para smartphones.

 

Para utilizar el menú pizza en una versión para móviles debemos tener claro cuales serán las interacciones básicas, pues no se goza de demasiado espacio para ellas y eso requiere un estudio importante previo al diseño de la interfaz. Una solución puede ser combinar las dos opciones dejando a la vista la interacción principal en el formato pizza y la interacción secundaria en el formato hamburguesa.

 

facebook-app-interfaz-2

CONCLUSIONES

  • El menú hamburguesa está muy establecido pero aun hay quien no lo identifica en cambio un buen menú con iconos siempre es más fácil de interpretar.
  • La versión hamburguesa esconde todo el contenido y puede ser invisible para muchos.
  • Con la otra versión no tenemos este problema, pero tendremos que rompernos más la cabeza para crear un buen diseño de interfaz.
  • El menú hamburguesa es la solución “rápida” para darle a la aplicación un aspecto limpio y ordenado cuando nos encontramos con muchas secciones.
  • Y por último, y no menos importante, con la versión hamburguesa se crea un click añadido a toda la interacción para llegar a cualquier sección.

Read More