Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 Rico FADU UBA

M E M B E R
Diseño de 
Información Interactivo
Principios, Fundamentos y Casos
Santiago Bustelo
User Experience Director, Kambrica
IxDA Buenos Aires Local Group Coordinator
DG3 Esteban Javier Rico FADU UBA
4 de julio 2016
Obra bajo licencia Creative
Commons Reconocimiento 4.0
Internacional

Diseño de Información Interactivo •M E M B E R
2

M E M B E R
Me presento…
• Santiago Bustelo, Consultor en Experiencia de Usuario
(UX) y diseñador de interacción.
• Fundador y Director de UX, Kambrica.
• Fundador y Coordinador IxDA Buenos Aires.  
Coordinador IxDA Latinoamérica 2010-2015. 
Chair Interaction South America 2014.
• Empecé a trabajar en diseño de interacción en 1997. 
Desde entonces participé en proyectos para Argentina,
Chile, Colombia, Perú, España, Estados Unidos e Inglaterra,
para empresas de todo tamaño de las más diversas
industrias y también para organismos públicos.
• Desde 2001 ha dictado presentaciones y talleres sobre UX,
Usabilidad, Diseño de Interacción y Diseño Centrado en el
Usuario en Argentina, Chile, Colombia, Estados Unidos,
Canadá, Alemania, Irlanda, Finlandia y Países Bajos.

Experiencia de Usuario (UX)
Atributo / resultado (Experiencia de Usuario):
• Lo que una persona experimenta 
(percepciones, ideas, emociones, cambios de comportamiento…) 
en todos sus contactos con un sistema, producto, marca o servicio
(Interés inicial, primer uso, uso recurrente, recomendación…)
• Siempre ocurre. Puede ser intencional o accidental.
5

Experiencia de Usuario (UX)
Atributo / resultado (Experiencia de Usuario):
• Lo que una persona experimenta 
(percepciones, ideas, emociones, cambios de comportamiento…) 
en todos sus contactos con un sistema, producto, marca o servicio
(Interés inicial, primer uso, uso recurrente, recomendación…)
• Siempre ocurre. Puede ser intencional o accidental.
Práctica (Diseño de la Experiencia de Usuario):
• Articular medios y procesos para lograr en los usuarios una
experiencia determinada.
6

Foco en la ejecución
Foto por Violinlover via Wikipedia (CC BY-SA 3.0)

Para UX…
• Un diseño (idea+ejecución) no es
intrínsecamente bueno o malo.
• Se lo puede considerar, por sus
resultados en un contexto determinado,
mejor o peor que las alternativas.

“Diseño es la
manifestación de
una intención”
Jared Spool
11

Arquitectura: diseño de circulación
12
Foto: Pixabay (Dominio Público)interiorexteriorplan.com

Circulación en un restaurante
13
1. Toma de pedido
2. Entrega
3. La cuenta

Circulación rediseñada
14
1. Toma de pedido y pago
2. Entrega

Desafío de diseño: mejorar la rotación
• Optimización de procesos
• Menú reducido
• Simplifica procesos de cocina
• La gente tarda menos en decidir
• Usuarios como parte del sistema
• Autoservicio
• No sobremesa
15

Comportamiento = persona x entorno
16
Diseñando el entorno, influenciamos el comportamiento

Caso: 
Rediseño de señalética 
con foco en la experiencia

Experiencia
Foto: Paul Sableman

To Park Or Not To Park?http://nikkisylianteng.com/

Caso: diseño de un calendario
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031
23

Caso: diseño de un calendario
D L M M J V S
26 27 28 29 30 31 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 1 2 3 4 5
25

Usabilidad es la medida de la efectividad,
eficiencia y satisfacción con la que un producto
se puede usar por usuarios determinados para
conseguir objetivos específicos en un contexto
de uso concreto.
(ISO 9241, Ergonomics of human-system interaction-Part 210: Human-
centered design for interactive systems. ISO/IEC 9126-4 Metrics)
Usabilidad: atributo cualitativo y
cuantificable para un diseño interactivo
27

Para UX…
• Para evaluar un diseño, hay
que usarlo.
• Nosotros no somos el
usuario.

D L M M J V S
26 27 28 29 30 31 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 1 2 3 4 5
Cuantificación: Comparar alternativas de
manera objetiva
29
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031

Pruebas de usabilidad: Guía Óleo

¿Qué problema le
queremos resolver, 
a quién?
La pregunta más importante 
para enfocar nuestro diseño

Tema / Universo
32
Análisis clínico

Personas
33
Laboratorio Médico Paciente

Pieza original
34
Wired Magazine: The Blood Test Gets a Makeover

Rediseño con foco en el paciente
35

Rediseño con foco en el paciente

M E M B E R
Diseño de Información Interactivo •
Principio de Bustelo
Información es lo que está al
servicio de una decisión. 
El resto es ruido.
37

