Presentación de Santiago Bustelo en GoogleLaunchPadBA el 9 de noviembre de 2016.

1. EXPERIENCIA DE USUARIO
DISEÑAR MÁS ALLÁ DE
LAS PANTALLAS
GoogleLaunchPadBA
Santiago Bustelo
User Experience Director, Kambrica
IxDA Buenos Aires Local Group Coordinator
Miércoles 9 de noviembre, 2016
M E M B E R
Obra bajo licencia Creative
Commons Reconocimiento 4.0
Internacional

2. Esta presentación está publicada bajo licencia
Creative Commons Atribución-CompartirIgual 4.0 Internacional (CC BY-SA 4.0)
Usted es libre de:
• Compartir — copiar y redistribuir el material en cualquier medio o formato
• Adaptar — remezclar, transformar y crear a partir del material.
Para cualquier propósito, incluso comercialmente.
El licenciante no puede revocar estas libertades en tanto usted siga los términos de la licencia.
Bajo las condiciones siguientes:
Atribución — Usted debe darle crédito a esta obra de manera adecuada (dar nombre del creador y
de las partes atribuidas, un aviso de derechos de autor, una nota de licencia, un aviso legal, y un
enlace al material), proporcionando un enlace a la licencia, e indicando si se han realizado
cambios. Puede hacerlo en cualquier forma razonable, pero no de forma tal que sugiera que usted
o su uso tienen el apoyo del licenciante.
Compartir igual — Si usted mezcla, transforma o crea nuevo material a partir de esta obra, usted
podrá distribuir su contribución siempre que utilice la misma licencia que la obra original, o una
que aparezca como compatible en https://creativecommons.org/compatiblelicenses.
No hay restricciones adicionales — Usted no puede aplicar términos legales ni medidas tecnológicas que
restrinjan legalmente a otros hacer cualquier uso permitido por la licencia.

3. M E M B E R
ME PRESENTO…
Santiago Bustelo, Consultor en Experiencia de Usuario (UX)
y Diseñador de Interacción.
Fundador y Director de UX, Kambrica.
Fundador y Coordinador IxDA Buenos Aires.
Coordinador IxDA Latinoamérica 2010-2015.
Chair Interaction South America 2014.
Empecé a trabajar en diseño de interacción en 1996.
Desde entonces participé en proyectos para Argentina, Chile,
Colombia, Perú, España, Estados Unidos e Inglaterra, para
empresas de todo tamaño de las más diversas industrias y
también para organismos públicos.
Desde 2001 ha dictado presentaciones y talleres sobre UX,
Usabilidad, Diseño de Interacción y Diseño Centrado en el
Usuario en Argentina, Chile, Colombia, Estados Unidos,
Canadá, Alemania, Irlanda, Finlandia y Países Bajos.

4. M E M B E R
IXDA: INTERACTION
DESIGN ASSOCIATION
Organización mundial abierta, voluntaria y gratuita,
con la misión de liberar a la condición humana de las
malas experiencias que la desafían, avanzando la
disciplina de Diseño de Interacción.
Foro global, más de 80.000 miembros, 175 grupos
locales, 41 grupos en América Latina.
ixda.com.ar
En Argentina: Buenos Aires, Córdoba, Corrientes /
Resistencia, La Plata, Mar del Plata, Mendoza, Rosario,
Santa Fe y Tucumán.
isa.ixda.org
Conferencia Interaction South America 2017:
Noviembre 2017, Florianopolis, Brasil

5. M E M B E R
ESCALABILIDAD DEL
NEGOCIO

6. Startup: experimentar para llegar a un modelo…

7. …escalable y replicable.

10. kambrica.com •M E M B E R
RESTAURANTE TRADICIONAL
10
1. Toma de pedido
2. Entrega
3. La cuenta

11. kambrica.com •M E M B E R
RESTAURANTE DE COMIDA RÁPIDA
11
1. Toma de pedido y pago
2. Entrega

12. kambrica.com •M E M B E R
• Optimización de procesos
• Oferta limitada
• Usuarios como parte del sistema
• Autoservicio
• No sobremesa
MODELO DE NEGOCIOS DE COMIDA RÁPIDA:
BAJO COSTO, ALTA ROTACIÓN
12

13. kambrica.com •M E M B E R
SILLAS ANTI-SOBREMESA
DISEÑANDO EL ENTORNO,
INFLUENCIAMOS EL COMPORTAMIENTO
13

14. kambrica.com •M E M B E R
EL SOFTWARE ESCALA
INFINITAMENTE
…SI ESTÁ BIEN CONSTRUIDO
…Y LA GENTE LO USA.
14
LA INDUSTRIA DEL AUTOSERVICIO

