User ExperienceIntroducción a UX para desarrolladoresCaso: Software de Gestión

Santiago BusteloUser Experience Director, KambricaIxDA Buenos Aires Local Group Coordinator

M E M B E R

Obra bajo licencia Creative Commons Reconocimiento 4.0 Internacional

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.

• 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 •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 Chile:

• Santiago: ixdasantiago.cl• Viña del mar, Valparaiso (V), Chile:

Facebook > IxDA Viña del Mar

3

ixda.org

Santiago Bustelo // @kambrica •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

4

Santiago Bustelo // @kambrica •M E M B E R

Facetas de la Experiencia de Usuario

5

Peter Morville, Facets of the User Experience (2004)

útil

deseable

valioso

accesible

creíble

encontrable

usable

Santiago Bustelo // @kambrica •M E M B E R

Factores que componen UX

6

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.

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

Espacio de diseño

Impacto

Espacio de relevamiento

Santiago Bustelo // @kambrica •M E M B E R

•Diseño de Experiencias (UX)

•Dirigir lo que experimenta una persona en todos sus puntos de contacto con un producto, sistema o servicio.

•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

Disciplinas de Diseño

7

Santiago Bustelo // @kambrica •M E M B E R

Caso de ejemplo y proceso de diseño centrado en el usuario

8

Santiago Bustelo // @kambrica •M E M B E R

Parte 1: Diseñando desde la caverna

9

Verónica Traynor: UX y la caverna de Platón

Santiago Bustelo // @kambrica •M E M B E R

• Producto: Software de administración de un videoclub

• Nuestros personajes:

Caso de ejemplo

10

Programadorcavernario

Diseñadorcavernario

Emprendedorcavernario

Iconos: FastIcon

Santiago Bustelo // @kambrica •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

11

1234

1234

1234

Gonzalez

GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12

1234

1

No  hay  stock.

1

1235

1

Santiago Bustelo // @kambrica •M E M B E R

Diseñador cavernario

• Metáforas

• Películas: DVDs

• Clientes: Fichas

• Alquileres: Ficha + DVD

• Representación

• Experiencia inmersiva

• Fotorealismo

27

Santiago Bustelo // @kambrica •M E M B E R

Emprendedor cavernario

• Relevamiento competitivo

• Definición del mercado

• Especificación

• Recursos y plan de trabajo

• ????

• Profit!

39

Santiago Bustelo // @kambrica •M E M B E R

Relevamiento competitivo

40

freemium

Santiago Bustelo // @kambrica •M E M B E R

Relevamiento competitivo

41

screencast

Santiago Bustelo // @kambrica •M E M B E R

Relevamiento competitivo

42

amigable

touch

Santiago Bustelo // @kambrica •M E M B E R

Definición del mercado

43

Foto: Ned Raggett Foto: Andrés Rueda

Santiago Bustelo // @kambrica •M E M B E R

“Especificación” para diseño y desarrollo

44

✓ 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.

Santiago Bustelo // @kambrica •M E M B E R

Recursos y “metodología”

45

Ejerce

r pres

ión Ejercer presión

Santiago Bustelo // @kambrica •M E M B E R

Expectativa

46

En 3 meses

Foto: Wikipedia

Santiago Bustelo // @kambrica •M E M B E R

Resultado

47

Después de 1 año

Foto: Wikipedia

Santiago Bustelo // @kambrica •M E M B E R

Parte 2: Saliendo de la caverna

48

Santiago Bustelo // @kambrica •M E M B E R

Experiencia de Usuario y Usabilidadcomo Calidad

• Son atributos cualitativos intrínsecos al producto

• Como la performance, no se pueden “agregar”.

• Son afectados por todos los que construyen el producto.

• Siempre ocurren

• A un producto no le “falta” UX o usabilidad. En todo caso, su diseño o usabilidad son malos.

• Hay experiencias intencionales… y experiencias que se cometen

49

Santiago Bustelo // @kambrica •M E M B E R

Calidad y Cuantificación

• “Calidad es lo que nuestros usuarios valoran.Todo lo demás es desperdicio”(Lean Software Development)

• Cuantificar nos permite:

• Comparar alternativas y progresode manera objetiva

• Análisis en lugar de opiniones

• Identificar y priorizar áreas de oportunidad

50

Santiago Bustelo // @kambrica •M E M B E R

Cuantificación: KLM-GOMS

Cada operación del usuario tiene un costo.

51

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)

Santiago Bustelo // @kambrica •M E M B E R

Cuantificación:Buscar cliente (v. programador)

52

Inicio tarea: 1,35Mover mano al mouse: 0,40

Proxima tarea: 1,35Apuntar menu Clientes: 1,10

click menu Clientes: 0,20Apuntar menú Clientes »

Modificación: 1,10click menú Clientes » Modificación:

0,20Próxima tarea: 1,35

Apuntar campo texto: 1,10click campo texto: 0,20

Mover mano al teclado: 0,40Proxima tarea: 1,35

Tipear apellido: 1,60Mover mano al mouse: 0,40

Proxima tarea: 1,35point OK: 1,10click OK: 0,20

Obtuvimos (o no) el dato:

14.75 segundos

Recuperación:Mover mano al mouse: 0,40

Proxima tarea: 1,35point Cancel: 1,10click Cancel: 0,20

Volvemos a abrir el cuadro, Tipeamos apellido otra vez: 12,32

Mover mano al mouse: 0,40Proxima tarea: 1,35

