diseño de interacción, usabilidad aplicada (día de la usabilidad 2011 - bogotá, colombia)

Diseño de Interacción: Usabilidad aplicada

MEMBER

Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar

Santiago BusteloDirector de diseño, KambricaIxDA Latin America Regional Coordinator

Día de la Usabilidad • Bogotá, Colombia11 de noviembre, 2011

@sbustelo

Diseño de Interacción •MEMBER

IxDA (Interaction Design Association)

• Red global dedicada a la práctica profesional del Diseño de Interacción

• Comunidad

• Educación

• Evangelismo

• Profesionalismo

• Innovación

• Foro global, 28.000 miembros

• 20 grupos en América Latinay creciendo!

• ixda.org/local/ixda-bogota

2

ixda.org

Diseño de Interacción •MEMBER

• Diseño de Experiencias (UX)

• Diseño de Interacción (IxD)

• Define el modelo de operación de productos interactivos para lograr mejores experiencias para la mayor cantidad de usuarios

• Diseño de Interfaces

• Define los elementos concretos empleados en la interacción

ABSTRACTO

CONCRETO

Diseño de Interacción

3

DISEÑO DEINTERACCIÓN

INTERACCIÓNHUMANO-COMPUTADOR

IxD

DISEÑOINDUSTRIAL

DISEÑODE SONIDO

DI

ARQUITECTURAARQUITECTURADE INFORMACIÓN

ARQDISEÑO DE

EXPERIENCIAS

UX

AI

DISEÑOGRÁFICO

DG

HCI

SeñaléticaEntornosInteractivos

Diseño de Interfaces

Computaciónubicua

Ingeniería deUsabilidad

Controles

Diseño de Información

Navegación

PRODUCCIÓNDE CONTENIDO(Texto, Imagen,Video, sonido)

Dan Saffer, Designing for Interaction

Diseño de Interacción •MEMBER

Funciones del diseño

Información

Presentación

Uso

5

Diseño de Interacción •MEMBER

Forma versus Función

1 2 3 4

5 6

7 8 9 10 11 12

13

14

15 16 17 18 19 20 21

22 23

24

25 26 27 28 29 30 31

6

Diseño de Interacción •MEMBER

Forma y Función

7

D L M M J V S

26 27 28 29 30 31 1

2 3 4 5 6 7 8

9 10 11 12 13 14 15

16 17 18 19 20 21 22

23 24 25 26 27 28 29

30 31 2 3 4 5 6

Diseño de Interacción •MEMBER

• La usabilidad de una interfaz es una medida de la efectividad, eficiencia y satisfacción con la cual determinados usuarios pueden alcanzar determinados objetivos en un entorno particular con dicha interfaz.(ISO 9241, Requerimientos ergonómicos para trabajo de oficina con terminales visuales, Parte 11 - 1997)

Usabilidad

8

Efectividad: Incorporando al usuario

Diseño de Interacción •MEMBER

Eficiencia: análisis y cuantificación

10

Diseño de Interacción •MEMBER

Satisfacción: experiencia óptima

Simplificación del modelo de Mihaly Csikszentmihalyi

Frustración

Fluencia

desafío

habilidad

Aburrimiento

11

Diseño de Interacción •MEMBER

¿Cuándo está terminado nuestro trabajo?

• Cuando nos gusta a nosotros

• Cuando funciona como queríamos

• Cuando le gusta al cliente

• Cuando el usuario logra lo que esperábamos

12

Diseño de Interacción •MEMBER

Entendiendo al usuario

• Su fin es realizar una tarea.

• Nuestra interfaz es sólo un medio que puede ser transparente, o un impedimento.

• Nuestra interfaz no debe ocupar lugar en la mente del usuario.

• Cuando el usuario tiene que pensar en nuestra interfaz, es porque se está preguntando lo que espera o necesita que sea evidente. Y eso, es señal de que no hicimos bien nuestro trabajo.

13

Diseño de Interacción •MEMBER

Sitios que te inspiran vs. sitios que usás

14

Diseño de Interacción •MEMBER

Proceso de diseñoy caso de ejemplo

15

Diseño de Interacción •MEMBER

• Administración de un videoclub

• Requerimientos:

