Diseñando para la televisión, parte 1

Una introducción a los ingredientes básicos de una interfaz de usuario de TV

Bienvenido a la nueva Edad de Oro de la televisión. No solo se está produciendo más televisión que nunca, sino que también tenemos más opciones para ver nuestros programas favoritos. Y aunque podemos acceder a estos programas en cualquier lugar y en cualquier momento a través de nuestras computadoras, teléfonos y tabletas, los televisores aún mantienen un lugar especial en el hogar de muchos.

Pero ya no estamos limitados a un control remoto y una caja de cable para controlar nuestros televisores; estamos usando televisores inteligentes, o transmitiendo desde decodificadores como Roku y Apple TV, o usando consolas de videojuegos como Xbox y Playstation. Y cada uno de estos dispositivos permite una interfaz de usuario que es mucho más potente que su guía en pantalla pasada de moda.

En comparación con las computadoras e incluso los teléfonos móviles, el diseño de interfaces de usuario para TV sigue siendo un área relativamente nueva. También es una plataforma fundamentalmente diferente. El diseño para TV requiere un conjunto único de consideraciones, que incluyen el tamaño y la distancia de la pantalla, las limitaciones técnicas y el contexto de uso.

Esta será la primera parte de una serie que profundiza en cómo comenzar a pensar en las interfaces para TV. También nos centraremos específicamente en el gamepad como dispositivo de entrada y los conceptos básicos del uso de la API de Gamepad. En la Parte 2, le mostraremos cómo puede crear prototipos de sus UI y controladores de TV juntos.

La pantalla

Cómo los televisores son diferentes de las computadoras, teléfonos y tabletas

Los primeros televisores en el mercado estaban hechos de tubos de rayos catódicos (CRT), una tecnología anticuada que producía imágenes inconsistentes en los televisores. Este problema fue particularmente grave en los bordes de la pantalla, por lo que para compensar, los televisores CRT estaban sujetos a un sobreescaneo. Con el sobreescaneo, la imagen en sí se amplía ligeramente para que los bordes estén fuera de los límites del área de visualización.

© Todos los derechos reservados, Netflix

Debido a que los organismos de radiodifusión anticiparon que parte de la imagen se recortaría, querían evitar que cualquier información crítica se mostrara demasiado cerca del borde de la pantalla. Históricamente, había un área segura de título en la que el texto se mostraría sin distorsión, y un área segura de acción donde la imagen se podía mostrar de forma segura.

Por razones tontas y complicadas, el sobreescaneo todavía existe en HDTV. La recomendación actual es establecer al menos un margen del 5% para definir un área segura general y mantener toda la IU dentro de estos límites. Sin embargo, este porcentaje es flexible; Google mantiene su área segura estrecha, mientras que Apple es más generosa. A menudo nos encontramos ajustando el área segura a medida que construimos nuestras cuadrículas de diseño.

Para comenzar, configuremos nuestro lienzo utilizando las dimensiones estándar de HDTV: 1920 x 1080 píxeles con márgenes superior e inferior de 60 píxeles y márgenes laterales de 90 píxeles. Tocaremos 4k más tarde.

Navegación

Cómo la entrada direccional da forma a las interfaces de TV

El hardware a menudo define patrones de diseño. En los dispositivos móviles, las pestañas surgieron como un patrón de navegación dado el tamaño de pantalla pequeño pero alto. En los televisores, el lienzo ancho pero ancho se presta a largas filas de contenido que maximizan la cantidad de contenido visible. Al igual que las pestañas en dispositivos móviles, este patrón se ha convertido en un lugar común en la mayoría de las IU de transmisión de TV.

En el sentido de las agujas del reloj desde la parte superior izquierda: aplicación Netflix TV, Hulu Plus en Playstation, iTunes Store en Apple TV, AMC en Apple TV

