Navegación en la TV

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 de TV depende de la comprensión de estos controles limitados, así como de las limitaciones de los usuarios cuando la utilizan. Cuando compiles tu app para Android para TV, presta especial atención a la forma en que navega el usuario cuando usa los botones del control remoto en lugar de una pantalla táctil.

Principios

El objetivo es que la navegación se sienta 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 a fin de lograr una experiencia del usuario intuitiva y coherente en todas las apps para TV.

Eficiente

Haz que acceder al contenido sea fácil y rápido. Los usuarios quieren acceder al contenido rápidamente con una cantidad mínima de clics. Organiza tu información de manera que requiera la menor cantidad de pantallas.

Predecible

Sigue las prácticas recomendadas y las recomendaciones para que la navegación sea predecible para los usuarios. No reinventes los patrones de navegación innecesariamente, ya que esto genera incertidumbre y confusión.

Intuitiva

Logra que la navegación sea lo suficientemente simple como para admitir sin problemas los comportamientos ampliamente adoptados por los usuarios. No te compliques demasiado agregando capas innecesarias de navegación.

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 de selección, inicio y Atrás. Otros botones varían según el modelo.

Control remoto de muestra
Figura 1: Ejemplo de un control remoto de TV.

Pad direccional
El método de navegación principal en TV es a través del pad direccional, que incluye botones de hardware direccionales de arriba, abajo, izquierda y derecha. El pad direccional transfiere el enfoque de un objeto al objeto más cercano en la dirección en la que se presionó el botón.

Botón de selección
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 de 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 con teclas de flecha. Este tipo de control limita los movimientos a arriba, abajo, izquierda y derecha. Si quieres compilar una app genial optimizada para TV, debes proporcionar un esquema de navegación en el que el usuario pueda aprender rápidamente a navegar por tu app con estos controles limitados.

El framework de Android controla automáticamente la navegación direccional entre los elementos de diseño, por lo que, en general, no necesitas hacer nada adicional para tu app. Sin embargo, debes probar por completo la navegación con un controlador de pad direccional para detectar cualquier problema 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 desplazar listas con enfoque, asegúrate de que los botones hacia arriba y abajo del pad direccional desplacen la lista y 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 se desplace cuando se seleccione 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 realizar las pruebas, si deseas que los usuarios se desplacen 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 enfoque 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 el 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 un usuario determinar qué elemento de la interfaz de usuario está en primer plano. Si no proporcionas una indicación clara del elemento enfocado y, por lo tanto, en qué elemento un usuario puede realizar una acción, puede frustrarse rápidamente y salir de la app. Por el mismo motivo, es importante tener siempre un elemento enfocado sobre el que el usuario pueda tomar medidas inmediatamente después de que se inicia la app o cada vez que está inactiva.

En el diseño y la implementación de tu app, usa el color, el tamaño, la 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 en 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 a un Button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

Asegúrate de proporcionar suficiente espacio de relleno entre los controles enfocables y seleccionables para que las zonas destacadas que los rodean puedan verse claramente.

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 el comportamiento predecible del botón Atrás

Para crear una experiencia de navegación fácil y predecible, cuando el usuario presiona el botón Atrás del control remoto, llévalo al destino anterior.

Cuando se usa la navegación superior
Una imagen que describe el flujo de la navegación cuando se utiliza la navegación superior
Cuando se usa el panel de navegación izquierdo
Una imagen que describe el flujo de la navegación cuando se usa la navegación izquierda

Si el usuario navega de un elemento de menú a una tarjeta en el centro de la página y luego presiona el botón Atrás, el resultado depende de si la app usa la navegación superior o la izquierda:

  • La app usa la navegación superior: Lleva al usuario de vuelta a la parte superior de la página desplazándose rápidamente y activando el enfoque en el menú.
  • La app usa la navegación izquierda: Activa el menú lateral izquierdo y enfoca el elemento de menú activo actualmente.

Asegúrate de que el botón Atrás no esté restringido por pantallas de confirmación ni sea parte de un bucle infinito.

