Principales tendencias de navegación web

Durante el año pasado, hemos visto un gran crecimiento y nuevas tendencias en el mundo del diseño web . En este artículo, me centraré en la navegación por sitios web y los patrones que los diseñadores web han estado adoptando para ayudar a las personas a orientarse en sus sitios. Todas estas tendencias de navegación funcionan bien para una variedad de tipos de sitios, y diseño web adaptable en diferentes formas y tamaños de pantalla, por lo que hay mucha variedad aquí para extraer ideas para su próximo proyecto de diseño.

01. Barras de navegación pegajosas

La barra de navegación adhesiva aquí cambia de tamaño en el desplazamiento, para no inmiscuirse en el contenido

La barra de navegación adhesiva aquí cambia de tamaño en el desplazamiento, para no inmiscuirse en el contenido

La navegación está diseñada para ayudar a los usuarios a ir del punto A a todos los demás puntos de un sitio. Y mantener el menú de navegación en un lugar fijo permite a los usuarios navegar por el sitio desde cualquier lugar de la página. Muchos sitios web 'pegan' su navegación principal en la parte superior de la pantalla cuando el usuario se desplaza hacia abajo para explorar el contenido.



Esto se ha vuelto más fácil gracias a CSS y Complementos de jQuery y muchos temas de sitios web ahora vienen con una barra de navegación fija como predeterminada, y esta tendencia no muestra signos de ir a ninguna parte. La navegación y la usabilidad consistentes son importantes, pero la barra de navegación fija también es útil para los usuarios móviles, donde el sitio es naturalmente más largo y delgado.

¿Cómo debería usarlo?

Si tiene un sitio con muchos elementos de navegación, es una buena idea mantenerlo fijo. Es una forma segura de mantener a los visitantes en el sitio durante más tiempo y aumentar el número total de páginas vistas.

Sin embargo, asegúrese de que la barra de navegación no ocupe demasiado espacio. No debe ser tan grande que bloquee la mayor parte del contenido de la página. El sitio para Revista estadounidense soluciona este problema cambiando el tamaño haciendo que la barra de navegación se reduzca a medida que el usuario se desplaza hacia abajo, lo que la hace menos intrusiva. Siempre que el usuario pueda seguir consumiendo el contenido de la página, probablemente se beneficiará de una navegación fija de acceso universal.

02. Mega menus

Escondido detrás de él

Escondido detrás del menú de hamburguesas It's Nice That hay una gran cantidad de opciones

El mega menú se ha popularizado con el aumento de blogs estilo revista. Se diferencian de los menús desplegables normales porque, en lugar de fluir hacia abajo verticalmente, estos megamenús se expanden más y generalmente contienen múltiples columnas de contenido. Esta técnica funciona bien si se usa con prudencia, pero no es ideal para todos los sitios. De hecho, solo es útil si tiene suficiente contenido para justificar un mega menú.

¿Por qué usarlos?

Los visitantes pueden tener una idea de su blog o sitio web hojeando el contenido relacionado. Si puede proporcionar más contenido en un mega menú, ¿por qué no?

Esta tendencia no funciona en dispositivos móviles, ya que no hay espacio en la pantalla. Pero muchas personas todavía navegan por la Web en computadoras de escritorio y portátiles, por lo que existe una amplia audiencia que apoya el mega menú.

03. Navegación universal

Aparece una navegación universal en todo el sitio web de Disney que ofrece enlaces a productos relacionados y parques temáticos.

Aparece una navegación universal en todo el sitio web de Disney que ofrece enlaces a productos relacionados y parques temáticos.

Algunas empresas trabajan con o son propietarias de varias marcas e incluyen una navegación universal en todo un sitio web. Disney, por ejemplo, posee parques temáticos, crea juegos y produce películas junto con programas de televisión. Tiene sentido mantener esta navegación universal en todas las páginas, independientemente de la marca, para llamar la atención sobre otros productos de Disney.

Y esta tendencia no es exclusiva de los conglomerados o sociedades de cartera. A veces se utiliza en redes de sitios web, como los que son propiedad de Medios de Nueva York . Otro buen ejemplo está en el encabezado de Mashable , que enlaza con todos los sitios internacionales de la marca.

¿Por qué usar esto?

Si trabaja con una red más amplia de productos o marcas, puede resultar útil vincularlos a todos para crear una identidad de marca coherente. Una navegación universal puede llevar a los visitantes a través de toda la red para ayudar a polinizar diferentes audiencias.

