3 reglas esenciales para un diseño de navegación efectivo
Diseñar la navegación de su sitio web es como sentar las bases de su casa. Si no planifica su base de manera adecuada 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, necesita dedicar tiempo a planificar cómo su audiencia interactuará con su contenido, a descubrir la forma más intuitiva de organizarlo y representarlo.
Recuerde siempre, si obtiene esta parte incorrecta, corre el riesgo de distanciarse de una gran parte de su audiencia.
¿Qué es navegación?
Hay más de una forma de ver la navegación. Podría decir que es un elemento central en su sitio web que permite a sus clientes encontrar lo que buscan sin confusión ni clics innecesarios. De la misma manera, podría argumentar que es una manera de guiar suavemente a sus clientes hacia la información más importante en su sitio, a fin de generar ventas o consultas.
Lo más probable es que sean ambas cosas.
El diseño de navegación es como muchas otras cosas en el diseño: no existe una "forma correcta" universalmente acordada para hacerlo. Cada sitio web presenta sus propios desafíos, que se pueden abordar de varias maneras. La buena noticia es que hay formas de pensar y organizar el contenido que minimiza el riesgo de fracaso.
Sitio de 70percentpure presenta una navegación simple que es tanto vertical como horizontal.
1) Finalice su IA primero
La planificación del contenido para 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 visión general, la comprensión y la manipulación de su contenido es lo que constituye la columna vertebral de la usabilidad de su sitio web. Diseñar su navegación antes de, o en lugar de, diseñar correctamente su IA sería como crear un índice de libro antes de componer las páginas. No es Buena idea.
Una capacidad natural para ver la imagen completa 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 en que el cliente clasifica su contenido, así que prepárese para la resistencia si ese es el caso.
Aquí hay algunas cosas que puede hacerse para ayudar a preparar su plan y justificarlo al cliente:
- ¿Qué páginas son necesarias para este sitio?
- ¿Tiene cada página un propósito dentro del esquema más amplio, y es el contenido dividido en fragmentos sensibles y contables?
- ¿Qué concesiones deben hacerse para agregar contenido en el futuro?
- ¿Con qué grupos de usuarios trabajas? (por ejemplo, iniciar sesión / salir, tipos de suscripción, anunciantes, etc.)
- ¿Cuál es el objetivo principal para cada tipo de usuario?
Responder a todo lo anterior y comprender cómo se relaciona su contenido con sus usuarios es fundamental para un buen diseño de navegación.
2) KISS: mantenerlo simple, a veces
Cualquiera que alguna vez haya usado un sitio web probablemente esté de acuerdo: un área de navegación debería 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.
La navegación simple de Bloomberg oculta la complejidad de la información en su sitio.
Y, sin embargo, la simplicidad puede ser engañosa. Profundiza y descubrirás que lo que en realidad es bastante complejo ha sido ingeniosamente empaquetado de una manera que parece 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, teniendo en cuenta su gama de productos. Pero los menús desplegables se dividen de manera muy inteligente en secciones, y se presentan de tal forma que usted puede encontrar lo que está buscando de manera rápida y fácil.
Las páginas secundarias son como mini sitios, siguiendo el mismo formato de navegación. El menú se siente y se comporta de la misma manera, pero se adapta para ofrecer más detalles cuanto más profundo ingresa al sitio.
Es fácil de usar, predecible y consistente. Teniendo en cuenta su gama de productos, y el número de páginas en su sitio web, esto no es ninguna hazaña, y es obviamente el producto de muchas horas de desarrollo iterativo. No solo se siente como uno de sus productos, lo que es muy tranquilizador para el visitante, sino que organiza el contenido de una manera que es buena tanto para el cliente como para Microsoft.
3) Elija la orientación cuidadosamente
Dado que la pantalla de una computadora se usa tradicionalmente en formato apaisado, la navegación horizontal tiene mucho sentido. Gran parte del tiempo se siente más equilibrado, menos intrusivo y fácil de ubicar desde una perspectiva de diseño.
Oculus, los fabricantes de audífonos VR serían tontos si no hablaran sobre sus paisajes virtuales con un menú horizontal. No solo tiene una buena metáfora, sino que también 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 cada contexto, por lo que verá mucha navegación vertical, particularmente en el comercio electrónico. Transmite ecos de las pestañas de colores que lo ayudan a encontrar productos en un catálogo físico, y evita saturar una barra horizontal con demasiado texto y demasiadas opciones.
Una buena navegación vertical no es tarea fácil, especialmente si tienes muchos productos. Por eso me gusta este de Jack Jones.
Los íconos al lado del texto realmente ayudan a la lectura. 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 las subopciones, nuevamente de una manera que es muy fácil para el ojo.
Se puede encontrar un uso más inusual del menú vertical en el sitio de Squarepusher. Aquí, la navegación se utiliza como una pestaña, fuera del contenido principal, que el usuario puede simplemente desplazarse y hacer clic. Es un enfoque mucho más lineal y hace eco de la naturaleza secuencial de una pista Squarepusher.
Las reglas están cambiando
Al igual que con todas las cosas en la Web, las nuevas técnicas, tecnologías, dispositivos y tendencias aportan sus propios desafíos e innovaciones a la mesa. El diseño web receptivo significa que un navegador horizontal tradicional ahora también es un navegador vertical (en pantallas más pequeñas). Las técnicas de Parallax permiten que las áreas de navegación fluyan como la marea, dependiendo de dónde se encuentre en la página.
No hay una sola forma de crear el navegador de sitio perfecto. Pero un enfoque iterativo de diseño y prueba, preferiblemente con acceso a las estadísticas de su sitio y los datos de conversión es probable que arroje los mejores resultados.
Al ser el motor que impulsa su sitio web, su navegación debe ser predecible, simple, consistente y estar bien ubicada.