B U E N O S A I R E S

Diseño de interacciónSantiago Bustelo

Salomone DG2 / DG39 de junio 2011

Presentación bajo licencia Creative Commons Atribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/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 (Interaction Design Association)

• Red global dedicada a la práctica profesional del Diseño de Interacción

• Foro global, 25.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

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

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

• 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

Funciones del diseño

Información

Presentación

Uso

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

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

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

Sitios que te inspiran vs. sitios que usá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

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

¿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

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

• 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

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

Eficiencia: análisis y cuantificación

Nombre y apellido:6 Juan Carlos Pérez

4

321

��5

123344

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

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

Diálogo con IT: viabilidad

deseable

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

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

Affordance

• A situation where an object’s sensory characteristics intuitively imply its functionality and use.

• A button, by being slightly raised above an otherwise flat surface, suggests the idea of pushing it. A lever, by being an appropriate size for grasping, suggests pulling it. A blinking red light and buzzer suggests a problem and demands attention. A chair, by its size, its curvature, its balance, and its position, suggests sitting on it.

• An affordance is a desirable property of a user interface – software which naturally leads people to take the correct steps to accomplish their goals.

• The common psychological term for this is stimulus-response compatibility.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

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

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

Mapeo de controles

UX Errors (Flickr Group): Stove Burners…

Wikipedia: Natural mapping

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

¿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

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

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

¿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

Realismo vs. Simbolismo

UX Magazine: Realism in UI 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

Representación específica / universal / críptica

UX Magazine: Realism in UI 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

Información: el punto justo

UX Magazine: Realism in UI design

Indexed: Needles and haystacks and such.

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

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

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

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

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

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

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

• 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

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

SIU Guaraní: versión actual

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

SIU Guaraní: versión actual

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

Plan de proyecto

• Tareas iniciales• Establecimiento de objetivos del proyecto.

• Relevamiento del modelo operativo y proceso actual.

• Relevamiento con usuarios• Definición de perfiles de usuarios, tareas críticas y escenarios, entorno y guión para

las pruebas. Reclutamiento de usuarios.

• Pruebas con usuarios sobre interfaz actual.

• Arquitectura de información• Elaboración de mapa de sitio.

• Diseño de prototipo preliminar• Wireframes.

• Validación de prototipo con referentes del cliente.

• Pruebas con usuarios.

• Diseño de prototipo final

• Implementación de ajustes.

• Lenguaje visual.

• Diseño 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

Guión de tareas

• Login• El usuario se acuerda de su clave? Cómo resuelve problemas en el ingreso?

• Inscribirse a materia “Comunicación 1”, cátedra a elección• Identificación de materia correcta (101 - Teorías y Prácticas de la

Comunicación I - Comunicaciones de Masas)• Proceso de decisión: Cátedra, días, horarios

• Inscribirse a Materia y Comisión (amigos)• Proceso de navegación e inscripción• Resolución de problema: no hay cupo

• Inscripción a correlativas• Información de contexto

• Qué materias figuran como aprobadas, cursadas o libres• Nomenclatura, proceso

• Dar de baja una materia• Cuál es la pantalla inicial? Orden Sujeto - Verbo

• Inscripción a examen final• Proceso similar al de insc. a materia? Posible confusió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

Pruebas de usabilidad: versión actual

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

Wireframes iniciales

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

Inscripción a materias

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

Inscripción a materias

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

Pruebas de usabilidad: prototipo en papel

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

Diseño final: Inscripción a Materias

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

Diseño final: Inscripción a Materias

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

Diseño final: Historia académica

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

deseable

usable

confiable

funcional

B U E N O S A I R E S

ixda.com.ar