Una cartilla sobre la navegación de Android

Cualquier vehículo que alguien use para moverse entre escenas en su interfaz, eso es navegación

Tan pronto como vincules dos pantallas en una aplicación, tienes navegación. Ese enlace, cualquiera que sea, es el vehículo que transporta a los usuarios entre esas pantallas. Y aunque crear una navegación es relativamente simple, crear la navegación adecuada para sus usuarios no siempre es sencillo. En esta publicación, veremos algunos de los patrones de navegación más comunes utilizados en Android, cómo impactan la navegación a nivel del sistema y cómo mezclar y combinar patrones para adaptarse a su interfaz y a sus usuarios.

Definiendo navegación

Antes de profundizar en patrones de navegación comunes, vale la pena retroceder y encontrar un punto de partida para pensar en la navegación en su aplicación.

La especificación de Diseño de materiales tiene una gran guía sobre cómo abordar la definición de estructuras de navegación, pero a los efectos de esta publicación podemos resumir todo en dos puntos simples:

  • Construir navegación basada en tareas y contenido
  • Construir navegación para personas

Crear una navegación basada en tareas y contenido significa desglosar las tareas que realizarán las personas y lo que verán en el camino, y trazar un mapa de las relaciones entre los dos. Determine cómo se relacionan las tareas entre sí: qué tareas son más o menos importantes, qué tareas son hermanos, cuáles se anidan una dentro de otra y qué tareas se realizarán con mayor o menor frecuencia.

Ahí es donde entra en juego la construcción de navegación para las personas: las personas que usan su interfaz pueden decirle si está funcionando para ellos o no, y su navegación debe construirse para ayudarlos a tener éxito en su aplicación.

Una vez que sepa cómo funcionan juntas las tareas en su aplicación, puede decidir qué contenido necesitan ver los usuarios en el camino y cuándo y cómo presentarlo; este ejercicio debería proporcionar una buena base para decidir qué patrones sirven mejor a la experiencia de su aplicación.

Encuentre una guía más detallada sobre el desglose de tareas y comportamientos para la navegación en la especificación de material.

🗂 Pestañas

Definición

Las pestañas proporcionan una navegación rápida entre las vistas entre hermanos dentro de la misma pantalla principal. Son coplanares, lo que significa que se pueden deslizar y viven en una barra de pestañas extensible e identificable.

Las pestañas son excelentes para filtrar, segmentar o proporcionar profundidad a piezas de contenido relacionadas. Las piezas de contenido no relacionadas, o el contenido con su propia jerarquía profunda, se pueden servir mejor utilizando otros patrones de navegación.

Encuentre todos los detalles sobre el diseño de pestañas aquí, y sobre la implementación de pestañas aquí.

Pestañas en acción

Play Music, Google+, Play Kiosco

Play Music (arriba, izquierda) usa pestañas para agregar profundidad a la biblioteca de música, organizando el mismo contenido general de diferentes maneras para acomodar diferentes medios de exploración.

Google+ (arriba, centro) usa pestañas para segmentar Colecciones, un tipo de contenido único que conduce a contenido muy heterogéneo en la aplicación.

Play Kiosco (arriba, derecha) usa pestañas en la pantalla Biblioteca para presentar diferentes conjuntos de la misma información: una pestaña presenta una colección holística de varias capas, mientras que la otra muestra un conjunto condensado de titulares.

Historia

Las pestañas existen juntas en un nivel, dentro de la misma pantalla principal. Por lo tanto, navegar entre pestañas no debería crear el historial ni para el botón de retroceso del sistema ni para el botón arriba de la aplicación.

Cajones de navegación

Definición

El cajón de navegación es generalmente un panel vertical unido al borde izquierdo del lienzo. Los cajones pueden manifestarse fuera de la pantalla o encendidos, persistentes o no, pero siempre comparten algunas características comunes.

Por lo general, el cajón de navegación enumera los destinos principales que son pares o hermanos entre sí. Se puede usar un cajón de navegación en aplicaciones con varios destinos principales y algunos destinos de soporte únicos, como configuraciones o ayuda.

