Diseño web móvil: el lugar adecuado para su navegación

El diseño de diseños web móviles para teléfonos inteligentes plantea un desafío para los diseñadores una y otra vez. El poco espacio disponible en los dispositivos debe usarse de manera significativa, principalmente para el contenido. Por lo tanto, sería mejor si la navegación no ocupara ningún espacio, sin dejar de ser fácil e intuitivo de encontrar. Los siguientes ejemplos le muestran sugerencias sobre dónde colocar la navegación en sus diseños web móviles.

Clásico: navegación deslizable con un icono de hamburguesa

Hubo una extensa discusión sobre el uso del icono de la hamburguesa. Nuestro editor en jefe es sin ventilador cualquiera. A los expertos en usabilidad les gusta criticar que la navegación está oculta por completo y solo se muestra a través del icono. De esta manera, incluso los elementos de navegación esenciales se colocan fuera de la ventana gráfica.

No obstante, el icono de la hamburguesa se ha establecido como el estándar en el diseño web móvil, especialmente en combinación con una navegación deslizable. Aquí, la mayoría de las veces, el icono se coloca en la parte superior izquierda, con la navegación deslizándose hacia la derecha, en la ventana gráfica.

Incluso Material Design de Google hace uso de esta versión de navegación. A estas alturas, está tan extendido que su uso ya no es muy destacado. Sin embargo, puede estar seguro de que todos los visitantes de su sitio web encontrarán la navegación. No puedes equivocarte con este clásico porque, aunque puede ser insatisfactorio, a estas alturas todo el mundo lo sabe.

La navegación flexible con el botón «Más»

Aquellos que no quieran ocultar toda la navegación fuera de la ventana gráfica seguramente disfrutarán de la siguiente navegación. Es una navegación horizontal clásica con los elementos del menú ordenados por prioridad, como debería ser de todos modos. El primer elemento del menú es el más importante. Los otros elementos siguen en significado descendente.

Sitio web de la BBC con una navegación flexible «Más»

Dado que, especialmente con sitios web extensos, es poco probable que todos los elementos del menú quepan en la navegación, simplemente oculta todo lo que no encaja y agrega un botón «más» al final de la navegación. Detrás de eso, hay un menú desplegable que contiene todos los enlaces restantes de su navegación.

La ventaja es que no se oculta toda la navegación. Todo lo que cabe se muestra. Por lo general, se muestran todos los elementos de menú más importantes. Esta navegación flexible es una mezcla de completamente visible y completamente oculta.

La navegación con combinación de íconos de texto

Agregar iconos significativos a los elementos de menú individuales de una navegación es un enfoque de diseño popular tal como es. Gracias a las toneladas de fuentes y conjuntos de iconos gratuitos, encontrará un símbolo adecuado para casi cualquier cosa.

Currys con navegación de iconos

Si su navegación no es tan extensa, puede tener sentido dejar los íconos solos en la vista móvil, renunciando al texto del menú. Sin embargo, debe asegurarse de que cada símbolo tenga suficiente espacio y dejar muy claro lo que representa.

Si su icono es incluso un poco ambiguo o incomprensible, no debe optar por este enfoque.

La navegación a pantalla completa

Como la navegación es un componente crítico de un sitio web, muchas personas ponen mucho esfuerzo en su diseño y animación. Incluso si solo se puede acceder a su navegación a través del icono de hamburguesa, no tiene que ser discreto.

El sitio web de Dove con navegación a pantalla completa e ícono de hamburguesa

Por lo tanto, muchos diseñadores web dan a sus navegaciones la pantalla completa, en lugar de un simple menú deslizante. Con estas apariciones en pantalla completa, los elementos del menú tienden a mostrarse con animaciones complejas o mostrarse de otra manera.

Los elementos de menú individuales a menudo se muestran en texto grande. Dependiendo del tamaño de la pantalla, también se muestran enlaces adicionales a redes sociales o formularios de contacto.

Por lo tanto, si está harto de las clásicas navegaciones deslizantes, puede probar una de pantalla completa con elementos de menú de barrido. Aquí, el único límite a su creatividad es el tamaño de la pantalla.

Renunciar a una navegación

Antes de pensar demasiado dónde colocar la navegación, algunos diseñadores sacrifican directamente una navegación por completo.

La Sociedad Anónima de Hamburguesas renuncia a la navegación

Este también es un enfoque atractivo, aunque no funciona para todos los sitios web. En lugar de un menú clásico, puede hacer que las páginas individuales sean accesibles mediante gestos de deslizamiento, por ejemplo. O puede convertir toda su página de destino en su navegación. Esto le permite equipar los enlaces con títulos, imágenes e íconos significativos.

Por supuesto, esto no funciona para sitios web complejos y extensos. A menudo, la navegación no es solo crucial para llegar a páginas individuales. También es un medio de orientación, que muestra al usuario dónde se encuentra en este momento.

Conclusión

Sin duda, el icono de la hamburguesa y la navegación deslizable son un verdadero clásico entre las navegaciones. Sin embargo, también hay muchas otras variantes. Es importante considerar siempre la cantidad de elementos del menú, así como la complejidad de su sitio web.

Por cierto, no hay ninguna razón por la que no deba intentar encontrar un enfoque completamente diferente para el diseño y la funcionalidad de su navegación.