Este documento presenta sobre el diseño de interacción y la usabilidad. Habla sobre la Interaction Design Association (IxDA), una red global dedicada a la práctica profesional del diseño de interacción. También describe el proceso de diseño centrado en el usuario, incluyendo la definición de requisitos, el desarrollo iterativo de prototipos y las pruebas de usabilidad. El objetivo final es crear interfaces que sean efectivas, eficientes y satisfactorias para los usuarios.

1. Diseño de Interacción:
Usabilidad aplicada
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/ar
Santiago Bustelo
Director de diseño, Kambrica
IxDA Latin America Regional Coordinator
Día de la Usabilidad • Bogotá, Colombia
11 de noviembre, 2011
@sbustelo
M E M B E R

2. Diseño de Interacción •M E M B E R
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 Latina
y creciendo!
• ixda.org/local/ixda-bogota
2
ixda.org

3. Diseño de Interacción •M E M B E R
• 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

4. DISEÑO DE
INTERACCIÓN
INTERACCIÓN
HUMANO-COMPUTADOR
IxD
DISEÑO
INDUSTRIAL
DISEÑO
DE SONIDO
DI
ARQUITECTURAARQUITECTURA
DE INFORMACIÓN
ARQ
DISEÑO DE
EXPERIENCIAS
UX
AI
DISEÑO
GRÁFICO
DG
HCI
Señalética
Entornos
Interactivos
Diseño de
Interfaces
Computación
ubicua
Ingeniería de
Usabilidad
Controles
Diseño de
Información
Navegación
PRODUCCIÓN
DE CONTENIDO
(Texto, Imagen,
Video, sonido)
Dan Saffer, Designing for Interaction

5. Diseño de Interacción •M E M B E R
Funciones del diseño
Información
Presentación
Uso
5

6. Diseño de Interacción •M E M B E R
Forma versus Función
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031
6

7. Diseño de Interacción •M E M B E R
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

8. Diseño de Interacción •M E M B E R
• 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

9. Efectividad: Incorporando al usuario

10. Diseño de Interacción •M E M B E R
Eficiencia: análisis y cuantificación
10

11. Diseño de Interacción •M E M B E R
Satisfacción: experiencia óptima
Simplificación del modelo de Mihaly Csikszentmihalyi
Frustración
Fluencia
desafío
habilidad
Aburrimiento
11

12. Diseño de Interacción •M E M B E R
¿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

13. Diseño de Interacción •M E M B E R
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

14. Diseño de Interacción •M E M B E R
Sitios que te inspiran vs. sitios que usás
14

15. Diseño de Interacción •M E M B E R
Proceso de diseño
y caso de ejemplo
15

16. Diseño de Interacción •M E M B E R
• 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

17. Diseño de Interacción •M E M B E R
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 en
http://kambrica.com/raf08/
caveman.zip(ejecutable para Windows)

21. 1234

22. 1234

23. 1234
Gonzalez

24. GonzalezDiego760 Rivadavia 5000 11 B Buenos
Aires 12

25. 1234
760

26. No
hay
stock.

29. 1235
760

31. Diseño de Interacción •M E M B E R
Diseñador cavernario
• Metáforas
• Películas: DVDs
• Clientes: Fichas
• Alquileres: Ficha + DVD
• Representación
• Experiencia inmersiva
• Fotorealismo
31

43. Diseño de Interacción •M E M B E R
¿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

44. Diseño de Interacción •M E M B E R
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

45. Diseño de Interacción •M E M B E R
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)

