Navegación en la TV

Los dispositivos de TV ofrecen una cantidad limitada de controles de navegación para las apps. A fin de crear un esquema de navegación eficaz para la IU de tu TV, considera estos controles limitados y la forma en que el usuario navega con los botones del control remoto en lugar de una pantalla táctil.

Hero image de navegación

Lo más destacado

  • El control ofrece capacidades de navegación limitadas (abajo de izquierda a derecha), así que presta atención a cómo esto puede dar forma al diseño de la IU de tu app.
  • La navegación debe sentirse natural y familiar.
  • Crea una experiencia de navegación simple con el botón Atrás del control remoto.
  • Si un usuario no tiene una ruta directa para llegar a un control, considera reubicarlo.

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 las apps para TV.

Eficiente

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

Predictibilidad

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 confusión e imprevisibilidad.

Intuitiva

Haz que la navegación sea lo suficientemente simple como para admitir sin problemas los comportamientos de amplia adopción de los usuarios. No te compliques demasiado agregando capas innecesarias de navegación.

Controlador

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

Controlador

  • Pad direccional (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 de arriba, abajo, izquierda y derecha.
  • Botón de selección: Selecciona el elemento en pantalla enfocado. Si mantienes presionado el botón, se pueden mostrar más opciones.
  • Botón de 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 en el pad direccional

En un dispositivo de TV, los usuarios navegan con un pad direccional de 4 direcciones: arriba, abajo, izquierda y derecha. Para compilar una app para TV óptima, diseña un esquema de navegación en el que el usuario pueda aprender rápidamente a usar tu app con las cuatro teclas de flecha. El pad direccional mueve el foco de un elemento al elemento más cercano en la dirección correspondiente.

Para probar que la navegación de tu app funcione correctamente con un pad direccional en un dispositivo de TV, ten en cuenta lo siguiente:

  • Asegúrate de que un usuario pueda navegar a todos los elementos enfocables de la pantalla.
  • Asegúrate de que la dirección de navegación sea clara y predecible.
  • Para desplazarse por listas, asegúrate de que los botones arriba y abajo del pad direccional se desplacen por toda la lista y que se pueda seleccionar cada elemento.

Botón Inicio

Cuando el usuario presiona el botón de inicio, siempre se lo dirige de vuelta a la página principal o al Selector de Google TV. La app actual se suspendería en segundo plano de forma predeterminada.

Si mantienes presionado el botón de inicio, se muestra el panel del sistema en Google TV y la cuadrícula de apps en Android TV. El comportamiento predeterminado puede variar según el fabricante.

Botón Inicio

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 cumpla con estos lineamientos.

Usa un comportamiento predecible del botón Atrás

Para crear una experiencia de navegación predecible, cuando el usuario presiona el botón Atrás del control remoto, llévalo al destino anterior. En última instancia, el usuario debería llegar a la página principal o al Selector de Google TV si sigue presionando el botón Atrás.

App con navegación superior

El usuario vuelve a la parte superior de la página desplazándose rápidamente y activa el enfoque en el menú.

App con navegación superior
App con navegación izquierda

Se activa el menú lateral izquierdo y la atención del usuario se dirige al elemento del menú activo.

App con barra de navegación izquierda

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

Evita el control de salida. Los usuarios deben poder salir de la app sin ninguna confirmación.

No muestres un botón 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.

Evita mostrar un botón para ir hacia atrás en la pantalla. Los usuarios pueden utilizar el botón Atrás del control remoto.

Mostrar el botón Cancelar, si es necesario

Si las únicas acciones visibles son de confirmación, destructivas o de compra, se recomienda tener un botón Cancelar que vuelva al destino anterior.

Cuando sea necesario, muestra un botón de cancelación para permitir que el usuario vuelva a la página anterior.

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 utilice un vínculo directo o navegue de forma manual a un destino específico, los usuarios pueden usar el botón Atrás para navegar desde cualquier parte de la app al destino de inicio.

Los vínculos directos simulan la navegación manual

La vinculación directa a una app desde otra simula 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 tu IU en una dirección clara. Si no hay un camino directo para llegar a un control, considera reubicarlo.

Coloca controles, como la acción de búsqueda, en ubicaciones que no se superpongan con otros elementos en los que se pueda hacer clic.
Evita los diseños que contengan controles en lugares difíciles de alcanzar. Con el pad direccional, no es fácil llegar a la acción de búsqueda que se muestra aquí.

Axis

Diseña tu diseño para aprovechar los ejes horizontal y vertical. Otorga a cada dirección una función específica para que sea más rápido la navegación por jerarquías grandes.

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.
Evita las jerarquías de diseño complejas y anidadas.