B U E N O S A I R E S

Diseño de interacción y web 2.0Santiago Bustelo

Universidad de Palermo, 27 de julio 2011

Asociación de Diseño de Interacciónixda.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 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.com.ar

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 ixda.com.ar

Sitios estáticosContenido estático con el que no se puede interactuar.Diseño Gráfico

Aplicaciones webContenido dinámico privado modificado por la interacción con el usuario.Diseño de Interacción

Sitios socialesContenido dinámico público modificado por la interacción de mucha gente.Diseño de Interacción Social

1993-2011: Cada vez más 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 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.com.ar

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 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.com.ar

• 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

ABSTRACTO

CONCRETO

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 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.com.ar

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 ixda.com.ar

Forma y/vs. Función

1  2   3   4  

5  6  

7  8  9  10  11  12  

13  

14  

15   16   17   18   19   20  21  

22  23  

24  

25  26  27  28  29  30  31  

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.com.ar

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 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.com.ar

Sitios que te inspiran vs. sitios que usás

estático aplicación

social

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.com.ar

Diseñandopara 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 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.com.ar

¿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 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 ixda.com.ar

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 NA 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 ixda.com.ar

• 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)

Usabilidad

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.com.ar

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 NA 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 ixda.com.ar

Eficiencia: análisis y cuantificación

!"#$%&'(')*&++,-"./'!"#$%&#'()*%+,'-.

0

123

4123344

56

Estado inicial: mano en el mouseEstado inicial: mano en el mouseM inicio tarea 1,35P Apuntar a primer campo 1,1M inicio tarea 1,35K click campo de texto 0,2M inicio tarea 1,35H pasar al teclado 0,4

M pensar dato 1,35K 18 tipear dato 3,6

Total 10,7

Cuantificación KLM-GOMS

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 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 ixda.com.ar

Satisfacción: experiencia óptima

Simplificación del modelo de Mihaly Csikszentmihalyi

Frustración

Fluencia

desafío

habilidad

Aburrimiento

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.com.ar

Diálogo con IT: viabilidad

!"#"$%&"

'#$%&"

()*+,$%&"

+'*(,)*$&

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 ixda.com.ar

Affordances ynivel 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 NA 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 ixda.com.ar

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

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

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 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.com.ar

Mensajes contradictorios

The ADAHall of Shame

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.com.ar

Camino del menor esfuerzo

Bad Designs.com[1], [2]

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.com.ar

¿Cómo elijo Allegro?

Bad Designs: How do I set 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 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.com.ar

Botones misteriosos

UX Errors(Flickr Group)

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.com.ar

Esta pantalla no es táctil

UX Errors(Flickr Group)

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.com.ar

¿Para qué sirve esto?

Mx44.2Download Page

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.com.ar

Artefacto físico

free-scores.com:MACKIE DFX12 12 INPUT ANALOG MIXER

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.com.ar

Metáfora como condicionante

Bristol:Realtime Mixer

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.com.ar

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 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.com.ar

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 NA 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 ixda.com.ar

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 NA 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 ixda.com.ar

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 NA 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 ixda.com.ar

• Problemas bien definidos

• Algoritmos

• Resolución lineal

• Metodología estructurada

• Foco en análisis y documentación

• Problemas dinámicos

• Heurísticas

• Resolución asintótica

• Metodología ágil

• Foco en entregables

Entender el tipo de problema

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 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 ixda.com.ar

Proceso convergente

1. Objetivos y análisis inicial.2. Diseño y desarrollo en iteraciones

avanzando progresivamente en:

• Funcionalidad

• Estructura y elementos

• Lenguaje visual3. 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 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.com.ar

Guía Oleo: modelos de búsqueda originales

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.com.ar

Búsqueda facetada

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.com.ar

Exploración de nuevas funcionalidades

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.com.ar

Búsqueda: modelos para pruebas de usabildad

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.com.ar

Exploración de línea gráfica

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.com.ar

Pruebas con usuarios

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.com.ar

Prototipo navegable

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.com.ar

Pruebas con usuarios

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.com.ar

Prototipo avanzado

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.com.ar

Versión 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 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.com.ar

Responsive design

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.com.ar

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 ixda.com.ar

Qué tenemos por delante

• Formarnos

• Profesionalizarnos

• Investigar

• Innovar

• Apoyarnos

B U E N O S A I R E S

ixda.com.ar