46. Diseño de Interacción •M E M B E R
Cuantificación:
Buscar cliente (v. programador)
46
Inicio tarea: 1,35
Mover mano al mouse: 0,40
Proxima tarea: 1,35
Apuntar menu Clientes: 1,10
click menu Clientes: 0,20
Apuntar menú Clientes »
Modificación: 1,10
click menú Clientes » Modificación:
0,20
Próxima tarea: 1,35
Apuntar campo texto: 1,10
click campo texto: 0,20
Mover mano al teclado: 0,40
Proxima tarea: 1,35
Tipear apellido: 1,60
Mover mano al mouse: 0,40
Proxima tarea: 1,35
point OK: 1,10
click OK: 0,20
Obtuvimos (o no) el dato:
14.75 segundos
Recuperación:
Mover mano al mouse: 0,40
Proxima tarea: 1,35
point Cancel: 1,10
click Cancel: 0,20
Volvemos a abrir el cuadro,
Tipeamos apellido otra vez: 12,32
Mover mano al mouse: 0,40
Proxima tarea: 1,35
apuntarOK: 1,10
click OK: 0,20
Total con recuperación:
32,55 segundos

47. Diseño de Interacción •M E M B E R
Cuantificación:
Buscar cliente (v. diseñador)
47
Inicio tarea: 1,35
Apuntar al fichero home: 1,10
Click Fichero home: 0,20
Animación "files, lots of files¨: 4
Proxima tarea: 1,35
Apuntar boton prox serie ficheros:
1,10
Click proxima serie ficheros: 0,20
Animación serie de ficheros: 1
Prox tarea: 1,35
Apuntar fichero "G": 1,10
Click fichero "G": 0,20
Animación fichero G: 2
Proxima tarea: 1,35
Leer etiquetas x 4: 5,40
Proxima tarea: 1,35
Apuntar GON: 1,10
Click GON: 0,20
Animación Cajón GON: 2
Proxima tarea: 1,35
Leer Apellido, Nombre x 5: 6,75
Proxima tarea: 1,35
Apuntar 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

48. Diseño de Interacción •M E M B E R
• 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

49. Diseño de Interacción •M E M B E R
Proceso lineal
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
49

50. Diseño de Interacción •M E M B E R
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 una
o ambas partes.
50

51. Diseño de Interacción •M E M B E R
Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteraciones
avanzando progresivamente en:
• Funcionalidad
• Estructura y elementos
• Lenguaje visual
3. Entrega y puesta en producción.
51

52. Diseño de Interacción •M E M B E R
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

53. Diseño de Interacción •M E M B E R
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

54. Diseño de Interacción •M E M B E R
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

55. Diseño de Interacción •M E M B E R
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

56. Diseño de Interacción •M E M B E R
Sistema con dos campos de búsqueda
56

57. Diseño de Interacción •M E M B E R
Sistema con dos campos de búsqueda
57

58. Diseño de Interacción •M E M B E R
Sistema con dos campos de búsqueda
58

59. Diseño de Interacción •M E M B E R
Sistema con dos campos de búsqueda

60. Diseño de Interacción •M E M B E R
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

61. Diseño de Interacción •M E M B E R
Prueba de concepto
61
Prueba de concepto publicada en
http://kambrica.com/raf08/

62. Diseño de Interacción •M E M B E R
Cuantificación: Búsqueda 2.0
Inicio tarea: 1,35
Mover mano al mouse: 0,40
Proxima tarea: 1,35
apuntar Buscar: 1,10
click Buscar: 0,20
Mover mano al teclado: 0,40
Proxima tarea: 1,35
Tipear 3 caratacteres apellido: 0,60
Proxima tarea: 1,35
Tipar espacio: 0,20
Proxima tarea: 1,35
Tipear 3 caracteres nombre: 0,60
Total: 10,25 segundos
Beneficio de mantener foco en búsqueda:
4,80 segundos
Total manteniendo
foco en búsqueda:
5,45 segundos
62

63. diseño de interacción •M E M B E R
• 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

64. Diseño de Interacción •M E M B E R
Esquema
64
Funciones secundarias
listado
películas
alquiler
listado
clientes
detalle película
listado copias
Seleccionar copia
Copias + Cliente =
Ficha Cliente
Seleccionar
película
Buscar peliculas o clientes

