Utilidad de navegación Cómo influye en la experiencia del usuario Diseño

Para diseñar una navegación eficaz y fácil de usar, no solo tenemos que pensar en cómo Agrupamos nuestro contenido en menús bien estructurados. para permitir a los usuarios encontrar fácilmente lo que quieren, pero también sobre cómo Diseñe las herramientas que necesitarán para interactuar con el sitio.

Se llama navegación que no está estrictamente relacionada con el contenido y que ayuda a los usuarios a realizar diferentes acciones. navegación de utilidad, y es un aspecto menos ampliamente discutido pero sumamente importante del diseño de la experiencia del usuario. Las barras de búsqueda, los formularios de inicio de sesión y registro, los botones de suscripción, uso compartido e impresión, los carritos de la compra, los menús contextuales y las herramientas que permiten a los usuarios cambiar de idioma o tamaño de fuente son ejemplos típicos de la navegación de utilidad.

Diseñarlos no es tan fácil como parece a primera vista, requiere consideración para averiguar qué elementos necesitamos, dónde colocarlos y cómo mostrarlos para asegurarnos de que nuestros visitantes puedan encontrarlos rápidamente y comprender cómo funcionan.

Cómo afecta la utilidad de navegación a UX

Cuando diseñamos la navegación de utilidad, debemos decidir cómo queremos que nuestros usuarios interactúen con nuestro sitio. Necesitamos proporcionarles un estructura de interacción que se ajusta a nuestros objetivos comerciales, guía a los usuarios a lo largo del camino del cliente, les brinda opciones fáciles de entender y les brinda una experiencia de usuario agradable.

Ante todo, Necesitan poder realizar rápidamente las acciones que desean.. Si les permitimos hacerlo, la satisfacción del cliente aumentará y los usuarios satisfechos tenderán a invertir más tiempo y dinero en los sitios web..

La página de inicio de AirBnB sigue este principio de UX, y su menú superior solo contiene herramientas de utilidad. No es una solución habitual, pero si echamos un vistazo a la increíble tasa de crecimiento de AirBnB, es la opción perfecta para ellos..

Los 4 elementos del menú principal están orientados a las 4 personas principales que visitan habitualmente el sitio de AirBnB: personas interesadas en convertirse en anfitriones (“Conviértete en un anfitrión”), personas que quieren resolver un problema que tuvo lugar mientras utilizaban el servicio (“Ayuda”), usuarios nuevos y recurrentes (“Regístrate” y “Iniciar sesión”). La página de inicio de AirBnB centrada en la utilidad también contiene una barra de búsqueda rápida que es una herramienta crucial en un sitio web de alquiler de alojamiento.

En segundo lugar, los usuarios no necesitan utilidades superfluas, ya que demasiado desorden distrae la atención y reduce el enfoque. Qué herramientas son necesarias en nuestra navegación de utilidad y cuáles no dependen de la naturaleza de nuestro sitio. Por ejemplo, puede ser útil incluir una vista de impresión en un blog o un sitio de noticias, pero la misma característica puede ser una distracción innecesaria en un foro o en un sitio web de medios sociales..

Washington Post, por ejemplo, muestra la navegación de la utilidad en sus páginas de una sola publicación de forma diferente a la página de inicio. De esta manera, los usuarios solo encuentran herramientas de utilidad que son relevantes y no están plagados de opciones que no desearían usar de todos modos..

Hay 3 elementos de navegación de utilidad que los visitantes pueden querer usar en todo el sitio. Estos se incluyen inteligentemente en la barra superior fija (herramienta de búsqueda, “Registrarse”, y “Suscribir”), pero los usuarios no tienen que pensar en opciones relacionadas con publicaciones individuales como “Leyendo lista” cuando están navegando por la página de inicio o una de las páginas de categoría.

En tercer lugar, los usuarios deben comprender rápidamente lo que pueden hacer en nuestro sitio. Los visitantes no necesariamente saben lo que quieren, por lo que siempre debemos proporcionarles información sobre las opciones que tienen..

Si echa un vistazo a la captura de pantalla a continuación, puede ver que The New York Times informa a los usuarios sobre la disponibilidad de 3 ediciones diferentes: americano, Internacional, y chino, y también les permite cambiar rápidamente entre los tres. Este gran ejemplo de navegación con utilidad inteligente muestra a los usuarios opciones menos obvias que probablemente no encontrarían por sí mismas, de una manera no obstrusiva y elegante.

