Análisis de Usuarios – Tareas y diseño de Prototipos de Interfaces utilizando

1. Introducció a l’Enginyeria de Software – Diseny d’Interficies Análisis de Usuarios – Tareas y diseño de Prototipos de Interfaces utilizando Diseño Centrado en el Uso

2. Usage-Centered Design Diseño Centrado en el Uso TEORÍA

3. Usage-Centered Design Diseño Centrado en el Uso Diseño Centrado en el Usuario Diseño Centrado en el Uso DISEÑO CENTRADO EN EL USUARIO Enfoque en los usuarios: en la experiencia y el grado de satisfacción del usuario Basado en la opinión del usuario Implicación subtancial del usuario: -          Estudios de usuarios -          Diseño participativo -          Respuesta del usuario -          Pruebas con usuarios Se diseñan iterativamente distintos prototipos Procesos muy variables e informales Diseño mediante el método evolutivo de prueba y error DISEÑO CENTRADO EN EL USO Enfoque en el uso que el usuario hace/hará de la aplicación: existen varias herramientas que ayudan al diseño de la interfaz en función de las tareas que el usuario quiere satisfacer con la aplicación en cuestión.   Basado en la concreción de modelos Implicación selectiva del usuario: -          Modelado explorativo -          Validación de modelos -          Técnicas de revisión de la Usabilidad Diseño basado en la modelización Sistemático, procesos bien definidos Diseño basado en metodologías de ingeniería del software

4. Usage-Centered Design Diseño Centrado en el Uso Modelos de la metodología de Diseño Centrado en el Uso

5. Usage-Centered Design Diseño Centrado en el Uso Procesos lógicos de la metodología de Diseño Centrado en el Uso

6. Usage-Centered Design Diseño Centrado en el Uso • Procedimientos para aplicar la metodología de Diseño Centrado en el Uso • Fase inicial: • Objetivos esenciales y preconcepciones • Modelado explorativo • Primera iteración: • Modelado de roles de usuario • Modelado de tareas • Reagrupamiento de tareas • Diseño • Prototipado abstracto • Diseño • Construcción • Iteraciones Sucesivas (pasos 3 al 9)

7. Pasajero Cliente Facturación Comprueba disponibilidad de vuelos Pasajero Cliente Reserva un asiento Comprueba datos del billete Usage-Centered Design Diseño Centrado en el Uso Herramientas para la construcción del Modelo de Roles de Usuario Descripción de Roles de Usuario Clientecomprueba la disponibilidad y reserva un asiento conforme a sus preferencias Pasajerocomprueba los datos de su billete de viaje y factura el equipaje Mapa de Roles de Usuario

8. Usage-Centered Design Diseño Centrado en el Uso • Herramientas para la construcción del Modelo de Tareas • - Descripción de los “Casos de Tarea” (Task cases): Existen dos posibilidades • Utilizar Narrativas Particionadas en combinación con Pre- and Post-condiciones. • Utilizar Casos de Uso Esenciales Estructurados • - Mapa de Casos de Uso

9. Nombre del Caso INTENCIONES DEL USUARIO RESPONSABILIDADES DEL SISTEMA 2. Identificarse 5. Seleccionar una opción 7. Coger el dinero 1. Preguntar identificación 3. Verificar identidad 4. Ofrecer opciones 6. Reembolsar dinero Usage-Centered Design Diseño Centrado en el Uso • Herramientas para la construcción del Modelo de Tareas • Utilizar Narrativas Particionadas en combinación con Pre- and Post-condiciones. Narrativas Particionadas Pre- and Post-condiciones HACER UN PEDIDO DE PRODUCTOS Precondiciones: Un usuario válido ha accedido al sistema Flujo de eventos: Secuencia básica 1. El caso de uso comienza cuando el usuario selecciona “Hacer pedido”. 2. El cliente introduce sus datos personales: nombre y dirección de correo postal. 3. Si el cliente introduce únicamente el código postal, el sistema proporciona automáticamente el nombre de la ciudad o municipio. 4. El cliente introducirá los códigos de productos de los productos deseados. 5. El sistema proporcionará la descripción del producto y el precio de cada unidad. 6. El sistema calcula coste total del pedido conforme el cliente va introduciendo el código de los productos deseados y el número de unidades solicitadas. 7. El cliente introduce la información de su tarjeta de crédito. 8. El cliente confirma el pedido seleccionando explícitamente la acción correspondiente. 9. El sistema verifica la información, graba los datos del pedido y envía la información del pago al sistema de crédito correspondiente. 10. Cuando el pago es confirmado, el pedido se marca como confirmado, y un número de identificación del pedido es devuelto al cliente. Así finaliza este caso de uso. Secuencias alternativas En el paso número 9, si existe algún error en los datos suministrados por el cliente, el sistema solicita al cliente introducir los datos de nuevo correctamente. Postcondición: El pedido ha sido grabado y marcado como confirmado.