Si combina el cajón con otro componente de navegación principal, por ejemplo, la navegación inferior, el cajón puede contener destinos secundarios o destinos importantes que no siguen directamente en la jerarquía desde la navegación inferior.

Cuando use el cajón de navegación, tenga en cuenta los tipos de destinos que está presentando: agregar demasiados destinos o destinos que representan diferentes niveles en la jerarquía de la aplicación puede ser confuso.

También tenga en cuenta la visibilidad: el cajón puede ser bueno para reducir la visibilidad o compactar la navegación fuera del área de contenido principal, pero eso también puede ser un inconveniente dependiendo de cómo se deben presentar y acceder a los destinos en su aplicación.

Obtenga orientación detallada sobre el diseño del cajón de navegación aquí y su implementación aquí.

Nav cajones en acción

Play Store, Google Camera, Bandeja de entrada

Play Store (arriba, izquierda) usa el cajón de navegación para apuntar a diferentes secciones de la tienda, cada una dedicada a un tipo diferente de contenido.

Google Camera (arriba, en el centro) usa el cajón para los destinos compatibles: en su mayoría son destinos que aumentan la experiencia de captura, además de una ruta a la configuración.

La bandeja de entrada (arriba, derecha) tiene un cajón de navegación extensible que puede ser bastante largo. En la parte superior están los destinos principales que presentan diferentes segmentos de su correo electrónico, y debajo están los segmentos de soporte llamados paquetes.

Debido a que el cajón de navegación en la Bandeja de entrada puede alargarse tanto, los elementos de “configuración” y “ayuda y comentarios” se presentan en una hoja persistente, accesible desde cualquier parte del cajón.

Historia

Los cajones de navegación generalmente deben crear un historial para el botón de retroceso del sistema cuando la aplicación tiene un destino "Inicio" distinto. En Play Store, el destino principal es la entrada de aplicaciones y juegos, que en realidad presenta al usuario una navegación con pestañas para ver el contenido resaltado de todo tipo. Por lo tanto, Play Store crea un historial para volver a ese destino desde otras áreas de la aplicación.

Google Camera también lleva a los usuarios al modo de captura primario predeterminado, menos cualquier aumento.

La entrada

Lo mismo ocurre con Google Maps (arriba): cualquier destino en el cajón se presenta como una capa encima o como un aumento a la pantalla del mapa principal, por lo que el botón Atrás nos lleva de vuelta a una pizarra limpia.

Puede notar que Play Store (arriba) no cambia el indicador del cajón de navegación en la barra de herramientas a un botón "arriba" una vez que navega hacia un destino. Esto se debe a que los destinos principales en el cajón están en el mismo nivel en la jerarquía de navegación de la aplicación. Dado que no se está moviendo más profundamente en la aplicación seleccionando "Películas y TV" en el cajón, no puede avanzar más. Todavía estás en el nivel superior, solo en una pantalla paralela.

Navegación inferior

Definición

En Android, el componente de navegación inferior se compone de entre tres y cinco destinos principales. Es importante destacar que "más" no es un destino. Ni los menús ni los cuadros de diálogo.

La navegación inferior funciona mejor cuando su aplicación tiene un número limitado de destinos dispares de nivel superior (la navegación inferior nunca debe desplazarse) que deben ser accesibles al instante. Uno de los principales beneficios de una "barra inferior" es poder saltar de una pantalla secundaria a una pantalla principal no relacionada al instante, sin tener que volver primero a la pantalla principal actual.

Es importante tener en cuenta que, si bien los destinos en la barra inferior deben ser todos iguales en la jerarquía de navegación de la aplicación, los elementos en la barra inferior no son coplanares como las pestañas, y no deben presentarse como tales.

Deslizar entre destinos en la barra inferior sugiere una relación entre destinos que no existe. Cada destino debe ser un padre discreto, no un hermano de los otros destinos. Si los destinos en su aplicación son similares o presentan contenido similar, pueden ser más adecuados para pestañas.

Encuentre una guía de diseño más detallada para la navegación inferior aquí, y detalles de implementación aquí.

