Download - Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)

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

http://creativecommons.org/licenses/by/2.5/ar

http://creativecommons.org/licenses/by/2.5/ar

http://twitter.com/%23!/sbustelo

http://twitter.com/%23!/sbustelo

https://twitter.com/%23!/sbustelo

https://twitter.com/%23!/sbustelo

http://www.ixda.com.ar/


http://www.kambrica.com









































































































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.


























































































http://www.ixda.org/


http://isa.ixda.org/2014

http://isa.ixda.org/2014

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






















































































http://www.ixda.com.ar

http://www.ixda.com.ar

http://www.ixdacba.com.ar

http://www.ixdacba.com.ar

https://www.facebook.com/IxdaCorrientesResistencia

https://www.facebook.com/IxdaCorrientesResistencia

http://ixdalaplata.com.ar

http://ixdalaplata.com.ar

https://twitter.com/IxDAMDQ

https://twitter.com/IxDAMDQ

http://ixdamza.com.ar

http://ixdamza.com.ar

http://ixdarosario.com.ar

http://ixdarosario.com.ar

http://www.ixdatucuman.com.ar

http://www.ixdatucuman.com.ar



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























































































Funciones del diseño

Información

Presentación

Uso

5























































































Sitios inspiradores vs. sitios que usamos

6























































































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























































































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























































































• 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


Eficiencia: análisis y cuantificación

13























































































Satisfacción: experiencia óptima

Simplificación del modelo de Mihaly Csikszentmihalyi

Frustración

Fluencia

desafío

habilidad

Aburrimiento

14






















































































http://en.wikipedia.org/wiki/Mihaly_Csikszentmihalyi

http://en.wikipedia.org/wiki/Mihaly_Csikszentmihalyi


Proceso de diseñoy caso de ejemplo

15























































































• Producto: Software de administración de un videoclub

• Nuestros personajes:

Caso de ejemplo

16

Programadorcavernario

Diseñadorcavernario

Emprendedorcavernario

Iconos: FastIcon






















































































http://www.fasticon.com/

http://www.fasticon.com/


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






























http://www.lagash.com

http://www.lagash.com

1234

Gonzalez

GonzalezDiego760 Rivadavia 5000 11 B Buenos Aires 12

1234

760

No hay stock.

1235

760


Diseñador cavernario

• Metáforas

• Películas: DVDs

• Clientes: Fichas

• Alquileres: Ficha + DVD

• Representación

• Experiencia inmersiva

• Fotorealismo

33























































































Emprendedor cavernario

• Relevamiento competitivo

• Definición del mercado

• Especificación

• Recursos y plan de trabajo

• ????

• Profit!

45























































































Relevamiento competitivo46

freemium























































































Relevamiento competitivo47

screencast























































































Relevamiento competitivo

48

amigable

touch























































































Definición del mercado

49

Foto: Ned Raggett Foto: Andrés Rueda






















































































http://flickr.com/photos/nedraggett/257959520/

http://flickr.com/photos/nedraggett/257959520/

http://flickr.com/photos/andresrueda/5441397099/

http://flickr.com/photos/andresrueda/5441397099/


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























































































Recursos y “metodología”

51

Ejerce

r pres

ión Ejercer presión























































































Expectativa52

En 3 meses

Foto: Wikipedia






















































































http://en.wikipedia.org/wiki/File:Lion_waiting_in_Namibia.jpg

http://en.wikipedia.org/wiki/File:Lion_waiting_in_Namibia.jpg


Resultado53

Después de 1 año

Foto: Wikipedia






















































































http://en.wikipedia.org/wiki/File:Platypus-sketch.jpg

http://en.wikipedia.org/wiki/File:Platypus-sketch.jpg


¿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 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























































































Proceso lineal

1. Definición de requerimientos.

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

3. Entrega.

56























































































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























































































¿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























































































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























































































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























































































Incorporando UX a nuestro ejemplo

61























































































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























































































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























































































¿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






















































































http://en.wikipedia.org/wiki/Tom_DeMarco

http://en.wikipedia.org/wiki/Tom_DeMarco

http://en.wikipedia.org/wiki/W._Edwards_Deming

http://en.wikipedia.org/wiki/W._Edwards_Deming

http://en.wikipedia.org/wiki/Lean_software_development





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






















































































http://es.wikipedia.org/wiki/Galileo_Galilei

http://es.wikipedia.org/wiki/Galileo_Galilei


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)






















































































http://en.wikipedia.org/wiki/KLM-GOMS

http://en.wikipedia.org/wiki/KLM-GOMS


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


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























































































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























































































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























































































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























































































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























































































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























































































Sistema con dos campos de búsqueda

74




75




76



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























































































Prueba de concepto

79























































































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






















































































http://msdn.microsoft.com/en-us/library/windows/desktop/aa511258.aspx





Esquema

82

Funciones secundarias

listadopelículas

alquiler

listadoclientes

detalle película

listado copiasSeleccionar copia

Copias + Cliente =

Ficha Cliente

Seleccionarpelícula

Buscar peliculas o clientes























































































Buscar peliculas o clientes

Películas

Alquiler: 3 películas

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























































































84

Mockup final























































































Caso: Cliente devuelve y alquila

• Anticipación, no es necesario buscar al cliente

• Minimizar input y pasos

• Permitir operaciones en cualquier orden

85























































































Cliente devuelve y alquila

86



87



88



89


Caso: Devolución de 40 películas

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

90























































































Devolución de 40 películas

91



92



93



94


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























































































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



