Santiago BusteloDirector de diseño, KambricaIxDA Central and South America Regional Coordinator
Universidad del Museo Social Argentino23 de abril 2013
Experiencia de Usuario (UX)Los públicos en primer plano
@sbustelo
Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar
MEMBER
MEMBER
Me presento…
• Santiago Bustelo, diseñador de interacción.• Fundador y Director de Diseño, Kambrica.
• Fundador y Coordinador IxDA Buenos Aires y Coordinador Regional de IxDA en Latinoamérica. 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.
Evolución en Experiencia de Usuario •MEMBER
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 76.000 miembros, 160 grupos locales, 36 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: @IxDAMDQ• Mendoza: ixdaMza.com.ar• Rosario: ixdaRosario.com.ar• Tucumán: ixdaTucuman.com.ar
3
ixda.org
Santiago Bustelo (@sbustelo) •MEMBER
¿Qué son “malas experiencias”?
4
Santiago Bustelo (@sbustelo) •MEMBER
5
Santiago Bustelo (@sbustelo) •MEMBER
6
Santiago Bustelo (@sbustelo) •MEMBER
7
Santiago Bustelo (@sbustelo) •MEMBER
8
Santiago Bustelo (@sbustelo) •MEMBER
9
Santiago Bustelo (@sbustelo) •MEMBER
10
Santiago Bustelo (@sbustelo) •MEMBER
11
UX Errors (Flickr Group):Stove Burners…
Santiago Bustelo (@sbustelo) •MEMBER
12
Santiago Bustelo (@sbustelo) •MEMBER
Experiencia de Usuario(UX, User Experience)
“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
13
Santiago Bustelo (@sbustelo) •MEMBER
Las malas experiencias ya forman parte de la cultura popular
14
XKCD: University WebsiteOffice Space (1999)
Santiago Bustelo (@sbustelo) •MEMBER
¿Por qué las malas experienciasson tan frecuentes?
15
“ 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)
Santiago Bustelo (@sbustelo) •MEMBER
Diseñar experiencias(en lugar de cometerlas)
16
Santiago Bustelo (@sbustelo) •MEMBER
¿Qué entendemos por diseño?
• Problemas complejosque involucran al ser humano
• Una solución de entre varias posibles
• Dirigir los resultados con propósito
17
Diseño de Interacción •MEMBER
Diseño Centrado en el Usuario
• Filosofía de diseño:
• Creación de productos y servicios que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo.
• Proceso de diseño:
• Conocer a fondo a los usuarios finales reales.
• Diseñar un producto o servicio que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones.
• Poner a prueba lo diseñado.
18
Santiago Bustelo (@sbustelo) •MEMBER
• 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
Diseñar la experiencia: decisiones superiores a diseñar el artefacto
19
Santiago Bustelo (@sbustelo) •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
20
Santiago Bustelo (@sbustelo) •MEMBER
Forma y Función
22
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
Santiago Bustelo (@sbustelo) •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
24
Santiago Bustelo (@sbustelo) •MEMBER
Diseño de servicios:Restaurante tradicional
25
1. Toma de pedido
2. Entrega
3. La cuenta
Santiago Bustelo (@sbustelo) •MEMBER
Restaurante de comida rápida
26
1. Toma de pedido y pago
2. Entrega
Santiago Bustelo (@sbustelo) •MEMBER
Modelo de negocios de comida rápida:bajo costo, alta rotación
• Optimización de procesos
• Oferta limitada
• Usuarios como parte del sistema
• Autoservicio
• No sobremesa
27
Santiago Bustelo (@sbustelo) •MEMBER
Sillas anti-sobremesaDiseñando el entorno, influenciamos el comportamiento
28
Santiago Bustelo (@sbustelo) •MEMBER
Un solo entorno, varias consecuencias
• Distintos usuarios
• Distintos momentos de un usuario
• El todo es más que la suma de las partes
29
Santiago Bustelo (@sbustelo) •MEMBER
30
diseño de laExperiencia
del usuario
diseño de laOperación
del usuario
El usuario en rol activo:un problema complejo
Definición del producto o servicio
Santiago Bustelo (@sbustelo) •MEMBER
Problemas bien definidos
• Es posible definir estado inicial, estado deseado, y camino más corto.
• Se aplican algoritmos: secuencias estructuradas de pasos que garantizan “la” solución.
• Metodología secuencial.
• Foco en análisis y documentación.
Problemas complejos
• El problema no es entendido hasta no haberlo resuelto.
• Se trabajan de forma heurística, en un proceso de prueba y error para aproximarse a “una” solución.
• Metodología ágil.
• Foco en entregables.
Tipos de problema
31
Santiago Bustelo (@sbustelo) •MEMBER
Proceso lineal:para problemas bien definidos
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
32
Santiago Bustelo (@sbustelo) •MEMBER
Proceso lineal interminableante problemas complejos
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 o lo queel usuario necesitaba,retrocede tres casilleros.
5. Se repite hasta el hartazgo de unao ambas partes.
33
Santiago Bustelo (@sbustelo) •MEMBER
¿Cuándo está terminado el diseño de UX?
• Cuando nos gusta a nosotros
• Cuando funciona como queríamos
• Cuando le gusta al cliente
• Cuando el usuario logra lo que esperábamos
34
Santiago Bustelo (@sbustelo) •MEMBER
• 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).
Design Thinking:Cómo trabajan los diseñadores
35
Wicked Problems Social Complexity - Jeff Conklin, Ph.D.
Santiago Bustelo (@sbustelo) •MEMBER
Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteracionesavanzando y validando progresivamenteaspectos del producto, de general a particular.
3. Entrega.
36
Santiago Bustelo (@sbustelo) •MEMBER
Objetivos vs. Requerimientos
Objetivos: para quéejecutamos el proyecto
• Foco en los problemas a resolver, no en funcionalidades ni soluciones.
• Medibles de forma objetiva.
• Parámetro temporal definido para el cumplimiento.
Requerimientos: qué nos compromemos a hacer
• Especifican una función o atributo visible de un producto.
• Son propuestas de cómo satisfacer un objetivo.
• Son por definición limitantes.
37
Santiago Bustelo (@sbustelo) •MEMBER
Diseñar la experiencia vs. soluciones mágicas
38
“ La mayoría de los clientes espera que diseñar la experiencia sea una actividad discreta, que resuelva todos sus problemas con una única especificación o estudio. Debe ser un esfuerzo constante, un proceso de aprendizaje continuo sobre los usuarios, respondiendo a sus comportamientos, y mejorando el producto o servicio”.
Dan Brown, consultor de UX
Santiago Bustelo (@sbustelo) •MEMBER
Principales técnicas de UX
39
El usuario en primer plano
Santiago Bustelo (@sbustelo) •MEMBER
• Diseño Centrado en el Usuario versus:
• Diseño autoreferencial
• Diseño centrado en la tecnología
• Diseño centrado en el sponsor
• Diseño centrado en la competencia
Usuarios reales en el proceso de diseño
40
Santiago Bustelo (@sbustelo) •MEMBER
¿Qué es un usuario?
• No está viciado por el ejercicio de la profesión ni por el proceso de conceptualización.
• Tiene o puede representar intención de usar el producto o servicio para lograr un objetivo.
• Tiene o puede representar el modelo mental del público al que está destinado el producto o servicio.
• No necesita ser una muestra demográfica.
“La prueba con el usuario no tiene que ser perfecta.Tiene que existir” ( Jared Spool)
41
Diseño de Interacción •MEMBER
Entendiendo al usuario: más que simplemente escuchar
42
Pide
Reactivo
Quiere
Proactivo
Necesita
Creativo
Santiago Bustelo (@sbustelo) •MEMBER
Técnicas de relevamiento
Entrevistas, Focus group
Card sortingMapeo ConceptualConstrucción de Personas/Arquetipos
Pruebas de usabilidadPrototipado iterativoRelevamiento Contextual
43
PIDE QUIERE NECESITA
Santiago Bustelo (@sbustelo) •MEMBER
Los usuarios no son ratas de laboratorio44
XFoto: National Chiao Tung University
Santiago Bustelo (@sbustelo) •MEMBER
Card Sorting45
Santiago Bustelo (@sbustelo) •MEMBER
Mapeo conceptual46
Foto: Craig Duncan, United Nations
Santiago Bustelo (@sbustelo) •MEMBER
Construcción de Personas o Arquetipos
• Herramienta muy discutida: es difícil evaluar si lo hicimos bien.
• Permite generar empatía en el equipo con los usurios finales.
• Basar las personas en relevamiento y datos reales.
• Poner foco en objetivos y actividades, no en detalles personales.
• Relacionadas con el producto. No se reusan.
• Es más importante el relevamiento que el entregable.
47
Inés, Contadora (73 años)• Lleva una vida activa. Para mantener
las expensas bajas para todos, se hace cargo de la administración de su edificio.
• Trabajó con computadoras las últimas décadas. Las considera herramientas, no le interesa cómo funcionan.
• Como millones de adultos mayores, Inés sufre de degeneración macular asociada a la edad. Tiene dificultad en leer textos pequeños o con poco contraste. Sabe ampliar el texto en Explorer, pero no funciona en todos los sitios.
• Tiene un ligero temblor en la mano derecha. Usar el mouse a veces resulta un desafío, particularmente con links o botones muy pequeños. Prefiere usar el teclado.
• Las páginas que Inés puede leer y usar sin problemas, funcionan muy bien en la pantallita de nuestro celular.
Foto kellyCDB (CC)
“La otra noche fuimos al teatro con las chicas. ¡Qué buenos actores! Hacía tiempo que no me reía tanto”.
Santiago Bustelo (@sbustelo) •MEMBER
Pruebas de usabilidad48
Santiago Bustelo (@sbustelo) •MEMBER
Pruebas de usabilidad: usuarios reales
• Hasta que no testeamos, sólo podemos tener hipótesis.
• Testear con 5 usuarios revela el 80% de los problemas de usabilidad presentes en el producto.
• Pruebas rápidas y de gran impacto cualitativo.
• Observación y análisis de operación para resolver tareas solicitadas.
• No se toman requerimientos del usuario. Nos enfocamos en lo que el usuario hace.
49
Usa
bilit
y pr
oble
ms
foun
d 100%
75%
50%
25%
0%0 3 6 9 12 15
Number of Test Users
Jakob Nielsen: Why You Only Need to Test with 5 Users
Santiago Bustelo (@sbustelo) •MEMBER
Pruebas con usuarios
• Preguntar y observar sin condicionar.
• Tomar con cuidado las hipótesis del usuario.
• Buscamos validar o refutar una hipótesis de diseño,y obtener material para nuevas hipótesis:
• modelo mental del usuario
• operabilidad percibida (affordance) de la interfaz
• proceso de decisión del usuario
50
Santiago Bustelo (@sbustelo) •MEMBER
Prototipado iterativo51
Santiago Bustelo (@sbustelo) •MEMBER
Prototipado iterativo52
Santiago Bustelo (@sbustelo) •MEMBER
53
Netbook escolar
Bebé
Relevamiento contextual
llamadas alfijo y celular
Fuera de cámara:hijos (4 y 7 años)
Santiago Bustelo (@sbustelo) •MEMBER
UX en Museos
54
Santiago Bustelo (@sbustelo) •MEMBER
Musée d'Art et d'Histoire, Ginebra55
@relaxintheair:Workshop au musée
Santiago Bustelo (@sbustelo) •MEMBER
Musée d'Art et d'Histoire, Ginebra56
@relaxintheair:Personas at the museum
Santiago Bustelo (@sbustelo) •MEMBER
Cantor Arts Center, Stanford, California57
12 Steps: UX Design for a Museum Exhibition
Santiago Bustelo (@sbustelo) •MEMBER
Usuariosdel museo
58
Santiago Bustelo (@sbustelo) •MEMBER
Museo de Arte Moderno (MoMA), Nueva York59
Santiago Bustelo (@sbustelo) •MEMBER
Museo británico, Londres60
Santiago Bustelo (@sbustelo) •MEMBER
Eames X IBM - Palo Alto, California61
12 Steps: UX Design for a Museum Exhibition
Santiago Bustelo (@sbustelo) •MEMBER
Hablando el lenguaje del usuario
62
Santiago Bustelo (@sbustelo) •MEMBER
Museo Británico, Londres63
Santiago Bustelo (@sbustelo) •MEMBER
Museo Británico, Londres64
Santiago Bustelo (@sbustelo) •MEMBER
Influenciando el comportamiento
65
Santiago Bustelo (@sbustelo) •MEMBER
Tate Modern, Londres66
Santiago Bustelo (@sbustelo) •MEMBER
Tate Modern, Londres67
Santiago Bustelo (@sbustelo) •MEMBER
Museo Británico, Londres68
Wikipedia: Copy of Rosetta Stone
Santiago Bustelo (@sbustelo) •MEMBER
Experiencias diseñadas
69
Santiago Bustelo (@sbustelo) •MEMBER
Tate Modern, Londres70
Santiago Bustelo (@sbustelo) •MEMBER
Tate Modern, Londres71
Santiago Bustelo (@sbustelo) •MEMBER
Museo Metropolitano, Nueva York72
Santiago Bustelo (@sbustelo) •MEMBER
Ateneum Art Museum, Helsinki73
Mariana Salgado:Designing for an Open Museum
Santiago Bustelo (@sbustelo) •MEMBER
“UX es el establecimiento de una filosofía de cómo tratar a la gente.Whitney Hess, Consultora de UX
74
Santiago Bustelo (@sbustelo) •MEMBER
Tate Modern, Londres75
¡Muchas gracias!
K a m b r i c a
Experiencia de Usuario (UX)Los públicos en primer plano
Universidad del Museo Social Argentino23 de abril 2013
MEMBER