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

www.kambrica.com