Ejemplos y consejos para su tienda online

Un elemento central de su tienda online es su navegación. ¿Es intuitivamente comprensible para el usuario y le ayuda a orientarse en el sitio web? He recopilado muchos ejemplos de menús de navegación exitosos y le doy consejos para el diseño de los menús de su tienda.

¿Por dónde? Un menú claro proporciona orientación en la tienda online y sirve de guía para los usuarios.

Resumen: ¿Qué es lo que realmente pertenece a la navegación?

El tema de la navegación web es bastante complejo y podría escribir toda una serie de entradas de blog de navegación aquí para iluminar debidamente cada elemento individual. En cambio, quiero concentrarme en el diseño de la navegación principal (menú principal), porque esto es esencial para la usabilidad de su tienda online.

Sin embargo, una visión general de los elementos de navegación que se encuentran en las páginas web no puede hacer ningún daño de antemano:

menú principal

El menú principal es el elemento de navegación más importante de su sitio web. Refleja su contenido y lo hace accesible a los usuarios. Para más información, haga clic aquí y vaya directamente a la sección del menú principal.

navegación con migas de pan

Usted conoce las migas de pan del cuento de hadas «Hänsel und Gretel»: muestran a los usuarios su posición actual en la página web y les ayudan a encontrar su camino en el gran bosque de navegación y a volver a su punto de partida (la categoría superior).

función de filtrado

Con la ayuda de filtros, los usuarios pueden reducir aún más los resultados (por ejemplo, en las páginas de resumen de productos).

Buscar

La función de búsqueda también permite a los usuarios navegar por su tienda y encontrar los productos deseados. Lo que hace que una buena búsqueda de tiendas sea tan especial se explica en el artículo Vom Suchen und Finden im Online Shop: Tipps für eine userfreundliche Suchfunktion.

paginación de páginas

Otra palabra clave importante es la paginación de páginas, que es particularmente importante para las páginas de productos. Lea nuestros completos consejos de SEO para el uso de la paginación de páginas.

Navegación paso a paso

En el proceso de pedido en su tienda, probablemente también dependa de una navegación paso a paso dividiendo el proceso de compra en varios pasos. Ya he descrito en este artículo lo que hay que tener en cuenta en el proceso de compra desde el punto de vista de la usabilidad.

Enlaces internos

Los enlaces internos también forman parte de la navegación: permiten a los usuarios acceder a otras subpáginas relevantes. Julian explica más sobre el uso de enlaces internos bajo aspectos de SEO en su artículo sobre enlaces internos y SEO.

Nube de etiquetas

En blogs o revistas, las nubes de etiquetas son útiles porque muestran al usuario sobre qué temas hay artículos.

navegación de pie de página

También hay espacio para los elementos de navegación en el pie de página de su tienda. Lea mis consejos para el diseño fácil de usar del pie de página.

Navegación en una página

Si usted recopila contenidos especialmente extensos en una página, entonces una tabla de contenidos con marcas de salto es adecuada. Ejemplo clásico: Dentro de los artículos de Wikipedia puede navegar a las secciones relevantes.

Consejos para el menú en su tienda online

Estoy seguro de que está familiarizado con la siguiente situación: Usted entra en una tienda de bricolaje (o alternativamente en un gran supermercado o en una tienda especializada en electrónica) y sabe exactamente qué producto quiere comprar aquí. La pregunta es, dadas las innumerables estanterías y pasillos, ¿dónde se encuentra? Para ayudarle a encontrar su camino, probablemente estará buscando letreros sobre los pasillos que le guiarán al departamento correcto.

¿Alguna vez te has perdido en un supermercado? Hurra por la buena señalización en el laberinto de bienes!

Steve Krug utiliza esta comparación de tiendas de bricolaje en su famoso libro de base de usabilidad No me hagas pensar para explicar cómo funciona una buena navegación por la web. En la verdadera tienda de bricolaje, los signos de los diferentes departamentos (herramientas, material de jardinería, materiales de construcción…) son la navegación en la web: muestra al usuario (ojalá) el camino hacia el producto que está buscando.

En el acto: el correcto posicionamiento del menú principal

