Blog

Tendencia en diseño: Sistemas navegación vanguardistas

Contenidos

Aunque muchos diseñadores siguen adhiriéndose al método probado de la navegación en mayúsculas en la parte superior de la pantalla con tipografía sans serif, cada vez hay más partidarios de enfoques más innovadores.

Los métodos de navegación creativos pueden aportar un toque lúdico y cautivador a una web, siempre que sigan siendo fáciles de usar e intuitivos. Los estilos de navegación novedosos pueden infundir emoción a las páginas web pequeñas, a las que tienen un contenido mínimo o a las que pretenden guiar a los usuarios por un camino concreto.

Aunque la navegación poco convencional no se adapte a todos los proyectos, puede ser una opción agradable para la empresa adecuada.

Navegación lateral: Un nuevo ángulo

La navegación lateral ofrece una gran cantidad de posibilidades, que van de lo estático a lo dinámico y están disponibles en varios anchos.

Aunque desplazar la navegación de la parte superior a un lateral no parezca innovador, puede tener un impacto significativo en el diseño al alterar la relación de aspecto del lienzo.

A continuación, los diseñadores deben estudiar cómo aparecerá esta barra de navegación típicamente delgada en distintos tamaños de pantalla y cómo manejar las palabras largas (evitando una barra de navegación repleta de guiones).

Hay que pensar mucho.

La navegación lateral óptima es sencilla, con palabras cortas y un espacio fijo. Un desplazamiento excesivo en la navegación puede desorientar y dificultar la comprensión. El ejemplo de Canva, es sencillo y pulido. La navegación permanece fija mientras el usuario se desplaza, y el texto pasa de claro a oscuro cuando cambia el fondo.

El patrón de navegación vertical de este ejemplo anima a los usuarios a centrarse en el nombre y el logotipo antes de avanzar linealmente por la pantalla para explorar las opciones de navegación disponibles. Es un diseño elegante y práctico.

Oculto y emergente: Un elemento sorpresa

El uso generalizado de la navegación tipo hamburguesa y otros iconos ocultos ha dado lugar a los menús emergentes.

Haz clic o toca el botón y aparecerá la navegación, cubriendo parte o toda la pantalla (a menudo dependiendo del tamaño de ésta).

Aunque en sí mismo no es del todo innovador, la variedad de interpretaciones de los diseñadores es lo que lo hace experimental. Aunque los usuarios están cada vez más familiarizados con los iconos de hamburguesa, estos patrones siguen siendo relativamente desconocidos. Los diversos tipos de iconos utilizados por los diseñadores añaden un elemento de desafío.

No obstante, el estilo pop-out, es intrigante. Aunque la mayoría de los diseñadores optan por variantes planas y sencillas, ésta tiene más profundidad. El diseño ayuda a los usuarios a localizar los aspectos más importantes de la navegación y les guía por el diseño.

Desplazamiento horizontal: Desafiando a la gravedad

Encontrarse por primera vez con una web que se desplaza horizontalmente puede resultar un tanto peculiar. Se requiere un diseño particular para que este flujo resulte natural debido a la inusual diferencia de movimiento físico y visual.

Para maximizar la navegación con desplazamiento horizontal, los diseñadores deben incorporar señales visuales que hagan el concepto más cómodo para los usuarios. Las flechas u otras herramientas direccionales pueden ser beneficiosas.

En estos diseños es normal emplear una imagen parcial como señal visual, indicando contenido adicional en el lateral de la pantalla con una vista fija de arriba abajo. El contenido puede estar dispuesto de tal manera que el movimiento horizontal parece más natural gracias a las señales visuales proporcionadas.

Sin navegación: Minimalismo audaz

Algunas webs se atreven a prescindir por completo de la navegación y optan por un estilo omnicanal en pantalla. Este atrevido patrón plantea dudas sobre si los usuarios sabrán en qué hacer clic y qué acciones llevar a cabo.

El modelo «sin navegación» funciona mejor en páginas web compactas que dirigen a los usuarios a realizar una única acción. Puede ser eficaz para una página de «Próximamente» o una web de agradecimiento. Con sólo unos pocos elementos en los que se puede hacer clic y un breve desplazamiento, es fácil navegar.

La sutil animación del diseño también ayuda (podría decirse que funciona como navegación, ya que fomenta el movimiento del usuario). Sin embargo, este patrón puede ser difícil de dominar.

Página con marcadores: Navegar con pistas

Muchos patrones experimentales de navegación se implementan en páginas web de una sola página, y por una buena razón: es menos probable que los usuarios se pierdan en un formato de una sola página.

Para proporcionar orientación y ayudar a los usuarios a sentir que avanzan en el diseño, muchos patrones de navegación de una sola página se basan en marcadores. Similar al formato tradicional de deslizador que utiliza un punto o una barra para indicar el progreso, este estilo de navegación emplea el mismo concepto.

Un gran ejemplo son las páginas que destacan en este enfoque colocando marcadores en la parte derecha de la página, incluyendo texto hover que informa a los usuarios del propósito de cada punto (una característica que a menudo falta en este estilo de navegación).

La clave de este estilo de diseño es garantizar una experiencia ágil. Los efectos de desplazamiento suave y un diseño fácil de digerir, como se muestra en este ejemplo, ayudan a guiar a los usuarios a través del contenido.

Navegación sutil por los bordes: A la vuelta de la esquina

Algunos diseñadores giran la navegación 90 grados y la anclan en el borde derecho de la página. Esta sutil técnica se utiliza sobre todo en páginas web pequeñas o de tipo portfolio y es cada vez más popular.

Los elementos de navegación de este estilo tienden a ser sólo de texto, incluyen pocos elementos y suelen ser pequeños. El texto de navegación girado puede apuntar hacia dentro o hacia fuera del diseño, en función de otros elementos de la pantalla.

Al igual que la navegación vertical, este concepto puede alterar la relación de aspecto general del diseño, ya que se elimina una franja lateral para la navegación. El problema de este estilo es que los elementos de navegación son sutiles y pequeños, por lo que es fácil pasarlos por alto.

From offline to online.

Comparte tus ideas con nosotros