¿Lanzamos o no lanzamos?
Foto: Wikipedia (Dominio público)

Condiciones el día de lanzamiento
¿Es posible que las
bajas temperaturas
hayan afectado a los
cohetes?

Caso Challenger: datos
40
¿Lanzamos o no
lanzamos?

Resultado

Caso Challenger: contestar la pregunta
42
Edward Tufte: Visual Explanations

Diseño de Información:
Representación y ejecución

Funciones del Diseño
44
Información
Presentación
Uso

Datos
( 10.0/8.04; 8.0/6.95; 13.0/7.58; 9.0/8.81; 11.0/8.33; 14.0/9.96;
6.0/7.24; 4.0/4.26; 12.0/10.84; 7.0/4.82; 5.0/5.68 ), ( 10.0/9.14;
8.0/8.14; 13.0/8.74; 9.0/8.77; 11.0/9.26; 14.0/8.10; 6.0/6.13;
4.0/3.10; 12.0/9.13; 7.0/7.26; 5.0/4.74 ), ( 10.0/7.46; 8.0/6.77;
13.0/12.74; 9.0/7.11; 11.0/7.81; 14.0/8.84; 6.0/6.08; 4.0/5.39;
12.0/8.15; 7.0/6.42; 5.0/5.73 ), ( 8.0/6.58; 8.0/5.76; 8.0/7.71;
8.0/8.84; 8.0/8.47; 8.0/7.04; 8.0/5.25; 19.0/12.50; 8.0/5.56;
8.0/7.91; 8.0/6.89 )
45

Presentación de información
46
Property Value
Mean of each x variable 90
Variance of each x variable 100
Mean of each y variable 75
Variance of each y variable 375
Correlation between 
each x and y variable
816
Linear regression line y = 3 + 0.5x
I II III IV
x y x y x y x y
100 804 100 914 100 746 80 658
80 695 80 814 80 677 80 576
130 758 130 874 130 1,274 80 771
90 881 90 877 90 711 80 884
110 833 110 926 110 781 80 847
140 996 140 810 140 884 80 704
60 724 60 613 60 608 80 525
40 426 40 310 40 539 190 1,250
120 1,084 120 913 120 815 80 556
70 482 70 726 70 642 80 791
50 568 50 474 50 573 80 689

Reducir la no-información (grilla, etc.)
47
I II III IV
x y x y x y x y
100 804 100 914 100 746 80 658
80 695 80 814 80 677 80 576
130 758 130 874 130 1,274 80 771
90 881 90 877 90 711 80 884
110 833 110 926 110 781 80 847
140 996 140 810 140 884 80 704
60 724 60 613 60 608 80 525
40 426 40 310 40 539 190 1,250
120 1,084 120 913 120 815 80 556
70 482 70 726 70 642 80 791
50 568 50 474 50 573 80 689
Property Value
Mean of each x variable 90
Variance of each x variable 100
Mean of each y variable 75
Variance of each y variable 375
Correlation between 
each x and y variable
816
Linear regression line y = 3 + 0.5x

Presentación visual de información
48
Wikipedia: Anscombe´s Quartet 
Edward Tufte, The Visual display of Quantitive Information
4 6 8 10 12 14 16 18
4
6
8
10
12
x1
y1
4 6 8 10 12 14 16 18
4
6
8
10
12
x2
y2
4 6 8 10 12 14 16 18
4
6
8
10
12
x3
y3
4 6 8 10 12 14 16 18
4
6
8
10
12
x4
y4
I II III IV
x y x y x y x y
100 804 100 914 100 746 80 658
80 695 80 814 80 677 80 576
130 758 130 874 130 1,274 80 771
90 881 90 877 90 711 80 884
110 833 110 926 110 781 80 847
140 996 140 810 140 884 80 704
60 724 60 613 60 608 80 525
40 426 40 310 40 539 190 1,250
120 1,084 120 913 120 815 80 556
70 482 70 726 70 642 80 791
50 568 50 474 50 573 80 689
Serie I Serie II
Serie III Serie IV

En toda representación hay una decisión
49

Resultado de priorizar ángulos y proporciones
50

Priorizar áreas a costa de ángulos
51

Mapa del Subte: preservando la geografía
52

Mapa del Subte: revelando la red
53

De Lancaster Gate a Paddington, 
en subte:
• Cambio de línea,
• Cuatro estaciones
• Total: 15 minutos
Distorsiones por priorizar red sobre geografía
De Lancaster Gate a Paddington, 
caminando:
• 5 minutos