Captura de pantalla que muestra un diálogo en el que se les pregunta a los usuarios si quieren salir

Qué no debes hacer:
Evita el control de acceso de salida. Permite que los usuarios salgan de la app sin confirmación.


Captura de pantalla en la que se muestra un bucle de navegación

Qué no debes hacer:
Nunca ingreses al bucle infinito de cerrar y abrir el menú. Lo ideal es que se cierre la app cuando se presiona el botón Atrás. No muestres un botón de salida en el menú, a menos que se trate de un caso especial, como un perfil infantil.

No muestres un botón Arriba ni el 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 virtual de retroceso en la pantalla:

Captura de pantalla que muestra un botón suave Atrás en la pantalla

Qué no debes hacer:

Mostrar 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:

Captura de pantalla que muestra un botón de cancelación gradual en la pantalla

Qué hacer.

Cómo implementar la navegación hacia atrás

El framework de Android generalmente controla bien la navegación hacia atrás, al igual que el pad direccional. Si utilizas el componente de Navigation, puedes admitir una variedad de gráficos de navegación. En ocasiones, es posible que necesites 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 con 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 en 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 sin inconvenientes y transmisión directa, 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 lineal o en vivo de Google TV y Android TV.

Los usuarios que hagan clic en un vínculo directo de un canal lineal o en vivo desde Google TV y Android TV deben ir 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, 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 desarrollo de la 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 la sintonización en el canal con vínculo directo tarda unos segundos, se permite mostrar la marca del canal o del servicio. Sin embargo, su duración debería ser la única que toma cargar el canal (y similar a los tiempos de carga promedio del canal dentro de la app).

Si el usuario no accedió a su cuenta o no está suscrito, puedes bloquear la reproducción de un canal pago para completar un flujo de acceso o registro.

Devolución directa

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 volver a la pestaña En vivo presionando una sola vez hacia atrás, sin importar cuánto tiempo haya transcurrido. Este comportamiento de respuesta directa 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 la pestaña Publicados se distinguen por un parámetro de vínculo directo agregado: ?exit_on_back=[true|false]. Las apps deben analizar este parámetro para determinar si se iniciaron desde la pestaña En vivo. Si exit_on_back es true, las apps deben implementar el comportamiento de respuesta directa.

Ten en cuenta que si el usuario presiona otro botón que no sea el botón Atrás cuando lo hace la primera vez 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, que abre una superposición de controles. El usuario espera a que desaparezca la superposición y, luego, presiona el botón Atrás. Dado que el primer botón que se presionó después de seguir el vínculo directo fue el botón de selección del pad direccional, no se aplica el requisito de devolución directa. En su lugar, se aplica la lógica de la pila de actividades normal de la app.

Si el usuario presiona reiteradamente el botón Atrás, debe ir 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 del botón Atrás predecible.

Destino de inicio fijo

La primera pantalla que ve el usuario cuando inicia la app desde el selector es también la última pantalla 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 con vinculación directa o navegación manual a un destino específico, los usuarios pueden usar el botón Atrás para navegar por los destinos hasta el destino de inicio.

Capturas de pantalla que muestran un vínculo directo a una página de detalles dentro de una app. Si presionas Atrás, se abrirá la pantalla principal de la app y, si lo haces, volverás a la pantalla original.

Los vínculos directos a una app desde otra 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, luego, 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 la IU con instrucciones claras. Si no hay un camino directo para llegar a un control, considera reubicarlo.

Ejemplo enfocable de navegación

Sí.
Coloca los 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 pueda hacer clic.

Ejemplo enfocable de navegación

Qué no debes hacer:
Evita los diseños que contengan controles en lugares difíciles de acceder. No es fácil llegar a la acción de búsqueda que se muestra aquí con el pad direccional.

Ejes

Aprovecha los ejes horizontal y vertical cuando diseñes tu diseño. Asigna una función específica a cada dirección para que sea más rápido navegar por jerarquías grandes.

Ejemplo de ejes de navegación

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.

Ejemplo de ejes de navegación

Qué no debes hacer:
Evita jerarquías de diseño complejas y anidadas.