Créditos: thinkwithgoogle

Patrones básicos de Navegación en Apps Móviles

La Navegación en tu app debe ser intuitiva y predecible. Tanto para usuarios nuevos como para quienes vuelven a usarla debe ser simple de descubrir como moverse en las distintas secciones con comodidad. Pero lograr que la navegación sea descubrible y accesible puede ser todo un desafío por las limitaciones de las pantallas pequeñas y la necesidad de priorizar el contenido sobre los componentes de la interface. Diferentes patrones de navegación apuntan a resolver este mismo problema de diferentes modos, pero todos tienen, en algún aspecto, problemas de usabilidad.

En este articulo vamos a examinar los tres patrones básicos de navegación en apps móviles— hamburger menu, tab bar y navegación basada en gestos— y describir fortalezas y debilidades de cada una de ellas.

Hamburger Menu (menú de hamburguesa)

El espacio en la pantalla es “mercancía valiosa” en un móvil y el hamburger menu (o menu lateral) es uno de los patrones más comunes para ahorrar espacio. Este menu nos permite ocultar la navegación en el borde izquierdo de la pantalla y se muestra solo luego de una acción del usuario. Puede ser particularmente útil si queremos que el usuario se concentre en el contenido principal.

En su estado default, el hamburger menu y todo su contenido permanece escondido

Ejemplo

Como puedes ver, todo el menu esta escondido detrás del icono característico.

Version antigua de Foursquare. Créditos: lmjabreu

Pros

  • Espacio para una gran cantidad de elementos a mostrar. La principal ventaja de este tipo de menu es que puede contener cómodamente una larga lista de opciones de navegación en un espacio pequeño.
  • Diseño limpio. Libera espacio en la pantalla al colocar todos los elementos relacionados a la navegación en un menu desplegable.

Cons

  • Es menos “descubrible”. Lo que está fuera de la vista, esta fuera de la mente. Cuando la navegación está oculta, los usuarios son menos propensos a utilizar la navegación. Aún cuando esta opción parece convertirse en un estándar, muchos usuarios sencillamente ni siquiera piensan en abrirlo.
  • Colisiona con reglas de navegación de varias plataformas. El hamburger menu se convirtió en un estándar en Android (con el nombre de Navigation drawer en Material Design), pero en iOS no puede implementarse sin colisionar los elementos básicos de navegación, y esto puede sobrecargar la barra de navegación
Mal uso de un hamburger menu en una iOS app. Créditos: lmjabreu
  • El icono de hamburger menu oculta el contexto. Este menú no comunica la posición actual a simple vista, siendo solamente visible cuando el usuario accede al icono.
  • Requiere una acción extra para alcanzar el objetivo de destino. Navegar a una sección particular usualmente requiere al menos dos clicks (un click en el icono del menu, y el otro —a la página de destino).

Tips

  • Prioriza las opciones de navegación. Si tu navegación es compleja, ocultarla no la hace más amigable. Muchos ejemplos muestran claramente que exponiendo los menus de manera más visible incrementan el engagement y la satisfacción del usuario. Pregúntate: “¿Qué cosa es lo suficientemente importante para ser visible en el móvil?” Responder esa pregunta requiere comprender realmente qué importa para tus usuarios.
Créditos: lukew
  • Considera utilizar tabs o una tab bar si tienes un numero limitado de opciones u opciones claramente prioritarias.
YouTube dispuso las piezas más importantes a un tap de distancia, lo que le permite al usuario cambiar rápidamente de funcionalidad. Créditos: Luke Wroblewski
  • Revisa tu arquitectura de información. Las buenas aplicaciones son las claramente enfocadas en pocas acciones. Esto significa que si actualmente tienes una app muy compleja puedes dividir la funcionalidad entre dos (o más) apps mucho más simples. Facebook lanzó su app Messenger para resolver este problema de complejidad. La funcionalidad reducida resulta en un set de opciones de navegación reducido, y, por lo tanto, evitar el hamburger menu.

Tab Bar

Este patrón fue heredado del diseño de interacción para Desktop. Usualmente contiene pocas opciones de importancia similar que requieren acceso directo desde cualquier parte de la app.

El tab bar no requiere ocultar las opciones, permite acceso directo y da feedback en el icono relacionado.

Ejemplo

El Tab bar de Twitter permite a los usuarios navegar directamente a las pantallas asociadas con los iconos.

Twitter app for iOS. Image credit: Mashable

Pros

  • Comunica de manera rápida y sencilla la posición actual del usuario. Con pistas visuales correctamente utilizadas (iconos, etiquetas y colores) no es necesario ninguna explicación extra.
  • Los Tab bars persisten. Muestra todas las opciones de navegación en la pantalla todo el tiempo. El usuario tiene una clara visibilidad de todas las secciones y un acceso rápido a ellas.

Cons

  • Número limitado de opciones. Si tu app tiene más de cinco opciones sería muy difícil de acomodarlas en un navigation bar respetando el tamaño “óptimo de objetivo de toque”.
