Post on 27-Jan-2015
description
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
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
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
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
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
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
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
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
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
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
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
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
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)
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.
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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