Embed Size (px)
Citation preview
Dr. Pedro Latorre Dra. Sandra Baldassarri Dra. Eva Cerezo
Interacción Persona Ordenador
El proceso de diseño
Tema: Diseño
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 • 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
• Implementación
– Prototipos funcionales, evaluación
• Lanzamiento
– Evaluación: test de usabilidad
Tema: Diseño
El proceso de diseño
• Diseño – Iteración: Prototipado y Evaluación – Técnicas de prototipado
• 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 • Diálogos
– Definir estilo
• Guías • Estándares • Reglas
Tema: Diseño
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…
prototype evaluate design
re-design
done! OK?
Tema: Diseño
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
• 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.
Prototipado: Escenarios
Tema: Diseño
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
Prototipado: Escenarios
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
• 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
Prototipado: Prototipos en papel
Tema: Diseño
• ¿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.
Prototipado: Prototipos en papel
Tema: Diseño
• 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.
Prototipado: Prototipos en papel
Tema: Diseño
• 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.
Prototipado: Prototipos en papel
Tema: Diseño
Ejemplo para desarrollar: Restaurante Tarea: Toma de comanda (menú)
Prototipado: Prototipos en papel
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: – Interrogación – Observación
• Sin usuarios: – Recorrido cognitivo – Heurísitcas
– Definir tareas: • Análisis jerárquico de las tareas • Diálogos
– Definir estilo
• Guías • Estándares • Reglas
Tema: Diseño
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
• Técnicas de prototipado • Técnicas de evaluación
– Definir tareas: – Análisis de tareas:
–HTA: Análisis jerárquico de tareas – Diálogos:
–Diagramas de secuencias
– Definir estilo • Guías • Estándares • Reglas
Tema: Diseño
• 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.
Análisis de tareas
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
• 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.
Análisis de tareas
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
Acciones...
Análisis jerárquico de tareas
• Notación
Tema: Diseño
... + planes plan 0 hacer 1 Si es día lectivo entonces hacer 4-5-6-7 si no hacer 10 repetir 11 ...
Análisis jerárquico de tareas
Tema: Diseño
Análisis jerárquico de tareas
• Ejemplo: Comprar un DVD 0. In order to buy a DVD 1. locate DVD 2. add DVD to shopping basket 3. enter payment details 4. complete address 5. confirm order plan 0: If regular user do 1-2-5. If new user do 1-2-3-4-5.
Tema: Diseño
Análisis jerárquico de tareas
• Ejemplo (descripción gráfica):
Tema: Diseño
• 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.
Diálogos
Tema: Diseño
• Existen diferentes métodos de representación de diálogos: – Diagramas de transición – Gramática – User Action Notation – Diagramas de secuencias (UML)
Diálogos
Tema: Diseño
• Diagramas de transición – Se expresan los posibles estados del sistema (nodos)
así como las transiciones entre ellos (enlaces)
Diálogos
Tema: Diseño
• Gramáticas – Representación basada en reglas que permiten
especificar condiciones y las acciones necesarias para realizar una orden.
Diálogos
<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
• 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.
Diálogos
UAN Feedback Estado Interface
1) ~[file] Mv File!, forall(file!): file-! Selected = file
2) ~[x,y]* Outline(file) > ~
3) ~[trash] Outline(file) > ~ Trash!
4) M^ Delete(file), trash!! Selected= null
Tema: Diseño
• 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.
Diálogos
Tema: Diseño
• 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.
Diálogos
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 libro : Ficha socio : Préstamo
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
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
