Hace tiempo que se fue la idea de que los menús de navegación deben fijarse en la parte superior del diseño de un sitio web. Si bien muchos diseñadores optan por la seguridad y la coherencia de la navegación con mayúsculas y minúsculas en la parte superior de la pantalla con una tipografía sans serif, más diseños están saliendo de este patrón.
Los patrones de navegación experimentales pueden ser divertidos e interesantes si son lo suficientemente intuitivos para que los usuarios los entiendan razonablemente rápido. Los diferentes estilos de navegación pueden agregar interés a los sitios web que son pequeños, que no tienen mucho contenido o que quieren que los usuarios se muevan de una manera específica.
Si bien la navegación experimental no es para todos los diseños, puede ser una alternativa divertida para el proyecto correcto.
Navegación lateral
Hay muchas maneras de hacer navegación lateral. Puede ser estático o dinámico y puede tener casi cualquier ancho.
Si bien no parece que mover la barra de navegación desde la parte superior hacia el lado sea todo lo experimental, puede lanzar bastante la llave en tu diseño porque cambia la relación de aspecto del lienzo.
Luego, debe considerar cómo se verá esta barra de navegación a menudo delgada en otros tamaños de pantalla. ¿Y qué haces si el menú de navegación contiene palabras largas (no quieres una barra de navegación llena de guiones)?
Hay mucho que considerar.
La mejor navegación lateral es simple, con palabras cortas y un espacio fijo. Demasiado desplazamiento en la navegación es discordante y difícil de entender. El ejemplo de Sanctum, arriba, es simple y limpio. La navegación permanece en un lugar a medida que el usuario se desplaza, con el texto ajustado solo de claro a oscuro a medida que cambia el fondo.
Lo bueno de este ejemplo es que el patrón de navegación vertical alienta a los usuarios a mirar primero el nombre y el logotipo y luego moverse en línea recta hacia abajo en la pantalla para ver qué opciones de navegación están disponibles. Está bien diseñado y funcional.
Oculto y Pop-Out
Una de las grandes cosas que ha surgido del uso prolífico de la hamburguesa y la navegación de otros iconos ocultos son los menús emergentes.
Haga clic o toque el botón y la navegación se abre para cubrir parte o la totalidad de la pantalla (a menudo, dependiendo del tamaño de la pantalla).
En sí, esto no es verdaderamente experimental. Pero el hecho de que tantos diseñadores lo estén haciendo de tantas maneras es. Si bien se puede decir que los usuarios se están acostumbrando a los íconos de las hamburguesas, estos patrones aún no son familiares. Y con los diseñadores que utilizan distintos tipos de íconos, también existe un pequeño desafío.
Sin embargo, el estilo emergente de Caava Design, arriba, es interesante. Mientras que la mayoría de los diseñadores van con variaciones de pop-out simples y planas, este tiene más profundidad. El diseño ayuda a los usuarios a encontrar las partes más importantes de la navegación para guiarlos a través del diseño.
Desplazamiento horizontal
Las primeras veces que se ejecuta en un sitio de desplazamiento horizontal puede ser un poco extraño. Se necesita un diseño específico para que este flujo se sienta bien debido a la extraña diferencia en el movimiento físico y visual.
Para aprovechar al máximo la navegación con desplazamiento horizontal, los diseñadores deben usar señales visuales para ayudar a que la idea sea más cómoda para los usuarios. Las flechas u otras herramientas direccionales pueden ser útiles.
Norgram, arriba, también usa una imagen parcial como un indicio visual de que hay más contenido en el lado de la pantalla con un aspecto fijo de arriba a abajo. El contenido está estructurado de tal manera que el movimiento horizontal parece mucho más natural debido a las señales visuales proporcionadas.
Sin navegación
Algunos sitios web están eliminando la navegación por completo y optando por un todo en el estilo de la pantalla. Puede ser un patrón difícil, seguro. ¿Los usuarios sabrán qué hacer clic y qué acciones tomar?
El? No navegación? el patrón de navegación funciona mejor para los sitios súper pequeños que están dirigiendo a los usuarios a hacer una cosa. Puede funcionar para una próxima página o un sitio web de estilo de agradecimiento / resumen, como el año en la página de revisión anterior. Con solo un puñado de elementos en los que se puede hacer clic y un pequeño desplazamiento, es fácil de entender.
La simple animación en el diseño también ayuda. (Podría decirse que podría llamarse navegación porque alienta el movimiento del usuario). Esto puede ser un patrón difícil por decir lo menos.
Página única con marcadores
Muchos de los patrones de navegación experimentales en uso se están implementando en sitios web de una sola página. Y por una buena razón: es mucho más difícil para los usuarios perderse en el formato de una página.
Para proporcionar orientación y ayudar a los usuarios a sentir que están progresando en el diseño, muchos de estos patrones de navegación de una página dependen de los marcadores. Al igual que el formato de control deslizante tradicional con un punto o barra para observar el progreso, este estilo de navegación utiliza ese mismo concepto.
Socius, arriba, hace un muy buen trabajo con marcadores en el lado derecho de la página que incluyen texto flotante que les dice a los usuarios qué representa cada punto. (Esta es una característica que a menudo carece de este estilo de navegación). Los usuarios pueden usar el efecto de desplazamiento y los puntos para saltar a información específica o desplazarse por las siete pantallas.
El truco para este estilo de diseño es hacer que todo se sienta rápido. Los efectos de desplazamiento rápido y un diseño digerible, como se muestra en este ejemplo, ayudan a guiar a los usuarios a través del contenido.
Borde sutil nav
Algunos diseñadores giran la navegación 90 grados y la anclan al borde derecho de la página. Es un truco sutil que es principalmente para sitios web pequeños o de estilo portafolio que está apareciendo con mayor frecuencia.
Los elementos de navegación en este estilo tienden a ser solo de texto, incluyen solo un puñado de elementos y generalmente son pequeños. El texto de navegación girado puede apuntar hacia o hacia fuera del diseño, en función de otros elementos en la pantalla.
Al igual que con la navegación vertical, esta idea puede cambiar la relación de aspecto general del diseño porque una astilla se corta desde el lado para la navegación. La preocupación por este estilo es que los elementos de navegación son sutiles y pequeños, por lo que es fácil pasarlos por alto.
Conclusión
¿Eres más tradicionalista en lo que respecta a la navegación o estás dispuesto a probar algo un poco diferente? Los patrones de navegación experimentales son una de esas tendencias que parecen estar ganando terreno.
A medida que más diseñadores prueban este tipo de técnicas, los usuarios se acostumbran al cambio y se adaptan. Pero siempre hay una preocupación por los usuarios que "no lo entienden". Me encantaría saber qué piensas sobre los diferentes estilos de navegación. Hazme saber en Twitter y etiqueta @designshack.