En toda aplicación es necesario contar con un menú de navegación que permita a los usuarios dirigirse a diferentes secciones y realizar diversas acciones. Crear un menú de navegación limpio y organizado puede ser difícil, la tarea se vuelve más compleja cuando se trata de una aplicación exclusiva para dispositivos móviles debido a las limitaciones que supone por el tamaño de pantalla. Como respuesta a las necesidades de los usuarios en estos dispositivos, han surgido diversos patrones para navegación en móviles a lo largo de los años. En este artículo revisamos los patrones de navegación más comunes y empleados en los dispositivos móviles.
Menú hamburguesa
Debido al limitado espacio de la pantalla en dispositivos móviles, el icono del menú hamburguesa es uno de los patrones de navegación más utilizados en la actualidad. Este útil icono de tres líneas indica que el menú se encuentra “escondida” y solo se activará cuando el usuario seleccione el icono.
Ventajas
- Libera espacio de la pantalla de manera que el usuario se puede enfocar en el contenido principal
- Puede utilizarse para organizar una gran cantidad de secciones en un espacio mínimo
- Evita que los usuarios se sientan abrumados al minimizar las secciones disponibles
Desventajas
- Ya que el menú se encuentra minimizado se hace menos probable que los usuarios lo empleen. Sigue siendo visible, pero se concentrarán en otros elementos en la pantalla.
- Se requieren pasos extra para llegar a la sección deseada ya que se debe activar el menú para ver todas las opciones.
¿En qué ocasiones es usado efectivamente?
Ya que este tipo de patrón esconde el menú, no es muy efectivo en aplicaciones en donde el usuario continuamente necesita cambiar de sección como puede ser el caso de una tienda online que posee una gran variedad de productos. Pero este detalle no implica que este icono no es de utilidad, de hecho puede ser de gran ayuda al usarlo como navegación secundaria como es el caso de aplicaciones dedicadas como Uber, en donde la mayor interacción se da en la pantalla de inicio y los enlaces asociados a ésta. El menú se emplea como una especie de adición en donde el usuario puede visitar opciones secundarias de navegación pues las acciones principales se pueden realizar sin necesidad de acceder a este menú
Barra de pestañas
Este tipo de menú se ha visto inspirado en el diseño para ordenadores. Usualmente contiene unos pocos enlaces, todos ellos son de igual importancia y por lo tanto, se requiere un acceso directo hacia ellos. Aunque es posible que se coloque solo texto, también se pueden colocar iconos y texto para reforzar el mensaje de forma visual.
Ventajas
- Comunica donde se encuentra el usuario pues el icono o enlace suele destacarse una vez seleccionado. De esta forma, el usuario comprende inmediatamente su posición actual
- Siempre es visible sin importar que página o sección el usuario esté viendo.
Desventajas
- Las opciones de navegación son limitadas. Aunque es posible colocar un mayor número de opciones en la barra al hacerla deslizable, los enlaces que no se encuentran visibles pierden importancia y dejaría de ser una navegación directa.
- En Android, colocar una barra de pestañas en la parte inferior puede ser problemático pues es allí donde se encuentran los controles de navegación propios del sistema operativo. Es mucho más sencillo que se toquen estos botones por error si se coloca en esta posición.
¿En qué ocasiones es usado efectivamente?
La navegación en pestañas es una solución perfecta para aplicaciones que poseen un número mínimo de opciones de navegación (hasta 5 sería el máximo) para que todas éstas puedan ser visibles en la pantalla de inicio. De esta manera, se activan en un solo toque, a diferencia del menú hamburguesa.
Botón flotante
Este botón circular literalmente flota en la interfaz. Se suele colocar en la parte inferior de la pantalla y es visible sin importar cuanto se desplace el usuario por la página. Cuando este botón es seleccionado, parece que se elevara o agrandara ligeramente. Es un elemento que se emplea comúnmente en el Material Design.
Ventajas
- Ocupa un espacio mínimo en pantalla
- Es un indicador de las acciones principales que deseas que tomen los usuarios
- Capta la atención de los usuarios porque es un elemento que se encuentra en primer plano.
Desventajas
- Ya que es colorido y se encuentra en un primer plano capta la atención de los usuarios y en algunos casos puede llegar a distraer a los usuarios del contenido principal de la aplicación.
- Puede bloquear contenido importante que los usuarios necesitan visualizar ya que se coloca en primer plano. De esta forma, el usuario debe desplazarse hacia abajo para poder ver la información oculta por el botón.
- Funciona solo con iconos. Debido a su forma, se ha optado por colocar solo un icono. Este icono puede variar según la aplicación, pero puede ser confuso para los usuarios ya que no ofrece contexto. Usualmente se utiliza con un lápiz o con un símbolo de suma, pero el significado puede variar enormemente entre diversas aplicaciones
¿En qué ocasiones es usado efectivamente?
Este botón se enfoca en las acciones usuales que puede tomar el usuario. Es una especie de indicador de lo que debe hacer el usuario o de las opciones disponibles, en ciertos casos. Por ejemplo, en una aplicación para reproducir música lo más común es que si se coloca un botón flotante, éste contenga el icono de “reproducir”.
Ya que es llamativo, los usuarios no pueden evitar interactuar con él y pueden realizar acciones específicas en uno o dos toques en la pantalla.
Navegación de pantalla completa
Aunque todos los patrones descritos previamente se centran en minimizar el espacio empleado en pantalla, este tipo de navegación hace exactamente lo opuesto: ocupa toda la pantalla. De esta manera, el usuario se centra en la navegación hasta elegir una opción apropiada o interesante para él. Puede contener opciones adicionales que son reveladas una vez que el usuario ha seleccionado la sección que le interesa.
Ventajas
- El usuario centra toda su atención en el menú una vez se ha activado.
- Puedes organizar información de forma coherente sin abrumar a los usuarios.
- Una vez que el usuario ha decidido a qué sección ir, puedes dedicar todo el espacio en pantalla en contenido específico para esa sección.
- Puedes organizar varios niveles de navegación e indicarlas mediante flechas o desplegables.
Desventajas
- Te ves limitado a mostrar solo las opciones de navegación hasta que el usuario decida la sección que desea visitar.
¿En qué ocasiones es usado efectivamente?
Este tipo de navegación es ideal cuando los usuarios suelen limitarse a visitar solo una sección específica de la aplicación cada vez que ingresan. También si se cuenta con una gran cantidad de secciones en la navegación pues como se va revelando información poco a poco, se evita abrumar a los usuarios.
En conclusión…
La navegación es un tema relevante, tanto en ordenadores como en móviles. Debido al espacio limitado de la pantalla, se han buscado opciones de navegación en móviles y se han desarrollado nuevos patrones que han podido sorprender a los usuarios en un primer momento, pero debido al uso de estos patrones en otras aplicaciones, se han podido acostumbrar fácilmente.
En ciertos casos, es posible emplear diversos patrones en una sola interfaz. Por ejemplo, combinar el uso de pestañas de navegación con un botón flotante para destacar la acción principal que buscamos tome el usuario.