15. M E M B E R
EL VALOR DEL SOFTWARE
ESTÁ DELANTE DE LA
PANTALLA

16. kambrica.com •M E M B E R
UX, DISEÑO DE INTERACCIÓN (IXD),
DISEÑO DE INTERFACES (UI)
16
Interfaz
(User Interface, UI),
(Diseño visual)
Interacción
(Interaction
Design,
IxD)
Experiencia
(User Experience,
UX)
ARTEFACTO USUARIO
Lo que
sucede
delante de
la pantalla
Lo que
sucede en
la pantalla

17. kambrica.com •M E M B E R
Lo que experimenta una
persona (percepciones,
emociones, ideas,
acciones) usando un
producto, sistema o
servicio.
Satisfacción de las
promesas de la marca y la
puesta en práctica de sus
valores.
EXPERIENCIA DE USUARIO
17

18. kambrica.com •M E M B E R
LAS MALAS EXPERIENCIAS YA FORMAN PARTE
DE LA CULTURA POPULAR
18
XKCD: University WebsiteOffice Space (1999)

19. kambrica.com •M E M B E R
¿POR QUÉ LAS MALAS EXPERIENCIAS SON TAN
FRECUENTES?
“ Nadie quiere creer que ofrece un producto de mala
calidad o deficiente, porque nadie se propone un
mal diseño como meta. Es siempre un riesgo. Los
malos diseños y malas experiencias suceden”.
(Kaleem Khan, consultor de UX)
19

20. kambrica.com •M E M B E R
NOS HACEMOS UNA IMAGEN
MENTAL DE LA REALIDAD, Y
OPERAMOS CONTRA ESA IMAGEN.
PERO LOS RESULTADOS LOS TRAE
LA REALIDAD.
20
¿POR QUÉ LAS MALAS EXPERIENCIAS SON TAN
FRECUENTES?

21. kambrica.com •M E M B E R
PROCESO ITERATIVO LEAN: DECISIONES Y
EJECUCIÓN BASADAS EN CONOCIMIENTO
VALIDADO
21
Ideas
ProductoDatos
CONSTRUIR
MEDIR
APRENDER

22. M E M B E R
EMPRENDIENDO
DESDE LA CAVERNA
Verónica Traynor: UX y la caverna de Platón

23. kambrica.com •M E M B E R
CASO DE EJEMPLO
Producto: Software de administración de un videoclub
Nuestros personajes:
23
Programador
cavernario
Diseñador
cavernario
Emprendedor
cavernario
Iconos: FastIcon

24. kambrica.com •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
Ejemplo desarrollado por Diego González,
Fundador Lagash Systems
24

28. 1234

29. 1234

30. 1234
Gonzalez

31. GonzalezDiego760 Rivadavia 5000 11 B Buenos Aires 12

32. 1234
1

33. No hay stock.

37. 1

38. 1235
1

40. kambrica.com •M E M B E R
DISEÑADOR CAVERNARIO
Metáforas:
• Películas: DVDs
• Clientes: Fichas
• Alquileres: Ficha + DVD
Representación:
• Experiencia inmersiva
• Fotorealismo
40

52. kambrica.com •M E M B E R
EMPRENDEDOR CAVERNARIO
• Relevamiento competitivo
• Definición del mercado
• Especificación
• Recursos y plan de trabajo
• ????
• Profit!
52

53. Relevamiento competitivo
freemium
Relevamiento competitivo

54. Relevamiento competitivo
screencast
Relevamiento competitivo

55. kambrica.com •M E M B E R
RELEVAMIENTO COMPETITIVO
55
amigable
touch

56. kambrica.com •M E M B E R
DEFINICIÓN DEL MERCADO
56
Foto: Ned Raggett Foto: Andrés Rueda

57. kambrica.com •M E M B E R
“ESPECIFICACIÓN” PARA DISEÑO Y
DESARROLLO
57
✓Más potente y con más funciones que la
competencia.
✓Gestión de uno o múltiples locales.
✓Informes y estadísticas.
✓Cálculo automático de recargos.
✓Módulo avanzado de búsquedas.
✓Tipos de artículos y formatos
configurables.
✓Módulo de Promociones.
✓Sistema de premios y puntos de cliente.
✓Soporte de lectores de códigos de
barras.
✓Módulo de diseño de catálogos.
✓Módulo de diseño de páginas web.
✓Control de envíos y retiros a domicilio
(delivery) con emisión de ticket de retiro.
✓Creación de abonos de alquiler con fecha
de vencimiento.
✓Módulo de envío de catálogo por e-mail
a socios.
✓Interfaz amigable y fácil de usar.

58. kambrica.com •M E M B E R
RECURSOS Y “METODOLOGÍA”
58
Ejercerpresión
Ejercerpresión

