Centro de Ingeniería de Software y Sistemas (ISYS) 2
Diseñando la interacción
Sensibilización : reconocer buenos/pobres diseños
Centro de Ingeniería de Software y Sistemas (ISYS). Act octubre 2012 E. Acosta, N. Zambrano
“Las interfaces se ponen en el medio. No quiero concentrar mis energías en la interfaz, me quiero concentrar en mi trabajo…”
Donald Norman
Centro de Ingeniería de Software y Sistemas (ISYS) 3
Contenido
Algunos diseños …
Diseño de la Interacción
Modelos
Usabilidad
Técnicas de evaluación de usabilidad
Centro de Ingeniería de Software y Sistemas (ISYS) 4
Productos de uso frecuente: computador, teléfono celular, cafetera, reloj digital, DVD, proyector de video, microondas, fotocopiadora, impresora, calculadora, cámara fotográfica...
El diseño de la interacción
¿conoces el funcionamiento de estos productos?
¿son fáciles de usar (usables)? … ¿o producen frustraciones cotidianas?
Centro de Ingeniería de Software y Sistemas (ISYS) 5
Controles escondidos: Los indicadores deben ser visibles
Frustraciones de todos los días en el carro …
"Photograph courtesy of Baddesigns.com“
Centro de Ingeniería de Software y Sistemas (ISYS) 6
Frustraciones de todos los días en la casa …
Cosas que no funcionan como se espera
"Photograph courtesy of Baddesigns.com“
Centro de Ingeniería de Software y Sistemas (ISYS) 7
Frustraciones de todos los días en la casa …
Centro de Ingeniería de Software y Sistemas (ISYS) 8
Frustraciones de todos los días en la casa …
Centro de Ingeniería de Software y Sistemas (ISYS) 9
Frustraciones de todos los días con el computador …
El buen uso del color proporciona información
Dos soluciones
"Photograph courtesy of Baddesigns.com“
Centro de Ingeniería de Software y Sistemas (ISYS) 10
Frustraciones de todos los días en la calle …
De Los Ángeles a Houston
"Photograph courtesy of Baddesigns.com“
Centro de Ingeniería de Software y Sistemas (ISYS) 11
Frustraciones de todos los días haciendo deporte …
Cosas que no funcionan como se espera
"Photograph courtesy of Baddesigns.com“
•Reloj deportivo, modelo “Triathlon”, resistente al agua hasta 100mts
•En la última página de las instrucciones aparece: “WARNING: TO MAINTAIN WATER-RESISTANCE, DO NOT PRESS ANY BUTTONS
UNDER WATER”
Centro de Ingeniería de Software y Sistemas (ISYS) 12
Frustraciones de todos los días en la oficina …
Cosas que no funcionan como se espera
"Photograph courtesy of Baddesigns.Com“.
Centro de Ingeniería de Software y Sistemas (ISYS) 13
No se considera el contexto
Frustaciones en un hotel …
"Photograph courtesy of Baddesigns.Com“.
Centro de Ingeniería de Software y Sistemas (ISYS) 14
Frustaciones en un hotel …
"Photograph courtesy of Baddesigns.Com“.
Centro de Ingeniería de Software y Sistemas (ISYS) 15
Frustraciones en la casa …
Controles difíciles de adivinar
"Photograph courtesy of Baddesigns.Com“.
Centro de Ingeniería de Software y Sistemas (ISYS) 16
Frustraciones con el control remoto de TV …
Controles en conflicto
"Photograph courtesy of Baddesigns.Com“.
Centro de Ingeniería de Software y Sistemas (ISYS) 17
Frustraciones con el celular …
"Photograph courtesy of Baddesigns.Com“.
Posible solución
Centro de Ingeniería de Software y Sistemas (ISYS) 18
Frustraciones en el ascensor …
"Photograph courtesy of Baddesigns.Com“.
Centro de Ingeniería de Software y Sistemas (ISYS) 19
y ahora, ¿Qué hago? !!!!!!!
Frustraciones en un restaurant …
Centro de Ingeniería de Software y Sistemas (ISYS) 20
Las fallas relacionadas a la interacción con algún producto pueden tener su origen en diseños pobres que no toman en cuenta las habilidades y limitaciones de los usuarios. Son denominadas frecuentemente como “fallas del sistema” o “errores humanos”, pocas veces se refieren a:
fracaso del diseño
Corolario
Centro de Ingeniería de Software y Sistemas (ISYS) 21
Las IU mal diseñadas reducen la productividad
El usuario gasta tiempo en : – Buscar ayudas – Aprendiendo a través de manuales – Tratando de resolver problemas de interacción
con la interfaz misma 50% de tiempo del usuario se pierde debido
a problemas de usabilidad El usuario selecciona un producto
competidor como consecuencia de una mala interfaz
El usuario gasta más tiempo en las tareas de la interfaz que en la funcionalidad propia
Centro de Ingeniería de Software y Sistemas (ISYS) 22
“the design of spaces for human communication and interaction”
(Winograd, 1997)
El diseño de la interacción
Centro de Ingeniería de Software y Sistemas (ISYS)
El diseño de la interacción
IxD, siglas en inglés, es la disciplina que define la estructura y el comportamiento de productos y servicios para que resulten útiles a las personas
Se centra en sistemas de tecnología complejos: software, dispositivos móviles, cajeros automáticos, reproductores mp3 y otros dispositivos electrónicos; también se aplica a otro tipo de productos y servicios, incluso a organizaciones.
23
Centro de Ingeniería de Software y Sistemas (ISYS)
El diseño de la interacción
Productos del diseño de interacción = iteraciones(análisis + pruebas con usuarios)
Los principios no se limitan a dispositivos tecnológicos, se aplican en diversos campos: arquitectura, ingeniería, paisajismo, antropología, diseño gráfico, diseño de interiores, marketing y muchos otros más.
24
Centro de Ingeniería de Software y Sistemas (ISYS)
El diseño de la interacción
Los diseñadores de interacción dan prioridad a las metas y experiencias del
usuario, y evalúan el diseño en términos de usabilidad e influencia afectiva
crean experiencias únicas entre las personas y los sistemas que utilizan
25
Centro de Ingeniería de Software y Sistemas (ISYS)
Diseñar la experiencia del usuario
Conocer la competen-
cia
Evaluar los diseños
Entender la audiencia
Pasos IxD
Establecer objetivos
Observación continua del usuario
El proceso de diseño de la interacción
Centro de Ingeniería de Software y Sistemas (ISYS)
El proceso de diseño de la interacción
Se proponen cuatro actividades básicas:
1. Identificar las necesidades y establecer los requerimientos para la experiencia de usuario
2. Desarrollar un diseño que cubra esos requerimientos 3. Construir versiones interactivas de ese diseño de forma que
puedan ser comunicados y evaluados 4. Evaluar lo que se construye durante el proceso y la
experiencia de usuario que ofrece.
27
Centro de Ingeniería de Software y Sistemas (ISYS) 28
“La nueva era del diseño de interacción se mueve por la ausencia de los paradigmas que nos imponían el teclado y el ratón”
“Creo que estamos en una nueva era del diseño de interacción basado en sensores. Las nuevas generaciones van a esperar que esto sea así, será algo natural con lo que ellos crecerán”
El proceso de diseño de la interacción
(Dan Saffer, autor de “Designing Gestural Interfaces”)
Centro de Ingeniería de Software y Sistemas (ISYS)
¡Actividad!
Jugando al rol del diseñador se propone el siguiente ejercicio:
Diseñar un control remoto de un televisor. Este control será un dispositivo simple, sin funcionalidades complementarias, todo lo que necesita hacer un usuario con este aparato es: – Encender y apagar el TV – Cambiar canal – Aumentar y disminuir volumen – Quitar el volumen – Volver al canal anterior – Programar el TV para que se apague automáticamente a los 15
minutos, media hora u una hora más tarde Es necesario determinar las secuencias de acciones que permiten operar
estas diferentes funciones, la cantidad, forma y tamaño relativo de los botones, palancas o selectores que permitirán elegir tales funciones. Se debe definir los íconos o textos que permitirán al usuario comprender la utilidad de cada uno de estos elementos, así como las señales del sistema que dan a entender su modo actual de operación.
30
Centro de Ingeniería de Software y Sistemas (ISYS) 32
¿Qué es un Modelo?
Un modelo es una abstracción del mundo real
una maqueta de una casa
un patrón de costura
una simulación de una actividad en una computadora
un plano
una obra de arte ....
Centro de Ingeniería de Software y Sistemas (ISYS) 33
¿Qué influye en el proceso mental de construcción de un modelo?
En la construcción de un modelo intervienen:
los conceptos y expectativas que la persona desarrolla a través de su experiencia
el objetivo de la modelación
La capacidad de abstracción.
Centro de Ingeniería de Software y Sistemas (ISYS) 37
Modelos Mentales
Ilustración de: “Object-Oriented Design with Applications”,1991, G. Booch
Centro de Ingeniería de Software y Sistemas (ISYS) 38
Modelos Mentales
Ilustración de: “Object-Oriented Design with Applications”,1991, G. Booch
Centro de Ingeniería de Software y Sistemas (ISYS) 39
Modelos Mentales
Ilustración de: “Object-Oriented Design with Applications”,1991, G. Booch
Centro de Ingeniería de Software y Sistemas (ISYS) 40
¿Cómo se elabora un modelo?
Representando los objetos relevantes
(características y comportamiento) y las
relaciones entre ellos
Esta representación se traduce en
palabras, símbolos, maquetas, diagramas,
metáforas, etc.
En modelos de interfaces de usuario la
elección de buenas metáforas es crucial.
Centro de Ingeniería de Software y Sistemas (ISYS) 41
Contenido
Algunos diseños …
Diseño de la Interacción
Modelos
Usabilidad
Técnicas de evaluación de usabilidad
Centro de Ingeniería de Software y Sistemas (ISYS) 42
¿Cómo se forman los Modelos Mentales?
Los individuos forman “modelos mentales” de los objetos y comportamientos, a través de:
Apariencia (affordance),
Proyecciones (mapping),
Restricciones (constrains),
y explorando, .....
basándose en los conceptos y expectativas que la persona desarrolla a través de su experiencia.
Centro de Ingeniería de Software y Sistemas (ISYS) 43
Apariencia (Affordance)
¿Qué es?: Percepción que se tiene del uso de un objeto
La apariencia de un objeto determina cómo puede ser usado
Es usada para describir cómo la interfaz de un producto debe ser diseñada, para que sea obvio qué puede hacerse con él
Centro de Ingeniería de Software y Sistemas (ISYS) 44
Apariencia (Affordance)
Se refiere a un atributo de un objeto que permite a la gente saber cómo usarlo, ejemplo: el botón de un ratón invita a presionarlo
Las cosas complejas pueden requerir una explicación, pero las cosas simples no deben ser explicadas
Cuando para las cosas simples se requiere cuadros, etiquetas, instrucciones, entonces el diseño ha fracasado
Centro de Ingeniería de Software y Sistemas (ISYS) 45
Apariencia (Affordance)
–Apariencia física: ¿Qué sugieren los objetos?, ¿Son obvios?
Centro de Ingeniería de Software y Sistemas (ISYS) 46
Apariencia (Affordance)
Apariencia en el mundo virtual ¿Qué sugieren los siguientes objetos de una pantalla ?
¿En el caso de un usuario novato?
¿Es fácil reconocer qué hacer con ellos?
Centro de Ingeniería de Software y Sistemas (ISYS) 47
Aplicación o proyección (Mapping )
Relación entre el control, su activación y el resultado
Control y efecto
Centro de Ingeniería de Software y Sistemas (ISYS) 48
Proyección (Mapping )
Los botones de control están mejor aplicados en la secuencia (b) de acciones (los clásicos: fast rewind, rewind, play y
fast forward)
(a)
(b)
Centro de Ingeniería de Software y Sistemas (ISYS) 49
Proyección (Mapping )
¿Cuál control aplica a cuál hornilla ?
A B C D
Una solución
Centro de Ingeniería de Software y Sistemas (ISYS) 50
Restricciones (constrains)
Restringe las posibles acciones que pueden ser ejecutadas
Ayuda a prevenir que el usuario seleccione opciones incorrectas
– Físicas: limitaciones de posibles funcionamientos.
– Culturales: impuestas por las convenciones reconocidas o aceptadas
– Lógicas: dadas por las relaciones lógicas.
Centro de Ingeniería de Software y Sistemas (ISYS) 51
Restricciones (constrains)
Se refiere a la manera que el objeto físico restringe la funcionalidad del objeto (ejemplo: sólo hay una manera de insertar una llave en una cerradura)
¿De cuántas formas se puede insertar un pen driver en el computador?
Restricciones físicas
Centro de Ingeniería de Software y Sistemas (ISYS) 52
Hace uso del sentido común de la gente
(i) A provee una aplicación directa entre el icono y el conector
(ii) B provee un código de color para asociar los conectores
(i) A provee una aplicación directa entre el icono y el conector
(ii) B provee un código de color para asociar los conectores
Mientras la affordance sugiere el rango de posibilidades, las restricciones limitan el número de alternativas Un ejemplo es la relación lógica entre el equipo físico de un dispositivo y la manera como conectarlo
Restricciones (constrains)
Restricciones lógicas
Centro de Ingeniería de Software y Sistemas (ISYS) 53
Producto de convenciones, costumbres Pueden ser universales o específicas de una
cultura
Gesto afirmación/ negación
Feminan
Masculin
Restricciones (constrains)
Restricciones culturales
Centro de Ingeniería de Software y Sistemas (ISYS) 54
Egipto
China
India
USA
Venezuela
Significado del color rojo
muerte
vida, vitalidad
peligro
felicidad, dicha, alegría
…
Restricciones (constrains)
Restricciones culturales - Convenciones
Centro de Ingeniería de Software y Sistemas (ISYS) 55
Proyecciones/Restricciones
Las Proyecciones hacen pensar en el rango de posibilidades Las Restricciones limitan el número de alternativas
Centro de Ingeniería de Software y Sistemas (ISYS) 56
Proyectando un buen modelo
Apariencia: “Orejas” para colocar los dedos Restricciones: La oreja grande ¿cuál o cuáles dedo(s)? Proyecciones : Las sugeridas por las restricciones y
apariencia entre las orejas de la tijera y los dedos
Modelo Mental: Las partes operativas son visibles y sus
funcionalidades son claras.
Centro de Ingeniería de Software y Sistemas (ISYS) 57
Proyectando un mal modelo
Apariencia: 4 botones ... pero ¿para qué sirven? Proyecciones: No es clara la relación entre los botones y
las posibles acciones Familiaridad: Algo parecido a los relojes analógicos Modelo Mental:
Se deben leer las instrucciones.
Centro de Ingeniería de Software y Sistemas (ISYS) 58
El usuario Adquiere el producto y/o interactúa con éste a través de su interfaz para realizar una tarea Perspectiva del usuario
Modelo del usuario
El diseñador Diseña interfaces usables, orientadas a darle al usuario todas las facilidades, el confort y el poder para realizar una tarea
El desarrollador
Construye el producto acorde a las especificaciones
Perspectiva del diseñador
Perspectiva del desarrollador
Modelo del diseñador
Modelo del desarrollador
Modelando una interfaz de usuario ¿Cuáles son los roles de los participantes?
Centro de Ingeniería de Software y Sistemas (ISYS) 60
¿ … y la Usabilidad?
Desarrollar software involucra
individuos que trabajan juntos y
que interactúan para producir un
producto USABLE
Centro de Ingeniería de Software y Sistemas (ISYS) 61
Usabilidad
Donald Norman. The design of everyday things
¿Por qué las cosas son difíciles de utilizar?
El problema radica en el desarrollo del producto, en el énfasis de la tecnología en vez del usuario, la persona para la cual está hecho el dispositivo (Donald Norman, The invisible computer)
Centro de Ingeniería de Software y Sistemas (ISYS) 62
Una idea intuitiva de Usabilidad
Mezcla cualidad del software con la satisfacción del usuario
Centro de Ingeniería de Software y Sistemas (ISYS) 63
Software usable: fácil de aprender y fácil de utilizar – Fácil de utilizar: realiza la tarea para la que se
usa – Fácil de aprender: permite realizar las tareas
rápidamente y sin errores Una aplicación usable permite al usuario
centrarse en su tarea, no en la aplicación
Las interfaces se ponen en el medio. No quiero concentrar mis energías en la interfaz, me quiero concentrar en mi trabajo (Donald Norman)
Usabilidad: Software usable
Centro de Ingeniería de Software y Sistemas (ISYS) 64
Usabilidad
Para que un sistema interactivo cumpla sus objetivos tiene que ser usable y accesible a la mayor parte de la población humana
La usabilidad es la medida en la que un producto se puede usar por determinados usuarios para conseguir unos objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso dado
Centro de Ingeniería de Software y Sistemas (ISYS) 65
ISO/IEC 9126: "La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso" ISO/IEC 9241: "Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"
Usabilidad
Centro de Ingeniería de Software y Sistemas (ISYS) 66
¿ Qué es Usabilidad ?
es una cualidad del software es entendida como la facilidad de uso y
aceptación de un sistema interactivo por un cierto tipo de usuarios, que adelantan tareas específicas en un ambiente determinado
significa que un software sea fácil de aprender, efectivo, seguro al usar y que sea satisfactorio para el usuario que lo requiere.
La Usabilidad:
Centro de Ingeniería de Software y Sistemas (ISYS) 67
Usabilidad
Usabilidad es una cualidad del software que tiene múltiples componentes y es asociado según Nielsen con:
Eficiencia Aprendizaje Memorización Satisfacción Prevención y tolerancia
Centro de Ingeniería de Software y Sistemas (ISYS) 68
¿Cómo medir la usabilidad?
Aprendizaje: medir el tiempo en que un usuario novato ejecuta ciertas tareas (clasificarlas de acuerdo a las destreza)
Eficiencia: medir tiempo de ejecución de las
tareas realizadas por expertos Memorización: medir el tiempo de ejecución
de tareas típicas donde se dispone de usuarios casuales
Centro de Ingeniería de Software y Sistemas (ISYS) 69
¿Cómo medir la usabilidad?
Tolerancia y Prevención: medir la cantidad de errores que comete un usuario
Satisfacción: analizar la opinión de los
usuarios después de utilizar el sistema.
Centro de Ingeniería de Software y Sistemas (ISYS) 70
Conceptualizando la usabilidad
en términos de principios de diseño
Los conceptos que orientan al diseñador y que se deben tener presente cuando se diseña:
Apariencia (affordance) Proyecciones (mapping) Restricciones (constrains) Visibilidad Realimentación (Feedback)
Centro de Ingeniería de Software y Sistemas (ISYS) 71
Visibilidad
Las funcionalidades principales del sistema deben estar asociadas a indicadores visibles (examinar los
controles de un carro)
Panel de control de un ascensor …hay que insertar
antes la tarjeta en la ranura!
• hacer visible las partes relevantes
• lo que debe hacerse, debe resultar obvio
"Photograph courtesy of Baddesigns.com“
Centro de Ingeniería de Software y Sistemas (ISYS) 72
Retroalimentación (Feedback)
Consiste en la “obtención” de información acerca de una acción realizada por el usuario, permitiendo que las personas continúen con la actividad
Feedback: audio, táctil, verbal, visual y combinaciones de ellas
El feedback provee visibilidad en la interacción Está presente en múltiples tareas de la vida diaria
Centro de Ingeniería de Software y Sistemas (ISYS)
Inspecciones
Evaluación Heurística
Recorridos Cognitivos
Guías de Estilo
Inspección Consistente
Listas de Comprobación
Evaluaciones de Usabilidad
73
Análisis de Sistemas Existentes
Centro de Ingeniería de Software y Sistemas (ISYS)
Indagaciones
Cuestionarios
Observación de campo
Entrevistas
Preguntas Contextuales
Tormentas de Ideas
Encuestas y Sondeos
Evaluaciones de Usabilidad
74
Centro de Ingeniería de Software y Sistemas (ISYS)
Pruebas
Protocolo de Pensamiento Manifestado
Protocolo de Preguntas
Laboratorio de Usabilidad
Evaluaciones de Usabilidad
75
Pruebas de Aceptación
Centro de Ingeniería de Software y Sistemas (ISYS)
Investiga, para exponer durante 5 minutos sin recursos adicionales, una técnica de Evaluación de Usabilidad (omitir Evaluación Heurística).
¡Actividad!
76