Subnavegación para móvil

Experiencia de usuario
18/7/2017
|
Daniel Torres Burriel
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Muchos productos digitales tienen arquitecturas de la información complejas que son difíciles de mostrar correctamente en pantallas grandes donde tenemos espacio para mostrar categorías y subcategorías. En dispositivos móviles las opciones de mostrar arquitecturas complejas se reducen, evidentemente por el tamaño de la pantalla.

Desde Norman Nielsen ponen como ejemplo de sitio difícil de trasladar, Cisco.

Os dejo un par de capturas, una del mega menú para escritorio:

Captura de pantalla 2017 07 18 a las 9.41.26 e1500378837327
Captura del mega menú de Cisco

Y otra de la versión móvil del mismo menú para que podáis comparar ambas.

En un móvil de 5 pulgadas (el tamaño más usual actualmente) en un navegador móvil el submenú de navegación de Cisco ocupa dos pantallas, una hasta “Solutions” y otra de “Solutions” hasta el final. Como podéis imaginar el scroll necesario para llegar a “How To Buy” o “Training” es algo incómodo.

Aunque como podéis ver el menú tiene una jerarquía visual clara, hay espacio entre cada elemento del menú y una priorización de sus elementos. Por lo que en principio sería un buen trabajo de traslado, a pesar de las dificultades. Doy por seguro que han hecho en Cisco un card sorting y un tree test con los elementos del menú antes de llegar a esta solución.

Pautas de diseño para subnavegación móvil

Norman Nielsen en un artículo nos da una serie de pautas de diseño para subnavegación móvil, donde al igual que en el Estudio, nos dicen que nos fijemos en las metas del usuario y sigamos estas tres pautas de diseño:

  • Coste mínimo de interacción: los usuarios deben poder acceder a un elemento de la navegación con el mínimo interacción necesario, es decir cuantas menos pantallas y menor número de clics y submenús, mejor para el usuario.
  • Incluye la ruta típica: muchas veces los usuarios tendrán una ruta típica para acceder a un sitio o una clasificación determinada en un catálogo a la que estén acostumbrados, es bueno incluirla para mejorar la usabilidad y que nos usuarios no se frustren.
  • Posibilidad de descubrimiento: los usuarios deben de poder descubrir por sí mismos la subnavegación sin necesidad de ayuda externa y sin confundirla con la navegación principal.

La subnavegacion para móvil la podemos dividir según Norman Nielsen en cuatro tipos principales:

  1. Acordeones: los acordeones serían la subnavegación que se encuentra debajo de un menú hamburguesa. Los submenús funcionan bien cuando tienen un número pequeño de categorías (unas 6 como máximo es lo ideal). Ya que cuantas más subcategorías tenga un submenú más largo será y más difícil para el usuario decidirse por una de las opciones. Los submenús tienen un coste bajo de interacción, dan de rutas a todas las opciones de navegación y es difícil confundir la navegación principal y la secundaria.
  2. Menús secuenciales: un menú secuencial es aquel que solo muestra las subcategorías de la que se ha seleccionado en el menú anterior. Los menús secuenciales tienen un poco de controversia, ya que depende de la habilidad espacial del usuario. Los usuarios con una habilidad espacial baja los encuentran confusos y liosos.
  3. Menús de sección: los menús de sección son aquellos que te muestran todas las páginas de una determinada sección. Son habituales en sitios de noticias o en sitios gubernamentales. Ya que los usuarios quieren que se les muestren contenidos de una determinada temática. Puede haber subcategorías dentro de una determinada temática, ya que normalmente son sitios dedicados a una temática concreta y los usuarios pueden querer ver contenidos de una determinada categoría, ya sea de un equipo o un deporte en concreto por poner un ejemplo.
  4. Landings de categoría: cuando todo lo de demás falla, esta suele ser la opción de emergencia. Dividir el menú por categorías y hacer una landing con cada una a partir de dónde redirigiremos a los usuarios. Este caso suele ser el elegido cuando tenemos mucho contenido que mostrar y que no tiene unas rutas establecidas o estas cambian a lo largo del tiempo. Es una opción ideal para sitios que es raro que se navegue erráticamente, es decir que el usuario va a hacer una determinada cosa y la acaba, ni desea navegar por el sitio y sus subcategorías.

Para finalizar, Norman Nielsen nos da un algoritmo de cómo debemos ordenar nuestra subnavegación dependiendo del número de subcategorías nuestra navegación:

  • Menos de seis subcategorías en la categorías del menú principal: un submenú o un acordeón.
  • Entre seis y 15 subcategorías en las categorías: un menú de sección.
  • Más de 15 subcategorías del menú principal: landings de categoría.

Con estas pautas y este algoritmo espero haber sido de ayuda si estáis rediseñando vuestro producto digital para dispositivos móviles, si necesitáis ayuda ya sabéis donde encontrarme.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.