¿Cuando falla la navegación inferior? Revelando los puntos difíciles.
Hay un viejo refrán que el buen diseño debe ser de larga duración. Dieter Rams especifica que las creaciones de diseñadores deben anular la moda. De esta manera, el producto nunca será anticuado.
Hace unos años hubo un gran BUM alrededor del menú lateral en aplicaciones móviles. Ahora, parece que la navegación de fondo se ha convertido en una nueva tendencia. ¿Debemos implementar este patrón en todos los tipos de aplicaciones? ¿O tal vez esto es sólo una próxima moda transitoria?
Principios de Navegación Inferior
Antes de sumergirnos en una pequeña crítica, vamos a explicar cuáles son las características de esta navegación inferior.
Diseño del material
La barra de navegación inferior es uno de los patrones más recientes del Marco visual de Google. Permite explorar las vistas de nivel superior en tan sólo un toque.
Las directrices de diseño de materiales recomiendan mostrar de 3 a 5 elementos . Si la aplicación tiene sólo 2 destinos principales, debe utilizar el patrón de “Tab” de materiales. Éste se muestra en la parte superior de la pantalla (dentro o debajo de la barra de aplicaciones).
La altura de la barra de navegación inferior es 56dp. Debe garantizar el área táctil apropiada. El tamaño de un icono si 24dp, la etiqueta de texto tiene 14sp (elemento seleccionado) y 12 sp (elementos inactivos).
La pestaña seleccionada debe teñir el icono activo con el color primario de la aplicación. El resto de los iconos deben tener el mismo color. Google recomienda que se debe conducir a destinos que requieren acceso directo desde cualquier lugar de la aplicación.
Lo que es más, se permite mostrar sólo iconos (sin etiquetas de texto) en la barra de navegación inferior. El patrón también se puede ocultar cuando la lista o la cuadrícula se desplaza hacia abajo y se revela después de desplazarse hacia arriba. En Android, la navegación inferior no reacciona al presionar el botón “Atrás” . Está diseñado de esta manera, porque navega por ventanas paralelas de la solución. Por último, las directrices de diseño de materiales sugieren que el último elemento del usuario no sea la opción “más”: esta debe ser la función del cajón de navegación (versión de diseño de material del menú lateral).
Este patrón de interfaz de usuario está especialmente dedicado al uso móvil. Google recomienda evitarlo en un escritorio (diseñadores deben utilizar barras laterales allí).
IOS
El elemento de interfaz de navegación inferior en iOS es bien conocido como la barra de pestañas. Se implementa en el sistema operativo móvil de Apple desde el principio. Este patrón de navegación ha pasado algunos ajustes visuales, pero sus principios siguen siendo los mismos.
Las barras de pestañas se colocan en la parte inferior de la pantalla. Ofrece la posibilidad de cambiar rápidamente entre las ventanas principales de la aplicación. La pestaña seleccionada tiene un color diferente al resto. De esta manera obtiene una función informativa.
Apple recomienda utilizar el patrón de navegación inferior para organizar la información en el nivel superior de la navegación de la aplicación. Barra de pestañas debe utilizarse sólo para fines de navegación. No implemente ninguna acción para el contenido de la ventana allí.
Human Interface Guidelines indica que la aplicación no debe ocultar o deshabilitar una pestaña cuando su función no está disponible. Las pestañas deben tener el mismo contenido en toda la solución. Sólo entonces su producto se sentirá estable y fiable en los ojos de sus usuarios.
El tamaño recomendado del icono debe ser alrededor de 25pt. Las etiquetas de texto tienen alrededor de 10pt. La altura total de la barra de pestañas es 49pt.
Utilice entre 3 y 5 pestañas en la navegación inferior. Menos de 3 elementos no se sentirán naturales, más de 5 será difícil de tocar. Si hay más secciones de su solución, la última de 5 pestañas debe ser una opción “Más” que llevará al menú de la posición restante.
Puntos comunes difíciles en la navegación inferior
Después de la confirmación con los principios básicos de Bottom Navigation, puede notar que es muy simple y fácil de usar patrón. Pero, también hay algunas desventajas.
Estructura de navegación confusa
Si bien la recomendación de incluir sólo 3 o 5 elementos de navegación de nivel superior en este patrón de interfaz de usuario es muy racional. Personalmente, no entiendo por qué debería mostrarse en toda la aplicación. El espacio en los dispositivos móviles sigue siendo precioso y los niveles más profundos de navegación no necesitan la barra inferior.
La navegación de la aplicación será mucho más limpia cuando la barra se mostrará sólo en los destinos que se presentan en las fichas. La navegación en paralelo no debe mezclarse con la jerárquica. De esta manera el usuario será capaz de construir un modelo mental de la aplicación más rápido.
La barra toma demasiado espacio precioso de la pantalla de Smartphone
Tanto Google como Apple recomiendan mostrar la barra de navegación inferior en todas las pantallas. Barra de pestañas en iOS tomar cerca de 50pt, diseño de material 56dp. Todavía es un elemento notable de la interfaz de usuario, que toma bastante una gran cantidad de espacio precioso.
Creo que podemos extender exitosamente algunas reglas de iOS y Material Design. Como he mencionado, debemos mostrar la barra inferior sólo cuando se trata de una ventana que se incluye en las pestañas. El resto de las pantallas no necesitan eso.
Texto demasiado pequeño
Etiquetas de texto presentadas con sólo 12sp puede ser difícil de leer por un montón de gente. Lo que es más, las guías de iOS Tab Bar con su sólo 10pt para el texto es sólo peor.
Para los usuarios nuevos que aprenden la aplicación, el icono puede no ser suficiente para adivinar qué destino se activa después de pulsar en el elemento en particular. El texto pequeño y difícil de leer no se debe utilizar para el elemento principal de la aplicación.
Cada patrón de navegación debe estar diseñado para ser utilizado fácilmente por todos los usuarios. Hace algún tiempo he escrito algunos consejos útiles acerca de cómo hacer que las aplicaciones sean más accesibles para todos.
Falta de texto
Mientras que las pautas de la barra de tabuladores de iOS recomiendan mostrar texto debajo de un icono, los principios de diseño de material permiten mostrar solo símbolos para el elemento que no están seleccionados.
Esta decisión puede disminuir la participación de los usuarios porque todo el mundo tiene que adivinar lo que se esconde detrás del icono. No todos los iconos tienen un significado claro para los usuarios. Algunos de ellos no tendrán suficiente valor o motivación para descubrir cuál es el símbolo.
Toques accidentales (especialmente en Android)
Recuerdo la serie de artículos que abarca el patrón de pestañas introducido en el estilo de la interfaz de usuario de Holo. Muchos de ellos dijeron que las aplicaciones de Android nunca deben implementar pestañas en la parte inferior de la pantalla, ya que los elementos pueden tocarse accidentalmente cuando un usuario desea presionar uno de los 3 botones del sistema.
Es confuso por qué Google decidió romper sus directrices iniciales. He visto en mis ojos a la gente que pulsó el botón equivocado porque estaba cerca de la navegación inferior.
La barra de pestañas se confunde fácilmente con la barra de herramientas de iOS.
La situación es mejor en iOS, pero no es perfecta. Barra de pestañas a menudo se confunde con la barra de herramientas, debido a la similitud visual de estos dos elementos de interfaz de usuario .
Sin embargo, la función de la barra de herramientas es muy diferente. Se creó para presentar iconos que realizan acciones relevantes para el contenido de la pantalla. Barra de pestañas se crea para ser utilizado como el elemento de navegación.
Cuando no utilizar la navegación inferior
No implemente cegamente este patrón de interfaz de usuario en cada proyecto que diseñe. Hay algunos casos en que la barra de navegación inferior es redundante.
Si su aplicación tiene la característica principal no utiliza Navegación inferior . Cuando los usuarios deben dedicar más del 90% de su tiempo a la aplicación en una ventana, nunca debe utilizar este patrón. Los ejemplos más obvios de este tipo de aplicaciones son los buzones y chats.
También debe evitar usar la barra de navegación inferior para proyectos que no están dedicados a dispositivos móviles . Las pestañas inferiores de las pantallas más anchas parecen extrañas y llevan mucho espacio sin ningún beneficio adicional.
Qué utilizar en lugar de Navegación inferior
Si ya ha descubierto que su aplicación no necesita un elemento de interfaz de usuario mencionado, ¿qué otro patrón de navegación debería utilizarse en su lugar?
Tabuladores (Android)
Si su solución tiene sólo dos características principales o más de 5 pero menos de 7 (Navegación inferior debe tener de 3 a 5 elementos) — use el patrón Tabs conocido en Material Design.
Las pestañas también hacen que la aplicación sea fácil de explorar. Alternar entre vistas en simple. Las pestañas se presentan cerca de la barra de aplicaciones, por lo que todos los elementos de navegación están cerca . Es más, se pueden desplazar. Mientras que la navegación inferior no permite este tipo de interacción, las guías de tabs recomiendan este comportamiento en algunas situaciones.
Además, las pestañas pueden mostrarse en celulares, tablets y escritorios . Si desea mantener una mayor consistencia visual en su servicio omnichannel, este elemento de interfaz de usuario puede ser una opción racional.
Controles segmentados (iOS)
Úselo si el contenido de su solución tiene que organizarse de una manera diferente y es la característica principal de su solución.
El control segmentado es una vista que es un conjunto de al menos dos segmentos. Un solo segmento puede contener texto o imágenes. Todos los elementos tienen siempre el mismo ancho. Los controles segmentados se utilizan comúnmente para presentar diferentes vistas. Puede utilizarse para cambiar entre categorías de productos (Free, Best Selling, Promotion) o para organizar el contenido de su aplicación de música (Playlist, Library).
Menú Lateral (Menú de hamburguesa)
Hay un montón de mensajes de blog con una opinión crítica con respecto a este patrón de interfaz de usuario. Pero, siempre es una mala cosa usar ¿el menú lateral (Menú de hamburguesa)?
¿Qué pasa si su solución tiene sólo una característica importante? Si desea ocultar la complejidad adicional e innecesaria de la solución. Simplemente, ocultar las funciones que no se utilizan con frecuencia en el menú lateral .
El buen ejemplo de implementación eficaz de menú laterales la aplicación móvil Slack. Pasas la mayor parte de tu tiempo en una conversación, por lo que no es necesario colocar la barra de navegación inferior redundante en la pantalla. Sin embargo, todavía hay alguna opción que debe ser fácil de alcanzar cuando usted los necesita.
No tengas miedo de menús laterales, solo úsalos sabiamente.
Técnicas útiles para mejorar el comportamiento de navegación inferior
Ahora, cuando esté familiarizado con algunos defectos de Bottom Navigation y sus alternativas. Vamos a considerar cómo mejorar un poco su comportamiento para ser más fácil de usar.
Ocultar en el rollo
Una de las principales desventajas de Bottom Navigation Bar es su presencia continua en la pantalla. Sin embargo, hay una manera de mejorarlo.
Como mencioné anteriormente, Material Design tiene un consejo tentador con respecto a este caso. Algunas aplicaciones empiezan a ocultar la barra cuando un usuario desplaza la lista hacia abajo. Gracias a esto, un usuario gana más espacio para consumir el contenido que comenzó a navegar hace un momento. Lo que es más, no está distraído por un elemento visual en la parte inferior de la vista.
¿Cómo volver a ver la Navegación Inferior? El usuario tiene que desplazar un poco la lista y todo vuelve a aparecer. Estrategia muy elegante y previsible.
Icono progresivo con etiqueta de texto que desaparece
Las primeras veces de la navegación de la aplicación puede ser un poco tedioso y lento porque el usuario descubre la solución. Pero, aprende el producto a tiempo.
¿Por qué no hacer uso de la memoria y el conocimiento del usuario?
Vamos a imaginar la siguiente situación :
Se utiliza la aplicación con la barra inferior con frecuencia. Su barra de navegación inferior contiene un icono detallado y una etiqueta de texto. Después de unas semanas, usted recuerda dónde está la vista deseada o la acción. Empieza a utilizar el producto automáticamente. Luego, un mes más tarde le recomendamos a su amigo que instale la aplicación en su dispositivo. Cuando él lanza la pantalla principal y la comparas con la tuya. ¡Hay una sorpresa!
Su aplicación tiene iconos minimalistas limpios sin etiquetas de texto. El segundo tiene iconos más detallados con una descripción clara. No notaste la diferencia antes. ¿Que pasó?
La aplicación detecta que su memoria tiene un modelo mental correcto de la aplicación y no lee etiquetas de texto debajo de los iconos. Después de unas semanas, cambió las etiquetas a las más pequeñas. La eficiencia de uso no disminuyó, así que unas semanas más tarde todas las descripciones debajo de los iconos desaparecieron por completo. Aún usas la aplicación intuitivamente, ese es el poder del hábito.
¿Has visto las aplicaciones actuando así?
Hay un caso similar en el mercado. Abre tu aplicación de Facebook para iOS. Notará que los iconos de la barra inferior no tienen ninguna descripción. Pero si usted ve las capturas de pantalla de archivo de la barra inferior tiene tanto — los iconos y las etiquetas de texto.
Es la barra de navegación inferior tan mal?
Su estética no se destaca. La barra toma el lugar precioso en la pantalla y los símbolos con el texto minúsculo pueden no ser perfectamente legibles. Sin embargo, es un componente de interfaz de usuario útil y fácil de entender. Resuelve muchos problemas e involucra a los usuarios incomparablemente mejor que el menú lateral.
Los diseñadores deben utilizar Bottom Navigation como el patrón fundamental de interfaz de usuario para navegar entre las pantallas principales. Sin embargo, es importante recordar acerca de las desventajas de este componente de la interfaz de usuario .
Para resumir
Nunca debes seguir ciegamente las tendencias en UX Design. Algunos de ellos permanecerán y se convertirán en un estándar, algunos serán olvidados después de unos meses.
Utilice la Navegación Inferior sabiamente. Puede ser una herramienta poderosa para atraer a tus usuarios en tu aplicación. Pero, es importante conocer sus límites y superar algunas desventajas.
Originalmente escrito para http://uxmisfit.com/