59. Expectativa
En 3 meses
Foto: Wikipedia

60. Resultado
Después de
1 año
Foto: Wikipedia

61. M E M B E R
SALIENDO DE
LA CAVERNA
Verónica Traynor: UX y la caverna de Platón

62. kambrica.com •M E M B E R
CUANTIFICACIÓN: KLM-GOMS
63
Cada operación del usuario tiene un costo.
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

63. kambrica.com •M E M B E R
CUANTIFICACIÓN:
BUSCAR CLIENTE (V. PROGRAMADOR)
64
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

64. kambrica.com •M E M B E R
CUANTIFICACIÓN:
BUSCAR CLIENTE (V. DISEÑADOR)
65
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

65. kambrica.com •M E M B E R
CASO CENTRADO EN EL USUARIO
66
• Objetivos antes que
requerimientos
• Proceso iterativo
• Construir prototipos
• Medir, validar con usuarios
• Aprender, ajustar, mejorar
hasta lograr objetivos Usaurio
Ideas
ProductoDatos
CONSTRUIR
OBSERVAR,
MEDIR,
VALIDAR
APRENDER

66. kambrica.com •M E M B E R
CASOS DE USO: HIPÓTESIS INICIAL
• 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
67

67. Validamos casos de uso con usuarios reales

68. kambrica.com •M E M B E R
RESULTADOS DEL RELEVAMIENTO
(UN VIDEOCLUB, DOS USUARIOS)
No tomamos requerimientos de los usuarios.
Nos enfocamos en lo que los usuarios hacen.
• 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
69
¡Relevar un par de usuarios es
infinitamente mejor que no

69. kambrica.com •M E M B E R
CASOS DE USO REALES Y PRIORIZADOS
1. Modalidad de atención: mostrador,
teléfono
2. Búsqueda de clientes: por nombre del
titular, dirección o teléfono.
3. Búsqueda de copias: por título o
código
4. Alta o modificación de un cliente
5. Editar película: ABM copias, “baja” si no
hay copias
6. Cliente alquila hasta 3 películas
7. Cliente devuelve hasta 3 películas
8. Cliente devuelve hasta 3 películas y
alquila hasta 3
9. Alta de 20 nuevos títulos, asignación
de copias
10.Modalidad de atención: buzón
11.Carga de 40 devoluciones de buzón
12.Copia dañada
13.Listado de películas por géneros /
estrenos
14.Reporte de atrasos
15.¿Qué temporadas vio el cliente?
16.Se desordena fila en mostrador
70

70. PRIMER ITERACIÓN
SISTEMA CON DOS CAMPOS DE BÚSQUEDA

71. PRIMER ITERACIÓN
SISTEMA CON DOS CAMPOS DE BÚSQUEDA

72. PRIMER ITERACIÓN
SISTEMA CON DOS CAMPOS DE BÚSQUEDA

73. PRIMER ITERACIÓN
SISTEMA CON DOS CAMPOS DE BÚSQUEDA

74. kambrica.com •M E M B E R
PROPUESTA: UN SOLO CAMPO DE BÚSQUEDA
• Resultado dependiente del contenido.
No hace falta especificar el tipo de dato.
• Patrón Instant Search
• Búsqueda instantánea en todos los campos de la base, de términos que
empiecen con lo ingresado.
Si hay más de un término (separado con espacios) empleamos AND.
• 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.
75

75. kambrica.com •M E M B E R
PRUEBA DE CONCEPTO
76
Prueba de concepto publicada en
http://kambrica.com/raf08
Datos: XLS del
Videoclub con los
datos esenciales que
hayan ingresado para
Datos: Nombres y
apellidos tomados al
azar del Padrón, con
direcciones y números
de teléfono al azar
correspondientes a un
radio de 10 cuadras
con distribución de

76. ¿Qué casos de uso podemos
resolver con este sencillo motor
de búsqueda instantánea?

78. Buscar nombre de un actor nos
devuelve sólo películas

79. Seguir tipeando luego el
nombre de una película,
permite acotar la búsqueda.

80. ¿Qué pasa si empezamos a
tipear la dirección de un
cliente?

81. …¡Sólo nos aparecen clientes!

82. También podemos mezclar
términos: una calle y parte de
un número de teléfono.

83. kambrica.com •M E M B E R
CUANTIFICACIÓN: BÚSQUEDA 2.0
84
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

84. kambrica.com •M E M B E R
ESQUEMA DE INTERACCIÓN
85
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

85. kambrica.com •M E M B E R
MOCKUP FINAL
86

86. kambrica.com •M E M B E R
CASO: CLIENTE DEVUELVE Y ALQUILA
87

