Navegación del sitio web – Cómo hacerla eficiente y clara

Navegación y sus elementos

En un mundo ideal, cada usuario comenzaría en la página de inicio y seguiría el camino planificado hacia la conversión.

Sin embargo, la realidad es completamente diferente, y los usuarios visitan cualquier página del sitio web. La página de inicio rara vez es la más visitada. Si observamos la distribución del tráfico total (100%) en la tienda en línea, solo alrededor del 30% de las visitas serían en la página de inicio en sí, y el 70% restante de las visitas a otras páginas (categorías, productos, contactos, etc.). La navegación diseñada eficientemente y todos sus elementos juegan un papel central en el viaje del usuario en un sitio web o una tienda en línea. Por lo tanto, es necesario entender la conexión entre la navegación y sus elementos con la experiencia del usuario.

Los elementos de navegación eficientes deben:

• ser visibles,
• comunicar la posición actual del usuario en el sitio web,
• poder dirigir al usuario,
• ser fáciles de usar.

Elementos básicos de navegación

Menú de navegación

Los usuarios generalmente imaginan la navegación principal en el sitio web o en una tienda en línea como un menú horizontal en la parte superior de la página – en el encabezado. Una ventaja principal de este tipo de navegación es que cumple con la forma en que los usuarios escanean el sitio web – de arriba a abajo, de izquierda a derecha. Es una buena solución para un menú de navegación o navegación en general, como servicios o categorías de productos básicas.

Encabezado pegajoso

Un encabezado pegajoso se utiliza comúnmente para traer el encabezado (secciones primarias con elementos de navegación) a la atención del usuario. Este encabezado siempre está en la misma ubicación y es visible incluso mientras se desplaza la página. Esto permite acceso rápido a elementos de navegación y búsqueda sin necesidad de desplazarse hasta la parte superior de la página. Aumenta la probabilidad de que los usuarios utilicen estos elementos y vean más productos.

Página de inicio y logotipo

Una de las pocas cosas en las que los usuarios pueden confiar es que cada sitio web tiene una página de inicio (inicio), que se percibe como el punto de partida principal que proporciona información e introducción sobre lo que el usuario encuentra en el sitio. Encontrar esta información es particularmente significativo para los visitantes que ingresan al sitio web desde búsqueda orgánica o publicidad y van directamente a otras páginas de nivel inferior. Entonces, generalmente quieren visitar la página de inicio para descubrir qué pueden ver en el sitio web y qué tipos de páginas hay.

Si comienza a rastrear el comportamiento del usuario, descubrirá que a menudo regresan a la página de inicio cuando se pierden, han terminado de explorar el sitio o están interesados ​​en más información sobre la tienda.

Barra lateral

Dependiendo del tipo de contenido principal, se encuentra en el lado izquierdo o derecho de la página. La barra lateral se utiliza a menudo para apoyar la navegación principal. Cuando el usuario va a la categoría de nivel superior, en la barra lateral verá sus subcategorías.

Los elementos de navegación en la barra lateral son una solución excelente para tiendas en línea o sitios web con una cantidad considerable de información que necesita ser estructurada. Además de subcategorías, la barra lateral proporciona suficiente espacio para filtros de productos.

Pie de página

La parte inferior de cada sitio web o tienda en línea se llama pie de página. Dependiendo del tipo de contenido, tienden a tener diferentes formas. Sin embargo, este espacio útil a menudo se subestima ya al planificar el diseño del sitio web. Asumimos que los usuarios no prestan mucha atención a la parte inferior de la página. Sin embargo, la verdad es que en realidad sí lo hacen. Este elemento, por lo tanto, a menudo no cumple su potencial. Si un usuario llega al final de tu sitio, probablemente esté interesado en tu contenido.

Por ejemplo, los usuarios generalmente visitan el pie de página cuando terminan su visita (leer el artículo o buscar más contenido), o desplazan el contenido hasta el pie de página intencionalmente porque esperan información específica, como detalles de contacto.

Navegación por migas de pan

La navegación por migas de pan (breadcrumbs) es un conjunto de enlaces de navegación organizados jerárquicamente que aparecen en la parte superior de la página, principalmente directamente debajo de la navegación principal. La navegación por migas de pan es un elemento de navegación típico de las tiendas en línea. Es uno de los pocos elementos de navegación que indica la posición actual del usuario en el sitio web.

