diseño de navegación web

Nov 9, 2021 | Diseño Web | 0 Comentarios

5 Consejos para diseñar una buena navegación en la web

La navegación es uno de los elementos más esenciales de un sitio web. Proporciona una visión general de alto nivel de lo que los visitantes encontrarán allí (lo que también es bueno para el SEO). Ayuda a los visitantes a orientarse para que puedan desplazarse rápidamente por el sitio. Además, les permite realizar acciones rápidas […]

La navegación es uno de los elementos más esenciales de un sitio web.

Proporciona una visión general de alto nivel de lo que los visitantes encontrarán allí (lo que también es bueno para el SEO). Ayuda a los visitantes a orientarse para que puedan desplazarse rápidamente por el sitio. Además, les permite realizar acciones rápidas como visitar su cesta o buscar en el sitio.

Como diseñador web, tienes que asegurarte de que la navegación del sitio web está diseñada para que los visitantes puedan sacarle el máximo partido.

Hoy vamos a ver cinco cosas que hay que tener en cuenta a la hora de diseñar la navegación del sitio web. Incluiremos ejemplos de BeTheme para que pueda ver cómo son estas mejores prácticas.

Cómo diseñar una buena navegación en un sitio web (con ejemplos)

Es fácil dar por sentada la navegación del sitio web. Mientras aparezca en la parte superior del sitio, contenga los enlaces a las páginas más importantes y esté despejada, eso es todo lo que debe preocuparse como diseñador. ¿No es así?

Pues no.

Dado que la navegación tiene una función tan importante, hay que diseñarla con cuidado. Esto es lo que debes saber:

Consejo nº1: Haz que el logotipo destaque

El logotipo es esencialmente la cara digital de una empresa. No sólo la representa en su sitio web, sino también en otras plataformas: redes sociales, foros en línea, firmas de correo electrónico, etc.

Por ello, el logotipo desempeña un papel fundamental en la construcción del reconocimiento de la marca, la confianza y la lealtad.

Para maximizar el poder de creación de marca del logotipo, es necesario colocarlo, dimensionarlo y espaciarlo correctamente en la cabecera del sitio web. He aquí algunas reglas generales que hay que seguir:

  1. Enlace: Enlaza el logotipo con la página de inicio.
  2. Colocación: Colóquelo en la esquina superior izquierda siempre que sea posible (según la investigación de NNG). Si quieres colocarlo en el centro, asegúrate de que hay un enlace a la página de inicio en la esquina superior izquierda. También puedes valorar colocarlo en el centro, como en este sitio preconstruido de BeBaker 3.
  3. Tamaño: Dimensiona el logo para que cada detalle sea fácil de ver y leer. Los tamaños ideales son 250px x 100px para los logotipos rectangulares y 160px x 160px para los cuadrados, aunque todo depende del espacio que quieras dar a tus enlaces de navegación para respirar.
buena navegación web

Hacer el logotipo más grande que eso sin aumentar el tamaño de la fuente de la cabecera crearía demasiado espacio alrededor de la navegación. Así que se trata de un juego de equilibrio. Si optas por un logotipo más grande, asegúrate de que no crea tanto espacio que tus enlaces se ahoguen en él.

Consejo nº2: Hacer la cabecera adhesiva (sticky)

Los sitios web suelen tener mucho que compartir con los visitantes. Para no abrumarlos con contenidos que se leen como páginas de un libro o una revista, los diseñamos en secciones y con abundante espacio en blanco entre ellas.

Por eso, las páginas web pueden ser bastante largas.

Pero ese no es el problema. Mientras la información compartida sea relevante, los visitantes la recorrerán con gusto. El problema es el esfuerzo que hay que hacer para volver a la parte superior de la página cuando se ha terminado, sobre todo si se está viendo el sitio en un smartphone.

La cabecera adhesiva ofrece una solución a este problema. Además, no sólo se adhiere a la parte superior de la página. Observa cómo se transforma el título del sitio de una página de BePizza 5:

cabecera sticky

A medida que el visitante se desplaza por la página, la barra de navegación de diseño exclusivo se reduce. Aunque es mucho más pequeña, sigue siendo utilizable.

