Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,648 views

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.

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.

Statistics

Views

Total Views
1,648
Views on SlideShare
1,408
Embed Views
240

Actions

Likes
7
Downloads
70
Comments
1

2 Embeds 240

http://www.ixda.com.ar 225
https://twitter.com 15

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Una genialidad, gracias por compartir y enseñarnos algo que nos esta faltando aprender como es el diseño de interacción y q a futuro será más que importante saber
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Diseño de Interacción y usabilidad Santiago Bustelo @sbustelo Director de diseño, Kambrica IxDA Latin America Regional Coordinator DG3 Salomone FADU/UBA 6 de mayo, 2013 MEMBER Presentación bajo licencia Creative Commons Atribución 2.5 Argentina
  • 2. 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. MEMBER
  • 3. IxDA (Interaction Design Association) • Organización abierta, voluntaria y gratuita, con la Evolución en Experiencia de Usuario • 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 MEMBER 3 ixda.org
  • 4. 1993-2013: Cada vez más interacción Santiago Bustelo, IxDA.com.ar • Sitios estáticos Contenido estático con el que no se puede interactuar. Diseño Gráfico MEMBER 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. Disciplinas de Diseño: de DG a UX 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 5
  • 6. Santiago Bustelo, IxDA.com.ar • Funciones del diseño MEMBER 6 Información Presentación Uso
  • 7. Escala de las decisiones sobre la forma Santiago Bustelo, IxDA.com.ar • MEMBER 7
  • 8. Diseño que inspira versus diseño que usás Santiago Bustelo, IxDA.com.ar • MEMBER 8
  • 9. Diseñar: dirigir resultados con un propósito Santiago Bustelo, IxDA.com.ar • MEMBER • 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. 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 Santiago Bustelo, IxDA.com.ar • Forma versus Función MEMBER 1 2 3 4 5 10
  • 11. Santiago Bustelo, IxDA.com.ar • Forma y Función MEMBER 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
  • 12. Santiago Bustelo, IxDA.com.ar • Usabilidad 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) 14
  • 13. Santiago Bustelo, IxDA.com.ar • MEMBER Diseñando para el usuario 15
  • 14. ¿Cuándo está terminado el trabajo de diseño de interacción? • 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 16
  • 15. • 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 Santiago Bustelo, IxDA.com.ar • Entendiendo al usuario MEMBER 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
  • 16. Efectividad: Incorporando al usuario
  • 17. Eficiencia: análisis y cuantificación Cuantificación KLM-GOMS Santiago Bustelo, IxDA.com.ar • MEMBER 19 Nombre y apellido: 6 Juan Carlos Pérez 1 2 3 4 Æ 5 1 2 3 4 5 Estado 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
  • 18. Satisfacción: experiencia óptima Aburrimiento Santiago Bustelo, IxDA.com.ar • MEMBER Frustración Fluencia desafío habilidad Simplificación del modelo de Mihaly Csikszentmihalyi 20
  • 19. Santiago Bustelo, IxDA.com.ar • MEMBER Affordances: comunicando la interacción 21
  • 20. • 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”. Santiago Bustelo, IxDA.com.ar • Affordance MEMBER Usability First: Affordance 22
  • 21. Teapot Dome Service Station Wikipedia article
  • 22. Santiago Bustelo, IxDA.com.ar • Mensajes contradictorios MEMBER The ADA Hall of Shame 24
  • 23. Santiago Bustelo, IxDA.com.ar • Camino del menor esfuerzo MEMBER Bad Designs.com: Path, Sidewalk 25
  • 24. Santiago Bustelo, IxDA.com.ar • ¿Cómo elijo Allegro? MEMBER Bad Designs: How do I set allegro? 26
  • 25. Santiago Bustelo, IxDA.com.ar • Esta pantalla no es táctil MEMBER UX Errors (Flickr Group) 27
  • 26. Santiago Bustelo, IxDA.com.ar • ¿Para qué sirve esto? MEMBER Mx44.2 Download Page 28
  • 27. Santiago Bustelo, IxDA.com.ar • Artefacto físico MEMBER free-scores.com: MACKIE DFX12 12 INPUT ANALOG MIXER 29
  • 28. Metáfora como condicionante Santiago Bustelo, IxDA.com.ar • MEMBER Bristol: Realtime Mixer 30
  • 29. Apple: GarageBand Santiago Bustelo, IxDA.com.ar • Balance metáfora / interfaz MEMBER 31
  • 30. Santiago Bustelo, IxDA.com.ar • MEMBER Gamification: diseñando interacciones divertidas 32
  • 31. Santiago Bustelo, IxDA.com.ar • ¿Qué es un juego? MEMBER 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 divertida Amy Jo Kim: Putting the Fun in Functional
  • 32. Santiago Bustelo, IxDA.com.ar • ¿Qué los hace divertidos? MEMBER 34 • Aprovechar nuestros patrones de respuesta primarios Amy Jo Kim: Putting the Fun in Functional
  • 33. Aburrimiento Santiago Bustelo, IxDA.com.ar • ¿Qué los hace divertidos? MEMBER 35 Frustración Fluencia desafío habilidad
  • 34. Santiago Bustelo, IxDA.com.ar • ¿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. MEMBER Chris Crawford: The Art of Computer Game Design 36
  • 35. Feedback en juegos y aplicaciones Santiago Bustelo, IxDA.com.ar • MEMBER 37 Bejeweled Google Maps Amy Jo Kim: Putting the Fun in Functional
  • 36. Colecciones en juegos y aplicaciones Santiago Bustelo, IxDA.com.ar • MEMBER 38 World of Warcraft MySpace Amy Jo Kim: Putting the Fun in Functional
  • 37. Puntos en juegos y aplicaciones Santiago Bustelo, IxDA.com.ar • MEMBER 39 Bejeweled eBay Amy Jo Kim: Putting the Fun in Functional
  • 38. Niveles en juegos y aplicaciones PowerSeller Tier Bronze Silver Gold Platinum Titanium 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 Amy Jo Kim: Putting the Fun in Functional Santiago Bustelo, IxDA.com.ar • MEMBER 40 World of Warcraft eBay
  • 39. Santiago Bustelo, IxDA.com.ar • MEMBER Proceso de diseño de interacción 41
  • 40. 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. Santiago Bustelo, IxDA.com.ar • Proceso lineal MEMBER 42
  • 41. 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. Santiago Bustelo, IxDA.com.ar • Proceso lineal interminable MEMBER 43
  • 42. 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. Santiago Bustelo, IxDA.com.ar • Proceso convergente MEMBER 44
  • 43. Observando la interacción: pruebas de usabilidad Santiago Bustelo, IxDA.com.ar • MEMBER 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. Usability problems found 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. • 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. Santiago Bustelo, IxDA.com.ar • Prototipos MEMBER 46
  • 45. Prototipos e Iteraciones en el proceso Santiago Bustelo, IxDA.com.ar • MEMBER 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
  • 46. Santiago Bustelo, IxDA.com.ar • Interfaz original MEMBER 48
  • 47. Pruebas de usabilidad
  • 48. Elaboración de prototipo
  • 49. Prueba de usabilidad de prototipo en papel
  • 50. Santiago Bustelo, IxDA.com.ar • MEMBER Un voluntario para mostrar… 52 Cómo es una prueba de usabilidad
  • 51. • 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. Santiago Bustelo, IxDA.com.ar • Introducción previa MEMBER 53
  • 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. “Contanos qué cosas te parece que podés hacer en esta pantalla. ¿Cómo las harías?
  • 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. ¡Un aplauso para el voluntario!
  • 56. Santiago Bustelo, IxDA.com.ar • MEMBER Duración de una prueba de usabilidad 45’ aprox. 64
  • 57. Rediseño SIU Guaraní: Diseño final
  • 58. Diseño de Interacción en América Latina Santiago Bustelo, IxDA.com.ar • 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 MEMBER deseable usable confiable funcional 66
  • 59. ¡Muchas gracias! Sumate a la Asociación de Diseño de Interacción: ixda.com.ar