Diseño

1. Miguel Gea Universidad de Granada Diseño

2. Objetivos • Conocer el proceso de diseño de sistemas interactivos • ¿Realizar un diseño centrado en el usuario? • Análisis de tareas • Notaciones para el diálogo

3. Diseño centrado en el usuario • El proceso de diseño debe estar centrado en el usuario para recoger sus necesidades y mejorar su utilización. • El diseñador deberá satisfacer los requisitos humanos aplicando conocimientos de diferentes áreas: • psicología cognitiva, dispositivos y técnicas de interacción, guías, estándares, etc. • El diseño se debe basar en criterios consistentes basados en la experiencia y no en juicios intuitivos

4. Diseño centrado en el usuario • El objetivo del sistema interactivo es permitir al usuario conseguir un objetivo concreto en un dominio de aplicación • El diseño debe responder a las siguientes cuestiones: • Cómo debe ser desarrollado el sistema interactivo para asegurar la usabilidad • Como puede la usabilidad de un sistema interactivo ser demostrada o medida

5. Diseño centrado en el usuario Análisis etnográfico Requisitos maqueta Diseño Escenario simulación Implementación Evaluación V&V

6. Guías Evaluación Requisitos Estándares Experiencia Prototipado Diseño Análisis de tareas Especificación diálogos Internacionalización accesibilidad Implementación

7. Prototipado

8. PrototipadoEscenario • Una historia de ficción con representación de personajes, sucesos, productos y entornos • 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.

9. PrototiposEscenarios • Es importante por otro lado ser consistente con la representación para ver que pasa en situaciones concretas. • Bruce Toganizzini nos comenta que el uso de los escenarios nos permite definir y desarrollar conocimientos sobre el entorno del usuario y su espacio de trabajo.

10. Escenarios • Escenario de tareas • Es una descripción del mundo del usuario tal como existe ahora • Escenario de futuro • Es una descripción del mundo del usuario en un futuro

11. Tipo de escenario • Narrativa • Flowchart • Texto procedural • Storyboard

12. EscenarioFlowchart • Una representación gráfica de las series de acciones y decisiones extraídas de la narrativa

13. EscenarioNarrativa • Una historia completa de la interacción hecha con la existente o con un diseño nuevo

14. EscenarioTextos de los procedimientos • Una descripción paso a paso de las acciones del usuario y las respuestas del sistema

15. PrototipadoStoryboard • Un storyboard es una narración gráfica de una historia en cuadros consecutivos. • Podemos utilizar este concepto que se utiliza en el diseño cinematográfico, teatro, etc. para la realización de un escenario de interacción que puede ser evaluado con diferentes técnicas • Una de las opciones que tenemos en un storyboard para una aplicación es que podemos indicar los enlaces a diferentes páginas del storyboard a partir de los resultados de las interacciones del usuario.

17. Prototipo en papel • Este tipo de prototipo se basa en la utilización 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

18. Como se realiza un prototipo de papel • Para poder simular las diferentes interacciones que vamos a realizar con el sistema, realizaremos una hoja para cada uno de los diferentes escenarios que vamos a tener como resultado de las diferentes posibles interacciones que podemos realizar • Apilaremos estas hojas que nos permitirán simular la aplicación.

19. Prototipo en papelUso • 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 e intentará realizar algunas de las tareas que se pretende diseñar • En voz alta se irán realizando las interacciones y le iremos cambiando las hojas de papel en función de las interacciones que vaya realizando.

20. Prototipo de papelVentajas • 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.

21. PrototipadoPrototipo en papel

22. Prototipo en vídeo • Un prototipo por ordenador nos permite, de una manera relativamente barata, visualizar sistemas futuros, pero 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 ([NIE93], [CAR00]). • Un video nos permite realizar la demo final fuera de las limitaciones del hardware. Todo funciona perfectamente, cada vez que el espectador mirar al vídeo. Un ejemplo interesante de prototipo en vídeo es el vídeo starfire, rodado por Sun [TOG94].

23. Análisis de tareas

24. Análisis de tareas • Tarea Unidad significativa de trabajo en la actividad de una persona (sobre una aplicación) • Una de las premisas de cualquier aproximación con la que abordemos el diseño es la de conocer el usuario y cómo realiza las tareas. • El primer paso en el diseño de un sistema interactivo es el análisis de las tareas que el usuario debe realizar.

25. Análisis de tareas • Información que necesita el usuario para realizar la tarea (qué hacer) • Terminología y símbolos del dominio del problema (elementos). • Descripción de cómo esas tareas se realizan actualmente (cómo).

26. Análisis de tareas • Es el proceso de analizar la manera en que las personas realizan sus trabajos • Lo que hace • Sobre que cosas actuan • Que necesitan saber

27. Análisis de tareasUsos • Documentación • Recogida de requisitos • Predecir prestaciones

28. Análisis de tareasObjetivos, tareas, acciones • Objetivo • El estado que el usuario quiere alcanzar • Tarea externa • Tarea • Una actividad necesaria para conseguir un objetivo • Tarea interna • Acción • Una tarea que no implique una solución de un problema o una estructura de control • Tarea simple

29. Análisis de tareasMétodos • Descomposición de tareas • Ver el modo en el cual una tarea se puede descomponer en otras mas simples • Análisis basado en conocimiento • Identifica el conocimiento del usuario para llevar a cabo dicha tarea, y cómo está organizado este conocimiento • Análisis de relaciones entre entidades • Aproximación orientada a objetos donde enfatiza los actores y objetos, las relaciones entre los mismos y las acciones que pueden realizar

30. Análisis de tareas • Jerarquico • GOMS • Entidad relación

31. Análisis jerárquico de tareas

32. Análisis jerárquico de tareas

