diseño de interacción y web 2.0 (dg3 esteban rico fadu/uba)
DESCRIPTION
Presentacion para DG3 Cátedra Esteban Rico FADU/UBA, 14 jun 2010TRANSCRIPT
![Page 1: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/1.jpg)
B U E N O S A I R E S
Diseño de interacción y web 2.0Santiago Bustelo • 14 de junio, 2010
DG3 Cátedra Esteban Rico FADU/UBA
Presentación bajo licencia Creative CommonsAtribución 2.5 Argentina
![Page 2: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/2.jpg)
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 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
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
![Page 3: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/3.jpg)
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 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
Funciones del diseño
![Page 4: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/4.jpg)
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 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
Diseños interactivos
• Diálogo entre el diseño y el usuario
• El usuario interviene el diseño
• El diseño presenta una respuesta
• Definir el carácter y reglas de ese diálogo (modelo de operación):diseñar la interacción
Diseño de experiencias
Diseño de interacción
Diseño de interfaces
![Page 5: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/5.jpg)
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 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
Carácter de la interacción
Lúdico Productivo
![Page 6: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/6.jpg)
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 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
Modelo de operación: secuencia de pasos
1. Toma de pedido
2. Entrega
3. La cuenta
![Page 7: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/7.jpg)
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 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
Modelo de operación: secuencia de pasos
1. Toma de pedido y pago
2. Entrega
![Page 8: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/8.jpg)
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 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
Comida rápida: bajo costo, alta rotación
• Optimización de procesos
• Oferta limitada
• Usuarios como parte del sistema
• Autoservicio
• No sobremesa
![Page 9: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/9.jpg)
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 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
Comportamiento = persona x entorno
Diseñando el entorno, influenciamos el comportamiento
![Page 10: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/10.jpg)
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 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
Análisis de la operación en una interfaz
Luke Wroblewski & Etre, Primary & Secondary Actions in Web Forms
![Page 11: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/11.jpg)
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 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
Formulario original
Nombre: Apellido:
Email: Repetiremail:
Teléfono:
Mensaje:
Verificación:
¿Cómo llegó al sitio?
ENVIAR BORRAR
Seleccione... Seleccione...
Quiero recibir información de promociones He leído y acepto la política de privacidad
Tipo de mensaje:
K98LQ1
![Page 12: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/12.jpg)
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 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
Análisis de tareas
Nombre: Apellido:
Email: Repetiremail:
Teléfono:
Mensaje:
Verificación:
¿Cómo llegó al sitio?
ENVIAR BORRAR
Seleccione... Seleccione...
Quiero recibir información de promociones He leído y acepto la política de privacidad
Tipo de mensaje:
K98LQ1
![Page 13: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/13.jpg)
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 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
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)
![Page 14: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/14.jpg)
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 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
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.
![Page 15: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/15.jpg)
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 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
Formulario optimizado
Nombre y apellido:
Email:
Mensaje:
ENVIAR MENSAJE
recibir en mi email copia del mensaje enviado
7.60 seg.
6.90 seg.
2.70 seg.
32.40 seg.
3.05 seg.
52.65 seg.
![Page 16: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/16.jpg)
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 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
Preguntas y opcionales en segunda pantalla
¡Gracias!Su mensaje ha sido enviado.
ENVIAR
Su opinión es muy importante para nosotros.
Le agradeceremos unos instantes más de su tiempo:
¿Cómo supo de nosotros?
¿Desea recibir promociones y ofertas por e-mail?
opción 1
No, gracias Sí, deseo recibir ofertas por e-mail
![Page 17: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/17.jpg)
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 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
Jerarquías de necesidades
placentero
usable
confiable
funcional
Requerimientos dela interfaz
![Page 18: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/18.jpg)
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 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
Desde usable a deseable
![Page 19: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/19.jpg)
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 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
Sitios estáticosContenido estático con el que no se puede interactuar.
Aplicaciones webContenido dinámico privado modificado por la interacción con el usuario.
Sitios socialesContenido dinámico público modificado por la interacción de mucha gente.
Web 2.0: diálogo a través de la interfaz
Joshua Porter, How to encourage good behaviour
![Page 20: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/20.jpg)
![Page 21: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/21.jpg)
![Page 22: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/22.jpg)
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 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
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
![Page 23: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/23.jpg)
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 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
1. Colecciones
![Page 24: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/24.jpg)
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 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
2. Puntos y rankings
![Page 25: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/25.jpg)
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 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
3. Feedback
![Page 26: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/26.jpg)
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 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
4. Intercambios: interacciones estructuradas
![Page 27: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/27.jpg)
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 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
5. Customización
![Page 28: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/28.jpg)
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 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
¿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
![Page 29: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/29.jpg)
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 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
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
![Page 30: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/30.jpg)
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 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
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
![Page 31: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/31.jpg)
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 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
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
placentero
usable
confiable
funcional
![Page 32: Diseño de Interacción y web 2.0 (DG3 Esteban Rico FADU/UBA)](https://reader031.vdocumento.com/reader031/viewer/2022020306/54c778334a7959f34f8b461b/html5/thumbnails/32.jpg)
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 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
Qué tenemos por delante
• Formarnos
• Profesionalizarnos
• Investigar
• Innovar
• Apoyarnos