Repensar el diseño de la interfaz de usuario para la plataforma de TV

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

La gran mayoría de los consumidores en estos días están cortando el cable con la televisión paga, pero esto no significa que se hayan alejado de la pantalla grande para consumir su contenido. De acuerdo con una publicación de datos de Nielsen, los hábitos de visualización de los adultos de EE. UU. encontraron que el 92% de todas las visualizaciones aún se realizan en la pantalla del televisor. Estos son números bastante grandes.

Más del 92% de la visualización entre los adultos de EE. UU. todavía ocurre en la pantalla del televisor.

El significado de “ver televisión” ha cambiado mucho en las últimas décadas. Ya no estamos limitados a un control remoto y una caja de cable para llenar nuestras pantallas; estamos usando televisores inteligentes, o transmitiendo usando discos como Roku, Amazon Fire y Apple TV, o conectando consolas de videojuegos como Xbox y Playstation. Y cada uno de estos dispositivos permite una interfaz de usuario que es mucho más poderosa que su antigua guía en pantalla.

Pagar para ver programación de transmisión o VOD a través de servicios en línea basados ​​en suscripción como Hulu, Netflix o Amazon representa el 26% de los encuestados en línea globales (Nielsen). Este es un número significativo. Sin embargo, el 72% de los encuestados confirmaron que todavía pagan para ver su contenido a través de una conexión de TV tradicional.

¿Significa esto que la conexión de TV tradicional llegó para quedarse?

Todos parecemos pensar que los cortadores de cordón representarían un número mayor. Nielsen informa que se esperaba que 116,4 millones de hogares en los EE. UU. miraran televisión durante la temporada 2015-16. Este es un número enorme y el informe también encontró que alrededor de 9,5 millones de esos hogares se han cambiado a TV OTA gratuita. De todos los servicios de transmisión que existen, Netflix (60,7 %) parece estar a la cabeza, seguido de Amazon Prime Video (49,4 %) y Hulu (26 %). Creo que una de las principales razones por las que la gente está cortando el cable es que solo queremos pagar por lo que usamos.

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 y la forma en que consumimos nuestro contenido es diferente. El diseño para TV requiere un conjunto único de consideraciones, incluido el tamaño de la pantalla y la distancia del espectador, las restricciones técnicas y el contexto de uso. Los usuarios se encuentran en una experiencia "reclinada", sentados a una distancia promedio de 10 pies y la interfaz de usuario y la experiencia deben reflejar esto. A diferencia de las tabletas y los teléfonos con pantalla táctil, las interacciones en los televisores se realizan a través de D-pad (panel de control direccional) usando un control remoto o un controlador de videojuegos, lo que aumenta la complejidad.

La pantalla

Los televisores no son como las tabletas y los teléfonos.

Los televisores han cambiado mucho con el tiempo, de un mueble enorme y tosco a una elegante pantalla minimalista colgada en una pared. Antes, cuando los televisores ocupaban toda la sala de estar, usaban una tecnología que producía imágenes inconsistentes en los televisores, especialmente cerca de los bordes. Para compensar estos problemas, los televisores CRT estaban sujetos a sobreexploración. Esto solo significa que las imágenes se ampliaron ligeramente para que los bordes no estuvieran fuera de los límites del área de visualización.

Tradicionalmente, las emisoras anticiparon esto y querían evitar que su información crítica se mostrara demasiado cerca de los bordes de la pantalla. Para resolver este problema, crearon un área segura de título para mostrar el texto sin distorsión y un área segura de acción donde la imagen se podía mostrar de forma segura.

Por razones fuera de nuestro control, la sobreexploración todavía existe... incluso en sus nuevos televisores de alta definición. La cantidad de overscan no es consistente en todos los televisores. Para asegurarse de que toda su información principal, como títulos y acciones importantes, esté segura, manténgala dentro de los márgenes seguros.

Actualmente no existe un "estándar" establecido para las áreas de acción segura; se define principalmente por la propia plataforma. Google mantiene su área segura estrecha y la de Apple es un poco más generosa. De mis muchas búsquedas en la web, estas zonas variarán entre el 85% y el 95% de una pantalla de televisión desde el centro. Para cumplir con los requisitos de todas las diferentes plataformas en las que podría estar trabajando, sugeriría usar una zona segura de márgenes superior e inferior de 60 px y márgenes laterales de 90 px. Esto significa que toda su información principal deberá caber dentro de esta área para adaptarse a todas las pantallas de televisión y cumplir con todos los requisitos de la plataforma.

Para comenzar su nuevo diseño de interfaz de usuario de televisión, cree un nuevo lienzo de 1920 x 1080. Su relleno (zona segura) debe tener 90 píxeles en los lados (izquierdo y derecho), así como 60 píxeles en la parte superior e inferior. Puede descargar su archivo gratis aquí.