87. kambrica.com •M E M B E R
CASO: CLIENTE DEVUELVE Y ALQUILA
88

88. kambrica.com •M E M B E R
CASO: CLIENTE DEVUELVE Y ALQUILA
89

89. kambrica.com •M E M B E R
CASO: CLIENTE DEVUELVE Y ALQUILA
90

90. kambrica.com •M E M B E R
CASO: DEVOLUCIÓN DE 40 PELÍCULAS
91

91. kambrica.com •M E M B E R
CASO: DEVOLUCIÓN DE 40 PELÍCULAS
92

92. kambrica.com •M E M B E R
CASO: DEVOLUCIÓN DE 40 PELÍCULAS
93

93. kambrica.com •M E M B E R
CASO: DEVOLUCIÓN DE 40 PELÍCULAS
94

94. kambrica.com •M E M B E R
RESULTADOS
95
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%

95. M E M B E R
LOGRANDO RESULTADOS
DELANTE DE LA PANTALLA

96. kambrica.com •M E M B E R
CALIDAD ES LO QUE
NUESTROS USUARIOS
VALORAN. EL RESTO ES
DESPERDICIO.
97
Cuando las personas y las organizaciones
se enfocan en calidad, reducen los costos
innecesarios, logran mayor valor diferencial
y mejores relaciones con sus clientes.
Cuando las personas y las organizaciones
se enfocan en costos, terminan generando
desperdicio barato, mayores costos, peor
calidad y menos valor.
FILOSOFÍA LEAN

97. kambrica.com •M E M B E R
ADOPCIÓN DE PRODUCTOS INNOVADORES:
LA MEJOR ESTRATEGIA ES REQUERIR POCO
CAMBIO DE CONDUCTA (HÁBITOS) DEL USUARIO
98
EASY
SELLS
SMASH
HITS
SURE
FAILURES
LONG
HAULS
Degree of
behaviour
change
required
Degree of product change involved
LOW
LOW HIGH
HIGH
Gourville, John T.: Eager Sellers & Stony Buyers -
Harvard Business Review, Jun 2006, Vol. 84 Issue 6

98. kambrica.com •M E M B E R
KNOWLEDGE GAP: LO QUE EL USUARIO DEBE
SABER PARA USAR EL PRODUCTO, VS. LO QUE
YA SABE ANTES DE USARLO
99
Amado
Tolerado Cauteloso
Odiado Evitado
Uso VoluntarioRequerido
KnowledgeGapPequeñoGrande
Usuarios con
decisión
sobre la
adquisición
Usuarios sin
decisión
sobre la
adquisición
Jared Spool:
Riding the Magic Escalator of Acquired Knowledge

99. kambrica.com •M E M B E R
THE THREE QUESTIONS FOR AN INNOVATION
COMPANY: THE VISION QUESTION
100
Everyone recites the same stories
The experience
of use, not the
biz or tech
Enough to
escape current
constraints
Can everyone on the team describe
theexperienceofusingyourproduct
five years from now?
Jared Spool:
The 3 Qs for Great Experience Design

100. kambrica.com •M E M B E R
THE THREE QUESTIONS FOR AN INNOVATION
COMPANY: THE FEEDBACK QUESTION
101
Has to be recent, otherwise it’s forgotten
Enough time to
see the
subtleties &
nuances
First-hand
exposure to the
experience
In the last six weeks, have you spent
more than two hours watching
someone use your product or a
competitor’s product?
Jared Spool:
The 3 Qs for Great Experience Design

101. kambrica.com •M E M B E R
THE THREE QUESTIONS FOR AN INNOVATION
COMPANY: THE CULTURE QUESTION
102
Frequency makes it part of the culture
Using
celebration to
reward careful
risk taking
This means
you’re taking
risks
In the last six weeks, have you
rewarded a team member for
creating a major design failure?
Jared Spool:
The 3 Qs for Great Experience Design

102. M E M B E R
CASOS REALES

103. M E M B E R
OFFICENET STAPLES

104. Diseñar algoritmos

105. M E M B E R
ENFOQUE: “BUSCAR” EQUIVALE A IR AL
MOSTRADOR A PREGUNTAR

106. Diseñar algoritmos

107. M E M B E R
BUMERAN

108. Bumeran: El usuario genera el valor

109. Bumeran: Visibilidad de procesos

110. M E M B E R
MERCADOSHOPS
DEVELOPERS

114. M E M B E R
MOVISTAR 4G

117. kambrica.com •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
118

118. ¡MUCHAS GRACIAS!
(+54 11) 4783 5661 • Av. Juramento 2059 Piso 4 Of. 408 (C1428DNG)
Santiago Bustelo
User Experience Director
santiago@kambrica.com