Los dispositivos de TV ofrecen una cantidad limitada de controles de navegación para las apps. Crear un esquema de navegación eficaz para tu app para TV depende de comprender estos controles limitados y las limitaciones de los usuarios al operar tu app. A medida que compiles tu app para Android para TV, presta especial atención a la forma en que el usuario navega con los botones del control remoto en lugar de una pantalla táctil.
Principios
El objetivo es que la navegación resulte natural y familiar sin dominar la interfaz de usuario ni desviar la atención del contenido. Los siguientes principios ayudan a establecer un modelo de referencia para una experiencia del usuario intuitiva y coherente en todas las apps para TV.
Haz que acceder al contenido sea rápido y fácil. Los usuarios quieren acceder al contenido rápidamente, con una cantidad mínima de clics. Organiza tu información de modo que requiera la menor cantidad de pantallas posible.
Sigue las prácticas recomendadas a fin de que la navegación sea predecible para los usuarios. No reinventes los patrones de navegación innecesariamente, ya que genera imprevisibilidad y confusión.
Haz que la navegación sea lo suficientemente simple como para admitir sin problemas los comportamientos ampliamente adoptados de los usuarios. No compliques demasiado agregando capas de navegación innecesarias.
Controladores
Los controles están disponibles en una variedad de estilos, desde un control remoto minimalista hasta controles de juegos complejos. Todos los controles incluyen un mando de dirección (pad direccional), además de los botones Seleccionar, Inicio y Atrás. Otros botones varían según el modelo.
Pad direccional
El método de navegación principal en TV es a través del pad direccional, que incluye botones de hardware direccionales arriba, abajo, izquierda y derecha. El pad direccional transfiere el enfoque de un objeto al más cercano, en la dirección en la que se presionó el botón.
Botón Seleccionar
Selecciona el elemento en pantalla enfocado.
Botón de inicio
Lleva al usuario a la pantalla principal del sistema.
Botón Atrás
Brinda a los usuarios una forma de volver a la vista anterior.
Botón del micrófono
Invoca al Asistente de Google o la entrada de voz.
Navegación con pad direccional
En un dispositivo de TV, los usuarios navegan con un pad direccional o las teclas de flecha. Este tipo de control limita los movimientos a arriba, abajo, izquierda y derecha. Si quieres compilar una app excelente optimizada para TV, debes proporcionar un esquema de navegación en el que el usuario pueda aprender rápidamente cómo navegar por la app con estos controles limitados.
El framework de Android controla la navegación direccional entre los elementos de diseño automáticamente, por lo que, por lo general, no necesitas hacer nada más para tu app. Sin embargo, debes probar minuciosamente la navegación con un controlador de pad direccional para detectar problemas de navegación.
Sigue estos lineamientos para probar que el sistema de navegación de tu app funcione bien con un pad direccional en un dispositivo de TV:
- Asegúrate de que un usuario con un controlador de pad direccional pueda navegar por todos los controles visibles en la pantalla.
- Para desplazarte por listas con enfoque, asegúrate de que los botones hacia arriba y hacia abajo del pad direccional se desplacen por la lista y de que el botón de selección seleccione un elemento de ella. Verifica que los usuarios puedan seleccionar un elemento de la lista y que esta continúe desplazándose cuando se selecciona un elemento.
- Asegúrate de que el cambio de un control a otro sea sencillo y predecible.
Cómo modificar la navegación direccional
El framework de Android aplica automáticamente un esquema de navegación direccional basado en la posición relativa de los elementos enfocables en tus diseños. Prueba el esquema de navegación generado en tu app con un controlador de pad direccional. Después de la prueba, si decides que quieres que los usuarios se muevan por tus diseños de una manera específica, puedes configurar una navegación direccional explícita para tus controles.
En la siguiente muestra de código, se indica cómo definir el próximo control que recibirá el foco para un objeto de diseño TextView:
<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />
En la siguiente tabla, se enumeran todos los atributos de navegación disponibles para widgets de interfaz de usuario de Android:
| Atributo | Función |
|---|---|
nextFocusDown |
Define la siguiente vista que recibirá el enfoque cuando el usuario navegue hacia abajo. |
nextFocusLeft |
Define la siguiente vista que recibirá el enfoque cuando el usuario navegue hacia la izquierda. |
nextFocusRight |
Define la siguiente vista que recibirá el enfoque cuando el usuario navegue hacia la derecha. |
nextFocusUp |
Define la siguiente vista que recibirá el enfoque cuando el usuario navegue hacia arriba. |
Para usar uno de estos atributos de navegación explícitos, establece el valor en android:id de otro widget en el diseño. Asegúrate de configurar el orden de navegación como un bucle, de modo que el último control dirija el enfoque de vuelta al primero.
Cómo proporcionar enfoque y selección claros
El éxito del esquema de navegación de una app en dispositivos de TV depende de qué tan fácil sea para el usuario determinar qué elemento de la interfaz de usuario está enfocado. Si no proporcionas una indicación clara del elemento enfocado y, por lo tanto, sobre qué elemento puede realizar una acción el usuario, este puede frustrarse rápidamente y salir de tu app. Por el mismo motivo, es importante tener siempre enfocado un elemento sobre el que el usuario pueda realizar una acción inmediatamente después de que se inicie la app o en cualquier momento en que esté inactiva.
En el diseño y la implementación de tu app, usa color, tamaño, animación o una combinación de estos atributos para ayudar a los usuarios a determinar fácilmente qué acciones pueden realizar a continuación. Usa un esquema uniforme para indicar el enfoque de tu aplicación.
Android proporciona los recursos de la lista de estados de elementos de diseño para implementar una forma de destacar controles seleccionados y enfocados. En el siguiente ejemplo de código, se muestra cómo habilitar el comportamiento visual para que un botón indique que un usuario navegó al control y lo seleccionó:
<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="@drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="@drawable/button_focused" /> <!-- hovered -->
<item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
En el siguiente código de muestra de diseño XML, se aplica el elemento de diseño de la lista de estados anterior en un Button:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Asegúrate de proporcionar suficiente padding dentro de los controles enfocables y seleccionables para que las zonas destacadas a su alrededor sean claramente visibles.
Navegación con el botón Atrás
Para mantener la coherencia entre las apps de la plataforma, asegúrate de que el comportamiento del botón Atrás siga estos lineamientos.
Usa un comportamiento predecible del botón Atrás
Para crear una experiencia de navegación fácil y predecible, cuando el usuario presione el botón Atrás del control remoto, llévalo al destino anterior.
Si el usuario navega desde un elemento de menú hasta una tarjeta ubicada en el medio de la página y luego presiona el botón Atrás, el resultado dependerá de si la app usa la navegación superior o la izquierda:
- La app usa navegación superior: Para llevar al usuario a la parte superior de la página, se desplaza rápidamente y activa el enfoque en el menú.
- La app usa la navegación izquierda: Activa el menú lateral izquierdo y enfócate en el elemento de menú activo en ese momento.
Asegúrate de que el botón Atrás no esté restringido por pantallas de confirmación ni parte de un bucle infinito.
Qué no debes hacer.
Evita el control de acceso de salida. Permite que los usuarios salgan de la app sin confirmación.
Qué no debes hacer.
Nunca ingreses el bucle infinito de cerrar y abrir el
menú. Lo ideal es que presiones el botón Atrás para salir de la app. No muestres un botón de salida en el menú, a menos que sea un caso especial, como un perfil infantil.
No muestres un botón hacia arriba o hacia atrás
A diferencia de los dispositivos de mano, el botón Atrás del control remoto se usa para navegar hacia atrás en una TV. No es necesario mostrar un botón Atrás virtual en la pantalla:
Qué no debes hacer.
Muestra un botón para cancelar si es necesario
Si las únicas acciones visibles son de confirmación, destructivas o de compra, se recomienda tener un botón Cancel que vuelva al destino anterior:
Qué debes hacer.
Cómo implementar la navegación hacia atrás
En general, el framework de Android controla bien la navegación hacia atrás, como lo hace con el pad direccional. Si utilizas el componente Navigation, puedes admitir una variedad de gráficos de navegación. En ocasiones, es posible que debas implementar algún comportamiento personalizado, como hacer que el botón Atrás restablezca el enfoque al comienzo de una lista larga.
ComponentActivity, la clase base para FragmentActivity y AppCompatActivity, te permite controlar el comportamiento del botón Atrás mediante su OnBackPressedDispatcher, que puedes recuperar llamando a getOnBackPressedDispatcher().
Para obtener más información, consulta Cómo brindar navegación hacia atrás personalizada.
Controles de reproducción en TV
La reproducción de videos es una de las funciones más importantes de la TV. Es importante que los reproductores de video de las apps de Android TV se comporten de la misma manera. Consulta los lineamientos de controles de reproducción para TV.
Navegación por la pestaña En vivo
Además de cumplir con los requisitos de calidad de las apps para TV, las apps con un feed de TV en vivo integrado en la pestaña En vivo también deben cumplir con los requisitos de reproducción directa y sin inconvenientes, como se describe en las siguientes secciones.
Reproducción sin inconvenientes
La reproducción sin inconvenientes se aplica al comportamiento en la app después de cualquier vínculo directo de canal en vivo o lineal de Google TV y Android TV.
Los usuarios que hagan clic en un vínculo directo a un canal en vivo o lineal desde Google TV y Android TV deberán dirigirse directamente a la reproducción del canal, sin bloquear ni retrasar las pantallas de la app de destino. No se permiten los flujos de acceso, los flujos de registro, los videos de desarrollo de la marca ni otras demoras.
Sin embargo, si el vínculo directo inicia la carga de la app de destino desde un inicio en frío, sí se permite esta demora en el inicio antes de la reproducción. En este caso, también se permite un video o una animación de marca de inicio de la app. Es poco probable que esta experiencia de inicio en frío ocurra más de una vez por sesión.
Además, si sintonizar el canal con vínculo directo tarda unos segundos, sí se permite mostrar la marca del canal o servicio. Sin embargo, su duración solo debe ser la que se complete en cargar el canal (y debe ser similar a los tiempos de carga promedio del canal dentro de la app).
Si el usuario salió de su cuenta o no está suscrito, puedes bloquear la reproducción de un canal pago para completar un flujo de acceso o registro.
Directo
Cuando los usuarios inician una app desde un vínculo directo en la pestaña En vivo y luego presionan el botón Atrás, deben regresar a la pestaña En vivo una vez al presionar el botón Atrás, sin importar cuánto tiempo haya transcurrido. Este comportamiento de retorno directo es obligatorio para todos los vínculos directos de la pestaña En vivo en Google TV y Android TV.
Los vínculos directos de las pestañas en vivo se distinguen por haber agregado un parámetro de vínculo directo: ?exit_on_back=[true|false]. Las apps deben analizar este parámetro para determinar si la app se inició desde la pestaña En vivo. Si exit_on_back es true, las apps deben implementar el comportamiento de retroceso directo.
Ten en cuenta que, si el usuario presiona cualquier botón que no sea el de atrás cuando presiona el primer botón después del vínculo directo, no se aplica el requisito de retroceso directo, y solo se requiere el comportamiento del botón Atrás estándar.
Por ejemplo, supongamos que después de seguir un vínculo directo el usuario presiona el botón de selección del pad direccional, el cual abre una superposición de controles. El usuario espera a que desaparezca la superposición y, luego, presiona el botón Atrás. Como el primer botón que se presiona después de seguir el vínculo directo fue el botón de selección del pad direccional, no se aplica el requisito de retorno directo. En su lugar, se aplica la lógica normal de la pila de actividades de la app.
Las pulsaciones repetidas del botón Atrás deben llevar al usuario a la raíz de la app y, luego, volver a Google TV o Android TV, sin bucles infinitos. Para obtener más información, consulta la sección Comportamiento predecible del botón Atrás.
Arquitectura de navegación
Destino de inicio fijo
La primera pantalla que ve el usuario cuando inicia la app desde el selector también es la última que ve cuando vuelve al selector después de presionar el botón Atrás.
Los vínculos directos simulan la navegación manual
Ya sea mediante un vínculo directo o una navegación manual a un destino específico, los usuarios pueden usar el botón Atrás para navegar por los destinos de regreso al destino de inicio.
Los vínculos directos a una app desde otra app simulan la navegación manual. Por ejemplo, si el usuario va directamente a una página de detalles en la app de Moviestar desde Google TV y presiona el botón Atrás, se lo dirigirá a la página principal de la app de Moviestar.
Ruta clara a todos los elementos enfocables
Permite que los usuarios naveguen por tu IU con una dirección clara. Si no hay una ruta directa para llegar a un control, considera reubicarlo.
Sí.
Coloca controles, como la acción de búsqueda que se muestra aquí, en ubicaciones que no se superpongan con otros elementos en los que se puede hacer clic.
Qué no debes hacer.
Evita los diseños que contengan controles en lugares de difícil acceso. No es fácil de administrar con el pad direccional acceder a la acción de búsqueda que se muestra aquí.
Ejes
Crea tu diseño de manera tal que aproveche los ejes horizontales y verticales. Asigna una función específica a cada dirección para agilizar la navegación por jerarquías grandes.
Sí.
Las categorías se pueden recorrer en el eje vertical, y los elementos dentro de cada categoría se pueden explorar en el eje horizontal.
Qué no debes hacer.
Evita las jerarquías de diseño complejas y anidadas.