Navegación

Cómo arriba-abajo-izquierda-derecha da forma a las interfaces de TV.

Como diseñador, el hardware con el que diseñamos definirá algunos de nuestros patrones de diseño. En el móvil, deslizamos, tocamos, presionamos prolongadamente, tiramos, etc. para realizar acciones. Las pestañas y los menús se utilizan como patrones de navegación en nuestros dispositivos. La televisión ofrece un gran lienzo que fácilmente puede volverse demasiado complejo si no se hace bien. Ver largas filas de contenido para maximizar la cantidad visible para los usuarios se ha convertido en un elemento estándar de las IU de televisión.

A diferencia de los dispositivos móviles que controlamos con los dedos, la mayoría de las IU de TV están controladas por un D-pad y se usan a cierta distancia de la pantalla. 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.

Cada plataforma también tiene sus propias convenciones establecidas. En Xbox, por ejemplo, los disparadores brindan un control de "Re Pág" y "Av Pág", mientras que los parachoques se usan para pasar de una vista de contenido a otra. También hay una serie de botones de "usuario avanzado" en cada plataforma con los que los jugadores más experimentados estarían familiarizados.

El otro elemento crítico en las interfaces de usuario de TV es el estado de enfoque . Sin la capacidad de tocar la pantalla o usar un mouse, los usuarios deben navegar hasta el elemento que desean seleccionar. A medida que el usuario navega dentro de la aplicación, se deben resaltar diferentes elementos de la interfaz de usuario para indicar que un elemento de navegación está enfocado.

Los estados de enfoque y resaltado al diseñar para televisión son muy importantes. Ese estado de enfoque es el elemento que resalta un componente seleccionable y representa la ubicación actual en pantalla del usuario. La forma en que se muestra el enfoque puede variar; Sin embargo, dependiendo del componente, la consistencia siempre será clave. Un enfoque claro y muy visible ayuda al usuario a reconocer rápidamente su ubicación actual en pantalla y facilita la navegación. Cuando un usuario aparta la mirada momentáneamente del televisor y luego regresa la mirada, debería quedar claro automáticamente qué opción está seleccionada actualmente para la navegación. El cursor debe poder acceder a todos los elementos de la pantalla, y siempre debe quedar claro hacia dónde se puede mover el cursor a continuación.

Ejemplos de diseños que podrían dejar a los usuarios preguntándose dónde se encuentran en la aplicación. Estos ejemplos no proporcionan suficiente indicación visual (estado de enfoque) del posicionamiento. Los usuarios deben poder ver claramente dónde están en todo momento sin tener que moverse hacia arriba o hacia abajo. Debería poder apartar la mirada del televisor y volver y aún así saber su posición.

Tipografía

Lectura a diez pies de distancia.

Las aplicaciones de TV a menudo se denominan experiencias de diez pies, un término que se refiere a una distancia común entre usted y su televisor. A diferencia de otros dispositivos, como dispositivos móviles y de escritorio, la televisión está configurada para ser más un entorno de "recuéstese y relájese". Dada esta distancia, debemos tratar una interfaz de usuario un poco diferente a como lo haríamos en la web o en dispositivos móviles.

Las pantallas de televisión son generalmente más grandes que los dispositivos móviles y los monitores de las computadoras de escritorio, pero se ven desde una distancia mayor. La legibilidad se convierte en una característica importante, lo que significa que el tamaño del texto y otros elementos deben ajustarse en consecuencia. Dependiendo de su edad, 18 px probablemente sea el tamaño legible más pequeño y solo sea apropiado para etiquetas no esenciales, como una pestaña de cejas. Aun así, como regla general, los tamaños de fuente elegidos nunca deben ser inferiores a 24 pts. Esto es lo que consideraría el tamaño de fuente mínimo para adaptarse a cada tipo de usuario.

La clave para una buena tipografía en TV es probar constantemente. Las letras delgadas y pequeñas en su monitor se verán limpias y nítidas, pero una vez en un televisor, pueden parecer apagadas o volverse ininteligibles.

Líneas de escaneo

¿Qué son las líneas de exploración?

A diferencia de las pantallas de escritorio, móviles y tabletas, la imagen en una pantalla de televisión se compone de líneas de exploración pares e impares. La televisión muestra estas líneas en fases que alternan rápidamente entre líneas de exploración pares e impares. Cualquier píxel (o línea de píxeles) que caiga sobre una sola línea de exploración parpadeará. Para evitar el parpadeo de sus elementos en la pantalla, siempre debe mantener sus líneas en números pares y no más delgadas que 2 píxeles. Esto es algo a tener en cuenta cuando se trabaja en proyectos multiplataforma y se prepara para transferir sus diseños desde dispositivos táctiles (móviles y tabletas), donde a menudo puede encontrarse creando botones de borde de 1px para televisión.