• Alquilar una pelicula

• Devolver una pelicula

• Cargar una película

• Cargar un nuevo cliente

Ejemplo desarrollado junto con Diego González(Lagash Systems, fundador)

Caso de ejemplo

16

Diseño de Interacción •MEMBER

Programador cavernario

• 3 entidades

• Películas: Datos

• Clientes: Datos

• Alquileres: Relaciones

• Operaciones

• Alta, baja, modificación y consulta para cada entidad

17

Prototipo de interfaz publicado enhttp://kambrica.com/raf08/

caveman.zip(ejecutable para Windows)

1234

1234

1234

Gonzalez

GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12

1234

760

No  hay  stock.

1235

760

Diseño de Interacción •MEMBER

Diseñador cavernario

• Metáforas

• Películas: DVDs

• Clientes: Fichas

• Alquileres: Ficha + DVD

• Representación

• Experiencia inmersiva

• Fotorealismo

31

Diseño de Interacción •MEMBER

¿Qué es Calidad?

• “La Calidad de un producto es una función del bien que hace al mundo” (Tom DeMarco)

• Calidad = Resultados del esfuerzo / Costos totales (W. Edwards Deming)

• “Calidad es lo que nuestros usuarios valoran. Todo lo demás es desperdicio” (Lean Software Development)

43

Diseño de Interacción •MEMBER

Cuantificación

• “Mide lo que sea medible y haz medible lo que no lo sea” (Galileo Galilei)

• Cuantificar nos permite:

• Comparar alternativas de manera objetiva

• Análisis en lugar de opiniones

• Identificar áreas de oportunidad

44

Diseño de Interacción •MEMBER

Cuantificación: KLM-GOMS

Cada operación del usuario tiene un costo.

45

Key 0,2 seg. Tecla / mouse click & release

Hover 0,4 seg. Paso mouse teclado

Point 1,1 seg. Apuntar con el mouse

Mental 1,35 seg. Preparación mental nueva tarea

Response ? Respuesta del sistema

Más información: Artículo en Wikipedia sobre KLM-GOMS (en inglés)

Diseño de Interacción •MEMBER

Cuantificación:Buscar cliente (v. programador)

46

Inicio tarea: 1,35Mover mano al mouse: 0,40

Proxima tarea: 1,35Apuntar menu Clientes: 1,10

click menu Clientes: 0,20Apuntar menú Clientes »

Modificación: 1,10click menú Clientes » Modificación:

0,20Próxima tarea: 1,35

Apuntar campo texto: 1,10click campo texto: 0,20

Mover mano al teclado: 0,40Proxima tarea: 1,35

Tipear apellido: 1,60Mover mano al mouse: 0,40

Proxima tarea: 1,35point OK: 1,10click OK: 0,20

Obtuvimos (o no) el dato:

14.75 segundos

Recuperación:Mover mano al mouse: 0,40

Proxima tarea: 1,35point Cancel: 1,10click Cancel: 0,20

Volvemos a abrir el cuadro, Tipeamos apellido otra vez: 12,32

Mover mano al mouse: 0,40Proxima tarea: 1,35

apuntarOK: 1,10click OK: 0,20

Total con recuperación:

32,55 segundos

Diseño de Interacción •MEMBER

Cuantificación:Buscar cliente (v. diseñador)

47

Inicio tarea: 1,35Apuntar al fichero home: 1,10

Click Fichero home: 0,20Animación "files, lots of files¨: 4

Proxima tarea: 1,35Apuntar boton prox serie ficheros:

1,10Click proxima serie ficheros: 0,20

Animación serie de ficheros: 1Prox tarea: 1,35

Apuntar fichero "G": 1,10Click fichero "G": 0,20

Animación fichero G: 2

Proxima tarea: 1,35Leer etiquetas x 4: 5,40

Proxima tarea: 1,35Apuntar GON: 1,10

Click GON: 0,20Animación Cajón GON: 2

Proxima tarea: 1,35Leer Apellido, Nombre x 5: 6,75

Proxima tarea: 1,35Apuntar Gonzalez, Diego: 1,10

Click Gonzalez, Diego: 0,20

Obtuvimos la ficha:

28.10 segundos

