Los 6 Modelos de navegación adaptativa para móviles [I]

La proliferación y el uso de los dispositivos móviles hace que tengamos que plantearnos cómo se va a visualizar nuestro menú de navegación. Comentamos las mejores soluciones para tu sitio web.

Uno de los aspectos clave cuando se está realizando un proyecto que debe cumplir los requisitos de ser adaptativo para los dispositivos móviles es el tema del menú de navegación. Al igual que en diseño web para escritorio tenemos múltiples soluciones para presentar un menú de navegación, en la versión móvil también podemos encontrar distintas posibilidades para que el usuario interactúe y navegue con nuestro sitio.

En el diseño para pantallas grandes casi siempre recurrimos a la navegación superior horizontal y, si tiene submenús, usamos un desplegable aunque, por otro lado, podemos usar un bloque en la parte izquierda para navegar o bien una navegación por pestañas si la interacción es muy básica.

Vamos a hacer un repaso de 6 diferentes soluciones (3 en este artículo y las 3 restantes en el siguiente) que podemos plantear para los adaptativos y, si ves algún aspecto que no esté contemplado, puedes dejarnos un comentario para enriquecernos todos con distintas aportaciones.

Navegación por interruptor o toggle

Esta funciona como un botón de encendido y apagado, cuando clicamos sobre él se nos muestra el menú y cuando volvemos a clicar desaparece. Es como un interruptor. De las páginas adaptativas, es una de las soluciones que más se suelen ver. De hecho, muchos frameworks de estilos, como el Bootstrap from Twitter y Foundation, ya lo llevan incorporado por defecto. Además, existen plugins muy livianos sin necesidad de jQuery para este tipo de propósitos.

El hecho de que necesitemos de un archivo externo y que la escalabilidad tenga muchos submenús es un hándicap. Por otro lado, mantiene al usuario en la parte superior de la página y reduce el espacio para mostrar el menú en los dispositivos móviles, que es algo muy importante.

De hecho, en el sitio web de Ondho, se optó por este tipo de menú al clicar sobre el icono de la hamburguesa. Hay varias opciones de mostrar los iconos y que sean entendible para el usuario. Los amigos de Smashing Magazine han hablado sobre los diferentes iconos para representar el botón de menú.

menu_responsive_01
http://erickar.be/blog/my-experience-with-navigation-in-responsive-design

Navegación al estilo app móvil

En mi opinión, uno de los recursos más elegantes y que cada vez vemos más en las aplicaciones para iOS, Android y otros sistemas operativos para dispositivos móviles, es la navegación adaptativa donde el contenido del menú está oculto a un lado de la pantalla y, cuando se presiona el botón, aparece el menú desplazándose el contenido principal hacia un lado.

Es un tipo de navegación que popularizó Facebook para móviles y que muchas otras han imitado. Aplicaciones como Google +, Evernote, etc. han optado por realizarlo de este modo.

Varios blogs y repositorios tienen tutoriales y código preparado para hacer este menú con la ayuda de jQuery. Igualmente podemos usar la librería Sidr o Menufication o jPanelMenu.

Hay algunos detractores que no justifican el uso de este método de navegación ya que, principalmente, al estar oculto no sitúa del todo correctamente dónde se encuentra el usuario en ese momento. Asimismo necesitas también de un uso de JavaScript y librerías externas.

menu_responsive_02
http://www.lukew.com/ff/entry.asp?1569

Transformar el menú en un select

Otra de las opciones para navegar dentro de un dispositivo móvil es usar el típico menú de select propio de los formularios. Dentro de lo que cabe es bastante fácil de implementar, también existen librerías diseñadas para esta funcionalidad y contamos con la ventaja de que el usuario lo identifica y reconoce rápidamente.

Igualmente, ahorra un montón de espacio para mostrar el contenido principal y mantiene la navegación en la parte superior. Los submenús los muestra de una forma sencilla, con un guión separado de su elemento padre. TinyNav.js o este tutorial de CSS Tricks nos enseñan cómo hacerlo.

menu_responsive_03
http://www.fivesimplesteps.com/

En el próximo artículo veremos otros tres modos de presentar menús en los dispositivos móviles de interacción táctil:

  • Navegación superior sin apenas cambios
  • Ancla al footer
  • Esconder parte del menú

¿Crees que debemos añadir alguno más? ¿Cuál es tu preferido?

Artículos recién salidos del horno

Suscríbete a nuestro blog y recibe en tu email nuestras noticias.

Al inscribirte a nuestra newsletter, aceptas la política de privacidad