Del mismo modo, la mayoría de las interfaces de usuario de TV (con la excepción del increíblemente lindo y frustrante LG Bean Bird) están controladas por un D-pad, abreviatura de pad direccional. Ya sea en un control remoto o en un gamepad, el D-pad limita la navegación a cuatro direcciones: arriba, abajo, izquierda y derecha. Esto hace que una cuadrícula sea la estructura de interfaz de usuario natural para aplicaciones de TV.

Apple TV (arriba) usa una posición de sombra y eje z para su cursor, mientras que HBO GO (abajo) usa un trazo azul

El otro elemento crítico en las interfaces de usuario de TV es el cursor. Sin tocar ni un mouse, los usuarios deben navegar al elemento que desean seleccionar. Un cursor resalta el elemento seleccionado actualmente y se mueve a medida que cambia la entrada del D-pad. Las aplicaciones a menudo usan bordes, sombras, eje z o alguna combinación de estos para señalar el estado seleccionado. Cada elemento de la pantalla debe ser accesible por el cursor, y siempre debe estar claro dónde puede moverse el cursor a continuación.

Para nuestro prototipo, recreemos un diseño típico de interfaz de usuario de TV con una fila horizontal de contenido. Agregaremos nuestro estado del cursor al primer elemento.

Entrada

Cómo las personas interactúan con televisores más allá de los controles remotos

De izquierda a derecha: Logitech Harmony, Samsung Smart TV, Apple TV, Roku, Amazon Fire TV

La mayoría de los televisores y dispositivos de transmisión dependen de alguna forma de control remoto. Algunas plataformas están experimentando con la entrada de voz, mientras que otras, como el nuevo Apple TV, también usan la entrada táctil. Sin embargo, a medida que más servicios de transmisión llevan sus aplicaciones a las plataformas de juego, las personas también usan cada vez más gamepads para navegar por las interfaces de usuario de TV. Las consolas de videojuegos son dispositivos potentes y polivalentes, y aquí, en el estudio, nos interesa saber cuál es el mejor diseño y prototipo con este hardware.

Navegar con un gamepad ofrece una serie de ventajas. Además de un D-pad, los gamepads también tienen barras de control que proporcionan el movimiento estándar de cuatro direcciones, así como un movimiento diagonal más matizado. Los thumbsticks son más rápidos y responden mejor que los D-pads, particularmente para aquellos que juegan videojuegos.

Un controlador Xbox One (L) y un controlador Playstation 4 (R)

Hay algunas convenciones estándar compartidas entre plataformas, como los botones Seleccionar y Atrás que comparten la misma posición entre los controladores. Cada plataforma también tiene sus propias convenciones establecidas. En Xbox, los disparadores proporcionan un control de "Re Pág" y "Pág. Abajo" mientras que los parachoques se usan para tabular entre las vistas de contenido. También hay una serie de botones de "usuario avanzado" en cada plataforma con los que los jugadores más experimentados estarán familiarizados.

Sin embargo, el contexto es importante cuando se diseña para la sala de estar. Si bien puede haber un usuario principal que juega videojuegos y está muy familiarizado con el controlador, los dispositivos de la sala son dispositivos compartidos. Podemos esperar que otros usuarios menos familiarizados con un gamepad usen una consola para entretenimiento. Para la funcionalidad principal, es mejor seguir las convenciones de botones estándar.

En la Parte 2, profundizaremos en cómo asignar un controlador de gamepad a una interfaz de usuario utilizando la API de Gamepad.

Tipografía

Leer una interfaz desde 10 pies de distancia

Imagina que estás sentado en el sofá viendo un programa en tu televisor. Es bastante fácil ver cómo sucede la acción, pero ¿qué sucede cuando comienzan a jugar los créditos finales? ¿O aparece un menú?

Las aplicaciones de TV a menudo se denominan experiencias de 10 pies, un término que se refiere a una distancia común entre usted y su televisor. Dada esta distancia, debemos tratar una interfaz de usuario un poco diferente de lo que lo haríamos en la web o en los dispositivos móviles. Las IU deben ser menos densas y los elementos de diseño deben ser más grandes para que puedan leerse desde el otro lado de la habitación.