Las migas de pan son un elemento de navegación importante para todos los usuarios. Sin embargo, si tuviéramos que reducir este grupo, nos enfocaríamos principalmente en usuarios que llegaron al sitio web de una manera diferente a través de la página de inicio (búsqueda orgánica, anuncios, enlaces compartidos) o utilizaron la búsqueda dentro del sitio en la tienda en línea.

Botones y enlaces

Los botones e hipervínculos son elementos de navegación comunes que el usuario encuentra en todas partes. Sin embargo, la pregunta sigue siendo si sabemos cuál usar y cuándo usarlo. Los botones generalmente definen acciones claras que llevan al usuario alrededor del sitio web o lo conducen a lograr un objetivo específico (conversión).

Podríamos simplificarlo y decir que los botones definen acciones que de alguna manera afectan al sitio web en sí o a la tienda en línea. Por ejemplo: Crear una cuenta de usuario, enviar un pedido, confirmar una transacción, etc. Por el contrario, los enlaces se utilizan para acciones menos significativas que no afectan el comportamiento del sitio y principalmente realizan una tarea de navegación.

• Un botón siempre debe parecer un botón. Debe llevar un llamado a la acción claro en forma de texto rodeado por un marco suficientemente grande. Los botones a menudo también contienen iconos que reflejan la acción tomada.
• Sé consistente. Los botones y enlaces que realizan la misma tarea deben verse igual en todas partes de la página.
• Nunca uses botones con el mismo aspecto para acciones diferentes. Si necesitas varios botones uno al lado del otro, destaca su importancia y jerarquía. Por ejemplo, el botón estándar se refiere a una acción principal, un botón de texto con marco (comúnmente denominado “botón fantasma”) representa una acción secundaria, y el enlace de texto es solo la tercera opción.
• El color y el nombre del botón (acciones tomadas) tienen un impacto eterno en la experiencia del usuario. Eso es especialmente cierto en el caso de la toma de decisiones sí/no. Por ejemplo:

• Los hipervínculos se encuentran entre los elementos de navegación más utilizados naturalmente en sitios web. Sin embargo, para mantener su usabilidad, deben cumplirse al menos las siguientes dos condiciones: los enlaces siempre deben estar claramente separados visualmente del otro contenido (por ejemplo, con color) y siempre deben estar subrayados.

Menú de navegación

Búsqueda vs. menú de navegación

Podríamos decir que además del menú de navegación, la búsqueda es uno de los elementos de navegación más importantes y, por lo tanto, merece atención. Sin embargo, la pregunta sigue siendo:

“¿Por qué y cuándo los usuarios prefieren usar la búsqueda sobre el menú de navegación?”

En general, es probable que los usuarios prefieran la búsqueda sobre el menú de navegación si saben que un sitio web o una tienda en línea puede satisfacer sus necesidades con una oferta suficientemente extensa. Simplemente, si saben que pueden encontrar el producto o categoría que les interesa en la tienda.

Esperan que cuando ingresen una consulta de búsqueda, obtendrán resultados que los acercarán a su objetivo. La investigación muestra que aproximadamente el 60% de los usuarios abandona un sitio web o una tienda en línea si no encuentran lo que buscan.

La medida en que el usuario prefiere la búsqueda sobre el menú de navegación depende de varios factores. Sin embargo, depende principalmente del tipo de usuario (visitante) y del segmento del sitio web.

Impacto de la búsqueda en varios segmentos

Un ejemplo típico del uso de búsqueda es el segmento de Libros y Juegos, donde solo el 20% de los usuarios (del 100% total de tráfico en la tienda en línea) utilizan la función de búsqueda en promedio. Sin embargo, la búsqueda en este segmento representa hasta el 45% de la facturación. Otra categoría es el segmento B2B, en el cual hasta el 90% de todas las compras provienen de la búsqueda.

Si está interesado en el impacto de la búsqueda en segmentos individuales y cómo optimizarla para aumentar sus ventas, descargue nuestro estudio gratuito.

Búsqueda y usuarios

Si nos enfocamos solo en la página de inicio, vemos que hasta el 40% de los usuarios en el tráfico general prefieren usar la búsqueda sobre el menú de navegación.

Si un usuario que llega a la página de inicio decide continuar evitando por dar o navegando el menú de navegación depende del tipo de usuario (cliente) que se trate.

