Skip links

Descubre los 5 Mejores Ejemplos de Menú Responsive -【ACTUALIZADO 2019】

En la era de la migración tecnológica a la pantalla “chica”, existe una premisa de oro que cualquier diseño digital (banners, web, aplicaciones,…) debe nutrirse: menos es más.

Y si juntamos la “facilidad visual” con la “facilidad del tacto” los resultados mejoran brutalmente (hablando con propiedad para la gente del sector, es lo que conocemos como diseño UX) porque nuestros usuarios captan claramente el mensaje y tienen accesibilidad para realizarlo.

Bien, y ahora que tienes claro la máxima de este post, te preguntarás cuál es la mejor opción de diseño de un menú responsive para conseguir esa “facilidad” que comento.

Pues quiero que leas lo que viene a continuación porque vamos a analizar las distintas alternativas que tenemos para el diseño de un menú responsive.

 

¿Qué es un menú responsive?

Antes de entrar en temática más técnica, prefiero aclarar conceptos básicos para todos los compañeros como qué es un menú responsive.

“Es el menú de navegación de tu página web que se adapta a todas las pantallas de los dispositivos tecnológico; ordenador, Tablet y/o móvil.”

Es a través del menú, mayoritariamente, que el usuario va pasando de una sección a otra, gracias sobre todo al sitio privilegiado que tiene en el flujo gráfico de una web.

 

Y por qué es importante hacer un Menú Responsive

Pues justamente por lo que acabo de mencionar: es una zona caliente de la web y hay que darle una vía de movilidad fácil y accesible al usuario. A día de hoy, no podemos trabajar con los menús de navegación tradicionales para un entorno de pantalla reducido al convertirse en un “elemento ruidoso” que “retrasa” –a nivel visual- la entrega del contenido web.

El minimalismo que debe transmitir un diseño es clave para el proceso de toma de decisión del usuario, y cuanto más “ruido” hay en un diseño, más impactos sensoriales recibe el usuario y, por consecuencia, experimenta más bien una “parálisis por análisis”.  ¿Y por qué funciona la simplicidad si lo que hay que buscar es impactar más y más a nuestro usuario ideal? Todo lo contrario…el objetivo de la simplicidad es facilitar las tareas, y esto es un valor que los seres humanos valoramos muchísimo, por encima de cualquier factor.

Así pues, basado en este factor, la solución ha sido adaptar el menú web para móvil que lo dejan accesible bajo demanda” –un click vaya- del visitante. Para esa adaptación podemos encontrar muchos estilos diferentes de cómo diseñar un menú responsive, de los cuales veremos a continuación, pero antes os quiero hablar de los principios de diseño para una buena navegación web.

 

Principios de Diseño de Menús para Móvil

  1. Simplicidad; no pienses en la octava maravilla del mundo, sino tienes que hacer algo sencillo para que el usuario pueda utilizarlo correctamente –sin florituras y clicks conciso que eviten submenús-.
  2. Reconocible; tienes que usar símbolos/iconos que lo hacen identificable para el usuario.
  3. Compacto; el menú tiene que tener una posición elegante en el grafismo de la web, y, en caso de desplegado, que sea lo mínimo suficiente para poder presentar todos sus elementos de forma adecuada –minimalismo-.
  4. Interactivo; los menús con efectos de transición consiguen no acaparar la atención visual del usuario al estar compacto en un diseño simplificado como en una pantalla de móvil.
  5. Fijo: el menú debe estar en una posición fija, que sea continuamente accesible desde cualquier navegación –página- y no desaparecer cuando se haga scroll.

 

Tendencias en diseño de Menú Responsive

Os dejo un listado de los tipos de menú responsive que más se utilizan en una pantalla móvil:

  • Menú Hamburguesa

El menú hamburguesa es el más tradicional de los diseños de menú responsive de los últimos años, y se caracteriza por su simplicidad y notoriedad relativa a la navegación de los usuarios más veteranos.

Se puede diferenciar distintos diseños de menú hamburguesa con el efecto de transición del menú cuando se despliega; ya sea desplazando la página de arriba hacia abajo, o bien haciendo un fadeIn desde los laterales.

  • El menú Fullscreen

El menú fullscreen es una evolución natural del menú hamburguesa, creando un efecto de transición overlay que superpone por toda la pantalla el elemento del menú, lo que permite una mayor facilidad para clicar en los elementos del menú al ser más grande que en otra posición.

  • Menú fijo (UI Design)

Este menú es un poco más “novedoso” en el diseño responsive; creado especialmente para el diseño de APP, se está convirtiendo en una alternativa cada vez más implementada gracias al crecimiento exponencial del uso del mobile y de sus aplicaciones.

Su diseño se caracteriza por presentar los elementos del menú con una barra fija en “el pie de página” de la pantalla, con representaciones gráficas que permite hacer más compacto las opciones y, lo mejor de todo, continuamente accesible con el pulgar (nuestro “ratón de navegación”) sin mover el agarre del móvil. Es un diseño de menú totalmente integrado en la estructura y pensado para una experiencia de navegación súper optimizada.

 

  • Menú Float Design

El menú float es una especie de “fusión” entre el estilo hamburguesa (muy similar) y fijo; pues no deja de ser un menú hamburguesa pero con una posición fija y optimizada en el emplazamiento del diseño para que sea de fácil acceso con el pulgar y continuamente visible.

Esta alternativa se puede considerar como la versión tradicional mejorada, fruto del proceso de evolución y adaptación tecnológica que los usuarios están interiorizando en su día a día. Y aplicaciones como Gmail o WhatsApp, cuyas acción principal de escribir un nuevo correo o abrir un nuevo chat, utilizan el float design y los ubica en esta posición hacen que el usuario esté educado para actuar de esa forma de manera inconsciente.

  • Navegación por Cluster

Y por último tenemos el menú por navegación, aunque no sea un menú como tal, la tendencia del diseño Mobile First Index lo está viralizando en el sector.

Se trata de obviar (en el caso de que creemos necesario) el típico icono del menú desplegable “hamburguesa” para presentar la información interna de la web con cajas de imágenes (o cards, o llámalo como quieras) que sean el flujo de navegación.

Con esto, el usuario se encuentra directamente el “cuerpo” de la web y todo muy accesible en un solo click durante el propio proceso de navegación. Hablaremos más detenidamente de esta tendencia en otro post –navegación por clúster- .

También es muy corriente utilizar un modelo mixto; juntar dicha navegación con el menú float design. Según los estudios es la estructura UX más optimizado para el diseño Mobile First Index.

En mi caso, y te dejo mi opinión para que puedas valorarlo, el modelo mixto de navegación por cluster con un icono de menú float design que despliega por encima del diseño un sidebar lateral, que entra por la derecha de la pantalla. Para mi este modelo es el más optimizado a nivel de usabilidad web en mobile porque combina a la perfección todos los principios comentamos anteriormente (sencillez, accesibilidad, recuerdo (fijo), compacto e interactividad). Y, por supuesto, es el más elegante a nivel de diseño (pero ya sabemos, para gusto los colores).

¿Y tú, qué tipo de menú responsive sueles implementar en tus proyectos webs y por qué este modelo? ¡Cuéntame!

Return to top of page