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 efectivo para tu app para TVs depende del entendimiento de estos controles limitados y de las limitaciones de los usuarios mientras usan tu app. A medida que compilas apps para Android para TV, debes prestar especial atención a la manera en que el usuario navega por tu app mediante 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 para una experiencia del usuario intuitiva y coherente en todas las apps de TV.

Controladores

Los controladores vienen en una variedad de estilos, desde un control remoto minimalista hasta controles de juegos complejos. Todos los controladores incluyen un pad direccional (D-pad) y botones de selección, inicio y atrás. Otros botones varían según el modelo.

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

Botón de selección
Selecciona el elemento en pantalla con enfoque.

Botón Inicio
Lleva al usuario a la pantalla principal del sistema.

Botón Atrás
Les 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 el pad direccional

En un dispositivo de TV, los usuarios navegan con un pad direccional o teclas de flechas. Este tipo de control limita el movimiento hacia arriba, abajo, izquierda y derecha. Para crear una buena app optimizada para TV, debes proporcionar un esquema de navegación en el que el usuario aprenda rápidamente cómo navegar por tu app con estos controles limitados.

El marco de trabajo de Android controla la navegación direccional entre los elementos de diseño de manera automática, por lo que, generalmente, no necesitas realizar ninguna acción adicional para tu app. Sin embargo, debes probar rigurosamente la navegación con un controlador de pad direccional para detectar si hay algún problema.

Sigue estos lineamientos para probar que el sistema de navegación de tu app funciona correctamente 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 desplazarse en listas con enfoque, asegúrate de que los botones arriba y abajo del pad direccional se desplacen por la lista, y que el botón de selección seleccione un elemento de esta. Verifica que los usuarios puedan seleccionar un elemento de la lista y puedan seguir desplazándose luego de hacerlo.
• Asegúrate de que el cambio de un control a otro sea sencillo y predecible.

Cómo modificar la navegación direccional

El marco de trabajo 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 mediante un controlador de pad direccional. Una vez que lo hagas, si quieres 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 el siguiente ejemplo de código, se muestra cómo definir el siguiente 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:

Para usar uno de estos atributos de navegación explícitos, debes establecer 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, para que el último control dirija el enfoque 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 si un usuario puede determinar rápidamente qué elemento de la interfaz de usuario está en primer plano. Si no proporcionas una indicación clara del elemento en primer plano y, por lo tanto, en qué elemento el usuario puede realizar una acción, estos pueden frustrarse rápidamente y salir de la app. Por este motivo, es importante que siempre haya un elemento en primer plano sobre el cual el usuario pueda realizar una acción inmediatamente después de que se inicie la app, o cuando 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 que los usuarios puedan determinar qué acciones pueden realizar a continuación. Usa un esquema uniforme para indicar el enfoque dentro de tu app.

Android proporciona los recursos de la lista de estados de elementos de diseño Drawable state list resources 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 -->
<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>
button.xml

En el siguiente código de muestra de diseño XML, 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 espacio de relleno entre los controles que pueden enfocarse y seleccionarse para que las zonas destacadas que los rodean puedan verse claramente.

Navegación con el botón Atrás

Para garantizar la coherencia en todas 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 sencilla y predecible, cuando el usuario presione el botón Atrás del control remoto, llévalo al destino anterior.

Si el usuario navega de un elemento de menú a una tarjeta en el medio 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 navegación izquierda:

• La app usa la navegación superior: Lleva al usuario a la parte superior de la página desplazándote rápidamente y activando el enfoque en el menú.
• La app usa la navegación izquierda: Activa el menú del lado izquierdo y enfócate en el elemento de menú activo en ese momento.

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

No lo hagas.
Evita el bloqueo de salida. Permite que los usuarios salgan de la app sin confirmación.

No lo hagas.
Nunca ingreses al bucle infinito de cerrar y abrir el menú. Lo ideal es que, al presionar el botón Atrás, se salga 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 Arriba ni Atrás

