Krypton Solid

3 reglas esenciales para un diseño de navegación eficaz

3 reglas esenciales para un diseño de navegación eficaz

Diseñar la navegación de su sitio web es como sentar las bases de su casa. No planificar correctamente los cimientos podría poner su edificio en riesgo de colapso, independientemente de lo bonito que se vea. Si desea beneficiarse de las mejores ventas o conversiones posibles de su sitio, debe dedicar tiempo a planificar cómo interactuará su audiencia con su contenido y descubrir la forma más intuitiva de organizarlo y representarlo.

Recuerde siempre, si se equivoca en esta parte, corre el riesgo de alienar a una gran parte de su audiencia.

¿Qué es la navegación?

Hay más de una forma de ver la navegación. Se podría decir que es un elemento central en su sitio web que permite a sus clientes encontrar lo que buscan sin confusiones ni clics innecesarios. Del mismo modo, podría argumentar que es una forma de guiar a sus clientes hacia la información más importante de su sitio para generar ventas o consultas.

Lo más probable es que sean ambos.

El diseño de la navegación es como muchas otras cosas en el diseño: no existe una «forma correcta» acordada universalmente para hacerlo. Cada sitio web presenta sus propios desafíos, que se pueden abordar de varias maneras. La buena noticia es que existen formas de pensar y organizar el contenido que minimizan el riesgo de fracaso.

Sitio de 70percentpure presenta una navegación simple que es tanto vertical como horizontal.

1) Primero finalice su IA

Planificar el contenido de un sitio web grande es una tarea esencial que debe completarse antes de diseñar su navegación. También conocida como IA (Arquitectura de la información), esta descripción general, comprensión y manipulación de su contenido es lo que forma la columna vertebral de la usabilidad de su sitio web. Diseñar su navegación antes, o en lugar de, diseñar correctamente su IA sería como crear un índice de libros antes de componer las páginas. No es Buena idea.

Una habilidad natural para ver el panorama general ayuda cuando se trabaja en IA. Más importante aún, debe poder ver el contenido desde la perspectiva de un usuario. A veces, esto significa ir en contra de la forma del cliente de categorizar su contenido, así que venga preparado para la resistencia si ese es el caso.

Aquí hay algunas cosas que puede preguntarse para ayudar a preparar su esquema y justificarlo ante el cliente:

  • ¿Qué páginas se necesitan para este sitio?
  • ¿Cada página tiene un propósito dentro del esquema más amplio y el contenido está dividido en partes sensibles y identificables?
  • ¿Qué concesiones se deben hacer para agregar contenido en el futuro?
  • ¿Con qué grupos de usuarios estás trabajando? (por ejemplo, inicio / cierre de sesión, tipos de suscripción, anunciantes, etc.)
  • ¿Cuál es el objetivo principal de cada tipo de usuario?

Responder a todo lo anterior y comprender cómo su contenido se relaciona con sus usuarios es fundamental para un buen diseño de navegación.

2) BESO: Hazlo simple, a veces.

Todos los que alguna vez han usado un sitio web probablemente estén de acuerdo: un área de navegación debe ser lo más simple posible. Abrumar al usuario con opciones y saturar la navegación con texto es una mala idea y obstaculizará seriamente la usabilidad general de su sitio web.

Bloomberg

La navegación simple de Bloomberg oculta la complejidad de la información en su sitio.

Y, sin embargo, la sencillez puede ser engañosa. Profundice más y podrá descubrir que lo que en realidad es bastante complejo se ha empaquetado inteligentemente de una manera que se siente simple. Esto es IA en acción.

Tome la página de inicio de Microsoft, por ejemplo. Su navegación principal tiene solo cuatro elementos, lo que parece no ser suficiente, considerando su gama de productos. Pero los menús desplegables están divididos de manera muy inteligente en secciones y se presentan de tal manera que puede encontrar lo que está buscando rápida y fácilmente.

microsoft

Las subpáginas son como minisitios, que siguen el mismo formato de navegación. El menú se siente y se comporta igual, pero se adapta para ofrecer más detalles a medida que se adentra en el sitio.

microsoft2

Es fácil de usar, predecible y consistente. Teniendo en cuenta su gama de productos y la cantidad de páginas en su sitio web, esto no es una hazaña menor y, obviamente, es el producto de muchas horas de desarrollo iterativo. No solo se siente como uno de sus productos, lo cual es muy tranquilizador para el visitante, sino que organiza el contenido de una manera que es buena tanto para el cliente como para los propios Microsoft.

3) Elija la orientación con cuidado

Dado que la pantalla de una computadora se usa tradicionalmente en formato horizontal, la navegación horizontal tiene mucho sentido. La mayor parte del tiempo se siente más equilibrado, menos intrusivo y fácil de colocar desde la perspectiva del diseño.

óculo

Oculus, los fabricantes de cascos de realidad virtual serían tontos si no hablaran de sus paisajes virtuales con un menú horizontal. No solo tiene una buena metáfora, sino que permite al usuario profundizar en su contenido desplazándose hacia abajo en la página.

Sin embargo, los menús horizontales no agregan valor en todos los contextos, por lo que verá mucha navegación vertical, particularmente en el comercio electrónico. Lleva ecos de las pestañas de colores que lo ayudan a encontrar productos en un catálogo físico y evita abarrotar una barra horizontal con demasiado texto y demasiadas opciones.

Una buena navegación vertical no es tarea fácil, especialmente si tiene muchos productos. Por eso me gusta este de Jack Jones.

jackjones

Los íconos junto al texto realmente ayudan a la legibilidad. Las formas simples son sorprendentemente comunicativas y ayudan a mantener el área de navegación enfocada y ordenada. Haga clic en una categoría y el menú se expande para revelar subopciones, nuevamente de una manera que es muy agradable a la vista.

Un uso más inusual del menú vertical se puede encontrar en el sitio de Squarepusher. Aquí, la navegación se usa como una pestaña, fuera del lado del contenido principal, en la que el usuario puede simplemente desplazarse y hacer clic. Es un enfoque mucho más lineal y se hace eco de la naturaleza secuencial de una pista Squarepusher.

empujador

Las reglas estan cambiando

Como ocurre con todas las cosas en la Web, las nuevas técnicas, tecnologías, dispositivos y tendencias traen sus propios desafíos e innovaciones a la mesa. El diseño web receptivo significa que una navegación horizontal tradicional ahora también es una navegación vertical (en pantallas más pequeñas). Las técnicas de Parallax permiten que las áreas de navegación fluyan y refluyan como la marea, dependiendo de dónde se encuentre en la página.

No existe una forma única de crear la navegación del sitio perfecta. Pero un enfoque iterativo de diseño y prueba, preferiblemente con acceso a las estadísticas de su sitio y a los datos de conversión, probablemente dará los mejores resultados.

Al ser el motor que impulsa su sitio web, su navegación debe ser predecible, simple, consistente y bien ubicada.

Deja un comentario