Patrones de diseño de interacción para tv digital interactiva
1. Patrones de diseño de
interacción para TV Digital
Interactiva
Andrés Rodríguez
@a_s_rodriguez
2. 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
3.
4. 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
6. 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
7. 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
8. 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
9. 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
11. 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)
12. 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
18. 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
19. Grupo A: Layout de pantalla
1. Elegir el layout correcto
2. Superposición
3. Pantalla completa con video
4. Pantalla completa sin video
20. 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
21. 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
22. 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
23. 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
24. 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
25. Grupo G: Entrada de texto
1. Múltiples formas de ingresar texto
2. Teclado en pantalla
3. Teclado de dispositivo móvil
30. 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
31. 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
34. 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
36. 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
37. 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
40. 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
42. 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)
43. 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
46. 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
48. 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
50. 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
52. 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