Navegación inferior en acción

Fotos de Google

La navegación inferior tiene algunas consideraciones interesantes más allá de su definición básica. Probablemente lo más complejo es la noción de cuán persistente debe ser la barra inferior. La respuesta, como con tantas decisiones de diseño, es "depende".

Por lo general, la barra inferior persiste en toda la aplicación, pero hay algunos casos que podrían justificar la ocultación de la barra inferior. Si el usuario ingresa a una jerarquía muy superficial, en pantallas de un solo propósito, como la composición de mensajes, o si la aplicación quiere presentar una experiencia más inmersiva uno o dos pasos en la jerarquía, la barra inferior puede estar oculta.

En Google Photos (arriba), el navegador inferior desaparece dentro de los álbumes. Los álbumes se presentan como una capa secundaria en la jerarquía, y la única acción de navegación adicional es abrir una foto, que se abre en la parte superior de la interfaz de usuario del álbum. Esta implementación satisface la regla de "un solo propósito" para ocultar el navegador inferior al tiempo que cumple el objetivo de crear una experiencia más inmersiva una vez que el usuario supera el nivel superior.

Consideraciones adicionales

Si la barra es persistente en toda la aplicación, la siguiente consideración lógica sería el comportamiento al saltar entre destinos utilizando la barra. Si el usuario tiene varias capas de profundidad en una jerarquía derivada de un destino y cambia a otro destino y luego vuelve al primero, ¿qué debería ver? ¿La pantalla principal o la pantalla secundaria en la que la dejaron?

Los que usan su aplicación deben informar esta decisión. En general, tocar un elemento en la barra inferior debe ir directamente a la pantalla asociada, no a una capa más profunda de la jerarquía, sino como con cualquier directriz: desviarse con el propósito.

Historia

La navegación inferior no debería crear un historial para el botón de retroceso del sistema. Profundizar en las jerarquías derivadas de los destinos de navegación inferiores puede crear un historial para el botón Atrás del sistema y el botón arriba de la aplicación, pero la barra inferior también puede servir como su propio tipo de navegación histórica.

Tocar un elemento en la navegación inferior debería llevarlo directamente al destino asociado, y tocarlo nuevamente debería volver al nivel principal o actualizar el nivel principal si el usuario ya está allí.

🕹 Navegación en contexto

Definición

La navegación en contexto se compone de cualquier interacción de navegación fuera de los componentes descritos anteriormente. Esto incluye cosas como botones, mosaicos, tarjetas y cualquier otra cosa que lleve al usuario a otra parte de una aplicación.

La navegación en contexto suele ser menos lineal que la navegación explícita: las interacciones pueden transportar al usuario a través de una jerarquía, entre diferentes pasos en jerarquías discretas o fuera de la aplicación por completo.

Busque más orientación sobre la navegación en contexto aquí.

Navegación en contexto en acción

Reloj, Google y Google Calendar

En la aplicación Reloj (arriba, izquierda) hay un FAB; la aplicación Google (arriba, en el medio) se basa principalmente en información organizada dentro de las tarjetas; y Google Calendar (arriba, derecha) crea mosaicos para eventos.

La activación de la FAB en el reloj (arriba, izquierda) lo lleva a una pantalla de selección de reloj mundial, al tocar la tarjeta meteorológica en la aplicación Google (arriba, al centro) lo lleva a una página de resultados de búsqueda para "clima", y al tocar un mosaico de evento en Calendario (arriba, derecha) te lleva a los detalles de ese evento.

También vemos en estas capturas de pantalla las diferentes formas en que la navegación en contexto puede transportar al usuario. En la aplicación Reloj, estamos un nivel por debajo del reloj en sí, en la aplicación Google hemos terminado esencialmente con un aumento de la pantalla principal, y en Calendario hemos abierto un diálogo de pantalla completa.

Historia

No existe una regla estricta para crear el historial mediante la navegación en contexto. El hecho de que el historial se cree depende completamente de qué tipo de navegación en contexto utiliza la aplicación y dónde se lleva al usuario. En los casos en que no está claro exactamente qué tipo de historial se debe crear, es bueno saber qué hacen los botones arriba y atrás en general.

