Your SlideShare is downloading. ×
0
Santiago Bustelo
Director de Diseño, Kambrica
IxDA Latin America Regional Coordinator
DG3 Salomone FADU/UBA
6 de mayo, 201...
M E M B E R
Me presento…
• Santiago Bustelo, diseñador de interacción.
• Fundador y Director de Diseño, Kambrica.
• Fundad...
Evolución en Experiencia de Usuario •M E M B E R
IxDA (Interaction Design Association)
• Organización abierta, voluntaria ...
Santiago Bustelo •M E M B E R
1993-2013: Cada vez más interacción
Sitios estáticos
Contenido estático con el
que no se pue...
Santiago Bustelo •M E M B E R
• Diseño de Experiencias (User Experience, UX)
• Dirigir la forma en que se siente una perso...
Santiago Bustelo •M E M B E R
Funciones del diseño
6
Información
Presentación
Uso
Santiago Bustelo •M E M B E R
Escala de las decisiones sobre la forma
7
Santiago Bustelo •M E M B E R
Diseño que inspira versus diseño que usás
8
Santiago Bustelo •M E M B E R
Diseñar: dirigir resultados con un propósito
• Lograr un buen diseño visual:
observar la pan...
Santiago Bustelo •M E M B E R
Forma versus Función
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031
...
Santiago Bustelo •M E M B E R
Forma y Función
11
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...
Santiago Bustelo •M E M B E R
• La usabilidad de una interfaz es una medida
de la efectividad, eficiencia y satisfacción c...
Santiago Bustelo •M E M B E R
Diseñando
para el usuario
13
Santiago Bustelo •M E M B E R
¿Cuándo está terminado el trabajo de
diseño de interacción?
14
• Cuando nos gusta a nosotros...
Santiago Bustelo •M E M B E R
Entendiendo al usuario
• Su fin es realizar una tarea.
• Nuestra interfaz es sólo un medio q...
Efectividad: Incorporando al usuario
Santiago Bustelo •M E M B E R
Eficiencia: análisis y cuantificación
17
Nombre y apellido:
6 Juan Carlos Pérez
4
321
5
1
2
...
Santiago Bustelo •M E M B E R
Satisfacción: experiencia óptima
Simplificación del modelo de Mihaly Csikszentmihalyi
Frustr...
Santiago Bustelo •M E M B E R
Affordances:
comunicando la interacción
19
Santiago Bustelo •M E M B E R
Affordance
• Una situación en la que las características sensoriales de un objeto comunican
...
Teapot Dome Service Station
Wikipedia article
Santiago Bustelo •M E M B E R
Mensajes contradictorios
The ADA
Hall of Shame
22
Santiago Bustelo •M E M B E R
Camino del menor esfuerzo
Bad Designs.com:
Path, Sidewalk
23
Santiago Bustelo •M E M B E R
¿Cómo elijo Allegro?
Bad Designs: How do I set allegro?
24
Santiago Bustelo •M E M B E R
Esta pantalla no es táctil
UX Errors (Flickr Group)
25
Santiago Bustelo •M E M B E R
¿Para qué sirve esto?
Mx44.2 Download Page
26
Santiago Bustelo •M E M B E R
Artefacto físico
free-scores.com:
MACKIE DFX12
12 INPUT ANALOG MIXER
27
Santiago Bustelo •M E M B E R
Metáfora como condicionante
Bristol: Realtime Mixer
28
Santiago Bustelo •M E M B E R
Balance metáfora / interfaz
29
Apple:
GarageBand
Santiago Bustelo •M E M B E R
Gamification: diseñando
interacciones divertidas
30
Santiago Bustelo •M E M B E R
¿Qué es un juego?
31
• Definición formal:
Un sistema en el que los jugadores participan
de u...
Santiago Bustelo •M E M B E R
¿Qué los hace divertidos?
32
• Aprovechar nuestros patrones de
respuesta primarios
Amy Jo Ki...
Santiago Bustelo •M E M B E R
¿Qué los hace divertidos?
33
Frustración
Fluencia
desafío
habilidad
Aburrimiento
Santiago Bustelo •M E M B E R
¿Qué los hace divertidos?
• Universo limitado y consistente.
• Interacciones estructuradas.
...
Santiago Bustelo •M E M B E R
Feedback en juegos y aplicaciones
35
Bejeweled Google Maps
Amy Jo Kim: Putting the Fun in Fu...
Santiago Bustelo •M E M B E R
Colecciones en juegos y aplicaciones
36
World of Warcraft MySpace
Amy Jo Kim: Putting the Fu...
Santiago Bustelo •M E M B E R
Puntos en juegos y aplicaciones
37
Bejeweled eBay
Amy Jo Kim: Putting the Fun in Functional
Santiago Bustelo •M E M B E R
Niveles en juegos y aplicaciones
38
Amy Jo Kim: Putting the Fun in Functional
World of Warcr...
Santiago Bustelo •M E M B E R
Proceso de diseño
de interacción
39
Santiago Bustelo •M E M B E R
Proceso lineal
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción...
Santiago Bustelo •M E M B E R
Proceso lineal interminable
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel ...
Santiago Bustelo •M E M B E R
Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo de prototipos
en...
Santiago Bustelo •M E M B E R
Observando la interacción: pruebas de usabilidad
43
• Hasta que no testeamos, sólo
podemos t...
Santiago Bustelo •M E M B E R
Prototipos
• Permiten evaluar una propuesta (hipótesis) con...
• nosotros mismos
• equipo de...
Santiago Bustelo •M E M B E R
Prototipos e Iteraciones en el proceso
45
1. Planeamiento de la iteración
• Definición del p...
Santiago Bustelo •M E M B E R
Interfaz original
46
Pruebas de usabilidad
Elaboración de prototipo
Prueba de usabilidad de prototipo en papel
Santiago Bustelo •M E M B E R
Un voluntario para mostrar…
50
Cómo es una prueba de
usabilidad
Santiago Bustelo •M E M B E R
Introducción previa
• Describir las características y limitaciones de la interfaz.
• Aclarar...
“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 di...
“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 horar...
¡Un aplauso para el voluntario!
Santiago Bustelo •M E M B E R
Duración de una prueba de usabilidad
45’ aprox.
62
Rediseño SIU Guaraní: Diseño final
Santiago Bustelo •M E M B E R
Diseño de Interacción en América Latina
Oportunidades
• Interés creciente en Usabilidad
• Di...
¡Muchas gracias!
Sumate a la Asociación de Diseño de Interacción:
ixda.com.ar
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Upcoming SlideShare
Loading in...5
×

Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013