Como alternativa, puede utilizar una navegación pegajosa alineada a la izquierda, como lo hace el sitio preconstruido de Cottage 2.

El logotipo sigue estando en un buen lugar, los enlaces de navegación permanecen visibles en todo momento y no resta demasiado espacio al contenido principal.

Consejo nº 3: Destaca la página en la que se encuentra el visitante

destaca página actual

Otra forma de añadir un resalte sutil a la navegación sería colocar una línea de color debajo de la página actual.

En cambio, el sitio preconstruido de la residencia de ancianos utiliza un estilo de resaltado más prominente:

destacar zona actual

Para un sitio dirigido a usuarios mayores, colocar un bloque de color alrededor de los enlaces de la página actual tiene mucho sentido, ya que será imposible pasarlo por alto.

Consejo nº4: Usa solo iconos reconocibles

La iconografía puede ser un elemento útil en el diseño web. Normalmente, la emparejamos con etiquetas de texto para comunicar o explicar visualmente de qué se trata. Sin embargo, también podemos utilizar los iconos como elementos independientes en lugar de las etiquetas de texto.

Sin embargo, los diseñadores deben tener cuidado al utilizar iconos independientes en la navegación. Sólo hay un par de docenas de iconos universalmente reconocibles, la mayoría de los cuales no tienen cabida en la navegación.

Los que se pueden colocar ahí arriba se pueden encontrar más o menos en el sitio preconstruido de BeDietShop:

iconos reconocibles diseño

Aquí hay cuatro iconos de navegación:

  • Perfil de usuario para la configuración de la cuenta
  • Corazón para los gustos o los favoritos
  • Bolsa de la compra para la página de carros/bolsas
  • Lupa para la búsqueda

Hay otros iconos que se utilizan en la navegación, pero suelen estar en sitios más especializados (como los de comercio electrónico y los internacionales).

Los iconos pueden proporcionar un tremendo atajo de navegación. Sólo hay que tener cuidado con los que se utilizan. Si la mayoría de tus visitantes, si no todos, saben lo que son, podría dificultar el uso de tu navegación.

Consejo nº5: Organiza los mega menús para que sean fáciles de examinar

Los sitios web más grandes, en general, pueden tardar en organizarse. La navegación del sitio web debe reflejar también este cuidadoso sistema de organización.

El mega menú ha sido durante mucho tiempo el diseño de navegación utilizado en sitios web con más de una docena de enlaces y numerosos niveles de páginas. Y es eficaz, siempre que esté bien organizado.

Para organizar un mega menú, puedes utilizar tácticas de diseño similares a las que utilizarías para organizar tus páginas web:

  • Encabezados en negrita
  • Columnas para páginas relacionadas
  • Imágenes para destacar las páginas importantes

Puedes ver algunas de estas tácticas utilizadas en el mega menú de la tienda Betheme:

mega menu diseño web

Las cabeceras y las columnas facilitan a los visitantes la exploración de las distintas categorías y páginas disponibles.

Si un mega menú le parece demasiado engorroso para su sitio, no pasa nada. Los sitios web con miles de páginas pueden ser difíciles de mantener organizados, incluso con una estructura de mega menú.

Como alternativa, puede diseñar una navegación más tradicional de un solo nivel y luego convertir la página de búsqueda en una herramienta de navegación mediante el uso de filtros y clasificación, como hace BeClothingstore:

menus de navegación diseño web

Este tipo de «navegación» por el sitio web puede reducir el agobio o la ansiedad que siente la gente cuando se muestran demasiadas opciones a la vez.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Jonás López Mesa

Jonás López Mesa

Especialista en desarrollo web, SEO local y diseño gráfico

Entradas similares

Cómo prepararnos para la web inmersiva

Los sitios web tal y como los conocemos van a cambiar muy pronto. Los días de texto, imágenes e interacciones básicas en una ventana del navegador en 2D nos han servido bien, pero las experiencias virtuales, aumentadas y de realidad mixta son cada vez mejores. Los desarrolladores y diseñadores deben pensar más allá de la ventana del navegador y prepararse para un futuro inmersivo.