Hola! Si estás empezando en el mundo web seguramente te surgen muuuchas dudas a la hora de plantear soluciones y proponer diseños, tenemos dudas de qué componentes son los más adecuados, amigables y usables para nuestros usuarios.
Recordemos que cuando estamos diseñando soluciones NO las estamos haciendo para nosotros, sino para nuestras personas usuarias, nuestros clientes y potenciales clientes, y SEGURO SEGURIIIISIMO lo que más nos interesa es que puedan acceder a todo el contenido lo más fácil posible y crearles una buena experiencia #ux.
La navegación que vamos a usar en la web es una decisión MEGA super importante, ya que si optamos por una mala opción puede ser que nuestro usuario/usuaria no encuentre aquella sección que esté buscando, o que se pierda tanto en la navegación que se frustre y abandone la web.
Yo soy una fiel creyente que cuánto más simple y accesible el contenido MUCHO MEJOR.
Por eso te quiero compartirte 5 opciones de menú que te pueden ayudar a decidirte a la hora de plantear posibles soluciones.
Quizá algunas ya las conocías y las viste, peeeero puede ser que no sepas cómo se llaman cada una. Conocerlas más a fondo te va a servir a la hora de comunicarte con tu equipo de trabajo y con tus clientes!!!
Antes de pasar a enumerar los tipos de menú, hay ciertos aspectos que deberíamos tener en cuenta más allá del menú que elijamos :
- Hacerlo visible, No usar menús chicos en pantallas grandes.
- Ubicarlo en un lugar familiar para el usuario. NO reinventemos la rueda, coloquemos el menú donde el usuario está acostumbrado a encontrarlo, arriba a la derecha o en el centro.
- Qué los enlaces del menú se NOTEN claramente que son clickeables, que no parezca un texto más del sitio.
- Buen uso del contraste, que el color de los enlaces tenga el contraste suficiente con el fondo, para no tener problemas de accesibilidad.
- Que el usuario siempre sepa su ubicación actual, podemos marcar dentro del menú el enlace que está activo, para que el usuario responda fácil a la pregunta de “Dónde estoy?”
- Los textos de los enlaces del menú deben ser claros y simples, hablar el lenguaje del usuario, que responda a su modelo mental.
- Los enlaces dentro del menú deben tener un tamaño que resulte fácil ser clickeado, si diseñamos enlaces muy chicos o muy cerquita uno de otro, puede ser que el usuario se equivoque y haga click en el de al lado, sobre todo en los dispositivos móviles.
Ahora si.. No la hago más larga.. Y vayamos al grano .. 🙂
5 tipos de menú para tu sitio web
1 – Menú hamburguesa
Ya habrán escuchado hablar del menú hamburguesa!!! A continuación les pongo 2 ejemplos.
Este tipo de menú es muy usado en las versiones mobile, son ideales cuando tenemos poco espacio ya que optimiza el uso del mismo. Apoyo totalmente su uso en mobile, peeero para lo que son las versiones de escritorio no soy para nada fan de este tipo de menú, aunque hoy en día son cada vez más conocidos y reconocidos por los usuarios, en mi opinión tiene bastantes contras, al estar escondidas las secciones tras la hamburguesa hace que el usuario no tenga siempre todas las opciones a la vista, no puede saber rápidamente qué es lo que ofrece la web y a la vez tiene mayor costo de interacción, ya que siempre tiene que hacer un doble click el usuario para acceder a una de las opciones del menú.
En caso de que decidan usar un menú hamburguesa en una web, aconsejo que siempre se pueda acceder a esos enlaces desde algún otro lugar de la web, cómo enlaces dentro de la home o enlaces en el footer.
2 – Tabs
El menú de tabs seguramente lo conozcas aunque quizás no conocías su nombre, este tipo de menú es bastante usado dentro de una sección para organizar su contenido en grupos, en mi opinión es muy práctico cuándo los grupos de contenidos son pocos (alrededor de 4) y el contenido dentro de cada opción no es mega extenso…
En los 2 ejemplos de abajos son usados para ese caso.
http://www.ambarambulancias.com.ar/
Sitio de Despegar
3 – Menú estándar
El menú estándar es el más común en las versiones de escritorio, en mi caso es el que más uso, ya que creo que es el más claro y accesible.
Las recomendaciones para usar este tipo de menú es que diseñemos adecuadamente la arquitectura de la web, que definamos lo mejor posible la cantidad de secciones y sus nombres (labeks) para que estén alineados al modelo mental del usuario.
No hay número ideal de cantidad de enlaces que podemos poner en un menú estándar, ya que va a depender mucho de los labels que usemos en los enlaces, si son cortos, largos, etc, peeero en general alrededor de 7 es un número para considerar y tener en cuenta, pero cómo te decía dependerá de cada caso.
Menú estándar fijo
Esta opción del menú estándar, es cuando hacemos scroll y el menú queda siempre visible, fijo en la parte superior del sitio, el menú fijo es muy recomendable cuando la web tiene mucho contenido, para que no perdamos la visibilidad del mismo.
4 – Desplegable
Los desplegables son recomendados cuando tenemos subcategorías dentro de una web, hay que tener mucho cuidado cómo organizamos esas subcategorías para que el usuario encuentre ese contenido, si estas están mal agrupadas puede que tu usuario nunca llegue a ese contenido.
Cuando la web es muy grande, lo ideal es organizar el menú con una técnica de card sorting (post pendiente.. Qué es un card sorting..) con los usuarios, en general se cae en el error de agrupar esos contenidos de acuerdo a una organización empresarial o desde el punto de vista de la empresa, pero es importante saber dónde buscaría el usuario tal o cuál contenido.
Se recomienda que los menú desplegables se despliguen al hacer un hover sobre el mismo y NO al hacer click.
5 – Acordeón
El menú acordeón es aquel menú vertical, donde cliqueamos una opción y se despliega más info dentro. Este tipo de menú en general se usan para 2 casos, uno de los casos es cómo menú principal del sitio web, y el otro dentro de una sección específica de la web cómo menú secundario por ejemplo para dar información de algunos servicios o producto.
En ambos casos se usa siempre vertical, y las subsecciones aparecen al hacer click sobre la categoría principal.
http://turienzo-asociados.com/
https://alumni.harvard.edu/college
Cómo vimos hay muchas opciones de menú, el uso de cada uno va a depender en cada caso específico, lo ideal dentro de lo posible es siempre hacer algunas pequeñas pruebas de usuario para ver si se entiende la navegabilidad y si encuentran el contenido..
Podés pedirle a un amigo, a un pariente a los que tengas a mano!!! Que se siente en la web, y pedirle que encuentra algún contenido específico, que haga una consulta en la web, que busque tal producto o servicio.. Darle alguna tarea y observar cómo la realiza! Aunque sea con poquitos usuarios vas a sacar mucha info de valor de cómo se comporta el usuario 🙂
Tu turno!!
Revisá en tu web o la web de un cliente, si la opción de menú que usaste fue la más adecuada, si podrías mejorarlo de alguna manera, quizá solo mejorar los labels, mejorar el contraste, o marcar el enlace cuando estamos dentro de una sección, siempre hay cosas por mejorar en una web!!! Lo importante es darnos cuenta de que es lo que hay para mejorar y de a poco ir haciendo mejoras 🙂
Espero que te haya servido este post, y si tenés dudas o info para compartirnos, podés hacerlo en los comentarios o escribirle a mi mail!!!
Beso grande
Agus
Comentarios recientes