Recientemente he estado investigando sobre el diseño de apps para Smarts TVs. Buscando aquí y allá, he recopilado una serie de líneas generales o principios tener en cuenta a la hora de enfrentarse al diseño.
Señalar dónde está foco en todo momento
Es fundamental que el usuario identifique claramente con qué elementos puede interactuar. Por eso todos los elementos deben mantener un estilo uniforme, tanto al estar con o sin foco.
Solo un elemento puede estar en foco a la vez. Se debe proporcionar feedback durante la navegación mediante transiciones fluidas y sonidos para mejorar la experiencia del usuario.
Los estados de un elemento pueden ser hasta 5 (dependiendo de la plataforma): Unfocus, Focus, Selected, Disabled, Highlighted.
Mostrar sólo la información imprescindible
Es recomendable ajustar diferentes niveles de información y detalle de la información para no sobrecargar a nivel cognitivo y visual. La información se puede ir desvelando cuando se hace foco en los elementos o a medida en que navegamos a mayores niveles de profundidad.
Hay que respetar el grid
Organiza los contenidos en una cuadrícula que permita la navegación bidireccional. Facilita el scroll en ambas direcciones para explorar los contenidos de manera fluida y permite hacer un interfaz adaptable a cualquier tamaño de pantalla de televisor. Esto simplifica enormemente la navegación.
Son deseables el scroll horizontal y el vertical para navegar los contenidos, evitando los carruseles ciegos. También es recomendable evitar elementos que se queden fijos al hacer scroll, ya que complican la navegación.
Simplificar entrada de datos
Se debe limitar al mínimo imprescindible las interacciones que requieran la introducción de datos, como el login o las búsquedas. Es tedioso rellenar un formulario seleccionando los caracteres con el mando a distancia. Implementar escritura predictivas ahorra tiempo y esfuerzo al usuario.
También se pueden explorar alternativas para simplificar algunos procesos, como la función de login de HBO o Spotify a través del móvil. Apple emplea códigos QR, mientras que Google utiliza la verificación mediante la página de activación como métodos alternativos.
El control va más allá de mando
Todas las apps pueden ser controladas con un mando a distancia, con las funciones básicas de desplazarse arriba o abajo mediante flechas, un botón de «Ok» y un botón «Atrás». Sin embargo esto puede enriquecerse enormemente. Ya sea a través de botones para otras funciones (como por ejemplo acceso a teclas rápidas) o a través de otros dispositivos o voz. Por ejemplo, Apple TV permite controlar la tele con Siri y con gamepads. LG con voz a través de su mando Magic Wand, o Samsung con asistentes de terceros (Alexa, Google, Bixby).
Además, no hay que olvidar la sincronización y control a través de otros dispositivos como smartwatchs y móviles. Por ejemplo, Spotify permite el control de la reproducción en la tele desde el móvil.
Algunos notas a la hora de diseñar
A nivel general se recomienda:
- Diseñar a resolución de 1920*1080 o a ratio 16/9. Independientemente de la resolución real de la tele, luego se escala en producción.
- Tener en cuenta que la tele es visionada desde una distancia media de 3 metros.
- Usar márgenes de seguridad. WebOS los recomienda de 20px, y tvOS los sitúa en 90px*60px.
- Usar tipografías de grosor regular para una mejor legibilidad, evitando demasiado finas o demasiado gruesas.
- Usar indicadores de scroll, para saber cómo de largo es un listado/carrusel.