04. Navegación deslizante vertical

AWARD utiliza navegación vertical combinada con la tendencia de las puertas correderas tipo hamburguesa

AWARD utiliza navegación vertical combinada con la tendencia de las puertas correderas tipo hamburguesa

Un número cada vez mayor de sitios web está adoptando la tendencia de navegación vertical y, cuando funciona, realmente funciona bien. Es particularmente popular en carteras o agencias creativas que traspasan los límites del diseño web tradicional.

El ejemplo anterior de AWARD es un caso fantástico de utilizar la navegación vertical mientras se mantiene visible en todo momento. Los iconos se enlazan desde el lateral para que pueda hacer clic en un icono en lugar del icono de hamburguesa. Es un enfoque experimental del diseño de navegación, pero puede funcionar en sitios web orientados a la creatividad.

¿Por qué usar esto?

Pruebe esta técnica solo si desea un diseño de pantalla completa que se aleje del diseño de cuadrícula tradicional.

Una navegación vertical funcional no es fácil de crear desde cero y es complicado hacerla funcionar en diseños receptivos. Sin embargo, si tiene curiosidad por experimentar y está dispuesto a probar nuevas ideas, las navegaciones verticales pueden ser una novedad.

05. Menús ocultos globalmente

Computerworld mantiene su navegación escondida detrás de un ícono de hamburguesa

Computerworld mantiene su navegación escondida detrás de un ícono de hamburguesa

Todo diseñador web debe conocer los iconos de hamburguesas y su uso en el diseño receptivo. Pero a medida que la gente se familiariza con el icono de la hamburguesa y lo que significa, cada vez más sitios mantienen la navegación oculta a la vista en todo momento.

Esto puede parecer extraño porque no ayuda al visitante a encontrar enlaces rápidamente. Sin embargo, despeja espacio en la pantalla al quitar la navegación de la vista. Ha habido varios estudios que indican que la mayoría de los usuarios luchan con los menús ocultos. Pero esta tendencia puede estar cambiando a medida que más personas usan teléfonos inteligentes y se familiarizan con el significado del ícono de la hamburguesa.

¿Por qué usarlos?

El mejor escenario para un menú oculto globalmente es con una audiencia conocedora de la tecnología. Estos visitantes reconocen el icono de la hamburguesa y saben que significa 'haga clic aquí para acceder al menú'. Entonces, si está diseñando un blog de tecnología o creando una agencia digital B2B, esto puede funcionar. Pero si no es así, piense detenidamente antes de adoptar este enfoque y asegúrese de no sacrificar la usabilidad a favor del estilo.

06. Menús subnav receptivos

Los submenús receptivos deslizables de Politico, visibles para los usuarios de dispositivos móviles

Los submenús receptivos deslizables de Politico, visibles para los usuarios de dispositivos móviles

Al diseñar un sitio web, no hay forma de evitar lidiar con la navegación móvil. Es popular y llegó para quedarse. Los diseñadores a menudo ocultan algunos enlaces de navegación en el móvil para ayudar a que el menú se ajuste mejor en pantallas pequeñas.

Pero muchos sitios están siguiendo una nueva tendencia de mantener todos los elementos de navegación mediante menús desplegables. Esto generalmente requiere una navegación rápida con íconos de alternancia para los menús desplegables de enlaces.

Solo verá esta técnica en pantallas de dispositivos móviles o en ventanas pequeñas del navegador. Por ejemplo, Diplomático El sitio para móviles utiliza pequeños signos más (+) para indicar un submenú al lado de cada enlace.

¿Por qué usarlos?

Los visitantes deben tener acceso para navegar por todo su sitio web, independientemente del dispositivo que estén usando. Al mantener los submenús en su lugar, puede ofrecer mejores oportunidades para que los visitantes naveguen.

Solo asegúrese de que cada submenú esté claramente indicado con un ícono, cambio de color o algo visual. Los visitantes deben saber si al hacer clic o tocar un enlace se abre un menú o se los lleva a una nueva página.

07. Carruseles de historias principales

The New York Times utiliza una galería de miniaturas en la parte superior de cada publicación.

The New York Times utiliza una galería de miniaturas en la parte superior de cada publicación.

Esta tendencia se está volviendo más popular en blogs y sitios de noticias de gran volumen. Muchos de estos sitios más grandes pueden publicar docenas, si no cientos, de artículos nuevos todos los días.