A diferencia de los dispositivos portátiles, 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:

No lo hagas.

Muestra un botón Cancelar si es necesario

Si las únicas acciones visibles son las de confirmación, las destructivas o las de compra, es una buena práctica tener un botón Cancelar que vuelva al destino anterior:

Hazlo.

Implementa la navegación hacia atrás

Por lo general, el marco de trabajo de Android controla bien la navegación hacia atrás, al igual que el pad direccional. Si usas el componente Navigation, puedes admitir una variedad de gráficos de navegación. En ocasiones, es posible que debas implementar un comportamiento personalizado, como hacer que el botón Atrás restablezca el enfoque al principio de una lista larga.

ComponentActivity, la clase de base para FragmentActivity y AppCompatActivity, te permite controlar el comportamiento del botón Atrás mediante su OnBackPressedDispatcher, al que puedes acceder si llamas 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 video 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 los controles de reproducción para TV.

Navegación de la pestaña En vivo

Además de cumplir con los requisitos de calidad de la app de 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 interrupciones y transmisión directa, como se describe en las siguientes secciones.

Reproducción sin interrupciones

La reproducción sin interrupciones 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.

Cuando un usuario hace clic en un vínculo directo, se aplican las siguientes reglas:

• Sin demoras: Los usuarios deben dirigirse directamente a la reproducción del canal sin bloquear ni demorar las pantallas, como los flujos de acceso o registro, o los videos de branding.
• Excepción de inicio en frío: Si el vínculo directo inicia la carga de la app de destino desde un inicio en frío, se permite la demora de inicio. En este caso, también se permiten los videos o las animaciones de branding de inicio de la app.
• Excepción de demora de carga: Si la sintonización del canal tarda unos segundos, se permite mostrar el branding. La duración solo debe ser el tiempo que tarda en cargar el canal.

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

Transmisió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 regresar a la pestaña En vivo con una sola presión, independientemente del tiempo transcurrido. Este comportamiento de transmisión 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 En vivo se distinguen por un parámetro de vínculo directo anexado: ?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 transmisión directa.

Ten en cuenta que, si el usuario presiona cualquier botón que no sea el botón Atrás como la primera presión después del vínculo directo, no se aplica el requisito de transmisión directa, y solo se requiere el comportamiento estándar del botón Atrás behavior.

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 muestra 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 presionado después de seguir el vínculo directo fue el botón de selección del pad direccional, no se aplica el requisito de transmisión directa. En cambio, se aplica la lógica normal de la pila de actividades de la app.

Las presiones repetidas del botón Atrás deben llevar al usuario a la raíz de la app y, luego, 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 behavior.

Arquitectura de navegación

Una arquitectura de navegación bien definida ayuda a los usuarios a comprender dónde se encuentran en tu app y cómo acceder a diferentes contenidos. Considera los siguientes aspectos del diseño 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 pantalla que ve cuando regresa al selector después de presionar el botón Atrás.

Los vínculos directos simulan la navegación manual

Ya sea que estés usando vínculos directos o navegando manualmente 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 Movistar desde Google TV y, luego, presiona el botón Atrás, se lo lleva a la página principal de la app de Movistar.

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 cambiarlo de ubicación.

Hazlo.
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 puede hacer clic.

No lo hagas.
Evita los diseños que contienen controles en lugares difíciles de alcanzar. Alcanzar la acción de búsqueda que se muestra aquí podría ser difícil con el pad direccional.

Ejes

Diseña tu diseño para aprovechar los ejes horizontales y verticales. Asigna a cada dirección una función específica, lo que permite navegar rápidamente por jerarquías grandes.

Hazlo.
Las categorías se pueden recorrer en el eje vertical, y los elementos de cada categoría se pueden explorar en el eje horizontal.

No lo hagas.
Evita las jerarquías de diseño complejas y anidadas.