Presentación de Santiago Bustelo (IxDA BA: ixda.com.ar) para niveles 2 y 3 de la cátedra Salomone de Diseño Gráfico FADU / UBA (catedrasalomone.com), el 9 de junio de 2011.

1. B U E N O S A I R E S
Diseño de interacción
Santiago Bustelo
Salomone DG2 / DG3
9 de junio 2011
Presentación bajo licencia Creative Commons Atribución 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/ar

2. IxDA (Interaction Design Association)
• Red global dedicada a la práctica
profesional del Diseño de
Interacción
• Foro global, 25.000 miembros
• En Buenos Aires:
• Encuentros
• Charlas
• Congresos
• Cursos
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
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
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
Sitios sociales
Contenido dinámico
público modificado por la
interacción de mucha
gente.
Diseño de Interacción Social

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
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
• 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
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
ABSTRACTO
CONCRETO

6. Funciones del diseño
Información
Presentación
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
Uso

7. Forma y/vs. Función
17 18 15 16 19 20 14 2 3 4 21 1
13 5
22 12 6
11 7 23 10 9 8 24 31
25 30 29 27 26 8 2I 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
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
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. Diseñando
para el usuario
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

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

12. 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.
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

13. 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)
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

14. Efectividad: Incorporando al usuario
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

15. Eficiencia: análisis y cuantificación
Nombre y apellido:
6 Juan Carlos Pérez
1 2 3
4
Æ
5
Cuantificación KLM-GOMS
1
2
3
3
4
4
5
6
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N
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

16. Satisfacción: experiencia óptima
Frustración
Aburrimiento
Simplificación del modelo de Mihaly Csikszentmihalyi
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N
Fluencia
desafío
habilidad

17. Diálogo con IT: viabilidad
deseable
usable
confiable
funcional
Requerimientos de
la interfaz
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

18. Affordances y
nivel de representación
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. Affordance
• A situation where an object’s sensory characteristics
intuitively imply its functionality and use.
• A button, by being slightly raised above an otherwise flat
surface, suggests the idea of pushing it. A lever, by being an
appropriate size for grasping, suggests pulling it. A blinking red
light and buzzer suggests a problem and demands attention. A
chair, by its size, its curvature, its balance, and its position,
suggests sitting on it.
• An affordance is a desirable property of a user interface –
software which naturally leads people to take the correct
steps to accomplish their goals.
• The common psychological term for this is stimulus-response
compatibility.
Usability First: Affordance
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

20. 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
A S O C I A C I O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

21. Mensajes contradictorios
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
The ADA
Hall of Shame

22. Camino del menor esfuerzo
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
Bad Designs.com
[1], [2]

23. Mapeo de controles
UX Errors (Flickr Group): Stove Burners…
Wikipedia: Natural mapping
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. ¿Cómo elijo Allegro?
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
Bad Designs: How do I set allegro?

25. Botones misteriosos
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
UX Errors
(Flickr Group)

26. Esta pantalla no es táctil
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
UX Errors
(Flickr Group)

27. ¿Para qué sirve esto?
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
Mx44.2
Download Page

28. Realismo vs. Simbolismo
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
UX Magazine: Realism in UI design

29. Representación específica / universal / críptica
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
UX Magazine: Realism in UI design

30. Información: el punto justo
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
UX Magazine: Realism in UI design
Indexed: Needles and haystacks and such.

31. Artefacto físico
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
free-scores.com:
MACKIE DFX12 12
INPUT ANALOG MIXER

32. Metáfora como condicionante
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
Bristol:
Realtime Mixer

33. Balance metáfora / GUI
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

34. Proceso de diseño
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

35. Proceso lineal
1.Definición de requerimientos.
2.Diseño y desarrollo a nivel de producción.
3. Entrega.
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

36. 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.
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

37. • Problemas bien definidos
• Algoritmos
• Resolución lineal
• Metodología estructurada
• Foco en análisis y
documentación
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N
• Problemas dinámicos
• Heurísticas
• Resolución asintótica
• Metodología ágil
• Foco en entregables
Entender el tipo de problema

38. 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.
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

39. SIU Guaraní: versión actual
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. SIU Guaraní: versión actual
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. Plan de proyecto
• Tareas iniciales
• Establecimiento de objetivos del proyecto.
• Relevamiento del modelo operativo y proceso actual.
• Relevamiento con usuarios
• Definición de perfiles de usuarios, tareas críticas y escenarios, entorno y guión para
las pruebas. Reclutamiento de usuarios.
• Pruebas con usuarios sobre interfaz actual.
• Arquitectura de información
• Elaboración de mapa de sitio.
• Diseño de prototipo preliminar
• Wireframes.
• Validación de prototipo con referentes del cliente.
• Pruebas con usuarios.
• Diseño de prototipo final
• Implementación de ajustes.
• Lenguaje visual.
• Diseño final.
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. Guión de tareas
• Login
• El usuario se acuerda de su clave? Cómo resuelve problemas en el ingreso?
• Inscribirse a materia “Comunicación 1”, cátedra a elección
• Identificación de materia correcta (101 - Teorías y Prácticas de la
Comunicación I - Comunicaciones de Masas)
• Proceso de decisión: Cátedra, días, horarios
• Inscribirse a Materia y Comisión (amigos)
• Proceso de navegación e inscripción
• Resolución de problema: no hay cupo
• Inscripción a correlativas
• Información de contexto
• Qué materias figuran como aprobadas, cursadas o libres
• Nomenclatura, proceso
• Dar de baja una materia
• Cuál es la pantalla inicial? Orden Sujeto - Verbo
• Inscripción a examen final
• Proceso similar al de insc. a materia? Posible confusión?
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. Pruebas de usabilidad: versión actual
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

44. Wireframes iniciales
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

45. Inscripción a materias
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

46. Inscripción a materias
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

47. Pruebas de usabilidad: prototipo en papel
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

48. Diseño final: Inscripción a Materias
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

49. Diseño final: Inscripción a Materias
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

50. Diseño final: Historia académica
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 O N D E D I S E Ñ A D O R E S D E I N T E R A C C I O N

51. 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
• Falta de percepción de valor
• Poca madurez del mercado
• Alto riesgo de innovación
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
deseable
usable
confiable
funcional

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