Agregar un carrusel simple en la parte superior de la página ofrece a los visitantes la oportunidad de ver los últimos artículos. Estas historias se pueden seleccionar o actualizar dinámicamente, y se pueden diseñar con miniaturas o lo que quieras. Puedes ver otro ejemplo en básicamente cualquier artículo de Vogue .

¿Por qué usarlos?

Si está diseñando un blog con contenido de gran volumen, esta tendencia puede hacer maravillas en la experiencia del usuario. Los visitantes pueden conocer historias recientes y aumentará el tiempo total promedio en el sitio al animar a los visitantes a explorar más de una historia por visita. La mayoría de los blogs que publican mucho contenido desean aumentar la retención de visitantes y el carrusel de artículos es una excelente manera de hacerlo.

08. Tabla de contenido

El blog de Ahrefs a veces ofrece a los usuarios soluciones

El blog de Ahrefs a veces ofrece a los usuarios 'enlaces rápidos' fijos dentro de las publicaciones.

A Google parece gustarle el contenido extenso y está impulsando a los escritores a publicar guías más extensas sobre prácticamente todo. Esto funciona muy bien para el contenido web, pero puede enturbiar la experiencia de lectura. Para simplificar las cosas, he notado que se agregan más cuadros de tabla de contenido en artículos más largos con secciones definidas. El ejemplo más notable es Wikipedia , que ha estado utilizando una ToC desde sus inicios.

¿Por qué usarlos?

La principal razón para utilizar una tabla de contenido es mejorar la experiencia del usuario. Los artículos más largos se están convirtiendo en la norma y puede ser intimidante aterrizar en un artículo de más de 5,000 palabras. Un ToC reduce ese factor de intimidación. También son útiles en las clasificaciones SERP, ya que Google puede ofrecer enlaces de salto basado en una tabla de contenido. Este es un enfoque en el que todos ganan.

Notarize utiliza letras pequeñas en mayúsculas para los enlaces que se combinan de forma natural con el encabezado.

Notarize utiliza letras pequeñas en mayúsculas para los enlaces que se combinan de forma natural con el encabezado.

Esta es una tendencia de navegación sutil, pero se ha extendido rápidamente durante los últimos años. Parece que todas las empresas emergentes y profesionales utilizan el estilo de texto en mayúsculas para crear una navegación intuitiva y simétrica.

Estos navegadores suelen seguir estilos muy similares:

  • Todas mayúsculas
  • Letras pequeñas
  • Fuentes sans-serif
  • Espaciado horizontal adicional
  • Tono blanco o muy claro

Siempre que veo una navegación como esta, es casi un acontecimiento acogedor. Esta tendencia de diseño se ha convertido en el estilo característico de una navegación limpia, nítida y de aspecto profesional.

¿Por qué usarlos?

Un menú de navegación en mayúsculas parece profesional; es sutil pero notable y da una sensación de confianza al usuario. Si está diseñando un sitio web corporativo o de inicio, esta tendencia es probablemente el mejor estilo de diseño a seguir para su navegación. Sin embargo, tenga cuidado: no quiere terminar con un sitio sin alma o que parezca idéntico al de los demás.

10. Navegación por puntos de una sola página

Gumtree utiliza los puntos de una sola página, pero no se basa en el desplazamiento fijo.

Gumtree utiliza los puntos de una sola página, pero no se basa en el desplazamiento fijo.

El auge de los sitios web de una sola página ha hecho que muchas nuevas tendencias se conviertan en el centro de atención. Uno de ellos es la navegación por puntos: una serie de iconos circulares ubicados en el lado izquierdo o derecho de la pantalla. Cada uno de estos puntos representa una sección diferente del sitio. Y dado que el diseño es una página larga, estos enlaces están resaltados para indicar la posición actual del usuario. Realmente me gusta el ingenio de esta tendencia, pero hay un signo de interrogación sobre si la gente entiende qué significan estos puntos o cómo usarlos.

¿Por qué usar esto?

Si está diseñando un diseño de página única, le recomiendo que use una barra de navegación fija en la parte superior de la página. Esto hace que sea más fácil ver qué representa cada diapositiva y qué tipo de información hay en la página.

Pero si no puede (o no quiere) utilizar una navegación superior, estas funciones de puntos son la mejor opción. O mejor aún: ¡combina ambos! Es posible tener una navegación superior con enlaces de texto e incluir también iconos de navegación por puntos. O incluso incluya texto junto a los puntos. Hay muchas opciones para elegir y todas pueden funcionar bien.

Artículos relacionados: