Patrones de diseño de

interacción para TV Digital

Interactiva
Andrés Rodríguez
@a_s_rodriguez
TV interactiva (iTV)

La TV interactiva es cualquier cosa que permita a los

televidentes dialogar con quienes hacen el canal de
televisión, el programa o el servicio.

Más específicamente, puede definirse como un diálogo que

lleva a los televidentes más allá de la experiencia pasiva de
mirar y les hace tomar decisiones y acciones, aún con
acciones tan simples como enviar una carta por correo o
hacer un dibujo sobre la pantalla Mark Gawlinksi, 2003
Interacción en TVD
• Sin interacción
• Interacción local, sin
canal de retorno
• Interacción con upload,
envío de datos vía canal
de retorno
• Interacción avanzada,
envío y recepción vía
canal de retorno
Aplicaciones de iTV
• Servicios permanentes (24/7)
• TV mejorada (eTV)
Servicios permanentes (24/7)
No están relacionados directamente con un programa
• Guía de programación (EPG)
• Teletexto
• Video on demand
• Grabadores personales de video
Aplicaciones de eTV
• Expansión de la grilla
• Crear interactividad o contenido o
disponer del contenido fuera de la grilla.
• Participación del espectador
• Permiten a la audiencia involucrarse en el
momentum del programa
Aplicaciones de eTV
• Expansión de la grilla
• Expansión en paralelo: aplicaciones para
eventos con muchos sucesos simultáneos.
El televidente elige lo que quiere ver (juegos
olímpicos)
• Expansión por estiramiento: Aplicaciones
para eventos no cubiertos de comienzo a fin
en la grilla normal
Aplicaciones de eTV
• Participación del espectador
• Servicios participativos: permiten al
espectador involucrarse en la construcción
del programa
• Mejoras: superponen información sobre el
programa para agregar valor
Usabilidad en ISO 9241
Usuarios de iTV
• Relación con la tecnología
• Early clicker, generation i, armchair
athlete, gadget guy, datytime dabblers,
i-potato, silver sofa (Gawlinski, 2003)
• Considerando la actividad grupal
• Con control remoto (primarios)
• Sin control remoto (secundarios o
indirectos)
Metas de los usuarios de iTV
• Aprovechar el tiempo de ocio
• Relajarse
• No sentirse solo
• Divertirse
• Tener temas de conversación
• Estar informado
• Alimentar el intelecto
Equipamiento
• Set top box
• Pantalla
• Control remoto
Ambiente
• Entorno social
• Entorno técnico
• Entorno físico
Guías de diseño
Guías generales para iTV
Guías de estilo de broadcasters
Guías específicas para middleware
Temas de diseño en las guías

• Tiempo de respuesta
• Layout de pantalla
• Navegación
• Diseño del texto
• Instrucciones de usuario
• Sonido
Diseño de la interacción
Lenguaje de patrones para
diseño de interacción en iTV
• Grupo A: Layout de pantalla
• Grupo B: Navegación
• Grupo C: Teclas de control remoto
• Grupo D: Funciones básicas
• Grupo E: Presentación de contenido
• Grupo F: Participación de usuario
• Grupo G: Entrada de textos
• Grupo H: Ayuda
• Grupo I: Accesibilidad y personalización
• Gruo J: Grupos de usuarios específicos
Grupo A: Layout de pantalla
1. Elegir el layout correcto
2. Superposición
3. Pantalla completa con video
4. Pantalla completa sin video
Grupo B: Navegación
1. Múltiples formas de navegar
2. Menú
3. Múltiples videos en pantalla
4. Índice
5. Número de página
6. Tabs
Grupo C: Teclas del control
remoto
1. Elegir las teclas correctas
2. Teclas de flechas
3. Tecla Ok-Select
4. Teclas de color
5. Teclas numéricas
6. Teclas especiales
Grupo D: Funciones básicas
1. Invitación a la interacción
2. Inicio
3. Indicador de carga
4. Salida
5. Ocultar la aplicación
6. Subir un nivel
Grupo E: Presentación de
contenido
1. Diseño de texto
2. Caja de contenido
3. Paginado
4. Scrolling
5. Switch entre items de contenido
6. Contenido sincronizado
Grupo F: Participación de
usuario
1. Múltiples formas de participación
2. Votación y selección múltiple
3. Ubicación de items
4. Completado de texto
5. Aprobación para conectar
Grupo G: Entrada de texto
1. Múltiples formas de ingresar texto
2. Teclado en pantalla
3. Teclado de dispositivo móvil
Grupo H: Ayuda
1. Instrucciones en pantalla
2. Sección de ayuda
Grupo I: Accesibilidad y
personalización
1. Accesibilidad
2. Personalización
Grupo I: Usuarios específicos
1. Niños
A1. Elegir el layout correcto
• Ejemplos
A1. Elegir el layout correcto
• Contexto
• Ya están especificados los requerimientos
de la aplicación, su contenido y funciones
• Problemas
• Los layouts típicos se diferencian por la
proporción de pantalla cubierta por la
aplicación, con ventajas y desventajas
A1. Elegir el layout correcto
Ventajas Desventajas
Super- El video en pantalla Ocultar parte
posición completa importante del video
Mayor integración Distractor por
aplicación con video cercanía
Pantalla Se puede seguir el Video reducido
completa con video
Gráficos en video
video
Facilita la atención muy pequeños para
dividida leer
A1. Elegir el layout correcto
A1. Elegir el layout correcto
A1. Elegir el layout correcto
• Solución
• Superposición: usarlo cuando la aplicación provee poco
contenido y sólo para eTV asociada al contenido
• Pantalla completa con video: usarlo para aplicaciones
que sirven a audiencias grupales o que proveen
contenido extra
• Pantalla completa sin video: usarlo para aplicaciones
stand-alone 24x7 y para funciones complejas de eTV
que no estén vinculadas directamente al contenido del
programa
B1. Múltiples formas de
navegar
• Ejemplos
B1: Múltiples formas de
navegar
• Contexto
• Ya está elegido el layout de pantalla, es necesario
diseñar la navegación de la aplicación
• Problemas
• Se pueden proveer diferentes elementos de IU
para acceder a contenidos y funciones
B1. Múltiples formas de
navegar
Ventajas Desventajas
Menú Posiblidad de Wording puede ser
estructura jerárquica confuso
Acceso a contenido Puede ser difícil
por clase clasificar el contenido
Paginado Atajos para usuarios Puede ser familiar
avanzados sólo para usuarios de
antiguo teletexto
Soporte para usuarios
regulares que saben
a qué página ir
B1. Múltiples formas de
navegar
B1. Múltiples formas de
navegar
B1. Múltiples formas de
navegar
• Solución
• Proveer varias formas de navegar. Combinar
menú, video múltiple, índices y paginado si es
posible
• Menú: usar un menú para todas las aplicaciones
• Indice: usar un indice para aplicaciones que
tengan muchos items y funciones
• Paginado: usar para aplicaciones con mucho
contenido
C1. Elegir las teclas correctas
• Ejemplos
C1. Elegir las teclas correctas
• Contexto
• Está elegido el layout de pantalla y las formas de
navegación
• Problema
• Los controles remotos pueden variar mucho. Hay
algunas teclas que aparecen en todos (flechas,
OK, color, números).
• Las teclas pueden variar en forma, posición y
etiquetado.
• Puede haber teclas especiales (info, epg)
C1. Elegir las teclas correctas
Ventajas Desventajas
Flechas Generalmente Se requiere otra tecla
detectables por tacto para una selección
(gral. OK)
Color Usualmente una tecla Sirve hasta 4
puede activar opciones
directamente una
función Difíciles de encontrar
por tacto
Especiales Usualmente una tecla No disponible en
puede activar todos los controles
directamente una
función Difíciles de encontrar
por tacto
C1. Elegir las teclas correctas
C1. Elegir las teclas correctas
C1. Elegir las teclas correctas
• Solución
• Flechas: usar para elegir un item, combinar con OK
• OK: usar para confirmar una selección
• Color: usar para elecciones en el menú principal
• Especiales: usar sólo como atajos. La misma
acción debe ser posible sin teclas especiales
D1. Invitación a la interacción
• Ejemplos
D1. Invitación a la interacción
• Contexto
• Está diseñado el layout, las formas de navegación
y el uso de teclas del control remoto
• Problemas
• Acceso pull vs push
• Crear conciencia de disponibilidad de aplicación
• Posición del indicador en pantalla
D1. Invitación a la interacción
D1. Invitación a la interacción
• Solución
• Método de acceso: dar al espectador el control
sobre la presentación de aplicaciones. No push
• Awareness: usar indicadores en pantalla y desde
el programa
• Indicador en pantalla: ubicarlo en una de las
esquinas de pantalla
• Duración de indicador: animar el indicador
durante 5 seg. Repetir cada 5 a 7 minutos
Tibor Kunert
User-Centered Interaction
Design Patterns for
Interactive Digital
Television
Applications (1st ed.).
2009
Springer
 No deje de completar su evaluación online

disenoinclusivo.org.ar/encuesta
¡Muchas gracias!
Patrones de Diseño de Interacción
para TV Digital Interactiva
Andrés Rodríguez