Botones arriba, atrás y cerrar

Los botones de retroceso, arriba y cierre son importantes para navegar por una interfaz de usuario de Android, pero a menudo se malinterpretan. Los tres botones tienen un comportamiento bastante simple desde una perspectiva UX, por lo que recordar las siguientes reglas debería ayudarlo a salir de cualquier situación desconcertante.

  • Arriba se encuentra en la barra de herramientas de la aplicación cuando el usuario desciende de la jerarquía de la aplicación. Navega una copia de seguridad de la jerarquía en orden cronológico hasta que el usuario llega a una pantalla principal. Como el botón arriba no aparece en las pantallas principales, nunca debe salir de una aplicación.
  • Atrás siempre está presente en la barra de navegación del sistema. Navega hacia atrás cronológicamente, independientemente de la jerarquía de la aplicación, incluso si la pantalla cronológica anterior estaba dentro de otra aplicación. También descarta elementos temporales como cuadros de diálogo, hojas inferiores y superposiciones.
  • Cerrar se usa generalmente para descartar capas transitorias de la interfaz o descartar cambios en un diálogo de pantalla completa. Considere la pantalla de detalles del evento en Google Calendar (que se muestra a continuación). La naturaleza temporal de la pantalla de detalles se vuelve aún más clara en pantallas más grandes. En la Bandeja de entrada (a continuación), la transición de la bandeja de entrada al mensaje sugiere que el mensaje es una capa en la parte superior de la bandeja de entrada, por lo que el botón de cierre es apropiado. Gmail (abajo) posiciona el mensaje como un nivel distinto de la aplicación y utiliza el botón arriba.
Calendario, Bandeja de entrada y Gmail

Consulte específicamente el comportamiento de retroceso contra aumento en la especificación de material aquí.

Combinando patrones

En este manual hemos visto ejemplos de aplicaciones que implementan con éxito cada uno de los diversos componentes explícitos de navegación. Muchos de estos ejemplos también logran combinar patrones de navegación para formar una estructura que tenga sentido para los usuarios. Para finalizar, revisemos algunos de esos ejemplos con miras a mezclar y combinar.

Google+

Quizás el ejemplo más obvio es Google+ (arriba), que combina todos los patrones que hemos discutido: pestañas, un cajón de navegación, navegación inferior y navegación en contexto.

Para desglosarlo, la navegación inferior es el foco en G +. Proporciona acceso a cuatro destinos de primer nivel. Las pestañas aumentan dos de esos destinos al segmentar su contenido en categorías sensibles. El cajón de navegación contiene otros destinos, tanto primarios como secundarios, a los que se puede acceder con menos frecuencia.

Tienda de juegos

Play Store (arriba) usa principalmente un cajón de navegación, con frecuencia usa navegación en contexto y ocasionalmente usa pestañas.

En las fotos de arriba, vemos los destinos alcanzados a través del cajón de navegación. Todavía se puede acceder al cajón en estas pantallas porque son todos los destinos principales. Justo debajo de la barra de herramientas vemos chips para navegar a las selecciones de contenido filtrado, un ejemplo de navegación en contexto. En los gráficos de aplicaciones, las pestañas se usan para ordenar toda la biblioteca graficada en segmentos específicos.

calendario de Google

Google Calendar (arriba) usa un cajón de navegación y navegación en contexto, y usa ambos de maneras realmente interesantes.

El cajón en Calendario no es estándar, se usa principalmente para aumentar el calendario. El calendario en sí está controlado por un panel de barra de herramientas que se expande y los mosaicos coloridos llevan a los usuarios a los detalles del evento.

Lea más sobre cómo combinar patrones de navegación aquí.

¿Tienes más preguntas?

La navegación es un tema complejo. Esperemos que este manual proporcione una buena base para comprender los principios comunes de navegación en Android. Si aún tiene preguntas, deje una respuesta o póngase al día con nuestra primera sesión #AskMaterial con los equipos de Diseño de materiales y Relaciones de diseño en Twitter aquí.