Clase 3: Diseñando la Interacción I Diseño I · 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

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



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


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


◘ Personas servidas

◘ Personas negativas


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”




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.




◘ 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 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 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 I

Ejemplo prácticoMyHeart Activity CoachMyHeart – Activity Coach



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ó


visualizar su evolución.



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


Fuente: The Atlas of Heart Disease and Stroke, WHO 2004



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




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


j y psistema.



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,


p p g ,no presenta características comunes determinantes para el diseño del producto.



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:


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.


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




“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[…]”




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




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




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





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


p g




Concepto Body Signal Sensors



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



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 I Producto Activity Coach

Validación



Diseño I Producto Activity Coach

Avatar

Teclado integrado en la pantallaen la pantalla

Fitness Coach Bike FCSC Music Manager


g


Diseño I

◘ Y….

Ahora vosotros☺Ahora vosotros ☺


Documents

Clase 3: Diseñando la Interacción I Diseño I · 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