El menú principal es un elemento central y extremadamente importante de un sitio web. Con sus categorías ofrece orientación al usuario. Por lo tanto, es importante adherirse a las convenciones y satisfacer las expectativas de los usuarios.

En las tiendas online, la barra de navegación con las categorías principales se encuentra en la cabecera del sitio web, en orientación horizontal. También es visible en todas las subpáginas.

Especialmente en las subpáginas, como las páginas de categoría, tiene sentido colocar una barra de navegación vertical adicional (menú de la barra lateral) en el lado izquierdo.

«Estás aquí»

El menú de navegación también permite al usuario saber en qué categoría se encuentra actualmente en su tienda. Lo ideal es que se resalte el elemento de menú actualmente seleccionado, como en el caso de Zalando (primer ejemplo) o Stylefile (segundo ejemplo):

Ejemplo Zalando

Ejemplo de archivo de estilo

Menú Pegajoso

En sitios web con una gran cantidad de contenido, se recomienda el uso de un «Sticky Menu» o una «Sticky Navigation». Esto significa que el menú está permanentemente visible, incluso si el usuario se desplaza por la página. Usted conoce este principio a través de Facebook, por ejemplo: No importa cuán lejos te desplaces, la barra azul con el campo de búsqueda, el mensajero, etc. siempre está visible en la parte superior.

Para los visitantes de su tienda, una navegación visible de forma permanente significa una mayor facilidad de uso, ya que siempre tienen las categorías ante sus ojos y no tienen que desplazarse hacia arriba para navegar a la siguiente (sub)categoría.

Zebraclub Berlin ofrece un menú pegajoso y una cabecera pegajosa: No importa cuán lejos se desplace el usuario a través de los productos, las categorías siempre permanecen visibles.

Los hermanos y hermanas de sangre también confían en el Sticky Header. Si el usuario comienza a desplazarse, el encabezado se minimiza y deja espacio suficiente para la presentación del producto.

Claridad: El A&O de un menú fácil de usar

La claridad es la palabra clave cuando se trata de la navegación. El usuario debe orientarse rápidamente en su tienda. Cuantos menos niveles de navegación haya, mejor. En la práctica, no puede evitarse un gran número de categorías y subcategorías, especialmente con sitios web y tiendas en línea más grandes. Por lo tanto, es particularmente importante prestar atención a la estructura lógica de la navegación del sitio web. Si el usuario entiende intuitivamente cómo navegar a través de su tienda, entonces numerosas subpáginas no interfieren.

Con demasiados elementos similares, el usuario pierde rápidamente la visión general.

Los menús desplegables son ahora estándar, especialmente para los grandes sitios de comercio electrónico. Sólo cuando el usuario activa una categoría principal se despliega el menú desplegable con las subcategorías. Sin embargo, dependiendo de cuántas subcategorías estén disponibles, puede rápidamente volverse confuso aquí.

Consejo: Piense cuidadosamente en qué subcategorías le gustaría utilizar y qué tipos de productos pueden resumirse bajo un término genérico.

A continuación le muestro algunos ejemplos de menús claros – ¡déjate inspirar!

Imágenes, colores y compañía: Muchas maneras de llegar a un diseño de menú claro

Asegúrese de que su menú de navegación sea claro a nivel visual. El espaciado adecuado entre los elementos individuales, el resaltado del color o la impresión en negrita ayudan a conseguirlo. Las imágenes e iconos también sirven para visualizar las subcategorías en el menú desplegable y así proporcionar al usuario una mejor visión general.

zuendstoff-clothing.de utiliza iconos coincidentes además de los nombres de las categorías.

Adidas utiliza imágenes desplegables y logotipos de marcas para proporcionar orientación.

Pequeñas fotos, gran efecto: El menú desplegable de Shoepassion es maravillosamente claro. Las fotos hacen que sea mucho más fácil orientarse.

También funciona sin color y sin campanas ni silbidos: El diseño del menú desplegable de Everlane es muy simple y claro. Gracias a un espaciado suficiente, las subcategorías pueden ser escaneadas con relativa rapidez.

Mejores prácticas para tiendas con un gran surtido: Bauhaus.de

