Diseño de interacción y web 2.0 - UP - Encuentro Latinoamericano de Diseño 2011

1,276 views
1,158 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,276
On SlideShare
0
From Embeds
0
Number of Embeds
223
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Diseño de interacción y web 2.0 - UP - Encuentro Latinoamericano de Diseño 2011

  1. 1. B U E N O S A I R E SDiseño de interacción y web 2.0 Santiago Bustelo Universidad de Palermo, 27 de julio 2011 Asociación de Diseño de Interacción ixda.com.ar
  2. 2. IxDA (Interaction Design Association) • Red global dedicada a la práctica profesional del Diseño de Interacción • Foro global, 20.000 miembros • En Buenos Aires: • Encuentros • Charlas • Congresos • Cursos ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  3. 3. 1993-2011: Cada vez más interacciónSitios estáticos Aplicaciones web Sitios socialesContenido estático con Contenido dinámico Contenido dinámicoel que no se puede privado modificado por público modificado por lainteractuar. la interacción con el interacción de muchaDiseño Gráfico usuario. gente. Diseño de Interacción Diseño de Interacción Social ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  4. 4. Diseñar • El diseño es la organización de materiales y procesos de la forma más productiva, en un sentido económico, con un equilibrado balance de todos los elementos necesarios para cumplir una función. László Moholy-Nagy, 1938 ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  5. 5. Diseño de InteracciónABSTRACTO • Diseño de Experiencias • Diseño de Interacción (IxD) • Define el modelo de operación de productos interactivos para lograr mejores experiencias para la mayor cantidad de usuarios • Diseño de Interfaces • Define los elementos concretos empleados en la interacciónCONCRETO ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  6. 6. Funciones del diseño ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  7. 7. Forma y/vs. Función   16   17   18   19 15   2 0     13   14   2   3   4   21     2 1 5   6   7 2   23 12   8 1     2   9   10   1 4   25   2 1   6   2   30   3 7   28   29 ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  8. 8. Escala de las decisiones sobre la forma ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  9. 9. Sitios que te inspiran vs. sitios que usás ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  10. 10. estático aplicación social
  11. 11. Diseñando para el usuario ixda.com.arI N T E R A C T I O N D E S I G N A S S O C I A T I O NA S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  12. 12. ¿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 ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  13. 13. 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 que sea evidente, y 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. ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  14. 14. Usabilidad • 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) ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  15. 15. Efectividad: Incorporando al usuario ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  16. 16. Eficiencia: análisis y cuantificación !"#$%&()*&++,-".3 2 1 /!"#$%&#()*%+,-. 0 Cuantificación KLM-GOMS 4 Estado inicial: mano en el mouse 1 M inicio tarea 1,35 2 P Apuntar a primer campo 1,1 3 M inicio tarea 1,35 3 K click campo de texto 0,2 4 M inicio tarea 1,35 4 H pasar al teclado 0,4 5 M pensar dato 1,35 6 K 18 tipear dato 3,6 Total 10,7 ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  17. 17. Satisfacción: experiencia óptima Frustración Fluencia desafío Aburrimiento habilidad Simplificación del modelo de Mihaly Csikszentmihalyi ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  18. 18. Diálogo con IT: viabilidad !"#"$%&" #$%&" ()*+,$%&" +*(,)*$& Requerimientos de la interfaz ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  19. 19. Affordances ynivel de representación ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  20. 20. Affordance (operabilidad percibida)• 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 para esto es “compatibilidad estímulo- respuesta”. Usability First: Affordance ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  21. 21. Teapot Dome Service Station Wikipedia articleI N T E R A C T I O N D E S I G N A S S O C I A T I O NASOCIACION DE DISEÑADORES DE INTERACCION
  22. 22. Mensajes contradictorios The ADA Hall of Shame ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  23. 23. Camino del menor esfuerzo Bad Designs.com [1], [2] ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  24. 24. ¿Cómo elijo Allegro? Bad Designs: How do I set allegro? ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  25. 25. Botones misteriosos UX Errors (Flickr Group) ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  26. 26. Esta pantalla no es táctil UX Errors (Flickr Group) ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  27. 27. ¿Para qué sirve esto? Mx44.2 Download Page ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  28. 28. Artefacto físico free-scores.com: MACKIE DFX12 12 INPUT ANALOG MIXER ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  29. 29. Metáfora como condicionante Bristol: Realtime Mixer ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  30. 30. Balance metáfora / GUI ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  31. 31. Proceso de diseño ixda.com.arI N T E R A C T I O N D E S I G N A S S O C I A T I O NA S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  32. 32. Proceso lineal1. Definición de requerimientos.2. Diseño y desarrollo a nivel de producción.3. Entrega. ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  33. 33. Proceso lineal interminable1. 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, retrocede tres casilleros.5. Se repite hasta el hartazgo de una o ambas partes. ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  34. 34. Entender el tipo de problema• Problemas bien definidos • Problemas dinámicos • Algoritmos • Heurísticas • Resolución lineal • Resolución asintótica • Metodología estructurada • Metodología ágil • Foco en análisis y • Foco en entregables documentación ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  35. 35. Proceso convergente1. Objetivos y análisis inicial.2. Diseño y desarrollo en iteraciones avanzando progresivamente en: • Funcionalidad • Estructura y elementos • Lenguaje visual3. Entrega y puesta en producción. ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N ASOCIACION DE DISEÑADORES DE INTERACCION
  36. 36. Guía Oleo: modelos de búsqueda originales ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  37. 37. Búsqueda facetada ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  38. 38. Exploración de nuevas funcionalidades ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  39. 39. Búsqueda: modelos para pruebas de usabildad ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  40. 40. Exploración de línea gráfica ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  41. 41. Pruebas con usuarios ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  42. 42. Prototipo navegable ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  43. 43. Pruebas con usuarios ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  44. 44. Prototipo avanzado ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  45. 45. Versión final ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  46. 46. Responsive design ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  47. 47. Diseño de Interacción en ArgentinaOportunidades • Interés creciente en usabilidad • Diseño como requerimientoDesafíos • Baja integración del diseñador con Desarrollo y Negocios • Falta de visión y lenguaje común placentero • Falta de percepción de valor usable • Poca madurez del mercado • Alto riesgo de innovación confiable funcional ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  48. 48. Qué tenemos por delante • Formarnos • Profesionalizarnos • Investigar • Innovar • Apoyarnos ixda.com.ar I N T E R A C T I O N D E S I G N A S S O C I A T I O N A S O C I A C I Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N
  49. 49. B U E N O S A I R E Sixda.com.ar

×