65. Diseño de Interacción •
M E M B E R
Buscar peliculas o clientes
Películas
Alquiler: 3 películas
La Rosa Púrpura del Cairo
Woody Allen
La Rosa Púrpura del Cairo
Woody Allen
La Rosa Púrpura del Cairo
Woody Allen
La Rosa Púrpura del Cairo
Woody Allen
Santiago Bustelo 32 años
4123-4567
Diego González 32 años
4123-4567
Santiago Bustelo 32 años
4123-4567
Diego González 32 años
4123-4567
Diego González 32 años
4123-4567
Juan de los Palotes 1638
Deuda $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úrpura
del Cairo
#78909
Mia Farrow
Jeff Daniels
Danny Aiello
Irving Metzman
Stephanie Farrow
Actores
Woody AllenDirector
Sátira, Comedia, Woody AllenGéneros
1 hora 22 minutosDuración
La Rosa Púrpura
del Cairo
#78909
La Rosa Púrpura
del Cairo
El ciudadano
Eterno resplandor de una mente...
Yo sé que tu sabes que yo sé
reservada
Mockup avanzado
65

66. Diseño de Interacción •
M E M B E R
66
Mockup final

67. Diseño de Interacción •M E M B E R
• 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

68. Diseño de Interacción •M E M B E R
Alta diaria de
20 nuevas películas
• Caso 1 / 4
• Reducción de input y pasos
• Eliminar tareas repetitivas
• Aplicación 2.0
• Mejores datos
68

69. Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
69

70. Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
70

71. Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
71

72. Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
72

73. Diseño de Interacción •M E M B E R
Alta diaria de 20 nuevas películas
73

74. Diseño de Interacción •M E M B E R
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

75. Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
75

76. Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
76

77. Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
77

78. Diseño de Interacción •M E M B E R
Cliente devuelve y alquila
78

79. Diseño de Interacción •M E M B E R
Devolución de
40 películas
• Caso 3 / 4
• Soportar un proceso de lotes con el mismo
modelo de interacción
79

80. Diseño de Interacción •M E M B E R
Devolución de 40 películas
80

81. Diseño de Interacción •M E M B E R
Devolución de 40 películas
81

82. Diseño de Interacción •M E M B E R
Devolución de 40 películas
82

83. Diseño de Interacción •M E M B E R
Devolución de 40 películas
83

84. Diseño de Interacción •M E M B E R
• Caso 4 / 4
• Comprensión del caso de uso:
Lo importante no es el listado, sino la
notificación
Reporte de atrasos
84

85. Diseño de Interacción •M E M B E R
Reporte de atrasos
85

86. Diseño de Interacción •M E M B E R
Reporte de atrasos
86

87. Diseño de Interacción •M E M B E R
Resultados
Tarea 1.0 2.0 %
Búsqueda 15 a 33 seg. 5.45 seg. 175 a 500 %
Alta de 20 nuevas películas 1.543 seg. 204 seg. 656%
Cliente devuelve y alquila 52 a 87 seg. 7.80 seg. 566%
Buzón 40 devoluciones 636 seg. 156 seg. 300%
Notificación de 9 atrasos 10 a 15 min.? 7 seg. 8400%
87

88. Diseño de Interacción •M E M B E R
• No hay User Experience
sin usuarios (Verónica Traynor)
• Proceso iterativo de análisis y diseño
centrado en la operación del usuario
• Bases racionales, cuantificación, calidad
• Obtener producto como resultado de un
proceso, y satisfaciendo metas
Conclusiones
88

89. Diseño de Interacción •M E M B E R
Diseño de Interacción en América Latina
Oportunidades
• Interés creciente en Usabilidad
• Diseño como requerimiento
Desafíos
• Baja integración del diseñador con
Desarrollo y Negocios
• Falta de visión y lenguaje común
• Falta de percepción de valor
• Poca madurez del mercado
• Alto riesgo de innovación
deseable
usable
confiable
funcional
89

90. w w w . k a m b r i c a . c o m