patrones de diseño de interacción para tv digital interactiva

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


• 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


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


• 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• 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


• 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)


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


• 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


• 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


• 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