Sensibilizacin: promover el reuso de soluciones exitosas

Eleonora Acosta y Nancy Zambrano UCV

ltima Actualizacin: diciembre-2012

Agenda

Algunos problemas en el diseo de interfaces de usuario Patrones de Interaccin: Definicin Tpicos de Patrones de Interaccin:

Estructura Taxonoma Organizacin Colecciones

De Patrones de Interaccin a Prototipo de la IU Caso de Estudio: El ahorcado

Diseo de IU: Problemas

1.- Dificultad para desarrollar software usable 2.- Se desestima la necesidad de un grupo de desarrollo multidisciplinario y se ignoran los problemas de comunicacin entre sus miembros 3.- En la prctica no se reconoce la relevancia del usuario 4.- Falta de integracin entre la Interaccin Humano-Computador y la Ingeniera de Software.

1.- Desarrollo de software usable

Cualidad del software cuyos atributos son: facilidad de aprendizaje facilidad de memorizacin satisfaccin del usuario eficiencia en cuanto al uso baja rata de errores.

2.-Equipo multidisciplinario Usuario Especialistas en IHC

Psiclogos

Especialistas en el dominio

Diseador Grfico
5

3. Reconocer relevancia del usuario

El usuario debe cumplir una tarea con el sistema y la interfaz debe estar orientada a darle al usuario todas las facilidades y el poder para realizar esa tarea, incluyendo el aprendizaje del sistema involucrar al usuario en el proceso de diseo
6

Conocer al Usuario
Observar al Usuario en su Ambiente de Trabajo Caractersticas individuales del Usuario Anlisis de las tareas Anlisis Funcional de las tareas Evolucin del usuario y el trabajo Extraer un conjunto significativo de escenarios de tareas.
7

4 Falta de integracin IS-IHC

Y la construccin de la IU?
8

En qu se basa el diseo de interfaces?

Aplicacin de principios y estndares Anlisis de interfaces exitosas Evaluaciones de usabilidad Resultados de estudios en el rea cognitiva, social, educativa, etc Estudios empricos.

Guas de Diseo

Los principios son conceptos de alto nivel que orientan la actividad del diseo de la interfaz Los lineamientos son reglas que se establecen en una organizacin para el diseo y desarrollo de interfaces referentes al look and feel
10

Guas de Diseo: Limitaciones

Son abstractos (darle control al usuario, pero...) Son generales (usar apropiadamente los colores, pero...) Independientes del contexto (utilizar teclado y ratn, pero...) No se relacionan a un problema especfico (divulgacin progresiva, pero...)

11

Guas o Patrones?
Ventajas y desventajas del uso de principios?

Ventajas y desventajas del uso de estndares? Otra opcin: uso de patrones de interaccin

12

Patrn de Interaccin: Definicin

Un patrn de interaccin describe una solucin exitosa a un problema recurrente concerniente a la interfaz de usuario, en un contexto dado

Problema Contexto Solucin

13

Patrn de Interaccin: Antecedentes

Los patrones de interaccin son ms cercanos a las ideas de Alexander que los patrones de diseo de software Patrn de Interaccin y Patrn de Diseo de Software son conceptos diferentes Los Patrones de Interaccin describen relaciones visuales, estticas y de satisfaccin Existen colecciones de patrones en el Web.
14

Patrn de Interaccin: Utilidad

Un patrn de interaccin sirve para: describir un problema, su contexto y la solucin generalizar una solucin facilitar la comunicacin entre miembros de distintas disciplinas registrar el conocimiento y la experiencia facilitar el prototipaje de la interfaz de usuario.
15

Por qu usar patrones?

El uso de Patrones de Interaccin, en la construccin de la interfaz de usuario, facilita:

La construccin de software usable, La comunicacin entre los miembros del grupo de desarrollo multidisciplinario, La construccin de prototipos de la interfaz de usuario (incorporando esta actividad al proceso de desarrollo de software).

16

Patrones de Interaccin: Colecciones

