En el cuento de hadas Hansel y Gretel dos niños dejan caer migas de pan en el bosque para encontrar el camino a casa.

Hoy en día, probablemente no experimentes demasiadas experiencias perdidas en la madera , pero estoy dispuesto a apostar que se ha sentido frustrantemente desorientado en sitios web mal diseñados.  Descargue aquí nuestra colección completa de ejemplos de páginas de inicio, blogs y páginas de inicio para inspirar el diseño de su propio sitio web.

En el diseño del sitio web, la navegación de ruta de navegación es una forma de mostrar a los usuarios su ubicación y cómo llegaron allí (similar a las migas de pan de Hansel). También ayuda a los usuarios a encontrar páginas de mayor nivel más rápido si aterrizaron en su sitio desde la búsqueda o un enlace profundo.

Jakob Nielsen, cofundador de Nielsen Norman Group, ha sido que recomienda la navegación desde 1995 y les da un punto fuerte: "Lo único que hacen las migas de pan es facilitar que los usuarios se muevan por el sitio, suponiendo que su contenido y estructura tienen sentido. eso toma solo una línea en el diseño. "

Si el sitio web de su empresa es de varias capas, puede considerar la implementación de la ruta de navegación para facilitar la navegación de su sitio. Sin embargo, como cualquier elemento de diseño, hay una forma correcta y incorrecta de hacerlo. Aquí, exploraremos nueve sugerencias y ejemplos para garantizar que está creando la navegación más efectiva para sus usuarios.

Consejos y ejemplos de navegación para la navegación

1. Solo use la exploración de ruta de navegación si tiene sentido para la estructura de su sitio.

La navegación de ruta de navegación tiene una estructura lineal, por lo que solo desea usarla si tiene sentido con la jerarquía de su sitio web. Si tiene páginas de nivel inferior a las que se puede acceder desde diferentes páginas de destino, el uso de la navegación de navegación solo confundirá a los lectores que siguen accediendo a las mismas páginas desde diferentes puntos de inicio. Además, si su sitio es relativamente simple, con solo unas pocas páginas, es probable que no necesite navegación de navegación.

2. No convierta su navegación de exploración de ruta de navegación demasiado grande.

Su navegación de ruta de navegación es una herramienta secundaria para su barra de navegación principal, por lo que no debe ser demasiado grande o prominente en la página. Por ejemplo, en el sitio web de DHL su barra de navegación principal es grande y reconocible, con columnas como "Express", "Parcel & eCommerce", "Logística", etc. Su navegación de exploración es la siguiente sección más pequeña que dice: "DHL Global |> Logística |> Transporte de mercancías". No desea que sus usuarios confundan su navegación de ruta de navegación como la barra de navegación principal.

3. Incluya la ruta de navegación completa en su ruta de navegación.

Busqué en Google "Estudiantes de la Universidad Elon sin título" para llegar a esta página de inicio, pero Elon es inteligente para incluir la ruta de navegación completa, incluyendo "Inicio" y "Admisiones". Si deja de lado ciertos niveles, confundirá a los usuarios y la ruta de navegación no será tan útil. Incluso si los usuarios no comenzaron en la página de inicio, desea brindarles una manera fácil de explorar su sitio desde el principio.

4. Avance del nivel más alto al más bajo.

Es importante que su navegación de navegación se lea de izquierda a derecha, con el enlace más cercano a la izquierda como su página de inicio, y el enlace más cercano a la derecha es la página actual del usuario. Un estudio de Nielsen Norman Group encontró que los usuarios pasan el 80% de su tiempo viendo la mitad izquierda de una página y el 20% viendo la mitad derecha, lo que justifica el diseño de izquierda a derecha. Además, el enlace más cercano a la izquierda aparecerá como el comienzo de la cadena, por lo que desea que sea su página de más alto nivel.

5. Mantenga sus títulos de ruta de navegación coherentes con los títulos de su página.

Para evitar confusiones, querrá seguir siendo coherente con sus títulos de página y de ruta de navegación, especialmente si está segmentando determinadas palabras clave en esos títulos. También desea vincular claramente sus títulos de ruta de navegación a la página. Si el título de la ruta de navegación no tiene un enlace, acláralo. Nestle etiqueta eficazmente sus títulos de ruta de navegación para que coincidan con los títulos de las páginas. "Áreas de impacto y compromiso", por ejemplo, dice lo mismo en la navegación de ruta de navegación que en la página.

Nestlé también hace un buen trabajo diferenciando enlaces de no enlaces con diferentes colores: los enlaces son azules, mientras que los no enlaces permanecen grises.

6. Sea creativo con el diseño.

La navegación de exploración tradicional se ve así: Inicio> Acerca de nosotros> Empleos. Sin embargo, no necesita seguir el camino tradicional si cree que un diseño diferente podría atraer más a su audiencia o verse mejor en su sitio.

Por ejemplo, Target utiliza la navegación de ruta de navegación en su páginas de productos (porque ¿quién no se perderá en la sección de zapatos virtuales?), pero usa símbolos "/" y texto negro y gris simple. En este caso, la variación de diseño sutil tiene sentido para la estética de su sitio.

7. Manténgalo limpio y ordenado.

Su navegación breadcrumb es simplemente una ayuda para el usuario, e idealmente no debería notarse a menos que el usuario lo esté buscando. Por esta razón, no desea saturar su navegación con texto innecesario.

Eionet por ejemplo, podría prescindir de su texto "Usted está aquí". Aunque pretende ser útil, el texto satura la página. Con el diseño correcto, una navegación de ruta de navegación debería ser lo suficientemente notable sin una introducción.

8. Considere qué tipo de navegación migratoria tiene más sentido para su sitio.

Hay algunos tipos diferentes de migas de pan que puede usar: basados ​​en la ubicación, en los atributos y en el historial. Las rutas de navegación basadas en la ubicación muestran al usuario dónde se encuentran en la jerarquía del sitio. Las rutas de navegación basadas en atributos muestran a los usuarios a qué categoría pertenece su página. Finalmente, las rutas de navegación basadas en historial muestran a los usuarios la ruta específica que tomaron para llegar a la página actual.

Bed Bath & Beyond utiliza la navegación de ruta basada en atributos para mostrar a los usuarios a qué categoría pertenece su página de producto. para que los usuarios puedan volver a hacer clic en "Cocina" o "Pequeños electrodomésticos" para examinar elementos similares. Este tipo de navegación migratoria es más efectiva para los clientes de Bed Bath & Beyond. Cuando está creando una navegación de ruta de navegación, considere lo que es más útil para los visitantes de su sitio.

9. Conozca a su público.

Las mejores prácticas en navegación migratoria instan a los diseñadores web a ubicar la navegación en la parte superior de la página, pero Apple una de las compañías más valiosas de todas tiempo, desafía esta lógica al poner su navegación migratoria al final de su sitio. En definitiva, es fundamental que conozcas a tu público. Los clientes de Apple suelen ser conocedores de la tecnología y probablemente encontrarían la navegación si la necesitaran. Considere las necesidades de sus clientes e implemente las pruebas A / B si no está seguro.

En definitiva, la navegación de ruta de navegación es una herramienta eficaz para hacer que su sitio sea más fácil de navegar, pero desea seguir las mejores prácticas de diseño para asegurarse de estar aprovechando la utilidad de la herramienta. Para obtener consejos adicionales de UX, consulte " La última guía para el diseño de UX ".

 ejemplos de diseño de página de inicio, blog y página de inicio brillante



Source link