Post on 22-May-2015
description
Patrones de diseño de
interacción para TV Digital InteractivaAndré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, 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)
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 correcto2.Superposición3.Pantalla completa con video4.Pantalla completa sin video
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
Grupo C: Teclas del control remoto1.Elegir las teclas correctas2.Teclas de flechas3.Tecla Ok-Select4.Teclas de color5.Teclas numéricas6.Teclas especiales
Grupo D: Funciones básicas
1.Invitación a la interacción2.Inicio3.Indicador de carga4.Salida5.Ocultar la aplicación6.Subir un nivel
Grupo E: Presentación de contenido1.Diseño de texto2.Caja de contenido3.Paginado4.Scrolling5.Switch entre items de contenido6.Contenido sincronizado
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
Grupo G: Entrada de texto
1.Múltiples formas de ingresar texto
2.Teclado en pantalla3.Teclado de dispositivo móvil
Grupo H: Ayuda
1.Instrucciones en pantalla2.Sección de ayuda
Grupo I: Accesibilidad y personalización1.Accesibilidad2.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
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
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 eTVque 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
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
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 quetengan 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
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
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
TelevisionApplications (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