5-Diseño_Parte1_12_..

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é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
las tareas
• Conocer posibles métodos de representación de
los diálogos
Tema: Diseño
El proceso de diseño
•
Análisis de Requisitos
–
•
Prototipado, Evaluación
Diseño
–
Iteración: Prototipado y Evaluación
•
•
–
Definir tareas:
•
•
–
Prototipos funcionales, evaluación
Lanzamiento
–
Tema: Diseño
Guías
Estándares
Reglas
Implementación
–
•
Análisis jerárquico de las tareas
Diálogos
Definir estilo: Interacción e Interfaz
•
•
•
•
Técnicas de prototipado
Técnicas de evaluación
Evaluación: test de usabilidad
El proceso de diseño
•
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
•
•
•
Tema: Diseño
Esbozos o bocetos (AR)
Escenarios
– Narrativa
– Diagrama de flujo
– Texto de los procedimientos
– Storyboard
Prototipos en papel
Prototipos en vídeo
Guías
Estándares
Reglas
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
un vídeo simulando el uso de un sistema
una maqueta en papel
un módulo de software con funcionalidad limitada
Tema: Diseño
Prototipado
• ¿Por qué se hacen prototipos?
Los sistemas no se hacen de forma perfecta la primera
vez… y …si a la primera no se tiene éxito, entonces…
OK?
design
prototype
re-design
Tema: Diseño
evaluate
done!
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
– Permite auto-validar las ideas
– Fomenta la reflexión
– Los prototipos permiten elegir entre varias alternativas
Tema: Diseño
Prototipado
• ¿Qué técnicas de prototipado se utilizan en el
diseño de interfaces?
– Escenarios
•
•
•
•
Narrativa
Diagrama de flujo
Texto de los procedimientos
Storyboard
– Prototipo en papel
– Prototipo en vídeo
– Prototipo software
Tema: Diseño
Prototipado: Escenarios
• Un escenario es una historia de ficción con
representación de personajes, sucesos, productos y
entornos.
• El uso de los escenarios permite definir y desarrollar
conocimientos sobre el entorno del usuario y su espacio
de trabajo.
• Ayuda al diseñador a explorar ideas y las ramificaciones
de decisiones de diseño en situaciones concretas.
• 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.
Tema: Diseño
Prototipado: Escenarios
La utilización de escenarios permite:
• Comunicarnos con los demás
– Diseñadores, clientes, usuarios
• Validar nuestros modelos
– “Jugar” o compararlos con otros modelos
• Entender la dinámica
– Capturas de pantallas (screenshots): Apariencia
– Escenario: Comportamiento
Tema: Diseño
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
• No hay condiciones especiales
– Conclusiones:
• Usar varios escenarios
• Usar varios métodos
Tema: Diseño
Prototipado: Escenarios
Tipos de representación:
• 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
• Textos de los procedimientos
– Una descripción paso a paso de las acciones del usuario y
las respuestas del sistema
Tema: Diseño
Prototipado: Escenarios
Tipos de representación:
• 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
se suele usar para la realización de escenarios de
interacción que posteriormente se pueden evaluar con
diferentes técnicas.
Tema: Diseño
Prototipado: Escenarios
• Storyboard
Tema: Diseño
Prototipado: Escenarios
• Storyboard
Tema: Diseño
Prototipado: Prototipos en papel
• Este tipo de prototipo se basa en el uso de
papel, tijeras, lápiz o instrumentos que se
puedan utilizar para describir un diseño en un
papel.
• Este sistema nos permite una gran velocidad y
flexibilidad
Tema: Diseño
Prototipado: Prototipos en papel
• ¿Cómo se realiza?
– Para poder simular las diferentes interacciones a
realizar con el sistema, recortaremos y dibujaremos
las hojas, menús desplegables, etc. que necesitemos
para simular cada uno de los diferentes escenarios
que hemos preparado.
– Apilaremos estas hojas, que permitirán simular la
aplicación (cada uno de sus escenarios).
– Posiblemente habrá que ir añadiendo, modificando o
desechando algunas partes.
Tema: Diseño
Prototipado: Prototipos en papel
• Uso
– Para utilizar el prototipo de papel nos situaremos en
un escenario de uso de futuro en el que el diseñador
actúa como coordinador.
– El prototipo será analizado por un posible usuario que
intentará realizar algunas de las tareas que se
pretende diseñar.
– El usuario irá realizando las interacciones en voz alta
y el diseñador irá cambiando las hojas de papel en
función de dichas interacciones.
Tema: Diseño
Prototipado: Prototipos en papel
• Ventajas
– 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.
– 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
Prototipado: Prototipos en papel
Ejemplo para desarrollar: Restaurante
Tarea: Toma de comanda (menú)
Tema: Diseño
Prototipado: Prototipos en papel
Tema: Diseño
Prototipado: Prototipos en vídeo
• Un prototipo por ordenador o en vídeo permite rodar
escenarios o visualizar sistemas futuros en los que
se pueden realizar manipulaciones durante el
postproceso para simular características del diseño
que aún no están disponibles.
• Sin embargo, el prototipo en vídeo puede fracasar a
la hora de comunicar el sentimiento de un usuario
en una nueva experiencia, simplemente porque el
hardware que ha de utilizar el nuevo sistema no
existe o por la dificultad de crear una maqueta
interactiva de un gran sistema (Nielsen 93).
Tema: Diseño
Prototipado: Prototipos en vídeo
• Un vídeo permite realizar la demo final fuera de
las limitaciones del hardware. Todo funciona
perfectamente, cada vez que el espectador mira
al vídeo.
• Ejemplo:
– Starfire, rodado por Sun
http://www.youtube.com/watch?v=NKJNxgZyVo0
Tema: Diseño
Prototipado: Prototipos software
• Versiones depuradas de los prototipos iniciales.
• Necesarios para validar el aspecto final de las
pantallas
–
–
–
–
Visibilidad de tamaños y tipo de letra
Visibilidad de iconos e imágenes
Apariencia de los colores
Complejidad percibida, ...
Tema: Diseño
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
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 prototipado
Técnicas de evaluación
•
Con usuarios:
–
–
•
Sin usuarios:
–
–
–
Análisis jerárquico de las tareas
Diálogos
Definir estilo
•
•
•
Tema: Diseño
Recorrido cognitivo
Heurísitcas
Definir tareas:
•
•
–
Interrogación
Observación
Guías
Estándares
Reglas
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
– Sin usuarios:
• Recorrido cognitivo
• Heurísticas (guías, estilos)
Tema: Diseño
El proceso de diseño
•
Diseño
–
Iteración: Prototipado y Evaluación
•
•
–
–
–
–
Definir tareas:
Análisis de tareas:
–HTA: Análisis jerárquico de tareas
Diálogos:
–Diagramas de secuencias
Definir estilo
•
•
•
Tema: Diseño
Técnicas de prototipado
Técnicas de evaluación
Guías
Estándares
Reglas
Análisis de tareas
• Una de las premisas de cualquier aproximación
con la que abordemos el diseño es: conocer al
usuario y cómo realiza las diferentes tareas.
• Tarea: Unidad significativa de trabajo en la
actividad de una persona (sobre una aplicación).
• El primer paso en el diseño de un sistema
interactivo es el análisis de las tareas que el
usuario debe realizar.
– Esta información se recoge con una notación que
permita su formalización y estudio.
Tema: Diseño
Análisis de tareas
• La descripción de las tareas se suele utilizar
para “imaginar” nuevos sistemas o dispositivos.
• El análisis de las tareas se utiliza para investigar
una situación existente.
– En el análisis de tareas hay que determinar:
• Información que necesita el usuario para realizar una tarea
(qué hacer).
• Terminología y símbolos del dominio del problema
(elementos).
• Descripción de cómo se realizan esas tareas actualmente
(cómo).
Tema: Diseño
Análisis de tareas
• Existen diferentes técnicas:
– GOMS
• Familia de técnicas propuesta para modelar y describir las
prestaciones de las tareas desde el punto de vista humano.
• GOMS es acrónimo de: Objetivos (Goals), Operadores
(Operators), Métodos (Methods) y Reglas de selección
(Selection Rules).
– Modelo entidad-relación
• Considera las entidades no computacionales (como objetos
físicos) y las acciones realizadas con ellos. Esta técnica se
asocia normalmente con diseño de bases de datos y
programación orientada a objetos.
– Análisis Jerárquico de Tareas (HTA)
• Es la técnica más popular. Se estudiará en detalle.
Tema: Diseño
Análisis jerárquico de tareas (HTA)
• Incluye dividir una tarea en tareas más simples, de forma
recursiva. Éstas se agrupan como planes que especifican
cómo se deben llevar a cabo esas tareas en la práctica.
• HTA se focaliza en las acciones observables y físicas, e
incluye acciones no relacionados con el software o un
dispositivo de interacción.
• Proceso:
• Comenzar con un objetivo de usuario que se examina de forma que
se puedan identificar las tareas principales que hay que realizar para
lograrlo.
• Las tareas se subdividen en subtareas: el proceso puede proseguir
mediante refinamientos progresivos hasta llegar al grado de
granularidad requerido.
Tema: Diseño
Análisis jerárquico de tareas
• Notación
Tema: Diseño
Acciones...
Análisis jerárquico de tareas
... + planes
plan 0
hacer 1
Si es día lectivo
entonces hacer 4-5-6-7
si no
hacer 10
repetir 11
...
Tema: Diseño
Análisis jerárquico de tareas
• Ejemplo: Comprar un DVD
0.
1.
2.
3.
4.
5.
In order to buy a DVD
locate DVD
add DVD to shopping basket
enter payment details
complete address
confirm order
plan 0:
Tema: Diseño
If regular user do 1-2-5.
If new user do 1-2-3-4-5.
Análisis jerárquico de tareas
• Ejemplo (descripción gráfica):
Tema: Diseño
Diálogos
• El diálogo es el proceso de comunicación entre
dos o más participantes.
• En el diseño de interfaces de usuario, el diálogo
representa la estructura de la conversación
entre el usuario y la computadora, a través de
una aplicación o sistema concreto.
Tema: Diseño
Diálogos
• Existen diferentes métodos de representación
de diálogos:
–
–
–
–
Diagramas de transición
Gramática
User Action Notation
Diagramas de secuencias (UML)
Tema: Diseño
Diálogos
• Diagramas de transición
– Se expresan los posibles estados del sistema (nodos)
así como las transiciones entre ellos (enlaces)
Tema: Diseño
Diálogos
• Gramáticas
– Representación basada en reglas que permiten
especificar condiciones y las acciones necesarias para
realizar una orden.
<agenda> ::= <Persona> <Telefono>
<Persona> := <Nombre> <Apellido> <Apellido>
<Nombre> ::= <string>
<Apellido> ::= <string>
<string> ::= <caracter> | <caracter> <string>
<telefono> ::= [ ‘(‘ Prefijo ‘)’ ] <Numero>
<Numero> ::= <digit> <digit> ‘-’ <digit> <digit>‘-’ <digit> <digit>
<caracter> ::= A | B | …| Z
<digito> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tema: Diseño
Diálogos
• User Action Notation (UAN)
– Lenguaje para descripción de las tareas del usuario.
Se utiliza una tabla dividida en 3 columnas: acciones
de usuario, realimentación y estado de la interfaz.
UAN
Feedback
Estado Interface
1)
~[file] Mv
File!, forall(file!): file-!
2)
~[x,y]*
Outline(file) > ~
3)
~[trash]
Outline(file) > ~
Trash!
4)
M^
Delete(file), trash!!
Selected= null
Tema: Diseño
Selected = file
Diálogos
• Diagramas de secuencias (UML)
• Describen el comportamiento dinámico entre actores u
objetos y el sistema.
• Muestra la secuencia cronológica de mensajes entre
objetos durante un escenario concreto.
Tema: Diseño
Diálogos
• Diagramas de secuencias (UML)
• En IPO:
• Permiten esquematizar los diagramas detallados de
casos de uso, en términos próximos al usuario.
• Permiten realizar una representación precisa de las
interacciones entre los objetos:
– Describen interacciones, objetos y sus relaciones.
– Describen los mensajes que intercambian.
– Ordenan temporalmente los mensajes.
Tema: Diseño
Diálogos
• Diagramas de secuencias (UML)
• Se usan en el análisis de requisitos:
– Para refinar descripciones de casos de uso
– Para encontrar objetos adicionales
• Se usan en la fase de diseño del sistema (este es el
contexto en el que usaremos los diagramas de
secuencias en IPO):
– Para refinar interfaces
Tema: Diseño
Diálogos
Diagramas de secuencias (UML)
Elementos del diagrama simplificado
– Cada objeto viene dado por una barra vertical: los elementos
implicados se expresan en columnas:
• Actor que inicia el caso de uso (primera columna izquierda)
• Interfaz (columna o columnas intermedias)
• Sistema (columna de la derecha)
– El tiempo transcurre de arriba abajo: los mensajes entre
columnas se representan en orden temporal en horizontal.
• Los flujos alternativos se representan con cajas alt
• Los flujos iterativos se representan con cajas loop
Tema: Diseño
Diálogos
Diagrama de secuencia
Ejemplo: Registrarse
Caso de uso:
registrarse
Tema: Diseño
Diálogos
Diagrama de secuencia
Ejemplo: Ingresar PIN
http://www.websequencediagrams.com
Tema: Diseño
Diálogos
• Diagrama de secuencia
: Socio
: Encargado
: Libro
: Ficha socio
Coger libro
Solicitar préstamo
Verificar situación socio
Situación socio ok
Verificar situación libro
Situación libro ok
Introducir préstamo
Autorizar préstamo
Tema: Diseño
: Ficha libro
: Préstamo
Análisis de tareas y Diálogos
Implementación
– Una vez modeladas las tareas y los diálogos se debe
obtener una implementación correcta de los mismos.
– Para ello hay que tener en cuenta varios factores:
- Tipos de interacción:
- Posicionamiento, valor, texto, selección, arrastre
- Principios, guías de estilo, estándares
- Gestión de entradas del usuario:
- Petición, muestreo, evento
- Diseño de la presentación
- Gestión de errores
Tema: Diseño
Conclusiones
• Los prototipos son herramientas muy útiles en la fase de
diseño para explorar y validar ideas.
• El diseño iterativo permite incorporar las consideraciones de
los usuarios de modo que es posible tomar decisiones críticas
en cuanto a objetivos y usabilidad en fases tempranas del
proceso.
• Las técnicas de análisis de tareas y diálogos permiten
representar claramente los objetivos y las interacciones con
el sistema.
• Para una implementación correcta habrá que tener en cuenta
en la fase de diseño las guías de estilo, estándares,
recomendaciones, etc.
Tema: Diseño
Bibliografía
El material presentado en estas transparencias
debe complementarse con:
• Preece, Rogers, Sharp: “Interaction Design:
Beyond Human-Computer Interaction”, 3º ed,
Wiley, 2011
– Capítulo 10.7
– Capítulo 11
Tema: Diseño