El documento resume las principales ideas sobre diseño de interacción y la asociación IxDA presentadas por Santiago Bustelo. IxDA es una red global dedicada al diseño de interacción con más de 20,000 miembros. El diseño de interacción implica definir el diálogo entre el diseño y el usuario a través de la interfaz. El documento también analiza ejemplos de formularios y cómo optimizarlos mediante técnicas como priorizar campos obligatorios y dividir el formulario en varias pantallas.

1. B U E N O S A I R E S
Diseño de interacción y web 2.0
Santiago Bustelo • 14 de junio, 2010
DG3 Cátedra Esteban Rico FADU/UBA
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina

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
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. Funciones del 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

4. Diseños interactivos
• Diálogo entre el diseño y el
usuario Diseño de
experiencias
• El usuario interviene el
diseño
Diseño de
• El diseño presenta una interacción
respuesta
Diseño de
• Definir el carácter y reglas de
interfaces
ese diálogo (modelo de
operación):
diseñar 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

5. Carácter de la interacción
Lúdico Productivo
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. Modelo de operación: secuencia de pasos
1. Toma de pedido
2. Entrega
3. La cuenta
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. Modelo de operación: secuencia de pasos
1. Toma de pedido y pago
2. 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 Ó N D E D I S E Ñ O D E I N T E R A C C I Ó N

8. Comida rápida: bajo costo, alta rotación
• Optimización de procesos
• Oferta limitada
• Usuarios como parte del sistema
• Autoservicio
• No sobremesa
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. Comportamiento = persona x entorno
Diseñando el entorno, influenciamos el comportamiento
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. Análisis de la operación en una interfaz
Luke Wroblewski & Etre, Primary & Secondary Actions in Web Forms
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. Formulario original
Nombre: Apellido:
Email: Repetir
email:
Teléfono:
¿Cómo llegó al sitio? Seleccione... Tipo de mensaje: Seleccione...
Mensaje:
Quiero recibir información de promociones He leído y acepto la política de privacidad
Verificación: K98LQ1
ENVIAR BORRAR
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. Análisis de tareas
Nombre: Apellido:
Email: Repetir
email:
Teléfono:
¿Cómo llegó al sitio? Seleccione... Tipo de mensaje: Seleccione...
Mensaje:
Quiero recibir información de promociones He leído y acepto la política de privacidad
Verificación: K98LQ1
ENVIAR BORRAR
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. Cuantificación: KLM-GOMS
Cada operación del usuario tiene un costo.
Key 0,2 seg. Tecla / mouse click & release
Hover 0,4 seg. Paso mouse  teclado
Point 1,1 seg. Apuntar con el mouse
Mental 1,35 seg. Preparación mental nueva tarea
Response ? Respuesta del sistema
Más información: Artículo en Wikipedia sobre KLM-GOMS (en inglé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

14. Cuantificación: Formulario de contacto
Obligatorio (opcional)
Nombre 7.55 ( 2.70 )
Apellido 4.50 ( 2.70 )
Email 6.90 8.40
Repetir email 6.90 6.90
Código de área 3.50 ( 2.70 )
Teléfono 4.50 ( 2.70 )
Cómo llegó al sitio 14.00 ( 2.70 )
Tipo de mensaje 13.40 ( 2.70 )
Mensaje 32.40 32.40
Quiero recibir promociones 4.40 4.40
Política de privacidad 2.65 2.65
Verificación 20.05 20.05
Enviar 3.05 3.05
Total 122.25 seg. 94.05 seg.
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. Formulario optimizado
Nombre y apellido:
7.60 seg.
Email:
6.90 seg.
recibir en mi email copia del mensaje enviado 2.70 seg.
Mensaje:
32.40 seg.
ENVIAR MENSAJE 3.05 seg.
52.65 seg.
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. Preguntas y opcionales en segunda pantalla
¡Gracias!
Su mensaje ha sido enviado.
Su opinión es muy importante para nosotros.
Le agradeceremos unos instantes más de su tiempo:
¿Cómo supo de nosotros?
opción 1
¿Desea recibir promociones y ofertas por e-mail?
No, gracias Sí, deseo recibir ofertas por e-mail
ENVIAR
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. Jerarquías de necesidades
placentero
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. Desde usable a deseable
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. Web 2.0: diálogo a través de la interfaz
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
usuario. gente.
Joshua Porter, How to encourage good behaviour
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

22. Putting the fun in functional
• Mecánicas de juegos
• Sistemas y características que hacen a un juego divertido,
absorbente y adictivo
• Aplicables a interacciones sociales:
1. Colecciones
2. Puntos y rankings
3. Feedback
4. Intercambios
5. Customización
Amy Jo Kim, Putting the fun in functional
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. 1. Colecciones
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. 2. Puntos y rankings
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. 3. Feedback
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. 4. Intercambios: interacciones estructuradas
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. 5. Customizació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

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

29. Diseño Centrado en el Usuario versus…
• Diseño autoreferencial
• Diseño centrado en la tecnología
• Diseño centrado en el que pone la plata
• Diseño centrado en la competencia
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. Pruebas con usuarios
• Preguntar y observar sin condicionar.
• Tomar con cuidado las hipótesis del usuario.
• Buscamos validar o refutar una hipótesis de diseño,
y obtener material para nuevas hipótesis:
• modelo mental del usuario
• operabilidad percibida (affordance) de la interfaz
• proceso de decisión del 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

31. 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
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. Qué tenemos por delante
• Formarnos
• Profesionalizarnos
• Investigar
• Innovar
• Apoyarnos
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. B U E N O S A I R E S
¡Muchas gracias!
ixda.com.ar