Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
• 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