No usar más de cinco opciones en un tab bar.
  • Diferentes posiciones y lógicas en iOS y Android. Las plataformas tienen diferentes reglas y guías relacionadas a la UI y Usabilidad que debemos considerar cuando diseñamos el tab bar para cada una de ellas. Esta puede aparecer arriba (comúnmente en Android) o al final de la pantalla (comúnmente en iOS). Incluso, en Android muchas apps utilizan las barras del fondo de la pantalla para mostrar acciones.
Una correcta locación y lógica de este patrón ayuda a mantener una experiencia consistente con otras aplicaciones de la plataforma y prevenir confusiones entre acciones y navegación. Créditos: Google

Tips

  • Haz los objetivos de toque lo suficientemente grandes. Los elementos a tocar deben ser lo suficientemente grandes para que sean cómodamente tocados o clickeados. Para calcular el ancho de cada acción en la navegación de tab bar divide el ancho de la vista por la cantidad de acciones a representar y sigue el siguiente estándar:
La mayoría de los usuarios se sienten cómodos y confiados a la hora de tocar un objetivo de 10mm x 10mm. Créditos: uxmag
  • Tus iconos deben ser tambien testeados en usabilidad. Usa la regla de los 5 segundos: si te toma más de 5 segundos en pensar en un icono apropiado para algo, claramente el mismo no será efectivo en representar esa tarea o funcionalidad.
  • Siempre usa iconos acompañados con etiquetas. Siendo que no existe un uso estándar para la mayoría de los iconos los text labels son necesarios para comunicar significado y reducir ambigüedad. Los usuarios deben comprender exactamente que ocurrirá si tocan ese elemento.
Utiliza text labels para proveer descripciones cortas y con significado en la parte inferior de los iconos de navegación.

Navegación basada en gestos

El 29 de Junio de 2007 fue una revolución. En ese momento Apple lanzaba el primer smartphone casi sin botones físicos, con una pantalla completamente táctil y, desde entonces, los dispositivos móviles pasaron a ser dominados por este tipo de interacciones.

Créditos: Aaron Wade

Los gestos se popularizaron rápidamente entre los diseñadores y aparecieron apps experimentando con este tipo de controles.

App basada en gestos “Clear”

En el mundo de hoy el éxito de una app puede depender dramáticamente en que tan bien estén implementados los gestos en la experiencia del usuario.

Ejemplo

Tinder cambió su industria con el gesto swipe, de hecho, este gesto se transformó en la definición del producto en sí mismo. La gente asocia la app con el “swipe a la izquierda” o “swipe a la derecha.”

Pros

  • Libera espacio en la UI. Agregando gestos en el corazón de tu diseño te permite crear interfaces minimalistas y salvar espacio en pantalla para mostrar contenido valioso.
  • “Interface Natural.” Luke Wroblewski, en su articulo, nos cuenta sobre cómo 40 personas en nueve diferentes países fueron consultadas para crear gestos para 28 diferentes tareas tales como borrar, escrollear, zoomear, etc. Lo importante a notar es los mismos tienden a ser similares sin importar cultura y experiencia. Por ejemplo, cuando les pidieron un gesto para “borrar” la mayoria de los entrevistados— sin importar nacionalidad — intentaron mover el objeto fuera de la pantalla.

Cons

  • Navegación invisible. Una de las reglas de diseño mas importantes en UI es visibilidad: a través de los menues, todas las acciones posibles son visibles, o sencillamente descubribles. Una interface invisible puede ser muy seductora, pero por el hecho de ser invisible también se enfrentará a varios problemas de usabilidad: siendo que los gestos siempre están ocultos, los usuarios necesitan encontrarlos primero y, tal como ocurre con el hamburger menu: si escondes una opción, menos personas la van a utilizar.
  • Agrega esfuerzo al usuario. Si bien la mayoría de los gestos son naturales, algunos de ellos no son simples de aprender o recordar. Cuando diseñamos una navegación basada en el gesto debemos considerar que cada vez que quitamos algo de la interface, la curva de aprendizaje de la app se incrementa y sin unas buenas pistas visuales el usuario puede sentirse confundido sobre cómo interactuar con la app.

Tips

  • Asegúrate que no estas enseñándole a tus usuarios una forma radicalmente nueva de interactuar con una interface. Diseña una experiencia familiar. Aprende primeramente los gestos disponibles en el mundo móvil y luego utilízalos a tu favor. Por ejemplo, si diseñas un cliente de email puedes usar el gesto de swipe sobre una celda ya que es un gesto muy común para los usuarios de este tipo de apps:
  • Usa descubrimiento progresivo con pequeñas pistas visuales para enseñarle a la gente a interactuar con tu interface. Recuerda que necesitas mostrar solo la información que es relevante en la actividad actual del usuario, como lo hacen correctamente muchos juegos a medida que avanzas en su historia:
Pudding Monsters usa una mano animada para representar un nuevo escenario a los usuarios.

Conclusión

Ayudar a los usuarios a navegar debe ser una alta prioridad en todas las apps. Siempre piensa como tu usuario, piensa en sus objetivos al usar tu app, y usa tu navegación para ayudarlos a conseguir esas metas. Mientras mas sencillo de usar sea tu producto, más usuarios querrán usarlo.

¡Gracias!