Beneficio eliminar animaciones:9 segundos

Total sin animaciones:

19,1 segundos

Diseño de Interacción •MEMBER

• Problemas bien definidos

• Algoritmos

• Resolución lineal

• Metodología estructurada

• Foco en análisis y documentación

• Problemas dinámicos

• Heurísticas

• Resolución asintótica

• Metodología ágil

• Foco en entregables

¿Qué estamos tratando de resolver?

48

Diseño de Interacción •MEMBER

Proceso lineal

1. Definición de requerimientos.

2. Diseño y desarrollo a nivel de producción.

3. Entrega.

49

Diseño de Interacción •MEMBER

Proceso lineal interminable

1. Definición de requerimientos.

2. Diseño y desarrollo a nivel de producción.

3. Entrega.

4. No es lo que el cliente quería,retrocede tres casilleros.

5. Se repite hasta el hartazgo de unao ambas partes.

50

Diseño de Interacción •MEMBER

Proceso convergente

1. Objetivos y análisis inicial.

2. Diseño y desarrollo en iteracionesavanzando progresivamente en:

• Funcionalidad

• Estructura y elementos

• Lenguaje visual

3. Entrega y puesta en producción.

51

Diseño de Interacción •MEMBER

Diseño Centrado en el Usuario:Hipótesis inicial de casos de uso

52

• Modalidad de atención: mostrador, teléfono y buzón

• Búsqueda de clientes y títulos

• Alta de un cliente

• Alta de nueva película

• Cliente alquila más de una película

• Cliente devuelve películas y alquila otras

• Carga de devoluciones de buzón

• Copia dañada

• Reporte de atrasos

Diseño de Interacción •MEMBER

Resultados del Relevamiento(un videoclub, dos usuarios)

• Procesos y problemas reales del negocio

• Gestión actual, áreas de mejora

• Aprox. 5000 clientes y 5000 películas

• Los clientes casi nunca saben el Nro. de Cliente, menos aún cuando no son titulares

• Se dan de alta 10 a 20 títulos por día, con datos mínimos

• Cargar devoluciones de buzón puede llevar toda la mañana

• Muchas copias para una película

• No se dan clientes de baja

• No tomamos requerimientos del usuario.Nos enfocamos en lo que el usuario hace.

53

Diseño de Interacción •MEMBER

Casos de uso reales priorizados

54

• Modalidad de atención: mostrador, teléfono y buzón

• Búsqueda de clientes: por nombre del titular, dirección o teléfono.

• Búsqueda de copias: por título o código

• Cliente alquila hasta 3 películas• Cliente devuelve hasta 3

películas• Cliente devuelve hasta 3

películas y alquila hasta 3• Alta de 20 nuevos títulos,

asignación de copias

• Carga de 40 devoluciones de buzón

• Alta o modificación de un cliente

• Editar película: ABM copias, “baja” si no hay copias

• Copia dañada• Listado de películas por

géneros / estrenos• Reporte de atrasos• ¿Qué temporadas vio el

cliente?• Se desordena fila en mostrador

Diseño de Interacción •MEMBER

Idea: Sistema centrado en la Búsqueda

• ¿Un campo con dos botones?

• ¿Un campo con dos radio buttons y botón “Buscar”?

• ¿Dos campos de búsqueda?

• Tal vez funcione, empezamos un prototipo…

55

Diseño de Interacción •MEMBER

Sistema con dos campos de búsqueda

56

Diseño de Interacción •MEMBER

Sistema con dos campos de búsqueda

57

Diseño de Interacción •MEMBER

Sistema con dos campos de búsqueda

58

Diseño de Interacción •MEMBER

Sistema con dos campos de búsqueda

Diseño de Interacción •MEMBER

Propuesta: un solo campo de búsqueda

60

• Resultado dependiente del contenido

• Ventajas del patrón Instant Search

• Mínimo input

• Corrección sobre la marcha

• Podemos usar [enter] para próxima acción: el proceso es predecible en base a los datos

• Necesitamos prueba de concepto

Diseño de Interacción •MEMBER

Prueba de concepto

61

Prueba de concepto publicada enhttp://kambrica.com/raf08/

Diseño de Interacción •MEMBER