8 reglas de oro del diseño de interfaces
(Ben Shneiderman)
1. Consistencia.
• Secuencias de acciones
similares ante situaciones
similares.
• Terminología única para avisos,
menúes y ayudas.
• Comandos consistentes.
• Uso consistente de colores,
tipografía y elementos visuales.
2. Ofrecer atajos o caminos
alternativos.
• A medida que aumenta la
frecuencia de uso, también lo
hace el deseo del usuario de
reducir la cantidad de
interacciones e incrementar la
velocidad de operación.
55

(Ben Shneiderman)
3. Realimentación informativa.
• Para cada acción del operador,
debe existir una respuesta del
sistema.
• Respuesta modesta para
acciones menores o
frecuentes.
• Respuesta sustancial para
acciones poco frecuentes o
de mayor importancia.
56

(Ben Shneiderman)
4. Conducir las tareas.
• Organizar las secuencias de
acciones en grupos con inicio,
desarrollo y final.
Al completar un grupo de acciones, la
respuesta del sistema produce en el
operador satisfacción, sensación de
alivio, una señal para dejar a un lado
opciones y planes de contingencia, y la
indicación de que el camino está listo
para el próximo grupo de acciones.
57
Caso: Damián Calderón

(Ben Shneiderman)
5. Manejo simple de errores.
• En la medida de lo posible,
diseñar el sistema de manera
que el usuario no pueda cometer
un error serio.
• Si se produce un error, el
sistema debe ser capaz de
detectarlo y ofrecer mecanismos
simples y comprensibles para su
solución.
58

(Ben Shneiderman)
6. Permitir revertir acciones de
manera sencilla.
• En la medida de lo posible, las
acciones deben ser reversibles.
• Ello reduce la ansiedad, dado
que el usuario sabe que los
errores pueden ser corregidos.
Por ello alienta a la exploración
de opciones poco familiares.
59
Casos: Jorge Martínez

(Ben Shneiderman)
7. Soportar puntos de control
interno.
• Los usuarios deben sentir
que están al mando y que el
sistema responde a sus
acciones, en lugar de ser
ellos quienes responden al
sistema. 
8. Reducir la carga sobre la
memoria a corto plazo.
Este principio está relacionado con
la limitación humana de
procesamiento de información en la
memoria de corto plazo.
• Donde fuera apropiado, debe
ofrecerse acceso inmediato a
comandos, abreviaturas, códigos,
y otras informaciones que
puedan aclarar dudas
contextualizadas.
60

Casos de diseño de
información interactivo

Rediseño: wireframes
69

Ciudad Universitaria
Ciudad Autónoma de Buenos Aires
Ciudad Universitaria de Buenos Aires
Pabellón II
Ciudad Autónoma de Buenos Aires, Buenos
Aires
Centro de Graduados Liceo Naval
Aires
la fonda
Aires
Ciu Experience S.R.L.
Avenida Santa Fe 1780, 1060 Ciudad De
Buenos Aires
Calculo Y Gestion Arg
Cucha Cucha 2478, 1416 Ciudad De Buenos
Aires
"Nicola´s House" Residencia
Universitaria
Avenida Larrazábal 1300, 1440 Ciudad
Autonoma de Buenos Aires, Capital Federal
Morales Ruas Y Asoc
Cerrito 1294, 1010 Ciudad De Buenos Aires
1.960 resultados

Rediseño Imagen institucional
79
320077 88
APELLIDO Y NOMBRE
00/00/0000PLAN VTO.000
URGENCIAS:
4000 8888 / 4556 4556 / 0810 333 8888
Esta credencial es personal e intranferible para uso exclusivo del titular y deberá presentarse con
el documento de identidad. En caso de extravío se solicita remitirla a nuestra oﬁcina más próxima.
Superintendencia de Salud Órgano de Control 0 800 222 SALUD (72583) - www.sssalud.gov.ar

Pruebas con usuarios y card sorting

Para conocer más: 
IxDA (Interaction Design Association)
• Organización mundial abierta, voluntaria y
gratuita, con la misión de liberar a la condición
humana de las malas experiencias que la desafían,
avanzando la disciplina de Diseño de Interacción.
• Foro global, más de 80.000 miembros, 175 grupos
locales, 39 grupos en América Latina.
• En Argentina: Buenos Aires, Córdoba, Corrientes /
Resistencia, La Plata, Mar del Plata, Mendoza,
Rosario, Santa Fe y Tucumán
• Conferencia Interaction South America:  
ISA16 3, 4 y 5 de noviembre en Santiago de Chile
ixda.com.ar
111

ISA.IXDA.ORG
isa.ixda.org
 
3, 4 Y 5 DE NOVIEMBRE DE 2016
Santiago de Chile

M E M B E R
¡Muchas gracias!
Santiago Bustelo
4 de julio, 2016

Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 Rico FADU UBA

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 Rico FADU UBA

Similar to Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 Rico FADU UBA (20)

More from Santiago Bustelo

More from Santiago Bustelo (14)

Recently uploaded

Recently uploaded (20)

Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 Rico FADU UBA