Cada usuario que visita la tienda en línea se comporta de manera diferente y tiene motivaciones diferentes. Afortunadamente, podemos dividir a los usuarios en 3 tipos principales de visitantes para generalizar esto.

1. Visitantes enfocados en comprar productos. Saben exactamente qué producto quieren y qué propiedades y parámetros debe tener, y su único objetivo es encontrar el producto lo más rápido posible y pedirlo. Para este tipo de usuario, la búsqueda eficiente y el proceso de compra optimizado son los momentos clave.
2. Visitantes investigadores. Estos clientes más o menos saben lo que quieren. Su objetivo es obtener la mayor cantidad de información posible sobre los productos y solo entonces decidir su compra. Su toma de decisiones tarda más, pero a menudo cambian su enfoque a la compra, y la búsqueda optimizada puede influir en su comportamiento.
3. Visitantes que “navegan”. A menudo visitan sus tiendas en línea favoritas para descubrir qué hay de nuevo sin la intención de comprar. Son curiosos, les gusta ver contenido y pensar en qué podrían comprar en el futuro.

Sin embargo, los usuarios normalmente no conocen el nombre exacto de la categoría, pero saben qué productos contiene. Entonces tienden a utilizar la búsqueda para acceder a cualquier detalle de producto (que está en la categoría deseada o similar) con la intención de encontrar el producto necesario a través de las migas de pan.

• El campo de búsqueda debe ser fácilmente accesible y siempre visible.
• Debe ser rápido y responder a cualquier cambio en la consulta.
• La autocompletación debe mostrar resultados desde el primer carácter escrito.
• La búsqueda debe reconocer automáticamente la tolerancia a errores tipográficos, diferentes formas de palabras y conjugación.
• Las variantes de productos deben mostrarse ya en la autocompletación.
• Debe reconocer y recomendar sinónimos, y sugerir frases.
• Debe cubrir todo el contenido del sitio web (productos, categorías, etiquetas, páginas de texto, artículos, etc.).
• Los filtros relevantes (facetas) para el grupo de resultados actual deben estar disponibles en los resultados de búsqueda.

Por qué la regla de los tres clics es una tontería

La regla de los tres clics sugiere:

“El acceso a cualquier página de un sitio web no debe tomar más de 3 clics (o toques en pantalla táctil). Alternativamente, la información más importante debe ser accesible en 3 clics.”

Esta regla asume que los usuarios se sienten frustrados y no completan tareas que requieren más clics.

Sin embargo, es una heurística no oficial que no está respaldada por ningún dato. No obstante, los diseñadores a menudo aplican esta regla al crear navegación de sitios web, buscar información, rellenar formularios, etc.

Contar clics no es una métrica significativa por varias razones:

1. El número de clics necesarios depende no solo del diseño sino también de la complejidad de la tarea. Por lo tanto, no podemos definir un clic como un valor absoluto específico.
2. No todos los clics son iguales, algunos pueden tener tiempos de espera más largos, por ejemplo (si se carga una nueva página), y otros pueden ser inmediatos (expandir un acordeón).
3. El número de clics no afecta el comportamiento del usuario. En el mundo real, los usuarios no tienen que entenderlo todo y a menudo cometen errores. Por lo tanto, contar clics pierde significado.

Cómo optimizar el menú de navegación

No ocultes la navegación si no es necesario.

Al diseñar la navegación, no olvides que los usuarios siempre deben ver lo que es más importante para ellos. Esta simple regla se aplica no solo a la navegación, sino también a otro contenido.

Al diseñar la navegación, los diseñadores a menudo quieren ahorrar la mayor cantidad de espacio posible y tienden a utilizar elementos de navegación receptivos y móviles como el menú de hamburguesa, incluso cuando no es necesario y corren el riesgo de que los usuarios no utilicen la navegación en absoluto. Debemos tener en cuenta que los usuarios no pueden utilizar lo que no ven. Si ocultamos la navegación, simplemente alargamos y complicamos su viaje.

Coloca la navegación y los elementos de navegación donde los usuarios esperan encontrarlos.

Los usuarios a menudo asumen un lugar para encontrar la navegación. Hazles más fácil la navegación y coloca los elementos en el lugar que esperan – en el encabezado, barra lateral o pie de página.

Separa visualmente la navegación del contenido

La navegación no debe parecer el resto del contenido, debe estar separada y destacarse. Utiliza espacios en blanco, juega con la tipografía y, por supuesto, utiliza color. El objetivo es definir claramente dónde comienza y termina la navegación.