33. HTA en notación texto 0. make tea 1. boil water 1.1 fill kettle 1.2 light stove 1.3 put kettle on stove 1.4 wait 1.5 turn off stove 2. empty pot 3. put leaves in pot 4. pour water 5. wait 6. pour tea Plan 0: do 1. if pot is full, then do 2 at the same time do 3-4-5 when tea is brewed, do 6 Plan 1: do 1.1-1.2-1.3-1.4 when water is boiling, do 1.5

34. Análisis de tareasCheck-in Checkin Forma Pago Datos personales Tipo habitación Asignación habitación Entrega llave Identificación Huellas dactilares Clave Voz

35. HTA • Metodología • Etapa inicial • Definir la tarea principal, que puede ser dividida entre cuatro y ocho subtareas • Etapa intermedia • Decidir el nivel de detalle que se requiere y en que punto acabar la descomposición • Parte final • Revisión y evaluación del trabajo realizado para comprobar su consistencia

36. ProblemaAnálisis de tareas jerárquico • Planteamos el siguiente análisis de tareas • Realizar una llamada telefónica desde un teléfono móvil • Conocemos el número de teléfono • Se puede dar el nombre hablando • Buscar en una lista

37. GOMS

38. GOMS • Familia de técnicas propuesta por Card, Moran, and Newell (1983), para modelar y describir las prestaciones de las tareas desde el punto de vista humano • GOMS es un acrónimo que significa Objetivos (Goals), Operadores (Operators), Métodos (Methods), y Reglas de selección (Selection Rules),

39. GOMSFamilia de métodos • KLM • Keystroke Level Model - Card, Moran, Newell 1983 • Utiliza un sola secuencia de operadores • CMN-GOMS • Añadido objetivos, sub-objetivos y métodos • NGOMSL • Lenguaje GOMS natural • Basado en teoría de la complejidad cognitiva • CPM-GOMS • Cognitiva, perceptual, motores • Añadido métodos paralelos, sujeto a restricciones de procesamiento, los modelos utilizan gráficos PERT

40. Modelo GOMS... ] Objetivo (Goal): • Son los objetivos del usuario, describen lo que pretende conseguir • Operadores • Nivel de análisis a más bajo nivel. Son las acciones básicas que se deben llevar a cabo para utilizar el sistema. Son dependientes del sistema (pulsar la tecla ‘X’) o del modelo mental del usuario (leer el área de mensajes).

41. ...Modelo GOMS • Métodos • Existen diferentes alternativas para la consecución de un objetivo. Por ejemplo en un gestor de ventanas, ésta se puede cerrar bien mediante combinación de teclas (Alt-F4), o ratón (Archivo-cerrar). • Reglas de selección • Elección entre posibles alternativas para alcanzar un objetivo. Se puede recoger el método más adecuado para cada usuario mediante una serie de reglas que aconsejan la estrategia más adecuada.

42. GOMSMétodos • externos • Acciones de usuario observables • presionar una tecla • Esperar un evento • Mover el cursor • mentales • acciones de usuario internas • Tomar una decisión básica • Manipular un elemento de la memoria de trabajo • Establecer un objetivo

43. Method for goal: make tea Step 1. Accomplish goal: boil water Step 2. Decide: If Verify that pot is full Then empty pot Step 3. put leaves in pot Step 4. pour water Step 5. Wait for tea to brew Step 6. pour teaSelection rule set for goal: boil water If kettle is electric Then Accomplish goal: boil-water-in-kettle Else Accomplish goal: boil-water-on-stove Return with goal accomplishedMethod for goal: boil-water-in-kettle Step 1. fill kettle Step 2. turn kettle on Step 3. Wait for water to boilStep 4. Return with goal accomplished GOMSEjemplo NGOMSL Method for goal: boil-water-on-stove Step 1. fill kettle Step 2. light stove Step 3. put kettle on stove Step 4. Wait for water to boil Step 5. turn stove off Step 6. Return with goal accomplished

44. Entidad-relación • El modelado de entidad relación es una técnica de análisis asociada normalmente con diseño de bases de datos y mas recientemente con programación orientada a objetos • En análisis de tareas estamos interesados en entidades no computacionales como los objetos físicos, las acciones realizadas con ellos y las personas que las realizan

45. Entidad relación • Supongamos que queremos realizar un análisis entidad relación de una empresa vendedora de flores, se empieza por enumerar todos los objetos de nuestro dominio de interés, herramientas de jardinería, un carro pequeño para el transporte de flores. Hay tres empleados, Carmen, Pedro y Juan. La empresa dispone de varios invernaderos. Tiene tambien un pequeño tractor para roturar los campos.

46. Entidad relación • Objeto Pedro actor humano Acciones:     P1: conduce tractor     P2: cultiva las flores Objeto Carmen actor humano Propietaria Acciones:     V1: Planta semillas     V2: Programa el riego Acciones como propietaria:    V3: Organiza el trabajo de Pedro y Juan

47. Entidad-relación • Objeto invernaderoAtributo:  Humedad: 0-100% • Objeto Controlador de riego actor no humano Acciones:   IC1: Abrir bomba1   IC2: Abrir bomba2  IC3: Abrir bomba3

48. Entidad-relación • Eventos:   Ev1: La humedad cae por debajo del 25%   Ev2: Medianoche Relaciones: objeto-objeto  posición(bomba3, invernadero)  posición(bomba1, campo1)

49. Entidad-relación • Relaciones acción-objeto   sujeto(V3,Pedro)     Carmen dice a Pedro que roture el campo   sujeto(P1, fresadora)     .. con la fresadora • Relación: acción-evento   disparo(EV1, IC3)     Cuando la humedad esté por debajo de 25%, el controlador pone en marcha la bomba1

50. Diálogo • 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