Interacción Persona Ordenador -...

18/03/2013

1

Interacción Persona Ordenador

El proceso de diseño

Dr. Pedro Latorre

Dra. Sandra Baldassarri

Dra. Eva Cerezo

Objetivos

• Conocer y aplicar la fase de diseño (de forma iterativa):

Té i d t ti d– Técnicas de prototipado• Utilizar diferentes técnicas de prototipado para modelar el

sistema en desarrollo

– Técnicas de evaluación• Aplicar técnicas de evaluación (con o sin usuarios) para

verificar la viabilidad del sistema

• Conocer posibles métodos de representación de

Tema: Diseño

p plas tareas

• Conocer posibles métodos de representación de los diálogos

18/03/2013

2


• Análisis de Requisitos– Prototipado, Evaluación

• Diseño– Iteración: Prototipado y Evaluación

• Técnicas de prototipado• Técnicas de evaluación

– Definir tareas: • Análisis jerárquico de las tareas• Diálogos

– Definir estilo: Interacción e Interfaz• Guías• Estándares• Reglas

Tema: Diseño

• Implementación– Prototipos funcionales, evaluación

• Lanzamiento– Evaluación: test de usabilidad


• Diseño– Iteración: Prototipado y Evaluación– Técnicas de prototipadop p

• Esbozos o bocetos (AR)

• Escenarios

– Narrativa

– Diagrama de flujo

– Texto de los procedimientos

– Storyboard

• Prototipos en papel

• Prototipos en vídeo

– Técnicas de evaluación

– Definir tareas: • Análisis jerárquico de las tareas

Tema: Diseño

• Diálogos

– Definir estilo• Guías• Estándares• Reglas

18/03/2013

3

Prototipado

• ¿Qué es un prototipo?– En otros campos de diseño, un prototipo es un modelo

a pequeña escala…

– En un sistema interactivo puede ser:• una serie de bocetos de pantalla

• un storyboard

• una presentación PowerPoint

Tema: Diseño

p

• un vídeo simulando el uso de un sistema

• una maqueta en papel

• un módulo de software con funcionalidad limitada

Prototipado

• ¿Por qué se hacen prototipos?

L i t h d f f t l iLos sistemas no se hacen de forma perfecta la primera vez… y …si a la primera no se tiene éxito, entonces…

prototype evaluatedesign done!OK?

Tema: Diseño

re-design

18/03/2013

4

Prototipado

• ¿Por qué se hacen prototipos?– La evaluación y la retroalimentación son

fundamentales en el diseño de la interacción

– Los usuarios pueden ver, tocar e interactuar de una forma mucho más facil con un prototipo que con un documento

– Los miembros del equipo se pueden comunicar de manera eficaz

Tema: Diseño

– Permite auto-validar las ideas

– Fomenta la reflexión

– Los prototipos permiten elegir entre varias alternativas

Prototipado

• ¿Qué técnicas de prototipado se utilizan en el diseño de interfaces?

– Escenarios• Narrativa

• Diagrama de flujo

• Texto de los procedimientos

• Storyboard

Tema: Diseño

– Prototipo en papel

– Prototipo en vídeo

– Prototipo software

18/03/2013

5

• Un escenario es una historia de ficción con representación de personajes, sucesos, productos y entornos.

Prototipado: Escenarios

• El uso de los escenarios permite definir y desarrollarconocimientos sobre el entorno del usuario y su espaciode trabajo.

• Ayuda al diseñador a explorar ideas y las ramificacionesde decisiones de diseño en situaciones concretas.

Tema: Diseño

• Es difícil conseguir un escenario correcto la primera vez.– Es interesante pensar en diferentes escenarios para reflejar las

diferentes situaciones y puntos de vista diferentes.

La utilización de escenarios permite:

Comunicarnos con los demás


• Comunicarnos con los demás– Diseñadores, clientes, usuarios

• Validar nuestros modelos– “Jugar” o compararlos con otros modelos

Tema: Diseño

• Entender la dinámica– Capturas de pantallas (screenshots): Apariencia– Escenario: Comportamiento

18/03/2013

6


La utilización de escenarios permite describir un camino lineal a través del sistema.– Ventajas:

• Utilización de líneas de tiempo• Fácil de entender (las historias y la narrativa son naturales)• Concreto

– Desventajas:• No hay elecciones• No hay ramificaciones

Tema: Diseño

y• No hay condiciones especiales

– Conclusiones:• Usar varios escenarios• Usar varios métodos


Tipos de representación:

• Narrativa• Narrativa– Una historia completa de la interacción hecha con la

existente o con un diseño nuevo

• Diagrama de flujo– Una representación gráfica de las series de acciones y

decisiones extraídas de la narrativa

Tema: Diseño

• Textos de los procedimientos– Una descripción paso a paso de las acciones del usuario y

las respuestas del sistema

18/03/2013

7


Tipos de representación:

S b d• Storyboard

– Un storyboard (guión) es una narración gráfica de una historia en cuadros consecutivos.

– Este concepto utilizado en el diseño cinematográfico l l li ió d i d

Tema: Diseño

