Centro de Ingeniería de Software y Sistemas (ISYS) 1


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


Contenido

Algunos diseños …

Diseño de la Interacción

Modelos

Usabilidad

Técnicas de evaluación de usabilidad


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?


Controles escondidos: Los indicadores deben ser visibles

Frustraciones de todos los días en el carro …

"Photograph courtesy of Baddesigns.com“


Frustraciones de todos los días en la casa …

Cosas que no funcionan como se espera




http://www.goodexperience.com/broken/images/bothredbuttons.jpg



http://www.goodexperience.com/broken/images/office_scissors.jpg


Frustraciones de todos los días con el computador …

El buen uso del color proporciona información

Dos soluciones



Frustraciones de todos los días en la calle …

De Los Ángeles a Houston



Frustraciones de todos los días haciendo deporte …



•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”


Frustraciones de todos los días en la oficina …


"Photograph courtesy of Baddesigns.Com“.


No se considera el contexto

Frustaciones en un hotel …



Frustaciones en un hotel …



Frustraciones en la casa …

Controles difíciles de adivinar



Frustraciones con el control remoto de TV …

Controles en conflicto



Frustraciones con el celular …


Posible solución


Frustraciones en el ascensor …



y ahora, ¿Qué hago? !!!!!!!

Frustraciones en un restaurant …


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


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


“the design of spaces for human communication and interaction”

(Winograd, 1997)


Centro de Ingeniería de Software y Sistemas (ISYS)


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



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



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


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



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


“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”


(Dan Saffer, autor de “Designing Gestural Interfaces”)

http://www.ccsur.com/wp-content/uploads/2010/12/gestual.jpg


Tecnología para el año 2020

29


¡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


Diseñar es modelar…

31


¿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 ....


¿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.


Modelos Mentales


Modelos Mentales

Ilustración de: “Object-Oriented Design with Applications”,1991, G. Booch


Modelos Mentales



¿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.


Contenido

Algunos diseños …

Diseño de la Interacción

Modelos

Usabilidad

Técnicas de evaluación de usabilidad


¿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.


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



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



–Apariencia física: ¿Qué sugieren los objetos?, ¿Son obvios?



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?


Aplicación o proyección (Mapping )

Relación entre el control, su activación y el resultado

Control y efecto


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)


Proyección (Mapping )

¿Cuál control aplica a cuál hornilla ?

A B C D

Una solución


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.



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


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 lógicas


Producto de convenciones, costumbres Pueden ser universales o específicas de una

cultura

Gesto afirmación/ negación

Feminan

Masculin


Restricciones culturales


Egipto

China

India

USA

Venezuela

Significado del color rojo

muerte

vida, vitalidad

peligro

felicidad, dicha, alegría

…


Restricciones culturales - Convenciones


Proyecciones/Restricciones

Las Proyecciones hacen pensar en el rango de posibilidades Las Restricciones limitan el número de alternativas


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.


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.


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?


Modelos de Interfaces de Usuario


¿ … y la Usabilidad?

Desarrollar software involucra

individuos que trabajan juntos y

que interactúan para producir un

producto USABLE


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)


Una idea intuitiva de Usabilidad

Mezcla cualidad del software con la satisfacción del usuario


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


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


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


¿ 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:


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


¿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


¿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.


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)


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



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


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


Indagaciones

Cuestionarios

Observación de campo

Entrevistas

Preguntas Contextuales

Tormentas de Ideas

Encuestas y Sondeos


74


Pruebas

Protocolo de Pensamiento Manifestado

Protocolo de Preguntas

Laboratorio de Usabilidad


75

Pruebas de Aceptación


Investiga, para exponer durante 5 minutos sin recursos adicionales, una técnica de Evaluación de Usabilidad (omitir Evaluación Heurística).

¡Actividad!

76


Para finalizar…

Completa el siguiente mapa conceptual:

es:

sus atributos son:

Centro de Ingeniería de Software y Sistemas (ISYS) 1 · ¿conoces el funcionamiento de estos...

Documents

Transcript of Centro de Ingeniería de Software y Sistemas (ISYS) 1 · ¿conoces el funcionamiento de estos...