apuntarOK: 1,10click OK: 0,20

Total con recuperación:

32,55 segundos

Santiago Bustelo // @kambrica •M E M B E R

Cuantificación:Buscar cliente (v. diseñador)

53

Inicio tarea: 1,35Apuntar al fichero home: 1,10

Click Fichero home: 0,20Animación "files, lots of files¨: 4

Proxima tarea: 1,35Apuntar boton prox serie ficheros:

1,10Click proxima serie ficheros: 0,20

Animación serie de ficheros: 1Prox tarea: 1,35

Apuntar fichero "G": 1,10Click fichero "G": 0,20

Animación fichero G: 2

Proxima tarea: 1,35Leer etiquetas x 4: 5,40

Proxima tarea: 1,35Apuntar GON: 1,10

Click GON: 0,20Animación Cajón GON: 2

Proxima tarea: 1,35Leer Apellido, Nombre x 5: 6,75

Proxima tarea: 1,35Apuntar 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

Santiago Bustelo // @kambrica •M E M B E R

Caso Centrado en el Usuario

• Objetivos antes que requerimientos

• Proceso iterativo

• Construir prototipos

• Medir, validar con usuarios

• Aprender, ajustar, mejorar hasta lograr objetivos

54

Usaurio

Ideas

ProductoDatos

CONSTRUIR

OBSERVAR,MEDIR,

VALIDAR

APRENDER

Santiago Bustelo // @kambrica •M E M B E R

Casos de uso: hipótesis inicial

55

• 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

Santiago Bustelo // @kambrica •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

56

Santiago Bustelo // @kambrica •M E M B E R

Priorización y estrategia de versiones

57

v. 1.0 v. 2.0 v. 3.0 v. 4.0 v. 5.0 v. 6.0

Santiago Bustelo // @kambrica •M E M B E R

Casos de uso reales y priorizados

58

• 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

Santiago Bustelo // @kambrica •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…

59

Sistema con dos campos de búsqueda

60

Sistema con dos campos de búsqueda

61

Sistema con dos campos de búsqueda

62

Sistema con dos campos de búsqueda

63

Santiago Bustelo // @kambrica •M E M B E R

Propuesta: un solo campo de búsqueda

64

• 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

Santiago Bustelo // @kambrica •M E M B E R

Prueba de concepto

65

Prueba de concepto publicada enhttp://kambrica.com/raf08

Santiago Bustelo // @kambrica •M E M B E R

Cuantificación: Búsqueda 2.0

Inicio tarea: 1,35Mover mano al mouse: 0,40

Proxima tarea: 1,35apuntar Buscar: 1,10

click Buscar: 0,20Mover mano al teclado: 0,40

Proxima tarea: 1,35Tipear 3 caratacteres apellido: 0,60

Proxima tarea: 1,35Tipar espacio: 0,20Proxima tarea: 1,35

Tipear 3 caracteres nombre: 0,60

Total: 10,25 segundos

Beneficio de mantener foco en búsqueda: 4,80 segundos

Total manteniendofoco en búsqueda:

5,45 segundos

73

Santiago Bustelo // @kambrica •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

74

Santiago Bustelo // @kambrica •M E M B E R

Esquema

75

Funciones secundarias

listadopelículas

alquiler

listadoclientes

detalle película

listado copiasSeleccionar copia

Copias + Cliente =

Ficha Cliente

Seleccionarpelícula

Buscar peliculas o clientes

Santiago Bustelo // @kambrica •M E M B E R

Buscar peliculas o clientes

Películas

Alquiler: 3 películas

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

Santiago Bustelo 32 años4123-4567

Diego González 32 años4123-4567

Santiago Bustelo 32 años4123-4567

Diego González 32 años4123-4567

Diego González 32 años4123-4567Juan de los Palotes 1638Deuda $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úrpuradel Cairo#78909

Mia FarrowJeff DanielsDanny AielloIrving MetzmanStephanie Farrow

Actores

Woody AllenDirectorSátira, Comedia, Woody AllenGéneros

1 hora 22 minutosDuración

La Rosa Púrpuradel Cairo#78909

La Rosa Púrpuradel Cairo

El ciudadanoEterno resplandor de una mente...Yo sé que tu sabes que yo sé

reservada

Mockup avanzado

76

Santiago Bustelo // @kambrica •M E M B E R

77

Mockup final

Santiago Bustelo // @kambrica •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

78

Santiago Bustelo // @kambrica •M E M B E R

Cliente devuelve y alquila

79

Santiago Bustelo // @kambrica •M E M B E R

Cliente devuelve y alquila

80

Santiago Bustelo // @kambrica •M E M B E R

Cliente devuelve y alquila

81

Santiago Bustelo // @kambrica •M E M B E R

Cliente devuelve y alquila

82

Santiago Bustelo // @kambrica •M E M B E R

Caso: Devolución de 40 películas

• Soportar un proceso de lotes con el mismo modelo de interacción

83

Santiago Bustelo // @kambrica •M E M B E R

Devolución de 40 películas

84

Santiago Bustelo // @kambrica •M E M B E R

Devolución de 40 películas

85

Santiago Bustelo // @kambrica •M E M B E R

Devolución de 40 películas

86

Santiago Bustelo // @kambrica •M E M B E R

Devolución de 40 películas

87

Santiago Bustelo // @kambrica •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%

88

Santiago Bustelo // @kambrica •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

89

18 al 21 de Noviembre 2015 Córdoba, Argentina

isa.ixda.org

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