1. B U E N O S A I R E S
Diseñ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. 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. 1993-2011: Cada vez más interacción
Sitios estáticos Aplicaciones web Sitios sociales
Contenido estático con Contenido dinámico Contenido dinámico
el que no se puede privado modificado por público modificado por la
interactuar. la interacción con el interacción de mucha
Diseñ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. 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. Diseño de Interacción
ABSTRACTO • 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ón
CONCRETO
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. 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. 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. 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. 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. estático aplicación
social

12. Diseñando
para el 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

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

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

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

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

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

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

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

20. Affordances y
nivel 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

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

22. Teapot Dome Service Station
Wikipedia article
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

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

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

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

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

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

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

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

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

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

32. Proceso de 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

33. Proceso lineal
1. 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

34. 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,
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

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

36. Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteraciones
avanzando progresivamente en:
• Funcionalidad
• Estructura y elementos
• Lenguaje visual
3. 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

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

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

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

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

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

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

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

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

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

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

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

48. Diseño de Interacción en Argentina
Oportunidades
• Interés creciente en usabilidad
• Diseño como requerimiento
Desafí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

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

50. B U E N O S A I R E S
ixda.com.ar