Tema 1- Diseño de interacción

Diseño de Proyectos Interactivos

 Diseño de interacción
• Concepto interdisciplinar,
difícil de definir, resultado de
la confluencia de múltiples
campos: diseño industrial,
tecnología, comunicación,
diseño gráfico, ingeniería,
psicología, arte, etc.
• Es contextual por naturaleza:
resuelve problemas
específicos bajo un conjunto
determinado de
circunstancias y empleando
los materiales disponibles.
Fuente: SAFFER, Dan (2010). Designing for Interaction, Second Edition, p. 21.
• Según apunta Dan Saffer en Designing for Interaction (2010: 4-5), existen tres
escuelas de pensamiento sobre los objetivos del diseño interactivo:

– Tecnológico: hacer la tecnología, especialmente la tecnología digital, útil,

utilizable y fácil de usar. Los diseñadores de interacción recogen el material
en bruto producido por ingenieros y programadores y lo moldean hasta
convertirlo en productos que la gente disfrute.
– Interacción social: facilitar la comunicación entre humanos a través de los
productos. La tecnología es aquí irrelevante; cualquier tipo de objeto o
dispositivo puede establecer esa conexión entre las personas (teléfono,
blog, red social, etc.)
– Conductista: integra los dos puntos de vista anteriores. Pone el foco en la
funcionalidad de los dispositivos y en el feedback hacia el usuario: cómo se
comportan y cómo responden los productos al uso que hace de ellos la
gente.
• Diseño
«What is design? It’s where you stand with a foot in two
worlds – the world of technology and the world of people and
human purposes – and you try to bring the two together.»
Mitch Kapor, citado por Benyon (2010: 10).

– El término se refiere tanto al proceso creativo e intencionado

de idear algo nuevo, como a los objetos que son el resultado
de ese proceso.

– No suele seguir un desarrollo lineal, sino que requiere un alto

grado de exploración e iteración, para concretar las
características y funciones que el sistema ha de ofrecer.
 Diseño

– Elementos de composición:
• Colores
• Tipografías
• Puntos y líneas
• Formas
– Elementos de imagen:
• Fotografías
• Ilustraciones
• Símbolos e iconos
– Elementos audiovisuales:
• Vídeos
• Animaciones
• Sonidos
• Interactividad
– Hace referencia a componentes, dispositivos y
aplicaciones que responden dinámicamente a las
acciones de las personas.

– Los sistemas interactivos tienen como cometido

principal facilitar al usuario la visualización, el
procesamiento, el almacenamiento y la transmisión
de información.

– En la actualidad, productos de muy distinto tipo

incorporan componentes interactivos (ropa,
electrodomésticos, edificios, etc.).
 Diseño de interacción
• Centrado en el usuario
– Tiene que ver con dar prioridad a los usuarios
durante el proceso de diseño, para que el resultado
final sea un producto más disfrutable y sencillo de
usar:
• Pensar en lo que quieren las personas en lugar de
en lo que la tecnología puede hacer.
• Idear nuevas maneras para conectar a la gente
entre sí.
• Implicar a las personas en el proceso de diseño.
• Diseñar para la diversidad.
• Interfaz
– Consiste en aquellas partes del sistema con las que el usuario
entra en contacto, física, perceptual y conceptualmente:
• Físicamente: al pulsar botones o mover controles, el dispositivo
interactivo responderá proporcionando feedback sobre nuestras acciones.
• Perceptualmente: comunicación sensorial. El dispositivo muestra
información en su pantalla, o reproduce sonidos.
• Conceptualmente: interaccionamos con el dispositivo para hacer uso de
sus funciones empleando un determinado lenguaje (textual, icónico,
gestual, sonoro...)
 Diseño de interacción

Diseño de interfaz para Hewlett Packard. Ecosistema de aplicaciones para impresoras conectadas a la Web.
Fuente: portfolio de Paco Corrientes, www.pacocorrientes.com
UX-

UI-
 UX- Experiencia de Usuario
¿Qué es la Experiencia de Usuario?
Cómo se sienten los usuarios cuando usan nuestras aplicaciones.
Es un sentimiento global durante toda la interacción
¿Por qué UX y UI son importantes?
Funcionalidad y estética que se complementen de forma armónica
Es necesario tener una estrategia de experiencia de usuario
Cómo crear una estrategia de usuarios
Si cambias muy despacio los usuarios
sentirán una experiencia de usuario obsoleta
Si cambias muy deprisa, dejarás a tus usuarios atrás
La experiencia de usuario llevada al extremo
Cuando la realidad se adapta al dispositivo del usuario
 Tests de usuarios
Test A/B

Se trata de plantear 2 soluciones,

de ahí el nombre test A/B y vemos
qué opción de las 2 es más efectiva.

El punto clave aquí es que entre la

opción A y B, se comparta casi un
90% de la interacción de manera
igual. Es decir, se deben probar
pocas cosas diferentes a la vez,
porque si A y B son muy diferentes
no habrá manera de sacar datos
comparativos.
 Tests de usuarios
Mapas de calor

Con los mapas de calor conseguimos tener

datos reales sin tener que hacer ningún test.
Se colocan sobre el producto final y estos
scripts, lo que hacen es grabar el número de
clics hechos, en la zona que han hecho click,
el scroll que hace el usuario, etc.

Es decir, queda grabada cada acción del

usuario, en una serie de imágenes
superpuestas en la web, lo que nos
permite ver, de manera acumulativa todos
esos clicks hechos por los usuarios.

Nos facilitará saber qué zonas son las más

calientes, cuáles son las más frías, qué menús
funcionan mejor, o por dónde acceden los
usuarios a cada sección.
Proceso de diseño
Construir prototipos
entrar con la contraseña
de otra red social
Usabilidad
Evolución del registro en airbnb
CTA o ”Call to action” (llamadas a la acción) DESCRIPTIVAS