Patrones de diseño de interacción para tv digital interactiva
-
Upload
movimientodisenoinclusivo -
Category
Design
-
view
1.260 -
download
0
description
Transcript of Patrones de diseño de interacción para tv digital interactiva
![Page 1: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/1.jpg)
Patrones de diseño de
interacción para TV Digital InteractivaAndrés Rodríguez
@a_s_rodriguez
![Page 2: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/2.jpg)
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
![Page 3: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/3.jpg)
![Page 4: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/4.jpg)
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
![Page 5: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/5.jpg)
Aplicaciones de iTV
• Servicios permanentes (24/7)
• TV mejorada (eTV)
![Page 6: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/6.jpg)
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
![Page 7: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/7.jpg)
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
![Page 8: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/8.jpg)
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
![Page 9: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/9.jpg)
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
![Page 10: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/10.jpg)
Usabilidad en ISO 9241
![Page 11: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/11.jpg)
Usuarios de iTV
• Relación con la tecnología
• Early clicker, generation i, armchairathlete, gadget guy, datytime dabblers, i-potato, silver sofa (Gawlinski, 2003)
• Considerando la actividad grupal
• Con control remoto (primarios)
• Sin control remoto (secundarios o indirectos)
![Page 12: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/12.jpg)
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
![Page 13: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/13.jpg)
Equipamiento
• Set top box
• Pantalla
• Control remoto
![Page 14: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/14.jpg)
Ambiente
• Entorno social
• Entorno técnico
• Entorno físico
![Page 15: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/15.jpg)
Guías de diseño
Guías generales para iTV
Guías de estilo de broadcasters
Guías específicas para middleware
![Page 16: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/16.jpg)
Temas de diseño en las guías
• Tiempo de respuesta
• Layout de pantalla
• Navegación
• Diseño del texto
• Instrucciones de usuario
• Sonido
![Page 17: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/17.jpg)
Diseño de la interacción
![Page 18: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/18.jpg)
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
![Page 19: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/19.jpg)
Grupo A: Layout de pantalla
1.Elegir el layout correcto2.Superposición3.Pantalla completa con video4.Pantalla completa sin video
![Page 20: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/20.jpg)
Grupo B: Navegación
1.Múltiples formas de navegar
2.Menú
3.Múltiples videos en pantalla
4.Índice5.Número de página
6.Tabs
![Page 21: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/21.jpg)
Grupo C: Teclas del control remoto1.Elegir las teclas correctas2.Teclas de flechas3.Tecla Ok-Select4.Teclas de color5.Teclas numéricas6.Teclas especiales
![Page 22: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/22.jpg)
Grupo D: Funciones básicas
1.Invitación a la interacción2.Inicio3.Indicador de carga4.Salida5.Ocultar la aplicación6.Subir un nivel
![Page 23: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/23.jpg)
Grupo E: Presentación de contenido1.Diseño de texto2.Caja de contenido3.Paginado4.Scrolling5.Switch entre items de contenido6.Contenido sincronizado
![Page 24: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/24.jpg)
Grupo F: Participación de usuario1.Múltiples formas de participación
2.Votación y selección múltiple
3.Ubicación de items4.Completado de texto
5.Aprobación para conectar
![Page 25: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/25.jpg)
Grupo G: Entrada de texto
1.Múltiples formas de ingresar texto
2.Teclado en pantalla3.Teclado de dispositivo móvil
![Page 26: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/26.jpg)
Grupo H: Ayuda
1.Instrucciones en pantalla2.Sección de ayuda
![Page 27: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/27.jpg)
Grupo I: Accesibilidad y personalización1.Accesibilidad2.Personalización
![Page 28: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/28.jpg)
Grupo I: Usuarios específicos
1.Niños
![Page 29: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/29.jpg)
A1. Elegir el layout correcto
• Ejemplos
![Page 30: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/30.jpg)
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
![Page 31: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/31.jpg)
A1. Elegir el layout correcto
Video reducido
Gráficos en video muy pequeños para leer
Se puede seguir el video
Facilita la atención dividida
Pantalla
completa con video
Ocultar parte importante del video
Distractor por cercanía
El video en pantalla completa
Mayor integración aplicación con video
Super-posición
DesventajasVentajas
![Page 32: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/32.jpg)
A1. Elegir el layout correcto
![Page 33: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/33.jpg)
A1. Elegir el layout correcto
![Page 34: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/34.jpg)
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 eTVque no estén vinculadas directamente al contenido del programa
![Page 35: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/35.jpg)
B1. Múltiples formas de navegar• Ejemplos
![Page 36: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/36.jpg)
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
![Page 37: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/37.jpg)
B1. Múltiples formas de navegar
Puede ser familiar sólo para usuarios de antiguo teletexto
Atajos para usuarios avanzados
Soporte para usuarios regulares que saben a qué página ir
Paginado
Wording puede ser confuso
Puede ser difícil clasificar el contenido
Posiblidad de estructura jerárquica
Acceso a contenido por clase
Menú
DesventajasVentajas
![Page 38: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/38.jpg)
B1. Múltiples formas de navegar
![Page 39: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/39.jpg)
B1. Múltiples formas de navegar
![Page 40: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/40.jpg)
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 quetengan muchos items y funciones
• Paginado: usar para aplicaciones con mucho contenido
![Page 41: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/41.jpg)
C1. Elegir las teclas correctas
• Ejemplos
![Page 42: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/42.jpg)
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)
![Page 43: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/43.jpg)
C1. Elegir las teclas correctas
No disponible en todos los controles
Difíciles de encontrar por tacto
Usualmente una tecla puede activar directamente una función
Especiales
Sirve hasta 4 opciones
Difíciles de encontrar por tacto
Usualmente una tecla puede activar directamente una función
Color
Se requiere otra tecla para una selección (gral. OK)
Generalmente detectables por tacto
Flechas
DesventajasVentajas
![Page 44: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/44.jpg)
C1. Elegir las teclas correctas
![Page 45: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/45.jpg)
C1. Elegir las teclas correctas
![Page 46: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/46.jpg)
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
![Page 47: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/47.jpg)
D1. Invitación a la interacción
• Ejemplos
![Page 48: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/48.jpg)
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
![Page 49: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/49.jpg)
D1. Invitación a la interacción
![Page 50: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/50.jpg)
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
![Page 51: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/51.jpg)
Tibor Kunert
User-Centered Interaction
Design Patterns for
Interactive Digital
TelevisionApplications (1st ed.).
2009
Springer
![Page 52: Patrones de diseño de interacción para tv digital interactiva](https://reader034.fdocument.pub/reader034/viewer/2022042614/555e2a97d8b42a6a4c8b5358/html5/thumbnails/52.jpg)
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