Collection of Patterns in Users Interface Design. Martijn van Welie (www.welie.com) Common Ground: a Pattern Language for Human-Computer Interface Design. Jenifer Tidwell (http://www.mit.edu/~jtidwell/interaction_patterns.html), Brighton Usability Pattern Collection Usability Group at the University of Brighton (http://www.cmis.brighton.ac.uk/research/patterns/home.html) Librera de patrones Yahoo (http://developer.yahoo.com/ypatterns/)

17

Patrn de Interaccin: Tpicos

1. Estructura de los patrones 2. Taxonoma de patrones 3. Organizacin de patrones 4. De los patrones de interaccin a un prototipo de la IU

18

Nombre Problema

Formatos de datos de fechas

Patrn de Interaccin: Ejemplo Martijn van Welie

El usuario necesita seleccionar una fecha o perodo de tiempo

Solucin

Permitir que el usuario elija la fecha de un calendario tal como se encuentra en el mundo real (un calendario interactivo) combinado con una caja de edicin Todos los sistemas que requieran que el usuario introduzca fechas (importante en interfaces internacionales) -Los datos de fechas tienen mltiples sintaxis y el usuario no tiene que preocuparse por la sintaxis del dato - El usuario no tipea. Minimizar carga cognitiva y prevenir errores

Contexto

Fuerzas

Usabilidad

19

Nombre, clasificacin, confianza y autor Problema Solucin Contexto Fuerzas Usabilidad Consecuencias Ejemplos y /o Contraejemplos Patrones Relacionados 20

El nombre comunica la idea central La clasificacin indica tipo de patrn La confianza es, segn el autor, la madurez del patrn El autor del patrn Problema que resuelve este patrn Solucin que ha mostrado tener xito en este contexto Condicin(es) en la(s) cual(es) se puede usar el patrn Fortalezas o limitaciones de la solucin Describe el impacto de usabilidad en la interfaz de usuario al aplicar el patrn Describe los resultados de aplicar el patrn Muestras de soluciones exitosas y/o de un mal uso del patrn Otros patrones con los que este patrn est relacionado

E s t r u c t u r a

Patrn de Interaccin: Ejemplo

Museo

21

Patrn de Interaccin: Taxonoma

Notacin Categora Patrones de dominio Patrones de sistema Patrones de tareas Patrones de elementos compuestos Patrones de elementos simples Patrones de usuario
22

Patrn de Interaccin: Organizacin

En el ejemplo abstracto se muestra un lenguaje de patrones, conformado por un patrn de dominio D que referencia un patrn de sistema S cuyas tareas son T1 y T2. Luego, la representacin en la interfaz de usuario de la tarea T2 contiene un men descrito mediante un patrn de elemento compuesto denominado Men.

T1

T2

Men

23

Patrones de Interaccin: Organizacin

Se muestra un lenguaje de patrones, inicia con un patrn de dominio Comercio Electrnico que referencia uno de sistema amazon.com cuyas tareas son buscar producto y preparar orden. La representacin en la interfaz de la tarea preparar orden contiene un elemento compuesto denominado carrito de compras.

D Comercio Electrnico S

Amazon.com

T1 Buscar Producto

T2 Orden Preparar

Men Carrito de compras

24

De Patrones de Interaccin a Prototipo de la IU

(Escuchar, grabar,...)

Funcionalidades

Dominio
(Msica)

Sistema Musical Modelacin de la IU

25

(Programa ejecutable)

(Patrones y Objetos)

De Patrones de Interaccin a Prototipo de la IU

26

De Patrones de Interaccin a Prototipo de la IU

Modelo de Casos de Uso (MCU) Diseador de la IU Modelo Objeto del Dominio (MOD) Analizar MCU y MOD Puntos de Interaccin y Objetos

Construir Lenguaje de Patrones (LP) LP

Construir Modelo Objeto de Interfaz (MOI) MOI

Prototipo IU

Construir Prototipo de Interfaz de Usuario (PIU)

27

De Patrones de Interaccin a Prototipo de la IU

Facilita la construccin de software usable Requiere la participacin del usuario en la construccin de la interfaz Provee un medio de comunicacin sencillo y legible, a ser utilizado por el grupo de desarrollo multidisciplinario

28

De Patrones de Interaccin a Prototipo de la IU

Facilita la integracin entre la Ingeniera de Software y la Interaccin Humano-Computador Minimiza el tiempo de desarrollo de la interfaz de usuario, promoviendo el reuso. Incorpora el prototipaje de la IU al proceso de desarrollo de software.

29

El Modelo de Casos de Uso (repaso)

Secuencia de transacciones (eventos o acciones) iniciadas por un actor y que constituye una funcionalidad (comportamiento) del sistema Describe un escenario posible a partir de la interaccin de un actor Define una funcionalidad del sistema.

Modelo de Casos de Uso define todos los escenarios posibles a partir de las interacciones del usuario
30

El Modelo de Casos de Uso (repaso)

Permite:

Identificar los puntos de interaccin el usuario con la aplicacin Establecer los dilogos Identificacin de patrones de interaccin

31

Modelo Objeto del Dominio (repaso)

Cmo se construye este modelo ?

Identificando los objetos que se encuentran en el dominio de la aplicacin, las relaciones entre ellos, la conformacin de los objetos, operaciones, etc. Para ello se analiza el modelo de Casos de Uso, las listas de trminos por categoras, etc.

32

El Modelo de Interfaz de Usuario

Establecer la representacin de los objetos en la interfaz Establecer la representacin del instrumento de activacin de cada operacin, que lo requiera, en la interfaz La creacin del modelo objetos de interfaz Identificacin de patrones de interaccin

33

Caso de Estudio: Juego el ahorcado

Repasemos el juego

34

Ahorcado: Modelos Iniciales

Cmo se Qu hace el juega? sistema? Qu objetos forman parte del sistema?

35

Modelo de casos de uso

Solicitar palabra Jugador

Dar letra Mostrar casillas Inhabilitar letra

Felicitar jugador Mostrar letra acertada

Contrincante

Tratar palabra

Dibujar seccin Ahorcar

36

Modelo del dominio

Contrincante ____________ Muestra letra Inhabilita letra trata Dibuja seccin Felicita jugador Ahorca Palabra ____________ Analiza palabra Completa palabra ...
1 1..*

jugador juega ____________ Solicita palabra ...

proporciona captura Letra ____________ Generar Es parte de Abecedario _________ Crear

37

Patrn de Interaccin: tipo tarea

Nombre, clasificacin, confianza y autor Dar letra Confianza: 0 Curso IHC I 2011

Problema

El usuario desea introducir una letra en el juego sin tener que tipearla Permitir que el usuario o jugador introduzca una letra seleccionando de un abecedario, a travs de algn dispositivo apuntador. Grficamente:

Solucin

38

Patrn de Interaccin: tipo tarea

Contexto El usuario ya ha comenzado a jugar, habiendo solicitado en algn momento previo una palabra Cada letra se puede seleccionar una sola vez

Fuerza

Usabilidad Consecuencias

Previene la ocurrencia de errores El sistema inhabilita una letra provista por el usuario X

Ejemplo

39

Patrn de Interaccin: tipo sistema

Nombre, clasificacin, confianza y autor Juego del ahorcado Confianza: 0 Autor: Curso IHC I 2011 El usuario desea jugar el ahorcado contra el computador. Este juego consiste en solicitar una palabra, y el sistema muestra aleatoriamente el espacio para escribir una palabra oculta. Seguidamente el usuario va indicando letra por letra. El computador analiza la entrada del usuario. Si la letra pertenece a la palabra la coloca en la posicin correspondiente, de lo contrario va dibujando una figura de un ahorcado. El usuario tiene una cantidad especfica de oportunidades" Desarrollar un juego en lnea que permita jugar el ahorcado con el computador, inicindolo a partir del siguiente icono:

Problema

Solucin

40

Contexto

Juegos en lnea que permiten tratar palabras

Patrn de Interaccin: tipo sistema

Fuerza Usabilidad Consecuencias Puede causar aburrimiento en usuarios expertos Debe proporcionar satisfaccin al usuario, fcil de aprender y fcil de memorizar El sistema brinda al usuario la posibilidad de jugar el ahorcado en forma interactiva http://www.escolares.net/ahorcado.htm

Ejemplos

Pat. Relacionados

Solicitar palabra, dar letra, mostrar casillas, tratar palabra

41

Lenguaje de Patrones (Fragmento)

D lnea Juegos en

S
Ahorcado

Dar letra

T1

T2

42

Objetos de Interfaz: reificacin

Palabra ____________ Examina palabra Completa palabra ...

Abecedario _________ Crear

43

Prototipo de Interfaz de Usuario

Prototipo

Modelo de Interfaz Modelo de

Interfaz de Usuario

44

Actividad
1. Crear uno (o ms) patrn(es) que resuelva(n) el siguiente problema de interaccin: Un usuario desea introducir los datos de la inscripcin de una asignatura; estos datos son: nombre, cdigo, seccin, horario y nombre del profesor.

45

Actividad
Nombre Problema Solucin Inscripcin de Asignaturas El usuario desea inscribir una asignatura y escoger el horario y seccin de su preferencia

Contexto Usabilidad Consecuencia Fuerzas

El usuario ha iniciado sesin en el Sistema Satisfaccin del Usuario, Prevencin de Errores y Reduccin de la Carga Cognitiva El usuario inscribi una asignatura en un horario y seccin especficos La solucin es similar a un carrito de compras, frecuentemente usada y conocida Al usuario se le ofrece nicamente las asignaturas que puede cursar segn su plan de estudios y su carga acadmica aprobada

46

Actividades

47