Charla presentada en:
- X Encuentro Latinoamericano de Diseño, Universidad de Palermo, 2015
- La Metro, Córdoba, 2013
- Universidad de la Cuenca del Plata, 2013
- UTN Tucumán, 2012
- Día de la Usabilidad - Bogotá, Colombia, 2011
- Microsoft MIX 2008
- Microsoft Regional Architect Forum 2008
………
El acelerado acceso a la tecnología a través de PCs, notebooks, tablets y smartphones, entre otros dispositivos, ha dado origen a una nueva disciplina de gran importancia y no siempre explorada por los profesionales de la web: el diseño de interacción (IxD, por sus siglas en inglés).
En la charla se presenta un caso hipotético de creación de una aplicación en la que se repiten algunos de los problemas comunes a los que enfrentan diseñadores, programadores y emprendedores.
Se muestra cómo se resolvería el mismo encargo desde una visión de UX que integra tecnología, diseño y negocio, exponiendo las diferencias de criterio y proceso, y la aplicación de un modelo cuantificado para comparar los resultados y lograr calidad.
contaminacion del suelo 9.pptx cobntaminacion suelo
Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
1. do
ulas
alquiler
list
cli
detalle película
listado copias
Seleccionar copia
Copias + Cliente =
F
onar
cula
as o clientes
UX y Diseño de Interacción:
Usabilidad aplicada
Santiago Bustelo
User Experience Director, Kambrica
IxDA Buenos Aires Local Group Coordinator
X Encuentro Latinoamericano de Diseño
Universidad de Palermo, 29 de julio 2015
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/ar
@sbustelo
M E M B E R
2. M E M B E R
Me presento…
• Santiago Bustelo, diseñador de interacción.
• Fundador y Director de UX, Kambrica.
• Fundador y Coordinador IxDA Buenos Aires. Coordinador
Regional de IxDA en Latinoamérica 2010-2015. Organizador
de los principales eventos de UX en Argentina desde 2010 y
de Interaction South America 2014.
• Desde 1997 he participado en proyectos de diseño y
desarrollo para Microsoft, Staples, Coca-Cola, HP,
TetraPak, MetLife, HSBC, Telefónica, Jumbo, Molinos,
Banco Santander, Bumeran.com, Guía Óleo y Universidad
de Stanford, entre otros.
• He dictado presentaciones y talleres sobre Usabilidad,
Diseño de Interacción y Experiencia de Usuario (UX)
desde el año 2001 en Argentina, Brasil, Colombia, EEUU,
Canadá, Irlanda y Holanda.
3. Evolución en Experiencia de Usuario •M E M B E R
IxDA (Interaction Design Association)
• Organización 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, 39 grupos en América Latina.
• En Argentina:
• Buenos Aires: ixda.com.ar
• Córdoba: ixdaCba.com.ar
• Corrientes / Resistencia:
facebook/IxdaCorrientesResistencia
• La Plata: ixdaLaPlata.com.ar
• Mar del Plata: facebook/groups/IxDAMDQ
• Mendoza: ixdaMza.com.ar
• Rosario: ixdaRosario.com.ar
• Santa Fe: ixdaSantaFe.com.ar
• Tucumán: ixdaTucuman.com.ar
3
ixda.org
10. Santiago Bustelo (@sbustelo) •M E M B E R
El mundo digital que nosotros construimos
10
• En un mundo cada vez más conectado e
interdependiente, los diseñadores y
desarrolladores tenemos la llave para lograr
que cada producto o servicio interactivo sea
usable y accesible para todas las personas,
sin importar el nivel de alfabetización digital y
las capacidades físicas, sensoriales, e
intelectuales que tengan.
11. Santiago Bustelo (@sbustelo) •M E M B E R
Diseño Centrado en el Usuario
• Filosofía de diseño:
• Creación de productos que resuelvan necesidades concretas de
sus usuarios finales, consiguiendo la mayor satisfacción y mejor
experiencia de uso posible con el mínimo esfuerzo de su parte.
• Proceso de diseño:
• Conocer a fondo a los usuarios finales reales.
• Diseñar un producto que resuelva sus necesidades y se ajuste a
sus capacidades, expectativas y motivaciones.
• Poner a prueba lo diseñado.
11
12. Santiago Bustelo (@sbustelo) •
M E M B E R
User Experience (UX)
“Inventé el término porque pensé que
interfaz y usabilidad eran demasiado
limitados. Quise cubrir todos los aspectos
de la experiencia de una persona con un
sistema, incluyendo el diseño industrial,
gráficos, la interfaz, la interacción física,
y el manual.
Don Norman
12
13. Santiago Bustelo (@sbustelo) •M E M B E R
• Diseño de Experiencias (UX)
• Dirigir la forma en que se siente una persona usando un producto, sistema o
servicio.
• Diseño de Servicios
• Planificar y organizar personas, infraestructura, comunicación y componentes
materiales de un servicio para mejorar su calidad y relación con sus clientes.
• Diseño de Interacción (IxD)
• Define el modelo de operación de productos interactivos para lograr mejores
experiencias para más usuarios.
• Diseño de Interfaces
• Define los elementos concretos empleados en la interacción.
• Diseño visual
• Define lenguaje, carácter e identidad visual del producto.
ABSTRACTO
CONCRETO
UX y Diseño: definir cómo es, cómo funciona
y cómo luce un producto digital
13
15. Santiago Bustelo (@sbustelo) •
M E M B E R
Arquitectura de Información
(IA, Information Architecture)
• Organizar, jerarquizar y nombrar la
información presente en sitios Web,
dispositivos móviles e interfaces en general.
15
16. Santiago Bustelo (@sbustelo) •
M E M B E R
16
Jakob Nielsen, Hoa Lorenger: Prioritizing Web Usability
IA
75% de los problemas de UX involucran IA
17. Santiago Bustelo (@sbustelo) •
M E M B E R
Arq. de Información fuera de la pantalla
17
DISEÑO INTERACTIVO
PARA TODOS:
USABLE Y ACCESIBLE
Señalética: prototipos
Señalética: versión final
18. Santiago Bustelo (@sbustelo) •
M E M B E R
Factores que componen UX
18
time pressure,
pressure of success and fail,
explicit and implicit requirements, etc.
sex, fashion,
habits, norms, language,
symbols, religion, etc.
time, place,
accompanying persons,
temperature, etc.
cultural factorssocial factors
values,
emotions,
expectations,
prior experiences,
physical characteristics,
motor functions,
personality,
motivation,
skills,
age, etc.
user
usability,
functions,
size, weight,
language, symbols,
aesthetic characteristics,
usefulness,
reputation,
adaptivity,
mobility,
etc.
product
context of use
INTERACTION
User Experience
Arhippainen, L., Tähti, M. (2003). Empirical Evaluation of User Experience in Two Adaptative Mobile Application Prototypes. Proceedings of the 2nd
International Conference on Mobile and Ubiquitous Multimedia, 10–12 December, 2003, Norrköping, Sweden.
Espacio de diseño
Impacto
20. Santiago Bustelo (@sbustelo) •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
20
21. Santiago Bustelo (@sbustelo) •M E M B E R
Forma y Función
21
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
22. Santiago Bustelo (@sbustelo) •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
22
25. Santiago Bustelo (@sbustelo) •M E M B E R
Satisfacción: experiencia óptima
Simplificación del modelo de Mihaly Csikszentmihalyi
Frustración
Fluencia
desafío
habilidad
Aburrimiento
25
27. Santiago Bustelo (@sbustelo) •M E M B E R
Parte 1: Diseñando desde la caverna
27
Verónica Traynor:
UX y la caverna de Platón
28. Santiago Bustelo (@sbustelo) •M E M B E R
• Producto: Software de administración de un videoclub
• Nuestros personajes:
Caso de ejemplo
28
Programador
cavernario
Diseñador
cavernario
Emprendedor
cavernario
Iconos: FastIcon
29. Santiago Bustelo (@sbustelo) •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
29
45. Santiago Bustelo (@sbustelo) •M E M B E R
Diseñador cavernario
• Metáforas
• Películas: DVDs
• Clientes: Fichas
• Alquileres: Ficha + DVD
• Representación
• Experiencia inmersiva
• Fotorealismo
45
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57. Santiago Bustelo (@sbustelo) •M E M B E R
Emprendedor cavernario
• Relevamiento competitivo
• Definición del mercado
• Especificación
• Recursos y plan de trabajo
• ????
• Profit!
57
62. Santiago Bustelo (@sbustelo) •M E M B E R
“Especificación” para diseño y desarrollo
62
✓ 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.
67. Santiago Bustelo (@sbustelo) •M E M B E R
¿Qué tienen en común
los tres casos anteriores?
67
• Diseño sin intención / autoreferencial
• El usuario final no participa del proceso
• Proceso lineal
• Falta de metodología
• Falta de política de calidad
68. Santiago Bustelo (@sbustelo) •M E M B E R
Diseño y Usabilidad
• Siempre ocurren
• A un producto no le “falta” diseño o usabilidad.
En todo caso, su diseño o usabilidad son malos.
• Diseño sin intención: la interfaz no se diseña, se comete.
• Diseño autoreferencial: quien diseña (o comete) la interfaz considera
que representa al usuario.
• Son atributos cualitativos intrínsecos al producto
• Como la performance, no se pueden “agregar”.
• Son definidos por el elemento más débil y afectados por todos los que
construyen el producto.
68
69. Santiago Bustelo (@sbustelo) •
M E M B E R
La Calidad se declara en un equipo
69
Política de Calidad
Procesos
Técnicas
Herramientas
70. Santiago Bustelo (@sbustelo) •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.
70
71. Santiago Bustelo (@sbustelo) •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 o el usuario querían,
retrocede tres casilleros.
5. Se repite hasta el hartazgo de una
o ambas partes.
71
72. Santiago Bustelo (@sbustelo) •M E M B E R
¿Cuándo está terminado nuestro trabajo?
(criterio de Calidad)
• Cuando nos gusta a nosotros
• Cuando funciona como queríamos
• Cuando le gusta al cliente
• Cuando el usuario logra lo que esperábamos
72
73. Santiago Bustelo (@sbustelo) •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
Entender el tipo de problema
73
El proceso modela el resultado.
74. Santiago Bustelo (@sbustelo) •M E M B E R
Design thinking
• Los diseñadores trabajan en iteraciones
en las que simultáneamente se entiende
el problema y se formulan soluciones.
• Dos maneras de entender el problema:
• Esfuerzos para entender información y
requerimientos.
• Simulaciones de situaciones, hipótesis
de soluciones y consecuencias.
• Procesos divergentes (exploración) y
convergentes (elaboración).
74
Wicked Problems & Social Complexity -
Jeff Conklin, Ph.D.
75. Santiago Bustelo (@sbustelo) •M E M B E R
Proceso convergente e iterativo
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteraciones
avanzando y validando progresivamente:
• Funcionalidad
• Estructura y elementos
• Lenguaje visual
3. Entrega y puesta en producción.
4. Iteración de todo el proceso.
75
76. Santiago Bustelo (@sbustelo) •M E M B E R
Caso Centrado en el Usuario
• Proceso de diseño y desarrollo
convergente e iterativo
• Evaluación competitiva, identificación de
oportunidades
• Definición preliminar del modelo
• Validación y ajuste del modelo con
usuarios
• Priorización y estrategia de versiones
• Prototipado de la interfaz
• Pruebas con usuarios y ajuste de
prototipos
• Metodología ágil
• Pruebas de usabilidad y QA antes de
cada lanzamiento
76
Usaurio
77. Santiago Bustelo (@sbustelo) •M E M B E R
Cuantificación: KLM-GOMS
Cada operación del usuario tiene un costo.
77
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)
78. Santiago Bustelo (@sbustelo) •M E M B E R
Cuantificación:
Buscar cliente (v. programador)
78
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
79. Santiago Bustelo (@sbustelo) •M E M B E R
Cuantificación:
Buscar cliente (v. diseñador)
79
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
80. Santiago Bustelo (@sbustelo) •M E M B E R
Casos de uso: hipótesis inicial
80
• 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
81. Santiago Bustelo (@sbustelo) •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
81
82. Santiago Bustelo (@sbustelo) •M E M B E R
Priorización y estrategia de versiones
82
v. 1.0 v. 2.0 v. 3.0 v. 4.0 v. 5.0 v. 6.0
83. Santiago Bustelo (@sbustelo) •M E M B E R
Casos de uso reales y priorizados
83
• Modalidad de atención: mostrador,
teléfono
• Búsqueda de clientes: por nombre del
titular, dirección o teléfono.
• Búsqueda de copias: por título o código
• Alta o modificación de un cliente
• Editar película: ABM copias, “baja” si no
hay copias
• 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
• Modalidad de atención: buzón
• Carga de 40 devoluciones de buzón
• Copia dañada
• Listado de películas por géneros /
estrenos
• Reporte de atrasos
• ¿Qué temporadas vio el cliente?
• Se desordena fila en mostrador
84. Santiago Bustelo (@sbustelo) •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…
84
89. Santiago Bustelo (@sbustelo) •M E M B E R
Propuesta: un solo campo de búsqueda
89
• Resultado dependiente del contenido.
No hace falta especificar el tipo de dato.
• 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
91. Santiago Bustelo (@sbustelo) •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
91
92. Santiago Bustelo (@sbustelo) •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
92
93. Santiago Bustelo (@sbustelo) •M E M B E R
Esquema
93
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
94. Santiago Bustelo (@sbustelo) •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
94
96. Santiago Bustelo (@sbustelo) •M E M B E R
Caso: Cliente devuelve y alquila
• Anticipación, no es necesario buscar al
cliente
• Minimizar input y pasos
• Permitir operaciones en cualquier orden
96
106. Santiago Bustelo (@sbustelo) •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%
106
107. Santiago Bustelo (@sbustelo) •M E M B E R
• No hay Experiencia de Usuario sin usuarios
• 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
107
108. 18 al 21 de Noviembre 2015
Córdoba, Argentina
isa.ixda.org