Diseño de Interacción: usabilidad aplicadaSantiago BusteloDirector de diseño, KambricaIxDA Central and South America Regional Coordinator

Tucumán Valley: Diseño de Interfaces16 de mayo, 2012

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

@sbustelo

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

Diseño de Interacción •MEMBER

• Diseño de Experiencias (UX)

• 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

4

Diseño de Interacción •MEMBER

Funciones del diseño

Información

Presentación

Uso

5

Diseño de Interacción •MEMBER

Sitios inspiradores vs. sitios que usamos

6

Diseño de Interacción •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

7

Diseño de Interacción •MEMBER

Forma y Función

9

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

Diseño de Interacción •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

11

Efectividad: Incorporando al usuario

Diseño de Interacción •MEMBER

Eficiencia: análisis y cuantificación

13

Diseño de Interacción •MEMBER

Satisfacción: experiencia óptima

Simplificación del modelo de Mihaly Csikszentmihalyi

Frustración

Fluencia

desafío

habilidad

Aburrimiento

14

Diseño de Interacción •MEMBER

Proceso de diseñoy caso de ejemplo

15

Diseño de Interacción •MEMBER

• Producto: Software de administración de un videoclub

• Nuestros personajes:

Caso de ejemplo

16

Programadorcavernario

Diseñadorcavernario

Emprendedorcavernario

Iconos: FastIcon

Diseño de Interacción •MEMBER

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

17

1234

1234

1234

Gonzalez

GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12

1234

760

No  hay  stock.

760

1235

760

Diseño de Interacción •MEMBER

Diseñador cavernario

• Metáforas

• Películas: DVDs

• Clientes: Fichas

• Alquileres: Ficha + DVD

• Representación

• Experiencia inmersiva

• Fotorealismo

33

Diseño de Interacción •MEMBER

Emprendedor cavernario

• Relevamiento competitivo

• Definición del mercado

• Especificación

• Recursos y plan de trabajo

• ????

• Profit!

45

Diseño de Interacción •MEMBER

Relevamiento competitivo46

freemium

Diseño de Interacción •MEMBER

Relevamiento competitivo47

screencast

Diseño de Interacción •MEMBER

Relevamiento competitivo

48

amigable

touch

Diseño de Interacción •MEMBER

Definición del mercado

49

Foto: Ned Raggett Foto: Andrés Rueda

Diseño de Interacción •MEMBER

“Especificación” para diseño y desarrollo

50

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

Diseño de Interacción •MEMBER

Recursos y “metodología”

51

Ejerce

r pres

ión Ejercer presión

Diseño de Interacción •MEMBER

Expectativa52

En 3 meses

Foto: Wikipedia

Diseño de Interacción •MEMBER

Resultado53

Después de 1 año

Foto: Wikipedia

Diseño de Interacción •MEMBER

¿Qué tienen estos tres casos en común?

54

• 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

Diseño de Interacción •MEMBER

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.

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

55

Diseño de Interacción •MEMBER

Proceso lineal

1. Definición de requerimientos.

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

3. Entrega.

56

Diseño de Interacción •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.

57

Diseño de Interacción •MEMBER

¿Cuándo está terminado nuestro trabajo?

• Cuando nos gusta a nosotros

• Cuando funciona como queríamos

• Cuando le gusta al cliente

• Cuando el usuario logra lo que esperábamos

58

Diseño de Interacción •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

59

El proceso modela el resultado.

Diseño de Interacción •MEMBER

Proceso convergente

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.

60

Diseño de Interacción •MEMBER

Incorporando UX a nuestro ejemplo

61

Diseño de Interacción •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.

62

Diseño de Interacción •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

63

Usaurio

Diseño de Interacción •MEMBER

¿Qué es Calidad?

• “La Calidad de un producto es una función del bien que hace al mundo” (Tom DeMarco)

• Calidad = Resultados del esfuerzo / Costos totales (W. Edwards Deming)

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

64

Diseño de Interacción •MEMBER

Calidad y Cuantificación

• “Mide lo que sea medible y haz medible lo que no lo sea” (Galileo Galilei)

• Cuantificar nos permite:

• Comparar alternativas de manera objetiva

• Análisis en lugar de opiniones

• Identificar áreas de oportunidad

65

Diseño de Interacción •MEMBER

Cuantificación: KLM-GOMS

Cada operación del usuario tiene un costo.

66

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)

Diseño de Interacción •MEMBER

Cuantificación:Buscar cliente (v. programador)

67

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

Diseño de Interacción •MEMBER

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

68

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

Diseño de Interacción •MEMBER

Casos de uso: hipótesis inicial

69

• 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

Diseño de Interacción •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

70

Diseño de Interacción •MEMBER

Priorización y estrategia de versiones

71

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

Diseño de Interacción •MEMBER

Casos de uso reales y priorizados

72

• 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

Diseño de Interacción •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…

73

Diseño de Interacción •MEMBER

Sistema con dos campos de búsqueda

74

Diseño de Interacción •MEMBER

Sistema con dos campos de búsqueda

75

Diseño de Interacción •MEMBER

Sistema con dos campos de búsqueda

76

Diseño de Interacción •MEMBER

Sistema con dos campos de búsqueda

Diseño de Interacción •MEMBER

Propuesta: un solo campo de búsqueda

78

• 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

Diseño de Interacción •MEMBER

Prueba de concepto

79

Diseño de Interacción •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

80

diseño de interacción •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

81

Diseño de Interacción •MEMBER

Esquema

82

Funciones secundarias

listadopelículas

alquiler

listadoclientes

detalle película

listado copiasSeleccionar copia

Copias + Cliente =

Ficha Cliente

Seleccionarpelícula

Buscar peliculas o clientes

Diseño de Interacción •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 avanzado83

Diseño de Interacción •MEMBER

84

Mockup final

Diseño de Interacción •MEMBER

Caso: Cliente devuelve y alquila

• Anticipación, no es necesario buscar al cliente

• Minimizar input y pasos

• Permitir operaciones en cualquier orden

85

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

86

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

87

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

88

Diseño de Interacción •MEMBER

Cliente devuelve y alquila

89

Diseño de Interacción •MEMBER

Caso: Devolución de 40 películas

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

90

Diseño de Interacción •MEMBER

Devolución de 40 películas

91

Diseño de Interacción •MEMBER

Devolución de 40 películas

92

Diseño de Interacción •MEMBER

Devolución de 40 películas

93

Diseño de Interacción •MEMBER

Devolución de 40 películas

94

Diseño de Interacción •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%

95

Diseño de Interacción •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

96

Diseño de Interacción •MEMBER

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

Oportunidades

• Interés creciente en Usabilidad

• Diseño y UX como requerimiento

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

• Poco apoyo académico

deseable

usable

confiable

funcional

97

¡Muchas gracias!

K a m b r i c a

Diseño de Interacción: usabilidad aplicada

Tucumán Valley: Diseño de Interfaces16 de mayo, 2012

MEMBER

www.kambrica.com