La navegación de un sitio web es algo que muchos dejan para después de las páginas y el contenido. En una encuesta reciente, sólo el 50% de los usuarios de Internet fueron capaces de predecir dónde se encontraría el contenido relevante en base a la estructura de navegación estándar de un sitio web.
Si la mitad de los visitantes no pueden encontrar la página que están buscando, es un problema gigante de UX.
Conducirá a mayores tasas de rebote, menor tiempo en el sitio web y menores tasas de conversión.
Si estás administrando una tienda de comercio electrónico, una mala navegación también puede afectar negativamente a tus ganancias.
En este post, cubro la navegación del sitio web de la A a la Z. Esto significa que aprenderás las mejores prácticas, los diferentes tipos de navegación, y precisamente lo que debes hacer para crear la navegación perfecta para tu sitio.
¡Empecemos!
¿Qué es la navegación en el sitio web?
La navegación de un sitio web es el proceso de navegar por páginas, aplicaciones y sitios web en Internet. La tecnología detrás de esto se llama hipertexto o hipermedia.
Los hipertextos o medios de comunicación son páginas web basadas en texto que utilizan hipervínculos para conectarlas con otras páginas de Internet. Un hipervínculo es un enlace que lleva a su navegador web a una URL.
La URL indica el archivo al que el navegador debe acceder desde el servidor y lo descarga y renderiza los datos para que el usuario pueda verlo.
Los enlaces internos conducen a diferentes páginas en el mismo dominio. Los enlaces externos conducen a diferentes páginas en otro dominio, un sitio web y un servidor completamente separados.
La navegación del sitio web utiliza menús con enlaces internos que facilitan a los visitantes encontrar la página que están buscando. La buena navegación es un elemento esencial de un sitio fácil de usar.
¿Qué es un menú de navegación de un sitio web?
Un menú de navegación de un sitio web es un conjunto de enlaces que típicamente apuntan a páginas internas, que se organizan en un menú. La mayoría de los sitios web, incluyendo el nuestro, tienen un menú en la parte superior de su sitio web.
Esta sección se denomina «encabezamiento» de un sitio web en el diseño y desarrollo web. Algunas de las páginas más comunes enlazadas en estos menús son:
- Sobre nosotros.
- Blog.
- Contacto.
- Características.
- Planes/Precios.
El menú puede, por supuesto, también incluir enlaces que apuntan a otras páginas.
¿Cuál es la estructura de navegación de un sitio web?
La estructura de navegación de un sitio web describe cómo se organizan las diferentes páginas de su sitio y cómo se conectan entre sí.
Por ejemplo, a algunas páginas y contenidos sólo se puede llegar visitando una página específica. Los diseñadores y los desarrolladores frecuentemente planean la estructura de navegación cuando hacen un nuevo sitio web.
En este ejemplo, las páginas de «Acerca de», «Planes», «Contacto» y «Blog» están enlazadas desde el menú de inicio. Para acceder a las páginas de la Misión y del Equipo, tienes que visitar primero la página Acerca de.
¿Por qué es importante la navegación en un sitio web?
En la introducción de este post, aprendiste que el 50% de los usuarios de internet no son capaces de usar un menú estándar correctamente. Imagina que pocas personas encontrarían el contenido correcto sin ninguna navegación.
Con el enfoque correcto de la navegación y los menús, puedes llevar el porcentaje muy por debajo del 50%. Eso reducirá sus tasas de rebote, aumentará su tiempo promedio en el sitio, y conducirá a más tráfico, a clientes potenciales y a clientes.
Tipos de navegación en la web
Hay tres tipos principales de navegación en el sitio web:
Cuando se combinan correctamente, ayudan a tus visitantes a navegar por tu sitio web y a encontrar su destino sin problemas. Echemos un vistazo a cada una de ellas.
1. Navegación del sitio web mundial
Con la navegación global del sitio web, el menú y los enlaces son idénticos en todas las páginas del sitio web. Muchos menús modernos están diseñados de esta manera, incluyendo el menú de nuestro propio sitio aquí en Kinsta: si se desplaza hacia abajo de la página, el menú «sigue».
En la captura de pantalla, puedes ver que el nuestro es sencillo y fácil de entender . Es el mismo en todas nuestras páginas y lleva a algunas de nuestras páginas y contenidos más importantes.
Conocemos la información crucial que un cliente potencial quiere saber sobre una compañía de hosting antes de tomar una decisión. Por eso hemos facilitado a los clientes potenciales la búsqueda de nuestros planes, características y el contacto con nosotros. Y, para los usuarios existentes, tenemos la opción de ingreso para permitirles ingresar a su tablero MyKinsta.
Nuestro menú de pie de página también es global y destaca secciones esenciales de nuestro sitio web y algunos contenidos destacados.
Los menús globales son el estándar para la mayoría de las soluciones de CMS fuera de la caja.
Cada tema de WordPress te permite presentar diferentes tipos y áreas para los menús de navegación. Si necesitas más, puedes usar un plugin de menú para tener más opciones disponibles.
2. Navegación jerárquica del sitio web
La navegación jerárquica significa que los menús cambian dependiendo del contexto de cada página.
La mayoría de los periódicos y los sitios web basados puramente en el contenido presentan una navegación jerárquica. Por ejemplo, si visita la página principal de un periódico, normalmente verá enlaces a las categorías de noticias más importantes en el menú de cabecera.
Si el menú fuera global, seguiría siendo el mismo después de hacer clic en una categoría diferente. Pero debido a que es jerárquico, revela nuevos enlaces que conducen a subcategorías de la página de la categoría que visitamos.
En la página de New York Times’ Science, no se ve el menú de nivel superior en absoluto. En su lugar, ves enlaces a diferentes sub-secciones de investigación y artículos científicos.
Este cambio es lo que separa este menú de uno global regular que se encuentra en la mayoría de los sitios más pequeños.
3. Navegación del sitio web local
A diferencia de la navegación jerárquica y global, la navegación de un sitio web local se refiere a los enlaces internos que se incluyen en el propio contenido. Por lo general, se dan al usuario opciones en el mismo nivel de una jerarquía o un nivel más profundo, o enlaces para navegar a otras páginas pertinentes.
Un buen ejemplo son los sitios web de revistas, que a menudo utilizan enlaces para ayudar a los lectores a explorar el contexto más profundo de un determinado artículo. Si mencionan un incidente que han cubierto en el pasado, enlazan con ese artículo, en lugar de explicarlo en profundidad.
Pero no está reservado sólo para revistas y sitios web de noticias. Las tiendas de comercio electrónico dependen mucho de este tipo de menú de navegación para mostrar los productos de la misma categoría.
La vinculación interna también es un aspecto crucial del SEO en general, y más específicamente del SEO de WordPress, por lo que ahora es una práctica estándar para cualquiera que administre un sitio web.
Ejemplos de navegación en el sitio web
En lugar de hablar de teoría, vamos a hacer una inmersión profunda en algunos ejemplos. Cubriré un sitio web de noticias y el Twenty Twenty WordPress theme.
Página web de noticias: New York Times
A simple vista, podría parecer que el New York Times está usando principalmente un único menú de encabezado global de sus categorías.
Pero no termina allí. El NYT usa todo tipo de navegación a través de sus cientos de páginas de categorías y millones de artículos.
Tipos de navegación utilizados:
- Jerarquizada.
- Global.
- Local.
Veamos los diferentes encabezados de navegación de cada página.
Página web
En la sección del encabezado de su sitio web, incluye dos menús, un menú global expandible sobre el logo y un menú jerárquico debajo del encabezado. En esencia, es como una configuración de menú de cabecera y subcabecera.
Si amplías el menú de la hamburguesa de cabecera, se convierte en una barra lateral a la izquierda, donde hay un amplio margen con la mayoría de las resoluciones modernas.
No borra/utiliza una superposición para ocultar cualquier contenido en el sitio web.
Página de inicio (Móvil)
Examinemos la misma sección de cabecera en el móvil. La mayoría de los usuarios de Internet acceden a sitios web de noticias a través de sus teléfonos inteligentes, por lo que la experiencia móvil puede ser más importante que la de escritorio.
El menú de subtítulos de la categoría de noticias no forma parte de la página de inicio en el móvil. En su lugar, sólo tiene disponible la opción expandible.
Cuando se expande, se convierte en un menú de pantalla completa y cubre completamente todo el contenido de la página principal.
Incluye todas las opciones del menú principal de los ordenadores de sobremesa y los enlaces están ordenados por categorías.
Categoría Página
En la página de categorías, debajo del menú de hamburguesas de la cabecera, se ve un enlace a otro subconjunto de categorías.
Facilita a las personas que sólo están interesadas en un área específica dentro de un tema más amplio encontrar artículos que podrían estar más alineados con sus intereses.
Página de la categoría (Móvil)
En el móvil, estas páginas de categoría incluyen el mismo menú y estructura de la hamburguesa de cabecera que la versión de escritorio. El menú de cabecera secundario no está oculto en absoluto para facilitar la navegación y el descubrimiento de contenidos.
Otra razón podría ser que muchas experiencias móviles comienzan a través de la búsqueda o los medios sociales, en lugar de visitar directamente la página web del NYT.
Artículo único
En el caso de los artículos individuales, el encabezado flotante indica la sección en la que se encuentra actualmente, pero sólo cuenta con el menú global expandible (junto con el cuadro de búsqueda).
Artículo único (Móvil)
En los móviles, se mantiene una navegación limpia ya que el único menú es el de las hamburguesas.
Pie de página
El menú de pie de página del NYT es el mismo en la página principal, en las páginas de categorías y en los artículos individuales.
Pie de página (Móvil)
En el móvil, el menú de pie de página muestra sólo cinco elementos de menú, todos los cuales se expanden en sub-secciones una vez que se les hace clic.
Por ejemplo, si haces clic en la sección de Artes, podrás navegar a través de estas sub-secciones:
Como el sitio web utiliza JavaScript para cargar dinámicamente más contenido a medida que se desplaza hacia abajo, podría parecer que el pie de página no existe en absoluto.
Es un truco ingenioso que puede ayudar con el tiempo en el sitio y hacer que los lectores lean más artículos, pero hace que el sitio web sea un poco más difícil de navegar.
Diseño del contenido
Algunos podrían argumentar que la principal herramienta de navegación que usan los periódicos y blogs online no es sólo el menú. Es el propio diseño del periódico que proporciona la columna vertebral de navegación para el NYT y otros sitios similares.
Todos los elementos resaltados son cliqueables y conducen a diferentes páginas internas del sitio web del New York Times.
El diseño del contenido es otro elemento clave de la navegación del sitio web que implementan en sus páginas de inicio y de categorías.
El tema de WordPress Twenty Twenty
Otro año, otro tema predeterminado de WordPress. Esta vez, es Twenty Twenty, y vamos a bucear en las profundidades y ver qué ha cambiado en la navegación.
Examinaré si hay algo diferente en cómo los desarrolladores han decidido abordar los menús y la vinculación interna con esta nueva instancia de WordPress.
Menú de cabecera
Como cualquier tema estándar de WordPress, el nuevo lanzamiento oficial tiene un menú sin adornos en la sección de encabezado. Puedes seleccionar diferentes lugares de visualización y así es como se ve la opción de Menú Horizontal del Escritorio:
Por otro lado, la opción de Menú Expandido del Escritorio añadirá la posibilidad de expandir los enlaces del menú en una barra justificada en la parte superior derecha.
El área de contenido principal está teñida de un gris oscuro, lo que lleva el foco del usuario al menú de los enlaces.
Pie de página
En el pie de página, no hay enlaces para la navegación interna, excepto un simple enlace «Hacia arriba» que te lleva de vuelta a la parte superior de la página.
¿Qué es lo que hace que la navegación en el sitio web sea buena?
La buena navegación de un sitio web siempre se diseña teniendo en cuenta al usuario. Utiliza un lenguaje claro y fácil de entender, y enlaza con las páginas más importantes.
Hace uso de amplios espacios en blanco, cambios de color u otras técnicas de diseño para separarse claramente del contenido principal. Además, es más fácil de leer y usar en todos los dispositivos (móviles y de escritorio).
La navegación centrada en el usuario también significa que es contextual. Tiene en cuenta la experiencia y las expectativas del usuario. Esa podría ser una razón por la que los periódicos en línea todavía no pueden alejarse de su diseño de «multitudes».
En el contexto de la lectura de un periódico, eso es lo que esperan sus usuarios y clientes potenciales, que incluya sus extensos menús de categorías y subcategorías.
En la siguiente sección, cubriré los fundamentos de cómo crear una buena navegación para su sitio.
8 Principios para mejorar la navegación en el sitio web
IIncluso si eres un principiante completo, serás capaz de fijar la navegación de tu sitio web siguiendo los siguientes consejos.
1. Planifica la estructura de tu página y la navegación
Antes de que empieces a escribir el contenido de tu sitio web, planifica cómo se verá la estructura de tu página y la navegación.
La planificación es una parte esencial del proceso de proporcionar a tus visitantes una navegación satisfactoria. Puedes utilizar un creador de mapas de sitio para ayudarte a crear rápidamente maquetas de lo que quieres que sea la experiencia de tu sitio web.
Un ejemplo de una buena herramienta de mapa de sitio es GlooMaps.
Puedes crear tantos documentos como necesites de forma gratuita. Cada uno de ellos tendrá una URL única que podrás compartir para recoger comentarios y dejar que otros lo editen. Una vez creado, tu URL estará disponible durante 14 días a menos que se vuelva a visitar. Cada nueva visita extiende la vida del enlace por otros 14 días.
GlooMaps no es la única herramienta que puedes usar, hay muchas más como Octopus, VisualSitemaps, Creately, sólo por nombrar algunas.
2. Seguir las normas establecidas
No intentes reinventar la rueda. La navegación de un sitio web es más sobre la usabilidad que sobre la creatividad.
Para los elementos de diseño esenciales como dónde colocar el menú y cómo indicar que es expandible, siga los estándares conocidos.
Tres rayas horizontales, o el signo de «hamburguesa» ☰, es uno de los iconos más reconocibles para identificar un menú expandible. El otro es los tres puntos que crean una línea horizontal.
Si intentas ser creativo y desarrollar un icono personalizado, lo más probable es que muchos visitantes no entiendan el propósito de tu diseño y tengan dificultades para encontrar tu menú.
3. Usa el vocabulario de tus usuarios
En lugar de limitarse a enlazar con las mismas páginas de siempre, utilizando la terminología estándar de desarrollo web, o una versión demasiado creativa, utiliza un lenguaje que se acerca más a lo que tus usuarios utilizan, buscan y desean.
Este enfoque es beneficioso tanto para el SEO como para la usabilidad. Crea páginas que reflejen lo que tus usuarios están buscando en línea.
Luego puedes enlazar a esas mismas páginas utilizando las mismas palabras y frases que ayudan a los usuarios a encontrar su sitio web en Google.
4. Usar menús de respuesta
Dado que más del 52% de todo el tráfico en línea es ahora móvil, el diseño de respuesta/primero móvil se ha convertido en una necesidad absoluta.
En lugar de menús que continúan fuera del marco del navegador web móvil o demasiado desordenados, asegúrate de implementar menús móviles expandibles.
Se ha convertido en un estándar de la industria por una razón. Los menús horizontales con texto diminuto son difíciles de leer, hacer clic y usar correctamente en el móvil.
La buena noticia es que los mejores temas de WordPress vienen con un diseño sensible y menús sensibles por defecto. A menos que estés diseñando tu sitio de WordPress desde cero, WordPress te tiene cubierto aquí.
5. Aprovecha tu menú de pie de página
Los lectores que siguen leyendo y desplazándose hasta el fondo de tu sitio web están más comprometidos que el usuario medio. Aprovecha eso y usa el espacio al final de cada página para resaltar el contenido valioso.
Puesto que el pie de página no se está convirtiendo en un espacio «por encima del pliegue», puedes ser más detallado e incluir múltiples categorías, e incluso resaltar las páginas fundamentales o los artículos.
Como ejemplo, mira cómo manejamos nuestro pie de página en esta misma página. Cubrimos las páginas de características esenciales, nuestra empresa, desglosamos nuestros recursos, y más.
El pie de página te permite resaltar el contenido que «no cabía» en el encabezado.
6. Usar el color y el espacio en blanco para separar la navegación de otros elementos
Utiliza el color, las fuentes y los espacios en blanco para separar los menús del contenido principal y las barras laterales. Deja claro dónde comienza y termina la navegación.
No importa qué idioma uses en tus menús, o a qué páginas se enlaza si los visitantes de su sitio web no pueden encontrar el menú en primer lugar.
7. Evitar los menús desplegables
Para la mayoría de los sitios web (no todos), los menús desplegables no son necesarios ni útiles. Cuando los usuarios ven un enlace en un menú, se supone que se puede hacer clic en él. A menos que el diseño lo separe de los enlaces sobre los que se puede hacer clic, puede llevar a confusión.
Tener demasiados enlaces en el menú principal también puede afectar negativamente a la usabilidad de tu sitio web.
La implementación de la navegación jerárquica y local en lugar de los menús desplegables puede conducir a un flujo de usuarios más fluido. También permite a los usuarios interactuar con varias páginas y pasar más tiempo en tu sitio web, en lugar de navegar a través de una lista gigante de enlaces.
8. Aplanar la estructura
Si quieres facilitar al máximo a los visitantes la exploración de todas las páginas de tu sitio web, mantén una estructura de navegación lo más plana posible.
En lugar de enlazar con un puñado de páginas de su página de inicio, y luego expandirse con cada vez más subpáginas y categorías, mantenga las cosas simples.
Asegúrate de enlazar a categorías significativas desde tu página de inicio, y enlaza a una sola capa de subcategoría o a páginas de artículos individuales desde allí.
Hay pruebas de que aplanar la estructura de esta manera tiene un efecto positivo en el SEO y puede llevar a los enlaces de Google. ¡Así que no dejes que la estructura de tu sitio web se vuelva demasiado desordenada!
Tendencias del menú de navegación del sitio web en 2024
Aunque las tendencias más amplias diseño web de los últimos años incluyen cosas como elementos de diseño 3D e incorporar fotografías hechas a medida en diseños creativos, los menús no tuvieron un año muy emocionante.
Pero eso no significa que nada haya cambiado. Aquí está nuestra rápida mirada a algunas de las tendencias de menú más cruciales de los últimos años.
Categorías ampliables en los menús de los móviles a pantalla completa
Uber y otras corporaciones gigantes con un diseño renovado y moderno, han actualizado sus menús para ser más utilizables.
Un problema para estas empresas es que tienen tantos productos y categorías diferentes que puede ser imposible incluirlos en un solo menú de manera sensata.
Esto conduce a menús de móviles claros y categorizados que se pueden ampliar, en lugar de una lista interminable de enlaces.
Menús de cabecera flotante
Tal vez la tendencia universal de los menús en los últimos años es el menú de cabecera flotante.
Un menú de cabecera flotante es un menú que se adhiere a la parte superior de la ventana de su navegador web mientras se desplaza hacia abajo de la página (como el que usamos para kinsta.com). Típicamente es parte de una sección de encabezado que incluye un pequeño logo y tal vez una barra de búsqueda también.
Es difícil argumentar en contra, ya que tener acceso constante a un menú hace la navegación interna mucho más fácil. Este tipo de menú se incluye en muchos temas de WordPress y la tendencia no muestra signos de detenerse.
Superponer menús desplegables en el escritorio
Algunos de los consejos más básicos sobre la navegación en el sitio web es mantenerse alejado de los menús desplegables. Y por una razón.
Pero eso no significa que sean inherentemente terribles. Los menús desplegables son difíciles de implementar de forma que tengan sentido en la pantalla del ordenador.
Con una superposición de colores en el contenido principal, pueden forzar el 100% de la atención del usuario al menú. También tiene mejores opciones para las categorías expandibles que mostrar más enlaces en el aire.
Estos factores se han unido para convertirlo en una tendencia creciente en 2019. De hecho, muchos sitios web y plantillas innovadoras incluyen menús desplegables superpuestos en el escritorio.
Resumen
Este post debería haberle dado una clara comprensión de lo que es la navegación en un sitio web y algunos de sus puntos clave.
La navegación de un sitio web siempre debe estar enfocada en la simplicidad, claridad, en lugar de colores intensos y diseño creativo. Como la navegación y los menús de su sitio deben tener en cuenta tanto a los usuarios de escritorio como a los móviles, las cosas pueden ponerse más difíciles y contratar a un desarrollador web puede ser una buena decisión.
Siempre trata de seguir las mejores prácticas de diseño de menú de la página web para asegurar que tus visitantes y los motores de búsqueda puedan navegar por tu contenido fácilmente.
La utilidad y la claridad seguirán siendo prioridades en el futuro. Así que si puedes dominar el lenguaje de tus usuarios y crear una estructura que tenga sentido para ellos, serás capaz de probar tus menús en el futuro.
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta