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
Usage-Centered Design
Diseño Centrado en el Uso
TEORÍA
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
DISEÑO CENTRADO EN EL USO
Enfoque en los usuarios: en la experiencia y el grado de
satisfacción del usuario
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
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
Implicación selectiva del usuario:
Modelado explorativo
Validación de modelos
Técnicas de revisión de la
Usabilidad
Procesos muy variables e informales
Diseño basado en la modelización
Sistemático, procesos bien definidos
Diseño mediante el método evolutivo de
prueba y error
Diseño basado en metodologías de
ingeniería del software
Usage-Centered Design
Diseño Centrado en el Uso
Modelos de la metodología de Diseño Centrado en el Uso
Usage-Centered Design
Diseño Centrado en el Uso
Procesos lógicos de la metodología de Diseño Centrado en el Uso
Usage-Centered Design
Diseño Centrado en el Uso
Procedimientos para aplicar la metodología de Diseño Centrado en el Uso
Fase inicial:
1. Objetivos esenciales y preconcepciones
2. Modelado explorativo
Primera iteración:
3. Modelado de roles de usuario
4. Modelado de tareas
5. Reagrupamiento de tareas
6. Diseño
7. Prototipado abstracto
8. Diseño
9. Construcción
Iteraciones Sucesivas (pasos 3 al 9)
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
Cliente comprueba la disponibilidad y reserva un asiento
conforme a sus preferencias
Pasajero comprueba los datos de su billete de viaje y factura el
equipaje
Mapa de Roles de Usuario
Cliente
Pasajero
Comprueba
disponibilidad de vuelos
Cliente
Reserva
un asiento
Facturació
n
Comprueba
datos del
billete
Pasajero
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
A. Utilizar Narrativas Particionadas en combinación con Pre- and Postcondiciones.
B. Utilizar Casos de Uso Esenciales Estructurados
- Mapa de Casos de Uso
Usage-Centered Design
Diseño Centrado en el Uso
Herramientas para la construcción del Modelo de Tareas
A.
Utilizar Narrativas Particionadas en combinación con
Pre- and Post-condiciones.
Narrativas Particionadas
Nombre del Caso
INTENCIONES
USUARIO
2. Identificarse
DEL
RESPONSABILIDADES
DEL SISTEMA
1. Preguntar
identificación
3. Verificar identidad
4. Ofrecer opciones
5. Seleccionar una
opción
7. Coger el dinero
6. Reembolsar dinero
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.
Usage-Centered Design
Diseño Centrado en el Uso
Herramientas para la construcción del Modelo de Tareas
B.
Utilizar Casos de Uso Esenciales Estructurados
Usage-Centered Design
Diseño Centrado en el Uso
Herramientas para la construcción del Modelo de Tareas
Mapa de
Casos de Uso
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
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)
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)
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)
Usage-Centered Design
Diseño Centrado en el Uso
EJERCICIO PRÁCTICO
Usage-Centered Design
Diseño Centrado en el Uso
Ejercicio práctico a realizar en clase:
Consta de tres partes:
1. Modelo de roles de usuarios
2. Modelo de tareas
3. Modelo de contenido
(15 minutos)
(20 minutos)
(25 minutos)
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)
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:
Comprueba
disponibilidad de vuelos
Cliente
Reserva
un asiento
Facturació
n
Pasajero
Comprueba
datos del
billete
Hacer un diagrama en el que se refleje la relación entre los diferentes roles
Cliente
Pasajero
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
Nombre de la tarea:
Sacar dinero en efectivo de un cajero automático
Intenciones del
usuario
Resposabilidades
sistema
del
1. Introducir tarjeta
2. Preguntar identidad al
cliente
3. Identificarse
4. Verificar identidad
5. Mostrar opciones
6. Elegir una opción
7. Reembolsar dinero
8. Coger el dinero
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 bien
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:
3.3 Crear el mapa de navegación, teniendo en cuenta la siguiente
notación gráfica:
Resumen del proceso de creación del Modelo de
Contenidos
Para esta tarea, teniendo en cuenta el
espacio de trabajo correspondiente,
un posible mapa de navegación sería
El mapa de navegación tendrá un aspecto parecido al siguiente
FIN
Descargar

Contextual Inquiry & Design