Oct 29 2010
5 puntos clave del diseño web para TV
Cada vez van a ser más los usuarios que naveguen por nuestras páginas a través del TV, ya sea por la introducción de google TV o porqué cada día es más fácil ver modelos de TV con acceso a internet. El adaptarnos a este cambio va a hacer que nuestras páginas sean más accesibles y por lo tanto aumentemos satisfacción del usuario.
Adaptar un diseño web para que sea accesible a través de un TV no es difícil, ni tiene porqué requerir muchas horas, sólo debemos tener en cuenta unos cuantos consejos.
Fuentes:
- Aumentar el tamaño de la fuente, como referencia podemos usar estas equivalencias: Si el monitor tiene 720p de resolución debemos multiplicar por 1.5x el tamaño de la letra de nuestro site, si es de 1080p debemos multiplicar por 2.0x.
- Limitar los párrafos a 90 palabras.
- Limitar las líneas a 5-7 palabras, y sobretodo nunca menos de 3, y nunca más de 12.
- Utilizar fuentes Sans Serif con anti-aliasing, aumentan la legibilidad.
Menús:
- Se aconseja utilizar menús horizontales, así se aprovecha la horizontalidad de los TV, y a poder ser ubicarlos en la parte inferior y que estén siempre visibles cuando tengamos que hacer scroll (aunque el scroll esté totalmente desaconsejado)
- Utilizar hover para iluminar los elementos cuando el puntero esté encima de ellos.
- Hacer que el ítem aumente de tamaño cuando el puntero esté cerca para facilitar la navegación (recordar que el usuario no tiene un mouse, sino un D-pad)
- Simplificar las categorías. Podemos utilizar google analytics para analizar las que menos se usen y ocultarlas mediante un display:none.
Padding a los elementos:
- Para facilitar la navegación entre los elementos es recomendable añadir un padding extra entre los ítems para poderlos distinguir y apuntar mejor con el D-pad.
Tamaño de la página:
- El tamaño del televisor hará que los layouts de la página web se deban modificar, por ejemplo:
- Si tenemos una resolución de 1280×720 el ancho debería ser de 1152×648
- Si tenemos una resolución de 1920×1080 el ancho debería ser de 1728×972.
- Usar layouts flexibles.
- Si queremos utilizar sólo un layout y no queremos que sea flexible, utilizar el de 720p, dado que éste será escalado cuando se vea desde un TV de 1080p.
- Cuidado con los banners que ocupan una gran cantidad de espacio en la parte superior de la página (banners “above the fold”), esto puede penalizar mucho la visualización de los contenidos.
Colores:
- No utilizar el color blanco puro (#FFFFFF), éste puede producir efectos extraños al ser visualizado, utilizar el color (#F1F1F1)
- Probar los colores en los diferentes formatos de los que dispone el TV, como pueden ser Cinema/Theatre, Game, etc…
- Cuidado con los degradados, testearlos.
Fuente: Google TV web design








