Las reglas de oro del diseño de navegación inferior
Publicado: 2022-03-10El diseño es algo más que una buena apariencia, algo que todos los diseñadores deberían saber. El diseño también cubre cómo los usuarios interactúan con un producto. Ya sea un sitio o una aplicación, es más como una conversación. La navegación es una conversación. No importa cuán bueno sea su sitio o aplicación si los usuarios no pueden orientarse.
En esta publicación, lo ayudaremos a comprender mejor los principios de una buena navegación para aplicaciones móviles y luego le mostraremos cómo se hace usando dos patrones populares. Si desea intentar crear un prototipo de su propia navegación, puede descargar y probar Experience Design CC de Adobe de forma gratuita y comenzar de inmediato.
Lectura adicional en SmashingMag:
- The Thumb Zone: diseño para usuarios móviles
- Cómo usar sombras y efectos de desenfoque en el diseño de interfaz de usuario moderno
- Más que simplemente bonito: cómo las imágenes impulsan la experiencia del usuario
Empecemos
Los patrones de IU de navegación son un atajo para una buena usabilidad. Cuando examina los diseños de navegación de interacción más exitosos de los últimos años, los ganadores claros son aquellos que ejecutan los fundamentos sin problemas . Si bien pensar fuera de la caja suele ser una buena idea, hay algunas reglas que simplemente no puede romper. Aquí hay cuatro reglas importantes para crear una gran navegación móvil:
Sencillo
En primer lugar, y lo más importante, un sistema de navegación debe ser sencillo . La buena navegación debe sentirse como una mano invisible que guía al usuario. Un enfoque para esto es priorizar el contenido y la navegación de las aplicaciones móviles de acuerdo con las tareas que es más probable que realice un usuario móvil.
Visible
Como dice Jakob Nielsen, reconocer algo es más fácil que recordarlo. Esto significa que debe minimizar la carga de memoria del usuario haciendo visibles las acciones y opciones. La navegación debe estar disponible en todo momento, no solo cuando anticipamos que un usuario la necesita.
Claro
La función de navegación debe ser evidente . Debe concentrarse en entregar mensajes de manera clara y concisa. Los usuarios deben saber cómo ir del punto A al punto B a primera vista, sin ninguna guía externa. Piense en el ícono del carrito de compras; sirve como identificador para retirar o ver artículos. Los usuarios no tienen que pensar en cómo navegar para realizar una compra; este elemento los dirige a la acción apropiada.
Consistente
El sistema de navegación para todas las vistas debe ser el mismo. No mueva los controles de navegación a una nueva ubicación en diferentes páginas. No confunda a su usuario: mantenga las palabras y las acciones consistentes. Su navegación debe usar "El principio de la menor sorpresa". La navegación debe inspirar a los usuarios a involucrarse e interactuar con el contenido que está entregando.
Diseño pensando en los pulgares
En su investigación sobre el uso de dispositivos móviles, Steven Hoober descubrió que el 49% de las personas confían en un solo pulgar para realizar tareas en sus teléfonos. En la siguiente figura, los diagramas en las pantallas de los teléfonos móviles son gráficos de alcance aproximado , en los que los colores indican qué áreas de una pantalla puede alcanzar un usuario e interactuar con su pulgar. El verde indica el área a la que un usuario puede llegar fácilmente; amarillo, zona que requiere un estiramiento; y rojo, un área que requiere que los usuarios cambien la forma en que sostienen un dispositivo.
Al diseñar, tenga en cuenta que su aplicación se utilizará en varios contextos; incluso las personas que prefieren usar un agarre con dos manos no siempre estarán en una situación en la que puedan usar más de un dedo, y mucho menos ambas manos para interactuar con su interfaz de usuario. Es muy importante colocar las acciones de nivel superior y de uso frecuente en la parte inferior de la pantalla . De esta manera, se alcanzan cómodamente con interacciones con una mano y un pulgar.
Otro punto importante: la navegación inferior debe usarse para los destinos de nivel superior de importancia similar . Estos son destinos que requieren acceso directo desde cualquier lugar de la aplicación.
Por último, pero no menos importante, preste atención al tamaño de los objetivos. Microsoft sugiere que configure el tamaño de su objetivo táctil en 9 mm cuadrados o más (48 × 48 píxeles en una pantalla de 135 PPI con una escala de 1,0x). Evite usar objetivos táctiles que tengan menos de 7 mm cuadrados.
Barra de pestañas
Muchas aplicaciones usan la barra de pestañas para las funciones más importantes de una aplicación. Facebook hace que las piezas principales de la funcionalidad central estén disponibles con un solo toque, lo que permite cambiar rápidamente entre funciones.
Tres momentos cruciales para el diseño de navegación inferior
La navegación es generalmente el vehículo que lleva a los usuarios a donde quieren ir. La navegación inferior debe usarse para los destinos de nivel superior designados de importancia similar. Estos son destinos que requieren acceso directo desde cualquier lugar de la aplicación. Un buen diseño de navegación inferior sigue estas tres reglas.
1. Mostrar solo los destinos más importantes
Evite usar más de cinco destinos en la navegación inferior, ya que los destinos táctiles estarán demasiado cerca uno del otro. Poner demasiadas pestañas en una barra de pestañas puede hacer que sea físicamente difícil para las personas tocar la que desean. Y, con cada pestaña adicional que muestra, aumenta la complejidad de su aplicación. Si su navegación de nivel superior tiene más de cinco destinos, proporcione acceso a los destinos adicionales a través de ubicaciones alternativas.
Evite el contenido desplazable
La navegación parcialmente oculta parece ser una solución obvia para pantallas pequeñas: no tiene que preocuparse por el estado limitado de la pantalla, simplemente coloque sus opciones de navegación en una pestaña desplazable. Sin embargo, el contenido desplazable es menos eficiente, ya que es posible que los usuarios tengan que desplazarse antes de poder ver la opción que desean, por lo que es mejor evitarlo en la medida de lo posible.
2. Comunicar la ubicación actual
El error más común que se ve en los menús de las aplicaciones es no indicar la ubicación actual del usuario. "¿Dónde estoy?" es una de las preguntas fundamentales que los usuarios deben responder para navegar con éxito. Los usuarios deben saber cómo ir del punto A al punto B en función de su primera mirada y sin ninguna guía desde el exterior. Debe usar las señales visuales adecuadas (iconos, etiquetas y colores), para que la navegación no requiera ninguna explicación.
Iconos
Las acciones de navegación inferiores se deben utilizar para el contenido que se puede comunicar adecuadamente con iconos. Si bien hay íconos universales que los usuarios conocen bien, en su mayoría representan funciones como búsqueda, correo electrónico, impresión, etc. Desafortunadamente, los íconos "universales" son raros. Desafortunadamente, los diseñadores de aplicaciones a menudo ocultan la funcionalidad detrás de íconos que en realidad son bastante difíciles de reconocer.
Etiquetas de texto
Las etiquetas de texto deben proporcionar definiciones breves y significativas de los iconos de navegación. Evite las etiquetas de texto largas, ya que no se truncan ni se ajustan.
### Insignia en una pestaña Puede mostrar una insignia en un icono de la barra de pestañas para indicar que hay nueva información asociada con esa vista o modo.
3. Haga que la navegación sea evidente
La buena navegación debe sentirse como una mano invisible que guía al usuario a lo largo de su viaje. Después de todo, incluso la característica más genial o el contenido más atractivo es inútil si la gente no puede encontrarlo.
Conducta
Cada ícono de navegación inferior debe conducir a un destino objetivo y no debe abrir menús u otras ventanas emergentes. Tocar un icono de navegación inferior debería guiar al usuario directamente a la vista asociada o actualizar la vista actualmente activa. No utilice una barra de pestañas para dar a los usuarios controles que actúen sobre elementos en la pantalla actual o en el modo de aplicación. Si necesita proporcionar controles, use una barra de herramientas en su lugar.
Esfuércese por la consistencia
En la medida de lo posible, muestre las mismas pestañas en todas las orientaciones. Es mejor cuando puede dar a los usuarios una sensación de estabilidad visual.
No elimine una pestaña cuando su función no esté disponible . Si elimina una pestaña en algunos casos pero no en otros, la interfaz de usuario de su aplicación se vuelve inestable e impredecible. La mejor solución es asegurarse de que todas las pestañas estén habilitadas, pero explicar por qué el contenido de una pestaña no está disponible. Por ejemplo, si el usuario no tiene archivos sin conexión, la pestaña Sin conexión de la aplicación de Dropbox muestra una pantalla que explica cómo obtenerlos. Esta función se llama estado vacío.
Ocultar la barra de pestañas al desplazarse
Si la pantalla es una fuente de desplazamiento, la barra de pestañas se puede ocultar cuando las personas se desplazan en busca de contenido nuevo y revelarse cuando comienzan a regresar a la parte superior.
Deleite Visual
Evite el uso de movimiento lateral para la transición entre vistas. La transición entre vistas activas e inactivas debe usar una animación de fundido cruzado.
Iconos pictóricos: navegación creativa
El tamaño de la pantalla es un gran desafío para comunicar su punto al usuario. El uso de iconos pictóricos como elementos de menú es una de las soluciones más interesantes al problema de ahorrar espacio en la pantalla del móvil. La forma del ícono explica a dónde lo llevará, lo que los hace más eficientes en cuanto al espacio. Pueden hacer que la navegación sea simple y fácil de usar, pero aún con suficiente libertad para separarlo de los demás.
Sin embargo, este patrón tiene una desventaja importante: el botón de acción flotante oculta el contenido . Desde un punto de vista de UX, los usuarios no deberían tener que realizar una acción para descubrir qué otras acciones pueden realizar.
Además, muchos investigadores han demostrado que los íconos son difíciles de memorizar y, a menudo, son muy ineficientes. Solo funcionan bien los íconos universalmente entendidos (p. ej., imprimir, cerrar, reproducir/pausar, responder, twittear). Por eso es importante que sus iconos sean claros e intuitivos e introduzca etiquetas de texto junto a sus iconos.
Conclusión
La navegación es generalmente el vehículo que lleva a los usuarios a donde quieren ir. Piensa siempre en tu personaje de usuario y en los objetivos que tienen al usar tu aplicación. Luego, adapte su navegación para ayudarlos a alcanzar esos objetivos. Estás diseñando para tus usuarios . Cuanto más fácil sea para ellos usar su producto, más probable es que lo usen.
Este artículo es parte de la serie de diseño de UX patrocinada por Adobe. La aplicación Experience Design recientemente presentada está hecha para un proceso de diseño de UX rápido y fluido, creando prototipos de navegación interactivos, así como probándolos y compartiéndolos, todo en un solo lugar.Puede consultar más proyectos inspiradores creados con Adobe XD en Behance y también visitar el blog de Adobe XD para mantenerse actualizado e informado. Adobe XD se actualiza con nuevas funciones con frecuencia y, dado que se encuentra en versión beta pública, puede descargarlo y probarlo de forma gratuita.