Evita diseñar elementos como botones

Los botones tienen su función específica, que ya hemos discutido. El uso de botones como elementos de navegación disrumpe la jerarquía de elementos de navegación en la página y empeora la legibilidad general de la navegación.

Utiliza nombres de elementos claros y descriptivos

Los nombres de los elementos de navegación pueden influir en la toma de decisiones del usuario al navegar por un sitio web. Los nombres deben ser inequívocos, inconfundibles y concisos. Deben nombrar exactamente el destino al que conducen y, sobre todo, utilizar un lenguaje comprensible. Adherirse a reglas semánticas es crítico en este proceso ya que garantiza que el nombre de cada elemento refleje precisamente su propósito y destino, asegurando una experiencia de navegación intuitiva para los usuarios. Al diseñar los nombres de los elementos de arquitectura de información y navegación, a menudo necesitarás poder tomar las decisiones correctas.

Limita el número de elementos de nivel superior

Limita el número de elementos de navegación de nivel superior al mínimo posible. Los estudios de mercado a menudo mencionan el número mágico siete como una opción ideal (máx. nueve). Otro enfoque para determinar el número máximo de elementos de nivel superior es que deben ocupar solo 50-70% del espacio en el sitio web. El resto debe reservarse para productos de temporada, promociones o productos nuevos.

La navegación del sitio web debe minimizar la necesidad de interacción, es decir, el esfuerzo que los usuarios tienen que hacer al interactuar con el sitio web. Hay dos buenas razones para limitar el número de elementos de nivel superior en la navegación:

• Permitirá a los usuarios entender mejor la interfaz de navegación. Cuantos más elementos de navegación tengas, más difícil es para los usuarios recordar y procesar la información.
• Una navegación simple y clara con menos elementos tiene un impacto positivo en la optimización de motores de búsqueda.

Sin embargo, como ya he mencionado, no todos los usuarios esperan llegar a la página de inicio después de hacer clic en el logotipo, por lo que es aconsejable agregar un elemento llamado “Inicio” a la navegación principal. La información de contacto es otro elemento de navegación esencial y suele ser una de las páginas más visitadas.

Los visitantes suelen utilizarla para verificar la credibilidad de un negocio o empresa, para saber dónde se encuentra, si hay tiendas físicas y si, por ejemplo, están cerca de ellos.

Mantener la estructura concisa

No solo el número de elementos en la navegación, sino también su orden es crucial. Al diseñar la navegación, tiene sentido ordenar los elementos por prioridad. Ve de la prioridad más alta a la más baja. Sin embargo, también ten en cuenta el Efecto de posición serial, según el cual los elementos más eficientes son los que se encuentran al principio y al final (nuestro cerebro puede manejarlos mejor que los elementos en el medio de la navegación). Por lo tanto, los elementos al principio y al final de la navegación se vuelven más significativos para los usuarios.

No olvides la búsqueda

La búsqueda es uno de los elementos de navegación más importantes. Los usuarios esperan que esté ubicada justo cerca de la navegación principal, donde actúa como un elemento de navegación secundaria. Si ocultas o colocas la búsqueda de forma inconveniente, podrías perder una parte significativa de los ingresos. Hasta el 40% de los visitantes utilizan la búsqueda en la página de inicio, y estos suelen ser usuarios que saben lo que quieren y están decididos a comprar.

No uses menús desplegables

Los menús desplegables son una solución desafortunada para mostrar elementos subnivel en el menú de navegación. Principalmente porque el número de elementos suele cambiar y crecer rápidamente. Entonces a menudo sucede que los elementos no se muestran correctamente (simplemente no caben en la pantalla). Otro inconveniente de los menús desplegables es que no permiten una navegación conveniente de subniveles adicionales.

Este tipo de diseño también te permite utilizar el espacio de forma más eficiente, por ejemplo, para mostrar productos o anuncios, y mejora la experiencia del usuario (más espacio para elementos, una estructura y jerarquía clara).

Analiza cómo los usuarios están navegando por los elementos del menú

El proceso de diseño de la navegación no termina con su implementación. Es crucial validar si la navegación diseñada es práctica para los usuarios. Solo puedes hacerlo siguiendo su comportamiento usando varias herramientas y métodos.

Incluso antes de la implementación, puedes verificar la funcionalidad de la navegación diseñada usando un Método de clasificación de tarjetas o un simple árbol de pruebas.