Otra forma de evitar estas líneas o formas borrosas es asegurarse de que sus diseños sean siempre perfectos en píxeles. El siguiente ejemplo es un buen ejemplo de líneas que se crean utilizando números impares. Como puede ver, podemos ver claramente los efectos de esto, y se vuelve inquietante para los ojos.

Color

Las pantallas de televisión tienen límites.

El primer elemento a tener en cuenta es que los televisores tienen un valor gamma mucho más alto que los dispositivos de escritorio, tabletas y teléfonos móviles. La mejor manera de describir cómo afecta gamma a la calidad de la imagen es que gamma representa el nivel de diferencia de brillo entre cada paso en la escala de grises, o qué tan "rápido" se vuelven más brillantes los negros. Percibimos el doble de la luz como si fuera solo una fracción más brillante. Las diferentes marcas y modelos de televisores varían ampliamente en lo que respecta al brillo, la pantalla y otras configuraciones. Al igual que la tipografía, el color debe probarse pronto y con frecuencia en los televisores.

Algunas pautas a seguir al elegir sus colores: Los colores brillantes pueden ser duros para los ojos cuando ve la televisión por la noche o en una habitación oscura. Evite el uso excesivo de colores saturados (especialmente el rojo) y el uso intensivo del blanco en elementos grandes o fondos. El blanco puro creará halos y otras distracciones visuales. Al elegir blancos, se recomienda elegir un valor hexadecimal #f1f1f1 para evitar cualquier parpadeo. Para aumentar la legibilidad, asegúrese de crear suficiente contraste entre sus elementos

La regla general es evitar bordes nítidos entre colores muy contrastantes (especialmente colores brillantes junto a colores oscuros) y evitar colores “calientes” como rojos y amarillos muy saturados. Éstos sangrarán más fácilmente que los colores menos saturados o los colores más fríos como los azules y los verdes.

Pruebe siempre los colores en un televisor real para comprender cómo sus opciones de color se traducen en la pantalla grande. Si es posible, obtenga una vista previa de su aplicación en varios televisores porque los colores pueden variar drásticamente entre los modelos de televisores. Simplemente conecte el cable HDMI de su televisor y pruébelo.

Los basicos

Pequeñas cosas a tener en cuenta.

Estos elementos deben usarse para guiar sus diseños como un todo. Las consideraciones más importantes al diseñar las interfaces de usuario de su televisor son la simplicidad y la interacción liviana.

Si bien aún se aplican muchos de los fundamentos y las mejores prácticas para el diseño de interacción, la televisión se usa de una manera más relajada a diferencia de una computadora o un dispositivo móvil. La interfaz de usuario en un televisor debe ser clara, simple y visual. El diseño requiere simplicidad y claridad con baja densidad de información. Los elementos deben ser grandes y estar lo suficientemente separados para poder leerlos a distancia. Presente un conjunto claro de acciones u opciones para cada pantalla.

Este diseño es limpio y simple, usando bonitos tratamientos de cartas grandes. Los estados de enfoque se logran con escala y sombras que se alinean con el resto del diseño limpio. Los metadatos también solo son visibles al pasar el mouse, lo que permite a los usuarios mantenerse enfocados en la tarjeta actual.

Coloque el contenido o las opciones más importantes primero en la pantalla para que el usuario pueda verlos y navegarlos fácilmente. Los niveles de pantalla innecesarios deben eliminarse. Entrar en diferentes niveles y salir de nuevo debe ser fácil y obvio.

El factor más crucial al diseñar una aplicación de TV es incluir una navegación clara y precisa para las operaciones del usuario. Si la navegación es ambigua, los usuarios se sentirán confusos e inseguros.

En resumen, los usuarios siempre deben saber exactamente dónde se encuentran dentro de una aplicación. Recuerde, el usuario solo está usando controles básicos para navegar. Mover, Regresar, Entrar y otras funciones básicas de navegación deben estar claras. Los usuarios deberían poder utilizar las operaciones que deseen con estas acciones.

Como diseñadores, nuestro trabajo es crear y diseñar interfaces de usuario que brinden a los usuarios acceso al contenido de una manera clara y fácil de navegar. No podemos esperar que los usuarios adapten nuevos hábitos solo para poder ver nuestro contenido. Más bien, tenemos que adaptar nuestras interfaces de usuario para que puedan ser operadas en la oscuridad por alguien que nos está dando menos de su intención y con un dispositivo de entrada muy limitado. Es todo un desafío, pero la recompensa potencial es enorme. ¡Diviértete diseñando!

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas