Santiago BusteloDirector de diseño, KambricaIxDA Latin America Regional Coordinator
DG3 Salomone FADU/UBA6 de mayo, 2013
MEMBER
Presentación bajo licencia Creative CommonsAtribución 2.5 Argentina
@sbustelo
Diseño de Interaccióny usabilidad
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, IxDA.com.ar •MEMBER
1993-2013: Cada vez más interacción
Sitios estáticos
Contenido estático con el que no se puede interactuar.
Diseño Gráfico
Aplicaciones web
Contenido dinámico privado modificado por la interacción con el usuario.
Diseño de Interacción
Sitios sociales
Contenido dinámico público modificado por la interacción de mucha gente.
Diseño de Interacción Social
4
Santiago Bustelo, IxDA.com.ar •MEMBER
• Diseño de Experiencias (User Experience, 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 (Interaction Design, IxD) • Define el modelo de operación de productos interactivos para lograr mejores
experiencias para más usuarios.• Diseño de Interfaces (User Interface Design, UID)
• Define los elementos concretos empleados en la interacción.• Diseño visual (Diseño Gráfico, DG)
• Define lenguaje, carácter e identidad visual del producto.
ABSTRACTO
CONCRETO
Disciplinas de Diseño: de DG a UX
5
Santiago Bustelo, IxDA.com.ar •MEMBER
Funciones del diseño
6
Información
Presentación
Uso
Santiago Bustelo, IxDA.com.ar •MEMBER
Escala de las decisiones sobre la forma
7
Santiago Bustelo, IxDA.com.ar •MEMBER
Diseño que inspira versus diseño que usás
8
Santiago Bustelo, IxDA.com.ar •MEMBER
Diseñar: dirigir resultados con un propósito
• Lograr un buen diseño visual:observar la pantalla y el soporte final.
• Lograr una buena interacción:observar cómo la gente interactúa con el diseño.
9
Santiago Bustelo, IxDA.com.ar •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
10
Santiago Bustelo, IxDA.com.ar •MEMBER
Forma y Función
12
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, IxDA.com.ar •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
14
Santiago Bustelo, IxDA.com.ar •MEMBER
Diseñandopara el usuario
15
Santiago Bustelo, IxDA.com.ar •MEMBER
¿Cuándo está terminado el trabajo de diseño de interacción?
16
• Cuando nos gusta a nosotros
• Cuando funciona como queríamos
• Cuando le gusta al cliente
• Cuando el usuario logra lo que esperábamos
Santiago Bustelo, IxDA.com.ar •MEMBER
Entendiendo al usuario
• Su fin es realizar una tarea.
• Nuestra interfaz es sólo un medio que puede ser transparente, o un impedimento.
• Nuestra interfaz no debe ocupar lugar en la mente del usuario.
• Cuando el usuario tiene que pensar en nuestra interfaz, es porque se está preguntando lo que espera o necesita que sea evidente. Y eso, es señal de que no hicimos bien nuestro trabajo.
• No quiere perder tiempo. Se saltea instrucciones, presentaciones. La navegación se compone de señales de tránsito, no carteles publicitarios.
17
Efectividad: Incorporando al usuario
Santiago Bustelo, IxDA.com.ar •MEMBER
Eficiencia: análisis y cuantificación
19
Nombre y apellido:6 Juan Carlos Pérez
4
321
��5
12
3
4
5
Estado inicial: mano en el mouseEstado inicial: mano en el mouseM inicio tarea 1,35P Apuntar a primer campo 1,1M inicio tarea 1,35K click campo de texto 0,2M inicio tarea 1,35H pasar al teclado 0,4M pensar dato 1,35K 18 tipear dato 3,6Total 10,7
Cuantificación KLM-GOMS
Santiago Bustelo, IxDA.com.ar •MEMBER
Satisfacción: experiencia óptima
Simplificación del modelo de Mihaly Csikszentmihalyi
Frustración
Fluencia
desafío
habilidad
Aburrimiento
20
Santiago Bustelo, IxDA.com.ar •MEMBER
Affordances:comunicando la interacción
21
Santiago Bustelo, IxDA.com.ar •MEMBER
Affordance
• Una situación en la que las características sensoriales de un objeto comunican de forma intuitiva su funcionalidad y uso.
• Un botón, al estar levemente elevado respecto a una superficie plana, sugiere la posibilidad de apretarlo. Una palanca, al tener el tamaño apropiado para ser agarrada, sugiere la idea de tirar de ella. Una luz roja que parpadea junto con un zumbido sugiere un problema y demanda atención. Una silla, por su tamaño, curvatura, balance y posición, sugiere sentarse en ella.
• Affordance es una propiedad deseable de una interfaz, que naturalmente conduce a la gente a llevar a cabo los pasos correctos para cumplir sus objetivos.
• El término psicológico es “compatibilidad estímulo-respuesta”.
Usability First: Affordance
22
Teapot Dome Service Station Wikipedia article
Santiago Bustelo, IxDA.com.ar •MEMBER
Mensajes contradictorios
The ADAHall of Shame
24
Santiago Bustelo, IxDA.com.ar •MEMBER
Camino del menor esfuerzo
Bad Designs.com:Path, Sidewalk
25
Santiago Bustelo, IxDA.com.ar •MEMBER
¿Cómo elijo Allegro?
Bad Designs: How do I set allegro?
26
Santiago Bustelo, IxDA.com.ar •MEMBER
Esta pantalla no es táctil
UX Errors (Flickr Group)
27
Santiago Bustelo, IxDA.com.ar •MEMBER
¿Para qué sirve esto?
Mx44.2 Download Page
28
Santiago Bustelo, IxDA.com.ar •MEMBER
Artefacto físico
free-scores.com:MACKIE DFX12
12 INPUT ANALOG MIXER
29
Santiago Bustelo, IxDA.com.ar •MEMBER
Metáfora como condicionante
Bristol: Realtime Mixer
30
Santiago Bustelo, IxDA.com.ar •MEMBER
Balance metáfora / interfaz
31
Apple:GarageBand
Santiago Bustelo, IxDA.com.ar •MEMBER
Gamification: diseñando interacciones divertidas
32
Santiago Bustelo, IxDA.com.ar •MEMBER
¿Qué es un juego?
33
• Definición formal:Un sistema en el que los jugadores participan de un conflicto simulado, definido por reglas, que resulta en un producto cuantificable.Eric Zimmerman y Katie Salen: Rules of Play
• Definición informal:Una experiencia estructurada con reglas y objetivos que es divertidaAmy Jo Kim: Putting the Fun in Functional
Santiago Bustelo, IxDA.com.ar •MEMBER
¿Qué los hace divertidos?
34
• Aprovechar nuestros patrones de respuesta primariosAmy Jo Kim: Putting the Fun in Functional
Santiago Bustelo, IxDA.com.ar •MEMBER
¿Qué los hace divertidos?
35
Frustración
Fluencia
desafío
habilidad
Aburrimiento
Santiago Bustelo, IxDA.com.ar •MEMBER
¿Qué los hace divertidos?
• Universo limitado y consistente.
• Interacciones estructuradas.
• Balance entre esfuerzo y resultado.
• Gratificación sensorial.
• Permitir descubrimiento y aprendizaje por prueba y error.
Chris Crawford: The Art of Computer Game Design
36
Santiago Bustelo, IxDA.com.ar •MEMBER
Feedback en juegos y aplicaciones
37
Bejeweled Google Maps
Amy Jo Kim: Putting the Fun in Functional
Santiago Bustelo, IxDA.com.ar •MEMBER
Colecciones en juegos y aplicaciones
38
World of Warcraft MySpace
Amy Jo Kim: Putting the Fun in Functional
Santiago Bustelo, IxDA.com.ar •MEMBER
Puntos en juegos y aplicaciones
39
Bejeweled eBay
Amy Jo Kim: Putting the Fun in Functional
Santiago Bustelo, IxDA.com.ar •MEMBER
Niveles en juegos y aplicaciones
40
Amy Jo Kim: Putting the Fun in Functional
World of Warcraft eBay
PowerSeller Tier Bronze Silver Gold Platinum Titanium
Annual totals for each tier:Annual totals for each tier:Annual totals for each tier:Annual totals for each tier:Annual totals for each tier:Annual totals for each tier:
Annual Sales US$3.000 US$36.000US$120.000US$300.000US$1.800.000
And/or And or or or or
Transactions 100 3.600 12.000 30.000 180.000
Santiago Bustelo, IxDA.com.ar •MEMBER
Proceso de diseñode interacción
41
Santiago Bustelo, IxDA.com.ar •MEMBER
Proceso lineal
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
42
Santiago Bustelo, IxDA.com.ar •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 quería o lo queel usuario necesitaba,retrocede tres casilleros.
5. Se repite hasta el hartazgo de unao ambas partes.
43
Santiago Bustelo, IxDA.com.ar •MEMBER
Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo de prototiposen iteraciones avanzando y validando progresivamente aspectos del producto,de general a particular.
3. Entrega.
44
Santiago Bustelo, IxDA.com.ar •MEMBER
Observando la interacción: pruebas de usabilidad
45
• 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.
• Observación y análisis de operación para resolver tareas solicitadas.
• Pruebas rápidas y de gran impacto cualitativo.
• No se toman requerimientos del usuario. Nos enfocamos en lo que el usuario hace.
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, IxDA.com.ar •MEMBER
Prototipos
• Permiten evaluar una propuesta (hipótesis) con...
• nosotros mismos
• equipo de desarrollo
• cliente
• usuarios reales
• …de forma rápida y aplicando el esfuerzo correcto.
• Son nuestro instrumento para realizar preguntas.
46
Santiago Bustelo, IxDA.com.ar •MEMBER
Prototipos e Iteraciones en el proceso
47
1. Planeamiento de la iteración• Definición del problema. Qué queremos aprender de
esta iteración y cómo vamos a hacerlo.
2. Implementación• Creación del prototipo con la fidelidad correcta
3. Prueba• Obtenemos información que valida o descarta la
solución.
4. Conclusiones y aprendizaje• Qué funcionó o no, y por qué.
Jared Spool, Anatomy of an Iteration
Santiago Bustelo, IxDA.com.ar •MEMBER
Interfaz original
48
Pruebas de usabilidad
Elaboración de prototipo
Prueba de usabilidad de prototipo en papel
Santiago Bustelo, IxDA.com.ar •MEMBER
Un voluntario para mostrar…
52
Cómo es una prueba de usabilidad
Santiago Bustelo, IxDA.com.ar •MEMBER
Introducción previa
• Describir las características y limitaciones de la interfaz.
• Aclarar que el objetivo del test es evaluar la interfaz, no evaluar al usuario.
• Explicar la metodología que se utilizará.
• Solicitar al usuario que actúe normalmente y piense en voz alta mientras realiza las tareas.
53
“Tenés que inscribirte a la materia Taller de Expresión I, cátedra Klein Pampillo, según los días y horarios que tengas disponibles para cursar.
¿Cómo lo harías? Recordá contarnos en voz alta lo que vas pensando.
“Contanos qué cosas te parece que podés hacer en esta pantalla.
¿Cómo las harías?
“Ahora tenés que inscribirte a la materia Teoría y Práctica de la Comunicación II, cátedra Magnone, según los días y horarios que tengas disponibles para cursar.
¿Cómo lo harías? Recordá contarnos en voz alta lo que vas pensando.
¡Un aplauso para el voluntario!
Santiago Bustelo, IxDA.com.ar •MEMBER
Duración de una prueba de usabilidad
45’ aprox.
64
Rediseño SIU Guaraní: Diseño final
Santiago Bustelo, IxDA.com.ar •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
66
¡Muchas gracias!Sumate a la Asociación de Diseño de Interacción:
ixda.com.ar