Una de las herramientas más comunes es Google Analytics (sección Comportamiento/Flujo de comportamiento).

La interacción de los usuarios con la navegación se puede evaluar eficientemente usando herramientas como Hotjar, Smartlook o Clarity. Estas herramientas te permiten recopilar datos cuantitativos (clics en la página, movimiento del ratón o desplazamiento) y datos cualitativos (grabaciones de video). Basándote en estas herramientas y metodologías, puedes ayudar a mejorar el estado actual de tu navegación y su estructura y dar pasos adicionales para mejorarla. Por ejemplo, cambiar el orden de los elementos en el nivel principal, editar sus nombres, etc.

Para cualquier análisis, es bueno usar más métodos y no confiar en resultados de una sola fuente. Ninguno de ellos puede ser tan preciso como esperarías y ninguno te dirá por qué los usuarios se comportan como lo hacen (puedes aprender las consecuencias, pero no la causa).

No optimices el menú basándote solo en la página de inicio

Por defecto, la página de inicio representa aproximadamente el 30% del total de visitas al sitio web o tienda en línea. El 70% restante del tráfico proviene de otros sitios a los que los usuarios llegan, por ejemplo, búsqueda orgánica, publicidad, redes sociales, etc. Por lo tanto, es importante que la navegación sea intuitiva en cada subpágina. La forma más fácil de lograrlo es identificar las subpáginas más populares, por ejemplo, usando Google Analytics y optimizar la navegación según el comportamiento del usuario en ellas.

Menú de navegación móvil receptivo

Ya existen patrones y estándares comprobados para la navegación móvil receptiva. Se pueden resumir en dos palabras: “icono de hamburguesa”. Es un icono que consta de tres líneas horizontales cortas que representan el menú principal. Por defecto, aparece en la esquina superior derecha del sitio web móvil y al hacer clic en él se mostrará el menú de navegación.

Aunque el icono de hamburguesa se ha convertido en el estándar dominante, agregar la palabra “Menú” sigue ayudando a los usuarios a navegar y entender mejor el significado de esta navegación oculta.

Los diseñadores a menudo usan el menú móvil innecesariamente, intentando mantener el diseño lo más receptivo posible. La clave es mantener los elementos de navegación esenciales visibles el mayor tiempo posible y no tener miedo de combinarlos con el menú de hamburguesa.

Por ejemplo, puedes mantener el cuadro de búsqueda visible, y mostrar el botón CTA para la acción más importante, y algunos otros elementos, como la información de contacto, pueden permanecer ocultos en el menú móvil. Asegúrate de que el número de teléfono en la vista móvil se convierta en un texto clickeable.

• Tiene elementos de navegación suficientemente grandes, que son fáciles de tocar. Los elementos fáciles de tocar deben tener al menos 9 mm² de ancho. Las áreas grandes suelen ser cómodas para la mayoría de los usuarios.
• Todas las etiquetas y textos deben ser legibles. El tamaño de texto de 16 píxeles debería ser suficiente en la mayoría de los casos – esa es la configuración estándar. En el caso de tamaños de fuente más pequeños, corre el riesgo de empeorar la experiencia del usuario.

Las opciones en el menú de hamburguesa dependen del tipo y complejidad del sitio web. Un menú simple con los elementos mostrados es suficiente en un sitio web de presentación ordinario. En sitios web con mucho contenido e información o tiendas en línea, incluso el menú de hamburguesa puede ser más complejo.

Está estructurado, generalmente contiene elementos desplegables para mostrar niveles inferiores, y a menudo se usa en combinación con otros elementos de navegación móvil.

Un elemento de navegación móvil típico, que complementa el menú de hamburguesa, es la barra de navegación inferior.

Esta barra aparece en la parte inferior de la pantalla y contiene elementos de navegación clave o botones. En tiendas en línea, puede ser un carrito de compras, productos favoritos, y más.

En sitios web o aplicaciones, estos son los elementos para acciones frecuentes y repetidas (como movimientos de cuenta o envío de dinero en una aplicación bancaria).

Conclusión

La navegación debe ser, ante todo, usable. Solo entonces, creativa. Intenta seguir los principios rectores descritos anteriormente, y tus clientes siempre encontrarán lo que necesitan. La usabilidad y la claridad son prioridades que seguirán siendo las mismas en el futuro.

Preguntas frecuentes