Encuentra el mejor lugar

Existen ubicaciones típicas para la navegación de utilidades donde los usuarios buscan estas herramientas de forma intuitiva, ya que eso es lo que han acostumbrado en la mayoría de los sitios web. Romper las convenciones de diseño web se considera una mala práctica para la experiencia del usuario, y es especialmente cierto para la navegación de utilidad que, en la mayoría de los casos, se trata más de usabilidad que de creatividad..

Como la navegación de la utilidad es secundaria a la navegación basada en contenido en la mayoría de los sitios web, con frecuencia se coloca en áreas menos prominentes pero aún visibles. Por lo general, esto significa la (1) esquina superior derecha de los sitios web y la (2) parte inferior del pie de página. Sus Una buena idea para seguir estas convenciones., como Estos son los lugares donde la mayoría de los usuarios buscan herramientas de utilidad primero..

Como puede ver a continuación, Reuters ha colocado la mayoría de sus herramientas de utilidad en estas dos áreas típicas, la esquina superior derecha del sitio y la parte inferior del pie de página debajo de la navegación basada en contenido. La solución única aquí es el pie de página adicional fijo con 2 elementos de utilidad que los diseñadores consideraron los más importantes: “Inicie sesión o regístrese” y “Lo último de My Wire”.

Es interesante observar que el área de navegación de la utilidad adicional aún se encuentra en un tipo de pie de página donde los usuarios normalmente buscarían herramientas similares, por lo que los diseñadores de Reuters estaban creativo de una manera pero Todavía seguimos las convenciones de diseño web para mantener la usabilidad..

Construir una estructura lógica

Agrupar las herramientas de utilidad en una estructura lógica es crucial si queremos construir un sitio con un alto índice de conversión. Esto puede ser un desafío, incluso si no queremos ofrecer a los usuarios muchas opciones, pero Amazon lleva la complejidad de la navegación de utilidades al siguiente nivel. Amazon tiene una utilidad de navegación increíblemente complicada con muchas opciones., pero si usamos Amazon con suficiente frecuencia, no parece tan. Esta es la magia del diseño inteligente..

No solo colocaron la navegación de la utilidad en la esquina superior derecha donde los usuarios esperan encontrarla, sino que también la dividieron en 3 grupos principales: (1) una barra de búsqueda, (2) información relacionada con el usuario (debajo de la barra de búsqueda ), y (3) acciones que los usuarios pueden realizar en el sitio.

Es inteligente porque, gracias a las señales visuales como el carrito de compras o el ícono de búsqueda, los clientes pueden decidir en un abrir y cerrar de ojos qué grupo desean usar y, a partir de ese momento, pueden ignorar a los otros dos. Sólo hay un grupo (“Su cuenta”, “Prueba Prime”, “Cesta”, y “Lista de deseos”) que tiene submenús que también están estructurados lógicamente, y los diferentes grupos de submenú están divididos por separadores discretos pero visibles para ayudar a los usuarios a encontrar rápidamente lo que quieren.

Crear un diseño visual eficaz

El diseño visual de la navegación de utilidad efectiva debe seguir el famoso principio KISS (Keep It Simple, Stupid). Se recomienda proporcionar íconos con etiquetas de texto, hacer que los controles se vean como controles y enfatizar visualmente las acciones más importantes. También puede ser una buena idea distinguir entre la utilidad y la navegación basada en contenido utilizando un diseño ligeramente diferente.

Se pueden encontrar dos grandes ejemplos de diseño visual efectivo en el sitio web de Walmart y Etsy. Los diseñadores colocaron la navegación de utilidad en la parte superior de ambos sitios y la resaltaron con colores que varían del resto de la navegación, Walmart con fondo azul y Etsy con fuentes azules.

Ambos sitios Enfatiza las acciones más importantes del usuario con diferentes elementos de diseño visual., Walmart usa amarillo para los botones Buscar e Iniciar sesión, mientras que Etsy le da un discreto borde azul al botón Iniciar sesión e incluye un icono gris del carrito de compras sobre el menú Carro.

Este es el único lugar donde Etsy usa un icono en su menú de utilidades, mientras que Walmart muestra un icono al lado de cada elemento, pero aún así no se olvida de incluir las etiquetas de texto necesarias justo al lado de los iconos..