Bauhaus ha encontrado una solución algo inusual pero funcional. Dado que las diferentes clases de producto nunca cabrían en una barra de navegación horizontal, se resumen simplemente en el menú principal bajo «Productos». Aunque esto no es nada concreto, funciona en este caso por dos razones: En primer lugar, la mayoría de los usuarios deben tener una idea de lo que se ofrece en esta tienda, porque la marca es muy conocida y el nombre «Bauhaus» es bastante claro. En segundo lugar, las principales categorías de la izquierda se muestran permanentemente como un menú vertical. Aunque no llaman la atención con tanta rapidez, ayudan a los visitantes a orientarse por el sitio y les proporcionan indicaciones iniciales sobre cómo seguir navegando.

Si el usuario hace clic en el punto de menú «Productos», el submenú con sus hasta cuatro niveles de navegación se despliega hacia la derecha. Por supuesto: una navegación muy amplia, que en mi opinión es ejemplarmente diseñada y muy clara gracias a la bien pensada combinación de colores:

El resaltado en negro permite al usuario ver exactamente qué categorías superiores ha seleccionado.

Consejos de lectura: En su legible artículo sobre Mega-Dropdown-Menus en usabilityblog.de Andreas Kramm da algunos consejos importantes sobre a qué prestar atención cuando se diseña.

En el blog de creativeconstruction.de Yi-Ji Lu explica cómo adaptar el menú desplegable a los movimientos naturales del ratón.

3 consejos para buenas categorías de menús

La elección de las categorías juega un papel decisivo en la claridad de la navegación del sitio web. Debe tener en cuenta los siguientes consejos al crear sus categorías:

1. seleccionar un número manejable de categorías principales

Entre 5 y 7 puntos del menú son perceptibles visualmente para el usuario y proporcionan a los visitantes de su sitio una visión clara de la oferta de su tienda. Dependiendo del tipo de sitio web, más categorías en el menú principal pueden tener sentido.

La llamada regla del número de Miller o regla 7+/-2, que dice que la gente sólo puede percibir entre 5 y 9 elementos al mismo tiempo, es sin duda una buena pista a la hora de determinar las categorías. Pero la regla también es criticada hoy en día. Así que recomiendo prestar atención al caso específico – dependiendo del diseño de la tienda y del menú, más (sub)categorías pueden funcionar. Siempre y cuando se mantenga la claridad!

2. utilizar títulos claros y fácilmente comprensibles como nombres de categorías

Si usted dirige una tienda de calzado, la diferenciación de sus productos radica en

Zapatos de mujer | Zapatos de hombre | Zapatos de niño

…cerca. Es posible que también ofrezca productos para el cuidado del calzado, que también deberían incluirse en el menú principal. El usuario puede ver de un vistazo lo que tiene en su surtido y en qué tipo de tienda se encuentra actualmente.

Incluso aquellos que no conocen la marca Rieker reconocerán inmediatamente que se trata de una zapatería gracias a los claros nombres de las categorías.

Zoomalia.de añade iconos a las categorías principales para una mejor visión de conjunto.

Lo que se aplica a sus categorías principales también se aplica a las subcategorías. No elija creaciones de palabras artificiales, sino términos comunes que sean comprensibles para su grupo objetivo.

Las subcategorías de stylaholic.de están claramente etiquetadas y dispuestas.

3. hacerlo concreto, corto, crujiente

Utilice términos tan concretos como sea posible. Bajo la categoría «productos» un usuario puede imaginar menos que bajo «herramientas de jardín».

Los nombres de las categorías individuales deben constar de una palabra y no deben ser demasiado largos. No se trata de «baldosas de plástico y de cerámica», sino de «baldosas». Qué tipo de azulejos que usted ofrece se mostrará en la página de la categoría de todos modos.

La barra de navegación de Roller.de es clara. Los términos genéricos para las categorías de productos se eligen de tal manera que el usuario tiene inmediatamente una idea concreta de lo que se esconde detrás de ellos.

El Skateshop Skatedeluxe nombra sus categorías cortas y crujientes. El grupo objetivo debe saber qué hay detrás de «Skate» y «Snow» – los largos términos «Skateboard» y «Snowboard» han sido hábilmente eludidos.