10. Usage-Centered Design Diseño Centrado en el Uso • Herramientas para la construcción del Modelo de Tareas • Utilizar Casos de Uso Esenciales Estructurados

11. Usage-Centered Design Diseño Centrado en el Uso Herramientas para la construcción del Modelo de Tareas Mapa de Casos de Uso

12. Usage-Centered Design Diseño Centrado en el Uso • Herramientas para la construcción del Modelo de Contenidos • Espacios de Trabajo = Contextos de Interacción

13. Usage-Centered Design Diseño Centrado en el Uso • Herramientas para la construcción del Modelo de Contenidos • Mapa de • Navegación • (versión menos • formalista)

14. Usage-Centered Design Diseño Centrado en el Uso Herramientas para la construcción del Modelo de Contenidos Mapa de Navegación alternativo (versión mucho más formal)

15. Usage-Centered Design Diseño Centrado en el Uso Herramientas para la construcción del Modelo de Contenidos Mapa de Navegación: Notación de la versión simplificada (esta será la versión que se utilizará en el curso)

16. Usage-Centered Design Diseño Centrado en el Uso EJERCICIO PRÁCTICO

17. Usage-Centered Design Diseño Centrado en el Uso • Ejercicio práctico a realizar en clase: • Consta de tres partes: • Modelo de roles de usuarios (15 minutos) • Modelo de tareas (20 minutos) • Modelo de contenido (25 minutos)

18. 1. Modelo de roles de usuario (User Role Model) Tiempo: 15 minutos • 1.1 Pensar qué roles/papeles pueden tener los usuarios de nuestra aplicación • 1.2 Dibujar un muñeco para cada rol y poner debajo el nombre del rol. • Para distinguir roles es útil pensar en los estados por los que pasa un usuario, por ejemplo, si estamos diseñando un sistema de compra de billetes de avión el usuario pasará de ser cliente a ser pasajero, y sus necesidades variarán de un rol a otro (un cliente quiere información sobre horarios de vuelos y precios, mientras que alguién que ha comprado ya el billete, puede querer visualizar los datos de su billete)

19. Pasajero Cliente Facturación Comprueba disponibilidad de vuelos Pasajero Cliente Reserva un asiento Comprueba datos del billete • 1.3 Pensar en la siguientes cuestiones y anotar la información correspondiente: • ¿qué funciones (TAREAS) espera el usuario que ejecute la aplicación? • ¿qué herramientas necesita cada tipo de usuario y cuáles han de estar presentes en la aplicación? • Hacer un diagrama en el que queden enlazados los roles (muñequitos) con las funciones que ellos necesitan que haga la aplicación. • Ej: • Hacer un diagrama en el que se refleje la relación entre los diferentes roles

20. Nombre de la tarea: Sacar dinero en efectivo de un cajero automático Intenciones del usuario Resposabilidades del sistema 1. Introducir tarjeta 3. Identificarse 6. Elegir una opción 8. Coger el dinero 2. Preguntar identidad al cliente 4. Verificar identidad 5. Mostrar opciones 7. Reembolsar dinero 2. Modelo de tareas (Task Model) Tiempo: 20 minutos 2.1 Seleccionar una por una cada una de las tareas del modelo de roles de usuario 2.2 Para cada una de ellas, rellenar la siguiente ficha Ej: Sacar dinero en efectivo de un cajero automático

21. 3. Modelo de contenidos (Content Model) Tiempo: 25 minutos • 3.1 Para cada una de las subtareas resultantes, hacer una ficha semejante • Cuando hayan sido exploradas todas las tareas y subtareas derivadas de las mismas: • 3.2 Coger un folio que representará un determinado “espacio de trabajo” (también llamado “contexto de interacción”) de la interfaz de usuario en la que la aplicación resolverá cada una de las tareas y subtareas analizadas. Un folio por cada tarea y subtarea • Utilizar trozos de papel pequeños o post-its adhesivos para representar: • cada una de las herramientas necesarias para ejecutar la tarea • (utilizar papeles de colores fríos o bien escribir el nombre de las herramientas en MAYÚSCULAS) • cada uno de los materiales que han de estar presentes en el espacio de trabajo (por ejemplo, elementos de navegación de la página) • (utilizar papeles de colores cálidos o bienescribir el nombre de los materiales en minúsculas)

22. Si hiciéramos la distinción por colores: • herramientas (colores fríos) • materiales (colores cálidos) • entonces el espacio de trabajo tendría un aspecto parecido al siguiente:

23. 3.3 Crear el mapa de navegación, teniendo en cuenta la siguiente notación gráfica:

24. Resumen del proceso de creación del Modelo de Contenidos Para estatarea, teniendo en cuenta elespacio de trabajo correspondiente, un posible mapa de navegación sería El mapa de navegación tendrá un aspecto parecido al siguiente

25. FIN