1,542

Published on

Presentación de Santiago Bustelo (IxDA BA: ixda.com.ar) para nivel 3 de la cátedra Salomone de Diseño Gráfico FADU / UBA (catedrasalomone.com), el 6 de mayo de 2013.

Published in: Design
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,542
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
80
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013"

  1. 1. Santiago Bustelo Director de Diseño, Kambrica IxDA Latin America Regional Coordinator DG3 Salomone FADU/UBA 6 de mayo, 2013 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina @sbustelo Diseño de Interacción y usabilidad M E M B E R
  2. 2. M E M B E R 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.
  3. 3. 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 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
  4. 4. Santiago Bustelo •M E M B E R 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
  5. 5. Santiago Bustelo •M E M B E R • 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
  6. 6. Santiago Bustelo •M E M B E R Funciones del diseño 6 Información Presentación Uso
  7. 7. Santiago Bustelo •M E M B E R Escala de las decisiones sobre la forma 7
  8. 8. Santiago Bustelo •M E M B E R Diseño que inspira versus diseño que usás 8
  9. 9. Santiago Bustelo •M E M B E R 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
  10. 10. Santiago Bustelo •M E M B E R Forma versus Función 1 2 3 4 567 891011 12 1314 15 16 17 18 19 20 21 222324 25 262728293031 10
  11. 11. Santiago Bustelo •M E M B E R Forma y Función 11 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
  12. 12. Santiago Bustelo •M E M B E R • 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 12
  13. 13. Santiago Bustelo •M E M B E R Diseñando para el usuario 13
  14. 14. Santiago Bustelo •M E M B E R ¿Cuándo está terminado el trabajo de diseño de interacción? 14 • Cuando nos gusta a nosotros • Cuando funciona como queríamos • Cuando le gusta al cliente • Cuando el usuario logra lo que esperábamos
  15. 15. Santiago Bustelo •M E M B E R 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. 15
  16. 16. Efectividad: Incorporando al usuario
  17. 17. Santiago Bustelo •M E M B E R Eficiencia: análisis y cuantificación 17 Nombre y apellido: 6 Juan Carlos Pérez 4 321 5 1 2 3 4 5 Estado inicial: mano en el mouseEstado inicial: mano en el mouse M inicio tarea 1,35 P Apuntar a primer campo 1,1 M inicio tarea 1,35 K click campo de texto 0,2 M inicio tarea 1,35 H pasar al teclado 0,4 M pensar dato 1,35 K 18 tipear dato 3,6 Total 10,7 Cuantificación KLM-GOMS
  18. 18. Santiago Bustelo •M E M B E R Satisfacción: experiencia óptima Simplificación del modelo de Mihaly Csikszentmihalyi Frustración Fluencia desafío habilidad Aburrimiento 18
  19. 19. Santiago Bustelo •M E M B E R Affordances: comunicando la interacción 19
  20. 20. Santiago Bustelo •M E M B E R 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 20
  21. 21. Teapot Dome Service Station Wikipedia article
  22. 22. Santiago Bustelo •M E M B E R Mensajes contradictorios The ADA Hall of Shame 22
  23. 23. Santiago Bustelo •M E M B E R Camino del menor esfuerzo Bad Designs.com: Path, Sidewalk 23
  24. 24. Santiago Bustelo •M E M B E R ¿Cómo elijo Allegro? Bad Designs: How do I set allegro? 24
  25. 25. Santiago Bustelo •M E M B E R Esta pantalla no es táctil UX Errors (Flickr Group) 25
  26. 26. Santiago Bustelo •M E M B E R ¿Para qué sirve esto? Mx44.2 Download Page 26
  27. 27. Santiago Bustelo •M E M B E R Artefacto físico free-scores.com: MACKIE DFX12 12 INPUT ANALOG MIXER 27
  28. 28. Santiago Bustelo •M E M B E R Metáfora como condicionante Bristol: Realtime Mixer 28
  29. 29. Santiago Bustelo •M E M B E R Balance metáfora / interfaz 29 Apple: GarageBand
  30. 30. Santiago Bustelo •M E M B E R Gamification: diseñando interacciones divertidas 30
  31. 31. Santiago Bustelo •M E M B E R ¿Qué es un juego? 31 • 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 divertida Amy Jo Kim: Putting the Fun in Functional
  32. 32. Santiago Bustelo •M E M B E R ¿Qué los hace divertidos? 32 • Aprovechar nuestros patrones de respuesta primarios Amy Jo Kim: Putting the Fun in Functional
  33. 33. Santiago Bustelo •M E M B E R ¿Qué los hace divertidos? 33 Frustración Fluencia desafío habilidad Aburrimiento
  34. 34. Santiago Bustelo •M E M B E R ¿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 34
  35. 35. Santiago Bustelo •M E M B E R Feedback en juegos y aplicaciones 35 Bejeweled Google Maps Amy Jo Kim: Putting the Fun in Functional
  36. 36. Santiago Bustelo •M E M B E R Colecciones en juegos y aplicaciones 36 World of Warcraft MySpace Amy Jo Kim: Putting the Fun in Functional
  37. 37. Santiago Bustelo •M E M B E R Puntos en juegos y aplicaciones 37 Bejeweled eBay Amy Jo Kim: Putting the Fun in Functional
  38. 38. Santiago Bustelo •M E M B E R Niveles en juegos y aplicaciones 38 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
  39. 39. Santiago Bustelo •M E M B E R Proceso de diseño de interacción 39
  40. 40. Santiago Bustelo •M E M B E R Proceso lineal 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. 40
  41. 41. Santiago Bustelo •M E M B E R 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 que el usuario necesitaba, retrocede tres casilleros. 5. Se repite hasta el hartazgo de una o ambas partes. 41
  42. 42. Santiago Bustelo •M E M B E R Proceso convergente 1. Objetivos y análisis inicial. 2. Diseño y desarrollo de prototipos en iteraciones avanzando y validando progresivamente aspectos del producto, de general a particular. 3. Entrega. 42
  43. 43. Santiago Bustelo •M E M B E R Observando la interacción: pruebas de usabilidad 43 • 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. Usabilityproblemsfound 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
  44. 44. Santiago Bustelo •M E M B E R 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. 44
  45. 45. Santiago Bustelo •M E M B E R Prototipos e Iteraciones en el proceso 45 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
  46. 46. Santiago Bustelo •M E M B E R Interfaz original 46
  47. 47. Pruebas de usabilidad
  48. 48. Elaboración de prototipo
  49. 49. Prueba de usabilidad de prototipo en papel
  50. 50. Santiago Bustelo •M E M B E R Un voluntario para mostrar… 50 Cómo es una prueba de usabilidad
  51. 51. Santiago Bustelo •M E M B E R 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. 51
  52. 52. “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.
  53. 53. “Contanos qué cosas te parece que podés hacer en esta pantalla. ¿Cómo las harías?
  54. 54. “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.
  55. 55. ¡Un aplauso para el voluntario!
  56. 56. Santiago Bustelo •M E M B E R Duración de una prueba de usabilidad 45’ aprox. 62
  57. 57. Rediseño SIU Guaraní: Diseño final
  58. 58. Santiago Bustelo •M E M B E R 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 con Desarrollo y Negocios • Falta de visión y lenguaje común • Falta de percepción de valor • Baja madurez del mercado deseable usable confiable funcional 64
  59. 59. ¡Muchas gracias! Sumate a la Asociación de Diseño de Interacción: ixda.com.ar
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×