La navegación del sitio web puede hacer o deshacer la experiencia de tus visitantes. Intentar navegar por un sitio web sin una estructura lógica y bien definida es como caer en medio de un complejo laberinto sin mapa ni sentido de la orientación. Es desconcertante, frustrante y francamente desagradable: no es la experiencia de usuario que buscas.
Por otra parte, crear un sistema de navegación eficaz es mucho más fácil de decir que de hacer. Por eso hemos enumerado algunas sugerencias para ayudar a los usuarios a navegar. Servirán para sacar lo mejor de una mala situación.
Importancia de la navegación en el sitio web
Los visitantes no encontrarán tu blog, la página de registro de correo electrónico, las listas de productos, los precios, la información de contacto o los documentos de ayuda si tu sitio web carece de navegación. Empieza con la siguiente regla general: Un visitante debe poder navegar a cualquier página de tu sitio y encontrar lo que busca en tres clics.
La navegación es uno de los aspectos menos valorados de la experiencia del usuario y del diseño de sitios web. Sin embargo, no es así. Los visitantes del sitio web se mueven mucho. Ten en cuenta que quieres que la gente se quede en tu sitio web y navegue. Despierta su interés y sedúceles con grandes ofertas para que hagan clic en los enlaces.
Tipos de navegación web
La navegación web se clasifica en tres tipos. Si se utilizan correctamente, facilitan a tus visitantes la navegación por tu sitio web y les llevan al lugar deseado. Entremos en los detalles.
1. Navegación global del sitio web
Cuando se utiliza la navegación global, el menú y los enlaces de todas las páginas del sitio web son idénticos. Así es como se diseñan muchos menús modernos.
2. Navegación jerárquica
En la navegación jerárquica, los menús cambian según el contexto de cada página. La mayoría de los periódicos y sitios web centrados exclusivamente en el contenido utilizan la navegación jerárquica. Cuando abres un periódico, por ejemplo, el menú de cabecera suele incluir enlaces a las categorías de noticias más recientes.
3. Navegación en un sitio web local
La navegación en un sitio web local, a diferencia de la navegación jerárquica y global, se refiere a los enlaces internos que están incrustados dentro del contenido. Normalmente se presentan al usuario opciones del mismo nivel jerárquico o inferior, así como enlaces a otras páginas relevantes.
Los sitios web de revistas, por ejemplo, suelen utilizar enlaces para ayudar a los lectores a profundizar en el contexto de un artículo concreto. Si sacan a colación un incidente que ya han tratado anteriormente, enlazarán con ese artículo en lugar de explicarlo en detalle.
Buenas prácticas de navegación en el sitio web
¿Y si estás empezando desde cero con tu sitio web? Tal vez hayas decidido mejorar la navegación del sitio web para obtener mejores resultados. ¿Por dónde deberías empezar? La verdad es que la navegación del sitio web se alimenta de sí misma, manteniendo a los visitantes interesados en el sitio. Una sola omisión de las mejores prácticas de navegación web puede provocar una pérdida de conversiones.
Aquí tienes una hoja con las mejores técnicas de navegación web. Presta mucha atención a cada una de ellas para mejorar la experiencia del usuario:
1. Haz que el hipertexto sea fácil de encontrar
Uno de los problemas más comunes es permitir que el diseño se interponga en el camino de la usabilidad. Si los visitantes no pueden distinguir un hipervínculo del texto principal, tienes un problema. Hacer que el texto hipervinculado destaque del resto de la página, y no sólo cuando el visitante pasa el ratón por encima del enlace, es la forma más sencilla de hacerlo obvio. Ponlo en negrita, subráyalo o cambia el color de la fuente. Si quieres, puedes incluso convertir los enlaces de navegación de la cabecera en botones.
2. Haz que tu barra de navegación sea más fácil de usar
Muchos sitios web tienen muchos o pocos subtítulos en su barra de navegación de cabecera. Ten en cuenta no sólo lo que quieres que hagan los visitantes en tu sitio, sino también lo que podrían desear. Por ejemplo, puede que quieras que tus visitantes conviertan, pero también puede que quieran saber más sobre tu empresa o tu filosofía. Considera la posibilidad de reorganizar tu sitio web si el menú de navegación empieza a parecer desordenado. Incluye el encabezamiento principal, seguido de un submenú con enlaces adicionales organizados debajo.
3. Separar las barras laterales
Una barra lateral no debe ser del mismo color que el resto del contenido de la página. Debe ser evidente. Muchos sitios web lo consiguen utilizando el color. El diseñador puede optar por utilizar un color de fondo distinto para la barra lateral que para el cuerpo del texto. El espacio en blanco -o, más exactamente, el espacio negativo- funciona bien. Asegúrate de que haya suficiente espacio entre tu barra lateral y otros elementos.
4. Establece una ubicación estándar para tu navegación
La creatividad es admirable, pero no debe sacrificarse a expensas de la experiencia del usuario. Coloca la navegación donde sea probable que la gente la busque.
Hay una barra de navegación en la cabecera, una barra lateral y un pie de página. Utiliza esas zonas para ayudar a los visitantes a encontrar lo que buscan. Si quieres utilizar una navegación creativa, como la multimedia, deja claro que los visitantes pueden hacer clic.
5. Haz que todo sea claro y sencillo para el usuario
Imagen obtenida del usuario de Strikingly
El menú de navegación de un sitio web no está diseñado para trucos ingeniosos. Haz que tu diseño y tu texto sean lo más claros posible para que los visitantes sepan lo que estás diciendo. Hay una razón por la que las páginas "sobre nosotros" o "sobre mí" de la mayoría de los sitios web se llaman "Acerca de"; es distinto y fácil de recordar. Palabras sencillas como "contacto" y "servicios" pertenecen a la misma categoría.
6. No olvides incluir un pie de página
Imagen obtenida de la plantilla de Strikingly
Si utilizas WordPress, hay miles de temas con pies de página gordos disponibles. Aprovéchalos al máximo. No estás obligado a incluir docenas de enlaces, pero debes aprovechar el espacio disponible. En algunos casos, puedes simplemente repetir la barra de navegación de la cabecera. Los usuarios ya no tendrán que desplazarse hacia arriba para encontrar el enlace que buscan. La barra de navegación de cabecera también puede ampliarse. Deberían incluirse enlaces adicionales a páginas importantes de tu sitio web.
7. Alinea la navegación con las prioridades de la empresa
Aunque la experiencia del usuario es importante, también quieres dirigir a tus visitantes a las páginas de conversión y ventas más importantes. Aumentar el número de visitantes a esas páginas críticas puede tener un impacto significativo en los resultados de tu empresa. Mantén un equilibrio entre las páginas que pueden despertar el interés de tus visitantes y los enlaces que les guiarán a través de tu embudo. Incluye páginas como "Acerca de" y "Contacto", así como un enlace a tu blog. Luego, si vendes una aplicación móvil, incluye una llamada a la acción convincente, como "Descargar" o "Probar" si vendes un servicio SaaS.
8. Comprueba que la navegación del sitio web es apta para móviles
Imagen obtenida del usuario de Strikingly
Si la navegación del sitio web no funciona en el móvil, tienes un gran problema. Aprovecha los diseños y temas responsivos disponibles en los principales sistemas de gestión de contenidos. A veces, el menú de navegación del sitio web simplemente se ajusta. Otras incluye el mencionado menú hamburguesa. Asegúrate de que los enlaces son lo suficientemente grandes como para que la mano humana pueda pulsarlos fácilmente. Es fundamental recordar que algunas personas tienen pulgares más grandes que otras.
9. Guarda los botones para la llamada a la acción
Imagen obtenida del usuario de Strikingly
Hace diez años, la mayoría de los sitios web tenían botones de navegación en la cabecera. Hoy, sin embargo, todo ese desorden visual resulta torpe. Además, hace imposible destacar un enlace concreto en la navegación del sitio web. Esos botones sólo deben utilizarse para elementos procesables.
A los visitantes se les puede pedir que se unan a tu lista de correo electrónico, que vean una demostración de un producto o que programen una llamada. En cualquier caso, hazlo más llamativo y brillante que el resto de los enlaces.
Ejemplos de navegación del sitio web excelente
Como ya hemos dicho, no hay una forma "correcta" de diseñar una barra de navegación de un sitio web, siempre que permita a tus visitantes encontrar la información que necesitan y les anime a actuar, ya sea para comprar, donar o crear una cuenta. Echemos un vistazo a algunos de los mejores ejemplos de navegación web que hacen precisamente eso.
∙ Propa Beauty
Imagen obtenida del usuario de Strikingly
La barra de navegación horizontal de Propa Beauty está pensada para generar ventas o convertir a los visitantes en miembros. Su logotipo está situado a la izquierda. En el centro, hay un enlace a su página de archivo de productos. A la derecha, tres iconos representan un cuadro de búsqueda, un enlace a la página de inicio de sesión y un enlace al carrito de la compra, en ese orden.
∙ NWP
Imagen obtenida del usuario de Strikingly
NWP es otro sitio de comercio electrónico que utiliza una barra de navegación horizontal. La barra de navegación del sitio web de NWP, a diferencia de la de Propa Beauty, es un menú combinado. Cuando se carga la página, sólo son visibles los enlaces de navegación principales. Cuando pasas el puntero del ratón sobre "Tienda", aparece un menú desplegable con una lista de las distintas subcategorías de ropa disponibles en el sitio.
∙ The Shade Room
Imagen obtenida de The Shade Room
The Shade Room también utiliza dos tipos distintos de menús de navegación. En la parte superior de la página, aparece una cabecera horizontal estándar. A la derecha de la cabecera hay un botón de hamburguesa. Cuando pulsas este botón, aparece una interfaz de navegación secundaria a la derecha. Se comporta de forma similar a una caja de luz emergente, en el sentido de que bloquea parte del contenido mientras atenúa el resto del fondo. También incluye más enlaces de navegación para ayudarte a navegar por el sitio.
¿Cómo personalizo el menú de cabecera/navegación en Strikingly?
Un sistema de navegación bien organizado facilita a los visitantes la navegación por tu sitio web. Debes mantener esta sección de las plantillas de tu sitio web empresarial lo más despejada posible. Las páginas y secciones deben organizarse por orden de importancia, y las opciones de menú deben reducirse al mínimo. Esto permite a tus clientes centrarse únicamente en los mensajes más importantes de tu sitio web sin sentirse abrumados por las opciones. El menú de navegación de Strikingly es fácil de usar.
En Strikingly, utiliza el editor de Estilos para personalizar plantillas de sitios web y elegir un formato de barra de navegación. Tu menú de navegación se puede personalizar de varias maneras, incluyendo el diseño, el espaciado, el color y el tamaño de la fuente. Aquí tienes algunas de las muchas opciones de diseño disponibles.
Mantén tu barra de navegación en la parte superior para un aspecto más clásico, y si tienes un contenido más largo, considera la posibilidad de mantener el menú fijo en la parte superior para que permanezca ahí sin importar lo lejos que se desplace el visitante.
Imagen obtenida de Strikingly
Imagen obtenida de Strikingly
Si tu sitio web contiene una cantidad excesiva de gráficos, como en el caso de los portafolios en línea, puedes plantearte utilizar la navegación vertical en su lugar. Esto es especialmente útil para elementos de menú con títulos más largos o si tienes un gran número de entradas de menú.
Imagen obtenida de Strikingly
Conclusión
La mayoría de los sitios web tienen un número excesivo de enlaces en su barra de navegación de cabecera. A menudo lo damos por sentado. En lugar de limitarte a copiar otros sitios web porque tienen buen aspecto, determina qué elementos de navegación son más importantes para tu empresa y para tu público objetivo. Incluye enlaces a sitios web que sean atractivos para ambos grupos de personas.
Comprende que quieres que la gente aproveche tus ofertas y compre tus productos, pero puede que tu mercado objetivo no esté preparado. Los enlaces de navegación deben proporcionar razones adicionales para que permanezcan en tu sitio web. Utilizando instantáneas, grabaciones y pruebas A/B, puedes afinar la navegación del sitio web y asegurarte de que ofreces la mejor experiencia de usuario posible a tu público.