se suele usar para la realización de escenarios de interacción que posteriormente se pueden evaluar con diferentes técnicas.


• Storyboard

Tema: Diseño

18/03/2013

8


• Storyboard

Tema: Diseño

• Este tipo de prototipo se basa en el uso depapel, tijeras, lápiz o instrumentos que se

Prototipado: Prototipos en papel

puedan utilizar para describir un diseño en unpapel.

• Este sistema nos permite una gran velocidad yflexibilidad

Tema: Diseño

18/03/2013

9

• ¿Cómo se realiza?

P d i l l dif t i t i


– Para poder simular las diferentes interacciones arealizar con el sistema, recortaremos y dibujaremoslas hojas, menús desplegables, etc. que necesitemospara simular cada uno de los diferentes escenariosque hemos preparado.

– Apilaremos estas hojas, que permitirán simular lali ió ( d d i )

Tema: Diseño

aplicación (cada uno de sus escenarios).

– Posiblemente habrá que ir añadiendo, modificando odesechando algunas partes.

• Uso

P tili l t ti d l it


– Para utilizar el prototipo de papel nos situaremos enun escenario de uso de futuro en el que el diseñadoractúa como coordinador.

– El prototipo será analizado por un posible usuario queintentará realizar algunas de las tareas que sepretende diseñar.

Tema: Diseño

– El usuario irá realizando las interacciones en voz altay el diseñador irá cambiando las hojas de papel enfunción de dichas interacciones.

18/03/2013

10

• Ventajas

– El coste es muy reducido necesitando únicamente los


– El coste es muy reducido, necesitando únicamente los recursos humanos dedicados a la realización del prototipo.

– Los cambios se pueden realizar muy rápidamente y sobre la marcha. Si el diseño no funciona se puede reescribir las hojas erróneas o rediseñarlas y volver a probar la tarea a realizar

Tema: Diseño

– Los usuarios o los actores se sienten más cómodos para poder realizar críticas al diseño debido a la sencillez del mismo por lo que no se sienten cohibidos a dar sus opiniones.


Tema: Diseño

Ejemplo para desarrollar: RestauranteTarea: Toma de comanda (menú)

18/03/2013

11


Tema: Diseño

Prototipado: Prototipos en vídeo

• Un prototipo por ordenador o en vídeo permite rodarescenarios o visualizar sistemas futuros en los quese pueden realizar manipulaciones durante else pueden realizar manipulaciones durante elpostproceso para simular características del diseñoque aún no están disponibles.

• Sin embargo, el prototipo en vídeo puede fracasar ala hora de comunicar el sentimiento de un usuarioen una nueva experiencia simplemente porque el

Tema: Diseño

en una nueva experiencia, simplemente porque elhardware que ha de utilizar el nuevo sistema noexiste o por la dificultad de crear una maquetainteractiva de un gran sistema (Nielsen 93).

18/03/2013

12

Prototipado: Prototipos en vídeo

• Un vídeo permite realizar la demo final fuera delas limitaciones del hardware. Todo funcionaperfectamente, cada vez que el espectador miraal vídeo.

• Ejemplo:– Starfire, rodado por Sun

Tema: Diseño

http://www.youtube.com/watch?v=NKJNxgZyVo0

Prototipado: Prototipos software

• Versiones depuradas de los prototipos iniciales.

• Necesarios para validar el aspecto final de las p ppantallas– Visibilidad de tamaños y tipo de letra

– Visibilidad de iconos e imágenes

– Apariencia de los colores

– Complejidad percibida, ...

Tema: Diseño

18/03/2013

13

Prototipado: Mapa de navegación

Un mapa de navegación es una representación gráfica (grafo dirigido) en la que se representan las diferentes pantallas de la aplicación (nodos) y la comunicación o relación entre ellas (enlaces).

Tema: Diseño

Prototipado: Mapa de navegación

¡Hay que tener en cuenta la estructura global de la aplicación!

Tema: Diseño

18/03/2013

14

Prototipado: Problemas

• Trabajar con prototipos requiere tiempo y experiencia en la planificación.

• Las características más importantes del sistema pueden ser las que se sacrifican en el prototipo (seguridad, fiabilidad).

Tema: Diseño


• Diseño– Iteración: Prototipado y Evaluación– Técnicas de prototipadop p

– Técnicas de evaluación • Con usuarios:

– Interrogación

– Observación

• Sin usuarios:– Recorrido cognitivo

– Heurísitcas

– Definir tareas: • Análisis jerárquico de las tareas• Diálogos

– Definir estilo

Tema: Diseño

e est o• Guías• Estándares• Reglas

18/03/2013

15

Evaluación

• Existen numerosos métodos de evaluación que se pueden aplicar a la fase de diseño.– Con usuarios

• Interrogación: – Encuestas

– Entrevistas

– Grupos de discusión dirigidos

• Observación:Pensando en voz alta

Tema: Diseño

– Pensando en voz alta

– Sin usuarios:• Recorrido cognitivo

• Heurísticas (guías, estilos)

Interacción Persona Ordenador -...

Documents

Transcript of Interacción Persona Ordenador -...