navegación móvil

La navegación móvil debe ser como una súper autopista, con señales e indicaciones de dónde ir y a la cual se pueda acceder con mucha facilidad.

Imagínate en tu coche intentando llegar a un determinado sitio pero la vía es totalmente nueva para ti, vas sin mapas, sin indicaciones, no ves señales en la carretera que te indiquen donde van más allá de una plantita verde o gira a la izquierda después de la curva, ¿se te hace difícil verdad? Lo opuesto a eso es lo que debe ocurrir con la navegación móvil, que debe ser fluida, fácil, sencilla y adaptable.

Diseñar de tal modo que la aplicación sea intuitiva, que permita a usuarios regulares o nuevos poder moverse por las diferentes opciones del menú con facilidad. Tal vez esto, se convierta en un desafío cuando se trata de dispositivos móviles con pantallas pequeñas, en este caso lo ideal es darle prioridad al contenido y sacrificar un poco algunos elementos de la interfaz (no exageres, tampoco es que sea un sacrificio como el de Aslan en Las crónicas de Narnia).

A continuación hablaré un poco de tres patrones de navegación que son esenciales para todo diseñador UI/UX

Menú de hamburguesas

En este tipo de diseño se toma en consideración el gran valor que tiene el espacio de pantalla, este diseño que utiliza un cajón lateral es uno de los patrones que goza de más popularidad.

Su panel de cajón lateral permite ser ocultado y mostrado solo cuando sea necesario que el usuario realice ciertas acciones. Si quieres que el contenido siga siendo el rey, este patrón de navegación es el ideal, ya que las personas inevitablemente centrarán toda su atención en lo que tienen frente a ellos puesto que de forma predeterminada, todos los componentes de navegación se mantienen ocultos. ¿Qué si es un poco minimalista? Seguro que sí.

El diseño de menú de hamburguesa tiene una gran cantidad de beneficios, sigue leyendo y entérate más:

1. Diseño limpio: como las opciones de pantalla se ubican en un menú lateral, la pantalla está totalmente libre y disponible para mantener la atención en el contenido.
2. Múltiples opciones de navegación: al tener la posibilidad de que el diseño sea por capas, en cada una de ellas (principal y secundaria) se pueden establecer infinidad de opciones para el usuario.
3. No abruma a los usuarios con exceso de información: al ser posible que el menú se oculte en la barra lateral, eliminas la posibilidad de que el usuario se vea abrumado por exceso de información.

Consejos
Utilizar el menú de hamburguesa no te ayudará a hacer la navegación más sencilla por arte de magia, debes vigilar que la navegación que diseñes no sea compleja, porque de lo contrario será mucho más difícil para personas que emplean dispositivos móviles.

Son muchos los casos en los cuales el menú visible mejora la experiencia del usuario. Ponte en los zapatos del usuario (solo de manera figurativa, no queremos verte con unos stilettos) e imagina qué es realmente importante para que esté visible en la pantalla del dispositivo y en función de ello, realiza tu diseño.

Es importante también que puedas revisar la arquitectura de la información, si tu aplicación es realmente compleja pero por su naturaleza no puedes simplificarla, lo más fácil es que la segmentes y dividas en varias aplicaciones (de ser posible), como ejemplo tenemos el caso de Facebook, que separó la opción Messenger para evitar problemas de incompatibilidad y la fusiona solo en la versión ligera Facebook Lite, que consume menos recursos pero es menos rica en experiencia visual.

Barra de pestañas

Este patrón de diseño es la herencia que nos deja el diseño de escritorio ¡menuda herencia, sería mejor una casa en Benidorm! Este diseño, generalmente se basa en accesos directos, son pocos los destinos de importancia que contiene.

Esta barra a diferencia del menú de hamburguesa hace que la información esté siempre visible, permite los accesos directos y muestra comentarios sobre el icono con el cual guarda relación.

Este diseño es realmente sencillo, no requiere de muchas explicaciones, comunica al usuario su situación actual y las señales visuales que se utilizan son tan sencillas que por sí mismas ya indican a que refieren, tal es el caso de los iconos, las etiquetas y los colores empleados en su diseño.

Si hay un diseño que deba ganarse el premio a la persistencia, seguramente la barra de pestañas sería galardonada, ya que las opciones de navegación persisten en la pantalla en todo momento, permitiendo que los usuarios tengan visibilidad de las funciones principales de la aplicación y así acceder a ellas a un solo clic.

Consejos
Diseña los objetivos táctiles lo suficientemente grandes como para alcanzarlos con la yema del dedo índice sin ningún inconveniente ya sea por un click o por tapping, la mayoría de los usuarios logra golpear de manera cómoda un objetivo con un tamaño de 10mm por 10 mm.

Utiliza íconos junto con las etiquetas de texto, estas son necesarias para poder comunicar el significado y reducir la ambigüedad, con esto los usuarios serán capaces de entender lo que sucede cada vez que toca un elemento al tener acceso a pequeñas definiciones.

Navegación basada en gestos

Hace diez años el mundo de la navegación dio un vuelco con la incorporación de la pantalla táctil en los equipos móviles ¡Gracias Steve Trabajo, Buen Job!

Se popularizaron los gestos de forma veloz entre los diseñadores, se comenzaron a desarrollar cada vez más aplicaciones en función del control de gestos.

En la actualidad, el éxito de una aplicación móvil depende en gran medida de cómo se implementen los gestos en la experiencia del usuario.

Consejos
Diseña una experiencia en la cual los usuarios ya estén familiarizados, así evitas tener que enseñarles a usar la interfaz.

Estos tres tipos de navegación móvil guardan entre sí el hecho de procurar una mejor experiencia de usuario, si vas a diseñar piensa en tu público objetivo e intenta adecuarte a sus necesidades, recuerda que en lo que a diseño se refiere, el cliente también tiene la razón. ¡Nos vemos en una próxima oportunidad!