Por cierto: Una categoría «Hogar» no es necesaria. Hoy en día, los usuarios saben que un clic en el logotipo les devuelve a la página de inicio.

Excursus: Menú de hamburguesas ¿sí o no?

El «menú de hamburguesas» (llamado así porque consta de tres líneas superpuestas que recuerdan a una hamburguesa) ya no es ajeno a los usuarios de Internet en 2017. Lo encontramos todo el tiempo cuando navegamos sobre la marcha, después de todo es un maravilloso ahorro de espacio y por ahora casi todos los usuarios móviles saben que el menú principal con sus categorías está escondido detrás de los tres guiones.

Mucho contenido en un área pequeña: una clara ventaja de la hamburguesa (menú).

Sitios de hamburguesas y sitios móviles: ¡sí, por favor!

En las páginas móviles, un menú oculto como el menú Burger es definitivamente un elemento de diseño práctico. Porque aquí el ahorro de espacio está a la orden del día! Sólo si su tienda se las arregla con muy pocas categorías, un menú visible tiene sentido también en la versión móvil.

Hamburguesa y escritorio: no es una buena combinación

Si el menú de hamburguesas también tiene sentido en el escritorio es polémico. Hay varias razones por las que el menú de hamburguesas es rechazado desde el punto de vista de la usabilidad.

recuperabilidad

En una pantalla de escritorio, el icono de hamburguesa puede desaparecer rápidamente. Demasiados elementos – logotipos, imágenes, botones de llamada a la acción – compiten aquí para llamar la atención. Sin embargo, el menú con sus categorías es un elemento central de un sitio web y esencial para su uso.

comprensión

El menú de hamburguesas ha sido acomodado con frecuencia. Pero todavía hay muchos usuarios de escritorio que no están familiarizados con él y que lo encuentran difícil. Según catalystnyc.com, alrededor del 47,6 por ciento de los usuarios mayores de 45 años tienen dificultades para entender el Burgericon como un menú.

¿Busca una agencia?

¿Busca una agencia de marketing online competente, flexible y fiable? Estaremos encantados de recibir su consulta sin compromiso.

Contacte con nosotrosPara

el usuario, no es obvio a primera vista qué elementos del menú están ocultos detrás de la hamburguesa y, por lo tanto, falta información esencial para interpretar el sitio web.

accesibilidad

Sólo después de hacer clic en el icono se despliegan las categorías del sitio web. Los usuarios de ordenadores de sobremesa encuentran acertadamente lo que tiene sentido, por razones de ahorro de espacio, que sea engorroso para los móviles. La facilidad de uso también significa siempre esperar poco «trabajo extra» de los usuarios: Cualquier clic adicional puede frustrar a un usuario o hacer que aborte una acción o abandone el sitio porque no está progresando. Por lo tanto, siempre debe haber una cierta motivación por parte del usuario, para que haga clic en el icono y se ocupe de las categorías del menú.

utilización

«Fuera de la vista, fuera de la mente» – este dicho también se aplica a los menús de hamburguesas.

Todo lo que se esconde detrás de las tres líneas no es visible para el usuario al principio y por lo tanto se utiliza menos.

balance final

Un sistema de navegación funcional y bien pensado garantiza que los usuarios puedan navegar por su tienda fácilmente, encontrar rápidamente los productos que buscan y, en última instancia, convertirse en compradores.

En pocas palabras, lo que hay que tener en cuenta:

  • El menú principal debe estar en el encabezado y visible en todas las páginas.
  • Un menú pegajoso es especialmente útil para páginas muy grandes, para que el usuario siempre tenga una visión general y no tenga que desplazarse hacia arriba.
  • El elemento de menú seleccionado actualmente debe estar resaltado visualmente.
  • Para los menús desplegables, debe mantenerse la claridad! Colores, iconos y otros elementos de diseño ayudan.
  • La selección de las categorías debe estar bien pensada. Los nombres de las categorías deben ser cortos y precisos.
Comparte nuestro contenido

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Follow by Email
Facebook
Twitter
WhatsApp Whatssapp