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
El proceso de diseño
• 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
El proceso de diseño
• 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
Prototipado: Escenarios
• 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
Prototipado: Escenarios
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
Prototipado: Escenarios
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
Prototipado: Escenarios
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.
Prototipado: Escenarios
• Storyboard
Tema: Diseño
18/03/2013
8
Prototipado: Escenarios
• 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
Prototipado: Prototipos en papel
– 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
Prototipado: Prototipos en papel
– 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
Prototipado: Prototipos en papel
– 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.
Prototipado: Prototipos en papel
Tema: Diseño
Ejemplo para desarrollar: RestauranteTarea: Toma de comanda (menú)
18/03/2013
11
Prototipado: Prototipos en papel
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
El proceso de 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)
Top Related