Clase 3Clase 330 de Marzo de 2009
Diseñando la Interacción I
1Diseño de interacción de usuarios
Clase 3: Diseñando la Interacción I
Diseño I Diseño centrado en el usuario
◘ ISO 13407 Human‐centred design processes for interactive systems
Identificar la necesidad del
Comprender y especificar el contexto de uso
diseño centrado en el humano
el contexto de uso
Especificar los requisitos del usuario y organizaciones
Evaluar diseño contra los requisitos
El sistema satisface los requisitos
especificados del usuario y
organizacionales
Producir soluciones de diseño
2Diseño de interacción de usuarios
Clase 3: Diseñando la Interacción I
Diseño I Diseño basado en objetivos
Diseño basado en objetivos
R fi i tInvestigaciónde usuarios y
ámbito
Modeladode usuarios y
contexto
Requisitosde usuarios, de
negocio ytécnicos
MarcoEstructura deldiseño y flujo
Refinamientode
comportamiento,forma y
t id
Apoyoa las necesidades
de desarrollo
◘ 3 conceptos clave:
contenido
◘ 3 conceptos clave:• PERSONA
• OBJETIVOS
• ESCENARIOS
Diseño de interacción de usuarios 3
Clase 3: Diseñando la Interacción I
Diseño I Diseño basado en objetivos Etapas
1. Investigación• Técnicas de estudio de campo etnográficas (observación y entrevistas)
• Investigación de mercado
• Entrevistas personales con stakeholders, desarrolladores, expertos en la materia y expertos tecnológicos
l d d l d• Resultado: modelos de uso
2. Modelado
• Modelos de dominio
• Modelos de usuario: Personas
Diseño de interacción de usuarios 4
Clase 3: Diseñando la Interacción I
Diseño I Diseño basado en objetivos Persona
◘ Modelo descriptivo preciso
◘ Qué desea conseguir y por qué quiere conseguirlo Objetivos◘ Qué desea conseguir y por qué quiere conseguirlo Objetivos
Persona primaria target principal para◘ Persona primaria – target principal para el que se va a desarrollar el sistema / la interacción
◘ Persona secundaria◘ Persona secundaria
◘ Personas suplementarias
◘ Persona cliente
◘ Personas servidas
Diseño de interacción de usuarios 5
◘ Personas servidas
◘ Personas negativas
Clase 3: Diseñando la Interacción I
Diseño I Diseño basado en objetivos Objetivos
◘ A partir de datos cualitativos
◘ Clave: todos los objetivos deben poder expresarse con una frase sencilla◘ Clave: todos los objetivos deben poder expresarse con una frase sencilla
◘ Tipos de objetivo• Objetivos vitales
• Objetivos de experiencia
• Objetivos finalesj
“Quiero que mi familia no tenga que ayudarme siempre”
“Q i d l i d h j i i i bl l“Quiero perder el miedo a hacer ejercicio por mi problema en el corazón”
Diseño de interacción de usuarios 6
Clase 3: Diseñando la Interacción I
Diseño I Diseño basado en objetivos Etapas
3. Requisitos• Escenario de contexto – “Un día en la vida” TouchpointsEscenario de contexto Un día en la vida Touchpoints
• Resultado: definición de requisitos que incluye requisitos de usuario, de negocio y técnicos
4. Definición de marcoP i i i d di ñ d i t ió D t i l t i t d l i t i• Principios de diseño de interacción. Determinan el comportamiento del sistema en varios contextos
• Modelos de diseño de interacción. Datos y necesidades funcionales
• Resultado: definición del marco de interacción• Resultado: definición del marco de interacción
5. Diseño• Escenarios de camino clave key paths
• Escenarios de validación
• Resultado: especificación de forma y comportamiento• Incluyendo todos los flujos secundarios errores, ayudas, etc.
Diseño de interacción de usuarios 7
Clase 3: Diseñando la Interacción I
Diseño I Diseño basado en objetivos Etapas
◘ Una vez que se ha terminado el diseño global incluyendo el look & feel, se dasoporte al equipo de desarrollo técnico durante la implementaciónsoporte al equipo de desarrollo técnico durante la implementación
◘ Proceso de validación iterativo para asegurar que se cumplen los requisitos del diseño
◘ Tras la implementación Validación
Diseño de interacción de usuarios 8
Clase 3: Diseñando la Interacción I
Diseño I Métodos de validación
Métodos de inspección – sin usuarios finales por expertosMétodos de inspección – sin usuarios finales, por expertos
• Evaluación heurística
Métodos de prueba – con usuarios finalesp
• “Pensar en voz alta”
Cuestionarios• Cuestionarios
• Observación de campo ‐ pilotos
Diseño de interacción de usuarios 9
Clase 3: Diseñando la Interacción I
Diseño I ¿Qué tenéis que hacer en la asignatura?
Diseño de la Interacción 1. Descripción de Propuesta de valor de producto1. Descripción de Propuesta de valor de producto
2. Descripción de Estudio del contexto
3. Descripción de grupo usuarios / personas
4 Descripción escenarios
Diseñando la Interacción I
4. Descripción escenarios
5 Descripción de requisitos y funcionalidades5. Descripción de requisitos y funcionalidades
6. Descripción del marco de interacción
7. Definición de flujo de interacción
8 Diseño de la interacción
Diseñando la Interacción II
8. Diseño de la interacción
8. Prototipado de la Interacción en papel y en digital (powerpoint)
9. Validación de la Interacción • Validación Heurística
Diseño de interacción de usuarios 10
Clase 3: Diseñando la Interacción I
Diseño I
Ejemplo prácticoMyHeart Activity CoachMyHeart – Activity Coach
Diseño de interacción de usuarios 11
Clase 3: Diseñando la Interacción I
Diseño I Paso 1. Descripción de propuesta de valor
◘ Descripción del producto clara y concisa
◘ Propuesta de valor◘ Propuesta de valor
◘ ¿Qué diferencia nuestro producto?
◘ ¿Qué ofrece a la población?
◘ ¿Qué lo justifica?
Ejemplo: Activity Coach: Descripción de propuestaEjemplo: Activity Coach: Descripción de propuesta
Nombre Proyecto:Activity Coach
Propuesta de valor:
El producto Activity Coach está dirigido a personas sanas, cuyas motivaciones principales para realizar ejercicio físicoson la diversión y el aspecto físico El producto proporciona un entorno imersivo en el que hacer deporte se conviertason la diversión y el aspecto físico. El producto proporciona un entorno imersivo en el que hacer deporte se conviertaen una actividad excitante y gratificante. Elementos de motivación como canciones con el ritmo adaptado a laintensidad del ejercicio o entornos tridimensionales en los que el usuario se pueda sumergir, son algunos de loscomponentes del sistema. La solución propuesta se lleva en dos escenarios: en interior, como un centro de fitness, yen exterior, dando al usuario la libertad de elegir. El entrenamiento será personalizado y permitirá a los usuariosi li l ió
Diseño de interacción de usuarios 12
visualizar su evolución.
Clase 3: Diseñando la Interacción I
Diseño I Paso 1. Descripción de propuesta de valor
La inactividad física aumenta el riesgo de enfermedad coronaria e isquemia en un factor de aproximadamente 1,5q p ,
En todo el mundo, la inactividad física causa 1,9 millones de muertes al año, el 20% de las enfermedades cardiovasculares y el 22% de las enfermedades coronarias
Diseño de interacción de usuarios 13
Fuente: The Atlas of Heart Disease and Stroke, WHO 2004
Clase 3: Diseñando la Interacción I
Diseño I Paso 1. Descripción de propuesta de valor
Anima a realizar y permite disfrutar la mayoría de las sesiones normales de
Activity Coach
mayoría de las sesiones normales de ejercicio, tanto en términos de diversióncomo de salud, en cualquier lugar, en cualquier momento y a través de programasde entrenamiento personalizados y guiadosdentro de un contexto motivador
Diseño de interacción de usuarios 14
Clase 3: Diseñando la Interacción I
Diseño I Paso 2. Estudio del contexto
◘ Se corresponde con la fase inicial de investigación
◘ Distintas metodologías de estudio:◘ Distintas metodologías de estudio:• Técnicas de estudio de campo etnográficas (observación y entrevistas).
• Investigación de mercado.
• Entrevistas personales con stakeholders, desarrolladores, expertos en la materia y expertos tecnológicos.Entrevistas personales con stakeholders, desarrolladores, expertos en la materia y expertos tecnológicos.
Técnicas generales de estudio para diseño de productos:
Actividades individualesEntrevistas personales
Estudios de campoEstudios de campo
Actividades no participativas Estudios, estadísticas
Análisis de valor y necesidades
Actividades de grupo Grupos objetivos
Workshops
Diseño de interacción de usuarios 15
Clase 3: Diseñando la Interacción I
Diseño I Paso 2. Estudio del contexto
Activity Coach: Estudio del contexto
◘ Estudio de gimnasios, asociaciones de deporte…
◘ ¿Cómo funcionan?
◘ Hicimos entrevistas a entrenadores, a jefes de centros de deporte y a deportistas
◘ Se sacan conclusiones del contexto en el que debemos movernos
Diseño de interacción de usuarios 16
Clase 3: Diseñando la Interacción I
Diseño I Paso 3. Descripción de usuario: grupo objetivo
◘Describir a quién va dirigido el producto.
◘ Características físicas: Edad, género, etc.
◘ Características psicológico‐culturales: formación, actitud ante el sistema, entorno social, etc.
d l f l f l◘ Tipo de usuario: cliente, profesional, usuarios finales.
Ejemplo: Activity Coach: Descripción del grupo objetivo
Gente sana que hace ejercicio por diversión y tienen con cierta preocupación por su salud y aspecto físicocierta preocupación por su salud y aspecto físico.
Diseño de interacción de usuarios 17
Clase 3: Diseñando la Interacción I
Diseño I Paso 3. Descripción de usuario: grupo objetivo
Activity Coach: Características físicas de los usuarios
Edad:El concepto Activity Coach está dirigido a personas sanas que no hansufrido ningún accidente ni enfermedad cardiovascular. Se trata depersonas preocupadas por su salud y que no forman parte de ningún grupopersonas preocupadas por su salud y que no forman parte de ningún grupode riesgo. Es por ello que los usuarios a los que va dirigido el sistema seencuentran en el rango de edades comprendido entre los 25 y los 50 añosen hombres y entre los 30 y los 55 años en las mujeres.
Género:La distribución de hombres/mujeres no se conoce con precisión, aunque sej p , qprevé que sea equilibrada.
Limitaciones físicas y discapacidades:El sistema requiere de usuarios en plenas condiciones para la práctica deun deporte como el ciclismo. Las discapacidades físicas que impidan odesaconsejen su realización excluyen a ese tipo de usuarios del uso del
Diseño de interacción de usuarios 18
j y psistema.
Clase 3: Diseñando la Interacción I
Diseño I Paso 3. Descripción de usuario: grupo objetivo
Activity Coach: Características psicológico‐culturales de los usuarios
Capacidad intelectual / formación:
El rango de usuarios tomado referencia tiene en común un nivel cultural mínimo de Bachiller. No se encuentran más coincidencias.
Actitud ante el sistema:
Los usuarios presentan una actitud positiva y participativa ante el nuevo sistema, que despierta su interés. De hecho, manifiestan su intención de , q p ,participar en la mejora del mismo a través de la cumplimentación de cuestionarios en cada sesión de entrenamiento.
Entorno social:
Los usuarios se encuentran en un entorno favorable para la inclusión del producto. No pertenecen a zonas marginadas. En cuanto al entorno familiar,
Diseño de interacción de usuarios 19
p p g ,no presenta características comunes determinantes para el diseño del producto.
Clase 3: Diseñando la Interacción I
Diseño I Paso 3. Descripción de usuario: grupo objetivo
Activity Coach: Tipos de usuario y nivel de conocimiento
Tipo de usuario: Entrenador profesional
Experiencia en el uso de sistemas con interfaz gráfica interactiva:Los profesionales tienen, en general, experiencia en el
Tipo de usuario: Usuario final
Experiencia en el uso de sistemas con interfaz gráfica interactiva:Los usuarios tienen, en general, experiencia en el manejop , g , p
manejo de interfaces gráficas con ventanas. Estánhabituados a utilizarlas para el manejo de este tipo desistemas.
, g , p jde interfaces gráficas con ventanas. Sin embargo, noestán habituados a utilizarlas para el manejo de este tipode sistemas.
Experiencia en la tareas que soporta el sistema:Los profesionales tienen diferentes niveles de experienciadependientes fundamentalmente de su ámbito profesional.
Experiencia en la tareas que soporta el sistema:Los usuarios tienen diferentes niveles de experienciadependientes fundamentalmente de su ámbito profesional.
Entrenamiento en el uso del sistema:No se prevé la necesidad de una etapa de aprendizaje enel uso del sistema tras la implantación del mismo debido alos principios de usabilidad aplicados en el diseño de su
Entrenamiento en el uso del sistema:No se prevé la necesidad de una etapa de aprendizaje enel uso del sistema tras la implantación del mismo debido alos principios de usabilidad aplicados en el diseño de sup p p
interfaz.
Conocimiento de la terminología relacionada con laaplicación:
p p pinterfaz.
Conocimiento de la terminología relacionada con laaplicación:
Diseño de interacción de usuarios 20
aplicación:La terminología empleada ha tratado de adecuarse a losposibles profesionales del sistema.
aplicación:La terminología empleada ha tratado de adecuarse a losposibles usuarios del sistema.
Clase 3: Diseñando la Interacción I
Diseño I Paso 3. Descripción de usuario: persona
“Me llamo María, tengo 32 años y creo que soy una persona bastante sana. Siempre he sido muy activa, durante muchos años he jugado al
Definición de persona
p y , j gtenis de 3 a 5 veces por semana y he ido al gimnasio regularmente, pero desde que empecé a trabajar prácticamente he abandonado las actividades deportivas. Mi trabajo es muy exigente y tengo que viajar con frecuencia, por lo que no encontraba el modo de seguir haciendo f , p q gejercicio […]”
Persona primaria
Objetivos
◘ Flexibilidad en tiempo y lugar.◘ Recogida de señales biomédicas.◘ Personalización y seguimiento del estado de forma
Objetivos
◘ Personalización y seguimiento del estado de forma.◘ Seguimiento por parte de un entrenador profesional.◘Motivación.
Diseño de interacción de usuarios 21
Clase 3: Diseñando la Interacción I
Diseño I Paso 3. Descripción de usuario: objetivos
◘ Objetivos vitales• Tener buena salud.
• Tener control sobre el estado de forma.
• Buena apariencia física.
◘ Objetivos de experiencia• Flexibilidad: me gustaría ser capaz de elegir en qué lugar y momento realizar el ejercicio.
E i i l h d b id i l i á di id• Entretenimiento: en general hacer deporte es aburrido; necesito elementos que consigan que sea más divertido.
• Motivación: me gustaría fijarme un objetivo y no perder en ningún momento la ilusión o la motivación de alcanzarlo.
• Seguimiento: no creo que sea bueno hacer deporte por uno mismo; necesito alguien que me diga qué hacer, y g q p p ; g q g q , ycuándo y cómo hacerlo.
◘ Objetivos finalesj• Personalización: disponer de un programa de entrenamiento personalizado.
• Facilidad de uso: el desarrollo del ejercicio es lo importante, hay que reducir el número de pasos anteriores y posteriores.
l l d l d d d f• Autoseguimiento: el usuario tiene acceso a los datos relativos a su rendimiento y estado de forma.
• Prendas inteligentes
Diseño de interacción de usuarios 22
Clase 3: Diseñando la Interacción I
Diseño I Paso 4. Descripción de escenarios
◘ Escenario de contexto• “Día en la vida” de la persona cuando utiliza el producto
• Descripción de touch points de alto nivel del producto
• Proceso iterativo
• El escenario es totalmente textual
◘ Touch pointp• Descripción de la interacción del usuario con el sistema a alto nivel – cercano a un caso de tarea ‐, identificando para cada punto relevante:
• El lugar en el que tiene lugar la interacción
• Las actividades necesarias para cumplir el objetivo
• Los objetos necesarios para realizar la actividad
Diseño de interacción de usuarios 23
Clase 3: Diseñando la Interacción I
Diseño I Paso 4. Descripción de escenarios
“El primer día en el gimnasio fui al despacho del entrenador y me hizoun perfil completo en su PC; me preguntó por mi edad, peso, altura,estado de salud por qué estaba interesada en el sistema cuántasestado de salud, por qué estaba interesada en el sistema, cuántas veces a la semana quería hacer ejercicio y también aspectos sobre mipersonalidad y preferencias musicales[…]
[ ]Me pidió hacer una primera sesión para conocer mi estado de[…]Me pidió hacer una primera sesión para conocer mi estado de salud. Primero fui al vestuario y me puse el sujetador que me habíandado, lo conecté y comprobé si todo funcionaba. Entonces me acerquéal “info‐booth”, un quiosco situado en el gimnasio, introduje mi llavey pude ver mi información personal de forma que pude ver qué teníay pude ver mi información personal, de forma que pude ver qué teníaque hacer el primer día.
Recogí la llave y fui a la “Fitness Coach Bike” que me había asignado,introduje la llave para comenzar, me subí a la bicicleta, me puse losintroduje la llave para comenzar, me subí a la bicicleta, me puse losauriculares y pulsé el botón de comienzo del teclado sujeto al manillarde la bicicleta[…]”
Diseño de interacción de usuarios 24
Clase 3: Diseñando la Interacción I
Diseño I Paso 4. Descripción de escenarios
Touchpoint Story
Activity coach:
USP: on – training session (indoor)( )
Access information point at Fitness Centre reception
Charge session on FCB
Places (please add) Fitness Centre Fitness centre / online Fitness Centre Fitness Centre
Perform sessionRegularly check with your trainer
Places (please add) Fitness Centre Fitness centre / online Fitness Centre Fitness Centre
Activities Download session on user key
Upload session results to server
Ask doubts about session, exercises, progress…
Revise/adjust goals,
Prepare user for the session
Put on wearables
Check everything is ok
Physical activity
Receiving feedback and motivation
program
Objects used Personal key card or USB memorystick,
Information point (PC+touchablescreen)
PC FCB
Garment sensors
FCB
Garment sensors
Diseño de interacción de usuarios 25
)
Clase 3: Diseñando la Interacción I
Diseño I Paso 5. Descripción de requisitos y funcionalidades del sistema
Requisitos: Componentes del sistema
B d Si l S (BSS)◘ Body Signal Sensor (BSS)
◘ Fitness Coach Bike (FCB)
◘ Personal Mobile Coach (PMC)
◘ Fitness Coach Service Centre (FCSC)
Diseño de interacción de usuarios 26
Clase 3: Diseñando la Interacción I
Diseño I Paso 6. Descripción de marco
Marco de diseño
◘ Marco de diseño. Estructura general de la experiencia del usuario• Ubicación de los elementos funcionales en la pantalla
• Comportamientos interactivos
• Principios de organización
• Lenguaje visualg j
◘ Marco de interacción. Bocetos de la pantalla y la interacción
◘ Marco de diseño visual.
◘ Marco de diseño industrial.
Diseño de interacción de usuarios 27
Clase 3: Diseñando la Interacción I
Diseño I Paso 6. Descripción de marco
Marco de diseño: Definición de métodos de entrada
Teclado simple (4 teclas) fijado encima del manillar
Métodos de entrada
Llave USB personal con los datos del usuarioLlave USB personal con los datos del usuario
Métodos de feedbackPantalla adosada a la bicicleta y altavoces
Requisitos de la aplicaciónUsable, amigable
Feedback de objetivos, rendimiento y motivación
Diseño de interacción de usuarios 28
Clase 3: Diseñando la Interacción I
Diseño I Paso 6. Descripción de marco
Marco de diseño industrial
Modo “Plug and Play”, tanto para la actividad en interior como en exterior
Se ha llegado a un acuerdo con
Concepto Fitness Coach Bike
Sensores integrados en la bicicleta: velocidad, trabajo, resistencia
gfabricantes de bicicletas para desarrollar un producto integrado
La bicicleta puede interactuar con los objetivos del usuario o actuar como bicicleta independientebicicleta independiente
Unidad de procesamiento y comunicaciones incluida en la bicicleta – SIN CABLES
Diseño de interacción de usuarios 29
Clase 3: Diseñando la Interacción I
Diseño I Paso 6. Descripción de marco
Marco de diseño industrial
FC Service Centre Soporte profesional para usuarios y entrenadores
Navegación por el portal: información general sobre actividad física y salud
Visualización del programa de entrenamiento completo y las sesiones planeadas
Enviar/recibir mensajes de/a el / j /entrenador personal/usuario
Consultar y ajustar la información de entrenamiento de un usuariode entrenamiento de un usuario específico
Nuevos ejercicios
Consultar agenda y recordatorios de programa
Visualizar los resultados de una sesión o histórico de sesiones
Diseño de interacción de usuarios 30
p g
Clase 3: Diseñando la Interacción I
Diseño I Paso 6. Descripción de marco
Marco de diseño industrial
Concepto Body Signal Sensors
Diseño de interacción de usuarios 31
Clase 3: Diseñando la Interacción I
Diseño I Paso 7. Descripción de flujos de interacción
Marco: Definición del camino clave
S l t llPantalla de
Información ei i
1 2 3
SalvapantallasPantalla debienvenida
instrucciones de la sesión
Pantalla delejercicio
Pantalla dedespedida
48
Resultados deG d d l567
Mensajes de motivación
CuestionarioResultados de
la sesiónGuardando losdatos en la llave
Diseño de interacción de usuarios 32
Clase 3: Diseñando la Interacción I
Diseño I Paso 8. Descripción de elementos funcionales y de datos
Marco: Definición de elementos funcionales y de datos
◘ Visualización extremadamente simple, con cajas que representan los diferentes grupos funcionales y/o contenedores con nombres y descripciones de las relaciones entre las diferentes áreas.
Pantalla de datos de sesión Pantalla de ejercicio
Diseño de interacción de usuarios 33
Clase 3: Diseñando la Interacción I
Diseño I Paso 8. Descripción de look and feel
Marco: Definición del look and feel
◘ El look and feel define la apariencia y funcionalidad de la interfaz de usuario
• Look – definición de los colores, formas, disposición de los elementos y fuentes
• Feel – comportamiento de elementos dinámicos como botones, cajas y menús
Diseño de interacción de usuarios 34
Clase 3: Diseñando la Interacción I
Diseño I Paso 8. Diseño gráfico
Marco: Definición de los aspectos gráficos de la IU
◘ Representación definitiva de los elementos descritos en la etapa de definición de los elementos de la interfaz, siguiendo las directrices marcadas por el look and feel
Pantalla de datos de sesión Pantalla de ejercicio
35Diseño de interacción de usuarios
Clase 3: Diseñando la Interacción I
Diseño I Paso 9. Validación
◘ Tras la integración de todas las bibliotecas se realizaron una serie de pruebas de◘ Tras la integración de todas las bibliotecas, se realizaron una serie de pruebas de usabilidad en un entorno controlado.• Técnica: “Pensar en voz alta”
Nú d d 5• Número de encuestados: 5
• Conclusiones:
• Problemas con la disposición de los elementos en la pantalla del ejercicio
• Satisfacción con la reducción de pantallas• Satisfacción con la reducción de pantallas
• Satisfacción con los elementos de motivación
Diseño de interacción de usuarios 36
Clase 3: Diseñando la Interacción I
Diseño I Producto Activity Coach
Validación
Diseño de interacción de usuarios 37
Clase 3: Diseñando la Interacción I
Diseño I Producto Activity Coach
Avatar
Teclado integrado en la pantallaen la pantalla
Fitness Coach Bike FCSC Music Manager
Diseño de interacción de usuarios 38
g
Clase 3: Diseñando la Interacción I
Diseño I
◘ Y….
Ahora vosotros☺Ahora vosotros ☺
Diseño de interacción de usuarios 39