diseño centrado en el usuario: ux, ixd, usabilidad aplicada

111
do ulas alquiler list clie detalle película listado copias Seleccionar copia Copias + Cliente = F onar cula as o clientes Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada Santiago Bustelo Director de diseño, Kambrica IxDA Latin America Regional Coordinator Universidad de la Cuenca del Plata 19 de abril, 2013 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar @sbustelo MEMBER

Upload: santiago-bustelo

Post on 27-Jan-2015

132 views

Category:

Documents


2 download

DESCRIPTION

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 el diseño de interacción y tomando en cuenta la experiencia de usuario, exponiendo las diferencias de criterio y proceso, y la aplicación de un modelo cuantificado para comparar los resultados y lograr calidad.

TRANSCRIPT

Page 1: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

listadopelículas

alquiler

listadoclientes

detalle película

listado copias

Seleccionar copia

Copias + Cliente =

Ficha Cliente

Seleccionar

película

Buscar peliculas o clientes

Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago BusteloDirector de diseño, KambricaIxDA Latin America Regional Coordinator

Universidad de la Cuenca del Plata19 de abril, 2013

Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar

@sbustelo

MEMBER

Page 2: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

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.

Page 3: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

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

Page 4: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

¿Cuál es el rol del diseñador en elSiglo XXI?

4

Page 5: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Leer el diario1993 2013

5

Page 6: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

1993 2013

Buscar trabajo

6

Page 7: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

1993 2013

Trabajo administrativo

7

Page 8: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

1993 2013

Hacer las compras

8

Page 9: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

1993 2013

Reencontrarse con compañeros de escuela

9

Page 10: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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.

Page 11: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

Page 12: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

Page 13: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

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

UX y Diseño: definir cómo es, cómo funciona y cómo luce un producto digital

13

Page 14: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

DISEÑO DEINTERACCIÓN

INTERACCIÓNHUMANO-COMPUTADOR

IxD

DISEÑOINDUSTRIAL

DISEÑODE SONIDO

DI

ARQUITECTURAARQUITECTURADE INFORMACIÓN

ARQDISEÑO DE

EXPERIENCIAS

UX

AI

DISEÑOGRÁFICO

DG

HCI

SeñaléticaEntornosInteractivos

Diseño de Interfaces

Computaciónubicua

Ingeniería deUsabilidad

Controles

Diseño de Información

Navegación

PRODUCCIÓNDE CONTENIDO(Texto, Imagen,Video, sonido)

Dan Saffer, Designing for Interaction

Page 15: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

Page 16: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

16

Jakob Nielsen, Hoa Lorenger: Prioritizing Web Usability

IA

75% de los problemas de UX involucran IA

Page 17: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

Page 18: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

Page 19: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Sitios inspiradores vs. sitios que usamos

19

Page 20: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

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

Page 21: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 22: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

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

Page 23: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 24: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

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

Page 25: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Efectividad: Incorporando al usuario

Page 26: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Eficiencia: análisis y cuantificación

26

Page 27: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Satisfacción: experiencia óptima

Simplificación del modelo de Mihaly Csikszentmihalyi

Frustración

Fluencia

desafío

habilidad

Aburrimiento

27

Page 28: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

28

Page 29: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Parte 1: Diseñando desde la caverna29

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

Page 30: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

• Producto: Software de administración de un videoclub

• Nuestros personajes:

Caso de ejemplo

30

Programadorcavernario

Diseñadorcavernario

Emprendedorcavernario

Iconos: FastIcon

Page 32: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 33: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 34: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 35: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

1234

Page 36: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

1234

Page 37: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

1234

Gonzalez

Page 38: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12

Page 39: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

1234

760

Page 40: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

No  hay  stock.

Page 41: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 42: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 43: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 44: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

760

Page 45: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

1235

760

Page 46: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 47: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Diseñador cavernario

• Metáforas

• Películas: DVDs

• Clientes: Fichas

• Alquileres: Ficha + DVD

• Representación

• Experiencia inmersiva

• Fotorealismo

47

Page 48: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 49: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 50: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 51: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 52: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 53: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 54: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 55: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 56: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 57: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 58: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Page 59: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Emprendedor cavernario

• Relevamiento competitivo

• Definición del mercado

