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
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
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
Qué es un prototipo? Prototipado 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
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 design prototype evaluate OK? done! re-design
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
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
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.
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
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
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
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.
Storyboard Prototipado: Escenarios
Storyboard Prototipado: Escenarios
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
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.
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.
Ventajas 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. 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 Ejemplo para desarrollar: Restaurante Tarea: Toma de comanda (menú)
Prototipado: Prototipos en papel
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).
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
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,...
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).
Prototipado: Mapa de navegación Hay que tener en cuenta la estructura global de la aplicación!
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).
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
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)
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
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.
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).
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.
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.
Análisis jerárquico de tareas Notación 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...
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.
Análisis jerárquico de tareas Ejemplo (descripción gráfica):
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.
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)
Diálogos Diagramas de transición Se expresan los posibles estados del sistema (nodos) así como las transiciones entre ellos (enlaces)
Gramáticas Diálogos 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
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-! Selected = file 2) ~[x,y]* Outline(file) > ~ 3) ~[trash] Outline(file) > ~ Trash! 4) M^ Delete(file), trash!! Selected= null
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.
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.
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
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
Diálogos Diagrama de secuencia Ejemplo: Registrarse Caso de uso: registrarse
Diálogos Diagrama de secuencia Ejemplo: Ingresar PIN http://www.websequencediagrams.com
Diálogos Diagrama de secuencia : Socio : Encargado : Libro : Ficha socio : Ficha libro : 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
Implementación Análisis de tareas y Diálogos 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
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.
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