La tipografía puede volverse especialmente complicada en experiencias de 10 pies. En caso de duda, vaya más grande. Aumente tanto el tamaño como el peso de su tipo. Hemos encontrado que 18px es el tamaño legible más pequeño y solo apropiado para etiquetas no esenciales, como una etiqueta de ceja. Para nuestro diseño, hemos establecido los títulos en 92 px y el texto del cuerpo en 24 px.

La clave para una buena tipografía en la televisión es probar constantemente. Las letras delgadas y pequeñas en su monitor se verán limpias y nítidas, pero una vez que esté en un televisor, puede aparecer apagado o ininteligible. Definimos nuestros tamaños de fuente al principio de nuestro proceso mediante la creación de un simulacro de prueba y un tipo de prueba en una pantalla de TV.

Color

Comprender los límites de una pantalla de TV

La gama de colores en los HDTV es más limitada que la del monitor de su computadora. Esto significa que durante el diseño, tendrá acceso a una gama de colores mayor que la que se mostrará correctamente en un televisor. Las diferentes marcas y modelos de televisores varían ampliamente cuando se trata de brillo, pantalla y otras configuraciones. Al igual que el tipo, el color debe probarse temprano y, a menudo, en televisores.

Hay algunas pautas a seguir cuando comience a diseñar: Evite el blanco puro, ya que la luz brillante es dura en los ojos. También tenga cuidado con los degradados y los desenfoques profundos, ya que el rango de color limitado puede hacer que aparezcan bandas. Para finalizar nuestro diseño de prototipo, estableceremos nuestro color de fondo en #EEE y ocultaremos nuestra área segura y guías.

Futuro 4K

Preparándose para la próxima generación

A diferencia de los teléfonos móviles, la mayoría de los consumidores no actualizan sus televisores en un ciclo regular. Entonces, mientras se producen más y más televisores con capacidad 4K, todavía estamos diseñando para un mercado que está abrumadoramente limitado a 1080p.

Con el tiempo, esto cambiará y, al igual que al tener en cuenta los diferentes tamaños de pantalla en el diseño móvil, los diseñadores pronto diseñarán para TV a 2x. Además de una mejor calidad de imagen, la mayor densidad de píxeles significa un tipo y una interfaz de usuario más nítidos y legibles.

Quizás el desarrollo más prometedor para las IU diseñadas en 4K será un mayor rango de color y profundidad. Los HDTV actuales usan un perfil de color llamado Rec. 709 que proporciona una gama de colores bastante limitada. Un nuevo perfil, Rec. 2020, fue desarrollado para televisores 4K y ofrece una gama de colores más amplia.

Fuente

Sin embargo, más importante que el rango es la profundidad de color. La mayoría de los HDTV actuales proporcionan color de 8 bits. Esto significa que hay 256 tonos de cada canal de color RGB disponibles para un total de 16,78 millones de colores posibles. Los nuevos televisores 4K con color de 10 bits o superior y proporcionarán al menos 1.024 tonos de cada canal de color, lo que hace posible más de mil millones de colores. Con una mayor profundidad de color, las bandas en degradados y desenfoques no serán visibles, lo que brinda a los diseñadores más oportunidades para usar el color y manipular los recursos fotográficos.

Prototipos

La parte más importante del diseño para cualquier cosa.

Ahora que tenemos nuestro diseño básico, estamos listos para comenzar a crear prototipos. La próxima semana, explicaremos los conceptos básicos de la creación de prototipos de comportamiento de navegación con un controlador de gamepad utilizando la API de Gamepad y algunos HTML / CSS / JS básicos. Síganos aquí para asegurarse de atrapar la Parte 2.

Mientras tanto, aquí hay algunos recursos para comenzar a diseñar su propia interfaz de usuario:

Descargar ejemplos (PSD)

Pautas de la interfaz humana de tvOS

Diseñando para Android TV

Pautas de diseño y experiencia del usuario de Amazon Fire TV