• Especificación

• Recursos y plan de trabajo

• ????

• Profit!

59

Page 60: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Relevamiento competitivo60

freemium

Page 61: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Relevamiento competitivo61

screencast

Page 62: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Relevamiento competitivo

62

amigable

touch

Page 63: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Definición del mercado

63

Foto: Ned Raggett Foto: Andrés Rueda

Page 64: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

“Especificación” para diseño y desarrollo

64

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

Page 65: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Recursos y “metodología”

65

Ejerce

r pres

ión Ejercer presión

Page 66: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Expectativa66

En 3 meses

Foto: Wikipedia

Page 67: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Resultado67

Después de 1 año

Foto: Wikipedia

Page 68: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Parte 2: Saliendo de la caverna68

Page 69: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

¿Qué tienen en comúnlos tres casos anteriores?

69

• 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

Page 70: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

La Calidad se declara en un equipo

70

Política de Calidad

Procesos

Técnicas

Herramientas

Page 71: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Proceso lineal

1. Definición de requerimientos.

2. Diseño y desarrollo a nivel de producción.

3. Entrega.

71

Page 72: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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 unao ambas partes.

72

Page 73: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

¿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

73

Page 74: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

• 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

74

El proceso modela el resultado.

Page 75: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

75

Wicked Problems & Social Complexity - Jeff Conklin, Ph.D.

Page 76: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Proceso convergente e iterativo

1. Objetivos y análisis inicial.

2. Diseño y desarrollo en iteracionesavanzando y validando progresivamente:

• Funcionalidad

• Estructura y elementos

• Lenguaje visual

3. Entrega y puesta en producción.

4. Iteración de todo el proceso.

76

Page 77: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

77

Usaurio

Page 78: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Cuantificación: KLM-GOMS

Cada operación del usuario tiene un costo.

78

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)

Page 79: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Cuantificación:Buscar cliente (v. programador)

79

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

Page 80: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

80

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

Page 81: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Casos de uso: hipótesis inicial

81

• 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

Page 82: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

82

Page 83: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Priorización y estrategia de versiones

83

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

Page 84: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Casos de uso reales y priorizados

84

• 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

Page 85: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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…

85

Page 86: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Sistema con dos campos de búsqueda

86

Page 87: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Sistema con dos campos de búsqueda

87

Page 88: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Sistema con dos campos de búsqueda

88

Page 89: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Sistema con dos campos de búsqueda

Page 90: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Propuesta: un solo campo de búsqueda

90

• 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

Page 91: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Prueba de concepto

91

Page 92: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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

92

Page 93: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

• 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

93

Page 94: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Esquema

94

Funciones secundarias

listadopelículas

alquiler

listadoclientes

detalle película

listado copiasSeleccionar copia

Copias + Cliente =

Ficha Cliente

Seleccionarpelícula

Buscar peliculas o clientes

Page 95: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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 avanzado95

Page 96: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

96

Mockup final

Page 97: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Caso: Cliente devuelve y alquila

• Anticipación, no es necesario buscar al cliente

• Minimizar input y pasos

• Permitir operaciones en cualquier orden

97

Page 98: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Cliente devuelve y alquila

98

Page 99: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Cliente devuelve y alquila

99

Page 100: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Cliente devuelve y alquila

100

Page 101: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Cliente devuelve y alquila

101

Page 102: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Caso: Devolución de 40 películas

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

102

Page 103: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Devolución de 40 películas

103

Page 104: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Devolución de 40 películas

104

Page 105: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Devolución de 40 películas

105

Page 106: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Devolución de 40 películas

106

Page 107: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

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%

107

Page 108: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

• 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

108

Page 109: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Santiago Bustelo (@sbustelo) •MEMBER

Diseño de Interacción en América Latina

Oportunidades

• Interés creciente en Usabilidad

• Diseño y UX como requerimiento

• Creciente apoyo académico

Desafíos

• Baja integración del diseñador conDesarrollo y Negocios

• Falta de visión y lenguaje común

• Falta de percepción de valor

• Baja madurez del mercado

deseable

usable

confiable

funcional

109

Page 110: Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

¡Muchas gracias!

K a m b r i c a

Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

Universidad de la Cuenca del Plata19 de abril, 2013

MEMBER