Cuantificación: Búsqueda 2.0

Inicio tarea: 1,35Mover mano al mouse: 0,40

Proxima tarea: 1,35apuntar Buscar: 1,10

click Buscar: 0,20Mover mano al teclado: 0,40

Proxima tarea: 1,35Tipear 3 caratacteres apellido: 0,60

Proxima tarea: 1,35Tipar espacio: 0,20Proxima tarea: 1,35

Tipear 3 caracteres nombre: 0,60

Total: 10,25 segundos

Beneficio de mantener foco en búsqueda: 4,80 segundos

Total manteniendofoco en búsqueda:

5,45 segundos

62

diseño de interacción •MEMBER

• Evitar uso del mouse

• Modelo unificado y consistente

• Metáforas / Referencias: Mail, address book

• Sujeto + verbo

• No intrusivo

• Diseño respetando Guías de diseño de interfaz de Windows Vista / Windows 7

Bases del diseño

63

Diseño de Interacción •MEMBER

Esquema

64

Funciones secundarias

listadopelículas

alquiler

listadoclientes

detalle película

listado copiasSeleccionar copia

Copias + Cliente =

Ficha Cliente

Seleccionarpelícula

Buscar peliculas o clientes

Diseño de Interacción •MEMBER

Buscar peliculas o clientes

Películas

Alquiler: 3 películas

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

Santiago Bustelo 32 años4123-4567

Diego González 32 años4123-4567

Santiago Bustelo 32 años4123-4567

Diego González 32 años4123-4567

Diego González 32 años4123-4567Juan de los Palotes 1638Deuda $67

Clientes

Activar Cliente

+

+

Alquilar a Diego González

78079

78079

78079

78079

78079

78079

78079

78079

78079

ReservarRelacionadas

78079

78079

78079

78079

La Rosa Púrpura del Cairo (1985)The Purple Rose of Cairo

La Rosa Púrpuradel Cairo#78909

Mia FarrowJeff DanielsDanny AielloIrving MetzmanStephanie Farrow

Actores

Woody AllenDirectorSátira, Comedia, Woody AllenGéneros

1 hora 22 minutosDuración

La Rosa Púrpuradel Cairo#78909

La Rosa Púrpuradel Cairo

El ciudadanoEterno resplandor de una mente...Yo sé que tu sabes que yo sé

reservada

Mockup avanzado65

Diseño de Interacción •MEMBER

66

Mockup final

Diseño de Interacción •MEMBER

• Alta diaria de 20 nuevas películas

• Cliente devuelve y alquila en mostrador

• Carga de 40 devoluciones por buzón

• Reporte de atrasos

Ejemplos de 4 casos de uso

67

Diseño de Interacción •MEMBER

Alta diaria de20 nuevas películas

• Caso 1 / 4

• Reducción de input y pasos

• Eliminar tareas repetitivas

• Aplicación 2.0

• Mejores datos

68

Diseño de Interacción •MEMBER

Alta diaria de 20 nuevas películas

69

Diseño de Interacción •MEMBER

Alta diaria de 20 nuevas películas

70

Diseño de Interacción •MEMBER

Alta diaria de 20 nuevas películas

71

Diseño de Interacción •MEMBER

Alta diaria de 20 nuevas películas

72

Diseño de Interacción •MEMBER

Alta diaria de 20 nuevas películas

73

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

• Caso 2 / 4

• Anticipación, no es necesario buscar al cliente

• Minimizar input y pasos

• Permitir operaciones en cualquier orden

74

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

75

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

76

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

77

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

78

Diseño de Interacción •MEMBER

Devolución de40 películas

• Caso 3 / 4

• Soportar un proceso de lotes con el mismo modelo de interacción

79

Diseño de Interacción •MEMBER

Devolución de 40 películas

80

Diseño de Interacción •MEMBER

Devolución de 40 películas

81

Diseño de Interacción •MEMBER

Devolución de 40 películas

82

Diseño de Interacción •MEMBER

Devolución de 40 películas

83

Diseño de Interacción •MEMBER

• Caso 4 / 4

• Comprensión del caso de uso:Lo importante no es el listado, sino la notificación

Reporte de atrasos

84