¿Alguna vez se ha encontrado con una situación en la que visita un sitio web, pasa algún tiempo en él y de repente quiere llegar a una página en particular o realizar una tarea, pero está completamente perdido sin saber a dónde ir? Tengo.
La navegación es el aspecto más importante de cualquier aplicación o interfaz, ya que hay muchas cosas asociadas a ella, como accesibilidad, etc. Los usuarios deben poder navegar fácilmente, en lugar de perderse en las numerosas páginas del sitio web, lo que sucede con mayor frecuencia. del tiempo. Se podría argumentar que existe una “Búsqueda” para ayudarlo, pero no puede confiar solo en la búsqueda cada vez, ya que las investigaciones muestran que solo el 30% de los usuarios del sitio web utilizan la función de búsqueda y la mayoría, el 70%, depende de la navegación directa. Por eso los menús de navegación tienen una alta prioridad. Después de todo, incluso la característica más creativa o interesante que cree es inútil si el usuario no puede encontrarla.
Ahora bien, ¿qué es un menú de navegación?
Menús de navegación son listas de categorías de contenido o características, que generalmente se presentan como un conjunto de enlaces o íconos agrupados con un estilo visual claro y distinto del resto del sitio web o diseño de la página. Estos consisten principalmente en barras de navegación y menús de hamburguesas, por lo general, pero a menudo no se limitan a ellos.
Encontramos estos menús en casi todas partes, pero el desafío aquí es que a menudo las personas encuentran muchas dificultades para encontrarlos y se confunden con los menús.
Después de trabajar en más de 15 productos y proyectos centrados en el usuario, encontré algunos hallazgos interesantes y mejores prácticas para diseñar menús de navegación fáciles de usar: los dividí en categorías.
Comience a usar migas de pan. Las rutas de navegación son una ayuda de navegación para ayudar a orientar a las personas dentro de un sitio web. Este tipo de orientación es especialmente importante si las personas son dirigidas a páginas más profundas del sitio desde fuentes externas.
2. Evite el uso de menús pequeños (o íconos de menú) en pantallas grandes. Los menús no deben ocultarse cuando hay suficiente espacio para mostrarlos.
3. Intente siempre colocar los menús en lugares familiares. La mayoría de las veces los usuarios pasan su tiempo en otros sitios. Por lo tanto, los usuarios esperan encontrar elementos de la interfaz de usuario donde los han visto antes en otros sitios o aplicaciones (por ejemplo, en el carril izquierdo, en la parte superior de la pantalla). Haga que estas expectativas funcionen a su favor colocando sus menús donde la gente espera encontrarlos. (como se muestra a continuación)
4.Haga que los enlaces del menú parezcan interactivos. Es posible que los usuarios ni siquiera se den cuenta de que es un menú si no parece que se pueda hacer clic (o tocar) en las opciones. Los menús pueden parecer sólo imágenes decorativas o títulos si incorpora demasiados gráficos o se adhiere demasiado estrictamente a los principios del diseño plano.
5. Asegúrate de que tus menús tengan suficiente peso visual. En muchos casos, los menús que se colocan en lugares familiares no requieren mucho espacio en blanco a su alrededor o saturación de color para ser visibles. Pero si el diseño está desordenado, los menús que carecen de énfasis visual pueden perderse fácilmente en un mar de gráficos, promociones y titulares que compiten por la atención del espectador.
6. Utilice colores de texto de enlace que contrasten con el color de fondo.. Es sorprendente cuántos diseñadores ignoran pautas de contraste; Navegar por el espacio digital es lo suficientemente desorientador como para tener que entrecerrar los ojos ante la pantalla solo para leer el menú.
Utilice etiquetas de enlaces comprensibles. Descubra lo que buscan los usuarios y utilice etiquetas de categorías que sean familiares y relevantes. Los menús son no el lugar para ponerse lindo con palabras inventadas y jerga interna. Cíñete a una terminología que describa claramente tu contenido y características.Haga que las etiquetas de los enlaces sean fáciles de escanear. Puede reducir la cantidad de tiempo que los usuarios deben dedicar a leer los menús justificando los menús verticales a la izquierda y cargando los términos clave al principio.Para sitios web grandes, utilice menús para permitir a los usuarios obtener una vista previa del contenido de nivel inferior.. Si los recorridos típicos de los usuarios implican profundizar en varios niveles, los megamenús (o menús desplegables tradicionales) pueden ahorrar tiempo a los usuarios al permitirles saltarse uno o dos niveles.Proporcionar menús de navegación local para contenido estrechamente relacionado.. Si las personas frecuentemente quieren comparar productos relacionados o completar varias tareas dentro de una sola sección, haga que esas páginas cercanas sean visibles con un menú de navegación local, en lugar de obligar a las personas a subir y bajar en su jerarquía.Aprovechar la comunicación visual. Las imágenes, gráficos o colores que ayudan a los usuarios a comprender las opciones del menú pueden ayudar a la comprensión. Pero asegúrese de que las imágenes admitan las tareas del usuario (o al menos no las hagan más difíciles).
Las personas deberían poder escanear rápidamente la navegación y comprender qué enlaces son elementos de navegación primarios, secundarios y terciarios. La ubicación y agrupación de los enlaces debe establecer esta jerarquía.
El diseño visual, como estilos de fuente, tamaños de fuente, pesos de fuente y/o colores de fuente, etc., debe establecer los diferentes niveles de navegación y debe ser coherente en toda la navegación. Si se implementa la navegación secundaria, el diseño también debe diferenciar claramente entre enlaces padre/hijo y hermanos y ser coherente con la navegación primaria.
Al igual que con las rutas de navegación, los indicadores de ubicación en la navegación ayudan a las personas a orientarse en el sitio, especialmente si se encuentran más profundamente dentro del sitio web. Este claro indicador visual puede indicar en qué sección se encuentra alguien.
En Mobile, First NO es Mobile Only de NNG, recomiendan optimizar la navegación para cada dispositivo. Si bien puede parecer un esfuerzo adicional diseñar y desarrollar diseños separados para los dispositivos, NNG explica que es una mejor experiencia de usuario porque “diferentes dispositivos tienen diferentes capacidades de interacción y diferentes tamaños de pantalla”.
Por ejemplo, en el escritorio, el diseño de navegación de The Japan Times utiliza un ancho de pantalla más amplio y enumera las categorías (elementos secundarios) horizontalmente en una barra separada. En dispositivos móviles, la misma navegación utiliza el patrón de diseño del menú de hamburguesas y, cuando se expande, utiliza el espacio vertical más largo del teléfono y enumera los elementos secundarios debajo del título de cada sección, en lugar de dividir los niveles primario y secundario en dos barras. El diseño no es una traducción directa: observe cómo las líneas azules están al lado de los elementos secundarios en lugar de los elementos principales, lo que en realidad es una representación más cercana del diseño en dispositivos móviles. Aún así, existe coherencia entre los dos diseños y se optimiza para cada vista.
Espero que los consejos mencionados anteriormente le resulten útiles y buena suerte creando una navegación increíble para su sitio web. Que la fuerza os acompañe ;) Por favor, aplaudid y animad.
Gracias por tu tiempo. Por favor aplaude y anímame a escribir más.