Principios, procesos y herramientas UX para la enseñanza del Diseño

Jue 7/jun CCGSM, Laboratorio 2
Mie 13/jun CCGSM, Aula 2
Santiago Bustelo, Lorena Maceratesi, Mariana Fiorillo
Principios, procesos y
herramientas UX para la
enseñanza del Diseño
Obra bajo licencia Creative Commons
Reconocimiento 4.0 Internacional

Esta presentación está publicada bajo licencia 
Creative Commons Atribución-CompartirIgual 4.0 Internacional (CC BY-SA 4.0)
Usted es libre de:
• Compartir — copiar y redistribuir el material en cualquier medio o formato
• Adaptar — remezclar, transformar y crear a partir del material.
Para cualquier propósito, incluso comercialmente.
El licenciante no puede revocar estas libertades en tanto usted siga los términos de la licencia.
Bajo las condiciones siguientes:
Atribución — Usted debe darle crédito a esta obra de manera adecuada (dar nombre del creador y
de las partes atribuidas, un aviso de derechos de autor, una nota de licencia, un aviso legal, y un
enlace al material), proporcionando un enlace a la licencia, e indicando si se han realizado
cambios. Puede hacerlo en cualquier forma razonable, pero no de forma tal que sugiera que usted
o su uso tienen el apoyo del licenciante.
Compartir igual — Si usted mezcla, transforma o crea nuevo material a partir de esta obra, usted
podrá distribuir su contribución siempre que utilice la misma licencia que la obra original, o una
que aparezca como compatible en https://creativecommons.org/compatiblelicenses.
No hay restricciones adicionales — Usted no puede aplicar términos legales ni medidas tecnológicas que
restrinjan legalmente a otros hacer cualquier uso permitido por la licencia.

IxDA BA • UX para la enseñanza del Diseño
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, 43 grupos en América Latina.
ixda.com.ar
En Argentina: Buenos Aires, Córdoba, Corrientes /
Resistencia, La Plata, Mar del Plata, Mendoza, Rosario,
Santa Fe y Tucumán.
ila.ixda.org
Conferencia Interaction Latin America 2018:  
15, 16 y 17 de Noviembre 2017, Rio de Janeiro, Brasil

Consigna:
Anotar en post-its los
conceptos que vean
interesantes para su
práctica docente
4Santiago Bustelo, Lorena Maceratesi, Mariana Fiorillo •

Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño
Experiencia de Usuario (User Experience, UX)
Atributo / resultado (Experiencia de Usuario):
• Lo que una persona experimenta en todos sus contactos
con un sistema, producto, marca o servicio. 
ISO 9241:2010
• Siempre ocurre. Puede ser intencional o accidental.
Práctica (Diseño de la Experiencia de Usuario):
• Articular medios y procesos para lograr una UX deseable.
6

UX resultado del producto de factores:  
Relevamiento x Diseño x Interacción = UX
7Santiago Bustelo •
Arhippainen, L., Tähti, M. (2003). Empirical Evaluation of User Experience in Two Adaptative Mobile Application Prototypes.  
Proceedings of the 2nd International Conference on Mobile and Ubiquitous Multimedia, 10–12 December, 2003, Norrköping, Sweden.
time pressure,
pressure of success and fail,
explicit and implicit requirements, etc.
sex, fashion,
habits, norms, language,
symbols, religion, etc.
time, place,
accompanying persons,
temperature, etc.
cultural factorssocial factors
values,
emotions,
expectations,
prior experiences,
physical characteristics,
motor functions,
personality,
motivation,
skills,
age, etc.
user
usability,
functions,
size, weight,
language, symbols,
aesthetic characteristics,
usefulness,
reputation,
adaptivity,
mobility,
etc.
product
context of use
INTERACTION
User Experience
Espacio de diseño
Resultado
Espacio de relevamiento

Métodos de Relevamiento e Investigación 
(UX / Design Research)
Qualitative (direct) Quantitative (indirect)
Attitudinal
Behavioral
© 2008 Christian Rohrer
Approach
DataSource
mix
mix
Scripted (often lab-based) use of product
Natural use of product De-contextualized / not using product
Key for Context of Product Use during data collection
Combination / hybrid
Focus Groups
Phone Interviews
Ethnographic Field Studies
Cardsorting
Diary/Camera Study
Intercept Surveys
Usability Lab Studies
Eyetracking
Usability Benchmarking (in lab)
A/B (Live) Testing
Online User Experience Assessments
(“Vividence-like” studies)
Desirability studies
Data Mining/Analysis
Email Surveys
Message Board Mining
Participatory Design Customer feedback via email
/
/
48
Landscape of User Research Methods

Dimensiones de métodos de Design Research
Conductual
Lo que la gente
hace
Actitudinal
Lo que la gente dice
Cualitativo
Qué, por qué
y cómo
arreglar
Cuantitativo
Cuántos y
Cuánto
No usando el
producto o servicio
Uso Natural
Contexto de uso
Uso Guionado
Christian Rohrer: 
When to Use Which User-Experience
Research Methods

User Experience
Design
Interaction
Design
Industrial
Design
Human
Computer
Interaction
Usability
Engineering
Ubiquitous
Computing
Interactive
Controls
Mechanical
Engineering
Electrical
Engineering
Psychology
Cognitive
Science
Sociology
Philosophy
Human Factors
& Ergonomics
Architecture
Information
Architecture
Communication
Design
Motion
Design
Spatial
Experience
Contextual
Requirements
Data & Info
Visualization
Functional
Requirements
Generative
Design
Marketing
Audio
Engineering
Sound
Design
Writing
Computer
Science
Interactive
Environments
User Interface
DesignApplication
Design
Software
Development
Navigation
Design
Guidance
Systems
User Interface
Scenography
Scenario
Design
Digital
Signage
Media
Installations
Designing for Interaction:
The Disciplines of User
Experience - Dan Saffer
UX y disciplinas 
de Diseño
UX: Lo que una persona
experimenta en todos
sus contactos con un
sistema, producto,
marca o servicio.
ISO 9241:2010

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

¿Quiénes diseñan la
Experiencia del Usuario?

Todos los que tienen intenciones que manifestar 
en el producto final
Decisiones de Negocio
Valores de la Organización
Ejecución 
de Diseño
Decisiones de Diseño

La experiencia se da en el uso
@#$%!
@#$%!
@#$%!@#$%!
@#$%!

¿Quiénes decidieron esta experiencia? 
¿Qué intenciones estaban cuidando?

Identidad de cada línea: accesible
Foto: Juane Rambosio

Identidad de cada línea: diluida

/ ZONAS DEL RECORRIDO [ RAMAL ]
:: ZONA OESTE
Olmos, Romero, Abasto, El Peligro, Etche-
verry, El Centinela, El Retiro, Santa Ana,
San Carlos, Las Quintas, La Granja, J.
Hernández, Barrio Corralón, La Cumbre y
otros barrios.
Vías principales: Avenidas 44, 520, 32,
137, 143, 31, 19, Ruta 36, Ruta 2 y otras.
:: COLOR DE IDENTIFICACIÓN
Olmos • Pza. Paso • Pza. Italia
• Est. Ferrocarril • 1 y 57
Etcheverry • Olmos • Pza.
Moreno • Est. Ferrocarril • 1 y 57
Gómez • Olmos • Pza. Italia • Pza.
San Martín • Est. Ferrocarril
Abasto • Olmos • Plaza Moreno
• Estación Ferrocarril • 1 y 57
Abasto • M. Romero • Pza. Italia
• T. De Ómnibus • Est. Ferrocarril
Barrio Santa Ana • Las Quintas
• Pza. Paso • Pza. Moreno • Pza.
Hosp. Romero • Pza. Alberti • T.
De Ómnibus • Pza. Italia • Est.
Ferrocarril
10
11
12
14
15
16
17
Hernández • Pza. Paso • Pza. Italia
• T. De Ómnibus • Est. Ferrocarril •
Pza. San Martín • Pza. Rocha
Hernandez x 38 • T.de Ómnibus •
Pza. San Martín • Est. Ferrocarril
Abasto • H. Romero • Las Quintas
• Los Hornos • Cementerio • Hosp.
San Juan de Dios • Hosp. de
Niños • Hosp. Policlínico
Hosp. Romero • Tolosa • Est.
Ferrocarril • Pza. San Martín •
Pza. Moreno
El Pato • El Peligro • Esc. 49 • Esc.
Agraria • Esc. 57 • Colonia Urquiza
• T. De Ómnibus • Pza. Italia • Pza.
Escuela 49 • Colonia Urquiza • Esc.
57 • Romero • T. De Ómnibus • Pza.
Italia • Pza. San Martín • Est. Ferro-
carril
Colonia Urquiza • Esc. 57 • Romero
• T. De Ómnibus • Pza. Italia • Pza.
24
26
61
65
82
84
85Hosp. Romero • Barrio Santa Ana
• Pza. Moreno • Hosp. de Niños18
Hernández • La Granja • Las Quin-
tas • Pza. Malvinas • Pza. Moreno
• Pza. San Martín • Pza. Rocha
23 Escuela Agraria • Abasto •
Olmos • Pza. Moreno • Pza. San
Martín • Est. Ferrocarril • 1 y 57
86
Fuente: Mariana Barba, FBA UNLP

Juane Rambosio, Santiago Bustelo
Accesibilidad

11
Lector de pantalla
Manuel Razzari
Accesibilidad

En Argentina: 5 millones de personas con limitación/es
permanente/s para ver, oír, moverse, entender o aprender
29Santiago Bustelo, Manuel Razzari, Martín Szyslican •
http://www.censo2010.indec.gov.ar/resultadosdeﬁnitivos_totalpais.asp
https://www.microsoft.com/en-us/design/inclusive

Accesibilidad web: Legislación argentina
• Ley 26.653 de Accesibilidad de la Información en las Páginas Web (noviembre
2010)
• Resolución 69/2011: Apruébase la "Guía de Accesibilidad para Sitios Web del
Sector Público Nacional" (adopción de WCAG 1.0/1999)
• Decreto 355/2013: Apruébase la reglamentación de la Ley 26.653
• Disposición Nro 2/2014, Oﬁcina Nacional de Tecnologías de Información 
(adopción de WCAG 2.0/2008)
30

Facetas de la Experiencia de Usuario
útil
deseable
valioso
accesible
creíble
encontrable
usable
Peter Morville, Facets of the User Experience (2004)

Usabilidad de un calendario
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031

Usabilidad 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

Usabilidad
La usabilidad de una interfaz es una medida de la
efectividad, eﬁciencia y satisfacción con la cual
determinados usuarios pueden alcanzar determinados
objetivos en un entorno particular con dicha interfaz.
ISO 9241-11, 1997
37

Comparar alternativas de manera objetiva
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031
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

Principios de…
• Instrucción
• Formación de hábitos
• Operación
• Selección
• Percepción
COSTO

Los once colores básicos en el lenguaje y orden en el
que aparecen (Berlin y Kay, 1969)

FEDCBA8976543215123456789ABCDEF
FEDCBA8976543214123456789ABCDEF
FEDCBA8976543213123456789ABCDEF
FEDCBA8976543212123456789ABCDEF
FEDCBA8976543211123456789ABCDEF
FEDCBA8976543210123456789ABCDEF
FEDCBA8976543211123456789ABCDEF
FEDCBA8976543212123456789ABCDEF
FEDCBA8976543213123456789ABCDEF
FEDCBA8976543214123456789ABCDEF
FEDCBA8976543215123456789ABCDEF
Wilbert O. Galitz, The Essential Guide to User Interface Design
3213123
54321212345
6543211123456
765432101234567
6543211123456
54321212345
3213123
Agudeza visual
42

Durante el fin de semana, nadie pudo ingresar…  
ni pudo entender por qué

Protanopia
Protanopia
EjemplosdeNationalEyeInstitute,NationalInstitutesofHealth
44

Cuando el color no comunica
“Nunca usar color como único elemento de significado. Emplearlo para reforzar
mensaje transmitido por texto, imagen o posición (ej. luces del semáforo).
“Empezar el diseño como wireframe o en blanco y negro, y agregar color
después.
“Emplear colores fáciles de distinguir (separados en HSL/HSV, manteniendo
buen contraste contra el fondo; no emplear colores adyacentes, sino tríadas o
complementarios).
“En documentación y ayudas, identificar elementos de la interfaz por nombre,
no por color.
Microsoft Dev Center: Color
• Emplear contraste entre texto y fondo conforme especificaciones de contraste
WCAG 2 (herramientas disponibles).
45

• Instrucción
• Formación de
hábitos
• Operación
• Selección
• Percepción
Principios de percepción:
Memoria de 
“Corto plazo”
46

Memoria de trabajo o “de corto plazo”
(Baddeley & Hitch, 1974, 2000)
Ejecutivo 
Central
Bucle 
fonológico
Agenda
visoespacial
Almacén
episódico
Lenguaje  Semántica 
visual 
Memoria
episódica de
corto plazo
Información sensorial
Memoria sensorial Decaimiento
Atención
Simply Psychology:
Working Memory
Wikipedia: 
Memoria de trabajo

Límite del Bucle fonológico como sistema autónomo
2”aprox.

¿Cuántas figuras podemos 
contar de un vistazo?

• Instrucción
• Formación de
hábitos
• Operación
• Selección
• Percepción
Principios de percepción:
Gestalt
55

De un vistazo…  
¿cómo clasificamos estas figuras?

¿Y ahora? ¿Cómo clasificamos estas figuras?

Gestalt: Principio de unidad
Los objetos encerrados son percibidos como un grupo
60

El lenguaje visual no escala infinitamente

1 + 1 = 3 o más
La actividad visual suplementaria es 
no-información, ruido, y recarga.
(Edward Tufte, The Visual display of Quantitive Information)

Aplicación
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
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
vs.

Aplicación
vs.

Aplicación
Don Quijote de la Mancha
Don Quijote de la Mancha1 es una novela escrita por el español Miguel
de Cervantes Saavedra.
Publicada su primera parte con el título de El ingenioso hidalgo don
Quijote de la Mancha a comienzos de 1605, es la obra más destacada
de la literatura española yuniversal, además de ser la más publicada y
traducida de la historia después de la Biblia.
Su segunda parte apareció en 1615 con el título de El ingenioso
caballero don Quijote de la Mancha.
Es la primera obra genuinamente desmitificadora de la tradición
caballeresca y cortés por su tratamiento burlesco. Representa la
primera novela moderna y la primera polifónica; como tal, ejerció un
enorme influjo en toda la narrativa europea.
Por considerarse «el mejor trabajo literario jamás escrito», encabezó la
lista de las mejores obras literarias de la historia, que se estableció con
las votaciones de cien grandes escritores de 54 nacionalidades a
petición del Club Noruego del Libro en el 2002; así, fue la única
excepción en el estricto orden alfabético que se había dispuesto.3
vs.
Don Quijote de la Mancha
Don Quijote de la Mancha1 es una novela escrita por el español
Miguel de Cervantes Saavedra.
Publicada su primera parte con el título de El ingenioso hidalgo don
Quijote de la Mancha a comienzos de 1605, es la obra más destacada
de la literatura española yuniversal, además de ser la más publicada y
traducida de la historia después de la Biblia.
Su segunda parte apareció en 1615 con el título de El ingenioso
caballero don Quijote de la Mancha.
Es la primera obra genuinamente desmitificadora de la tradición
caballeresca y cortés por su tratamiento burlesco. Representa la
primera novela moderna y la primera polifónica; como tal, ejerció un
enorme influjo en toda la narrativa europea.
Por considerarse «el mejor trabajo literario jamás escrito», encabezó la
lista de las mejores obras literarias de la historia, que se estableció con
las votaciones de cien grandes escritores de 54 nacionalidades a
petición del Club Noruego del Libro en el 2002; así, fue la única
excepción en el estricto orden alfabético que se había dispuesto.
https://es.wikipedia.org/wiki/
Don_Quijote_de_la_Mancha

• Instrucción
• Formación de
hábitos
• Operación
• Selección
• Percepción
Principios de
Selección
66

Principio de priorización: Ley de Pareto
El 80% de los resultados proviene del 20% de los elementos.
67

Ley de Hick-Hyman
Tiempo necesario para tomar una decisión: 
T = a + b log2 ( n +1 )
• a, b: latencia y velocidad, 
dependientes del contexto. 
Raskin: a falta de datos, tomamos a=50, b=150 msec.
• n: cantidad de opciones 
con igual índice de probabilidad.
 
Más información: 
Artículo en Wikipedia sobre Ley de Hick (en inglés)
68

Aplicación de Ley de Hick
Tenemos 32 items con igual probabilidad.
¿Cómo nos conviene disponerlos? 
a) Una sola página con 32 items
b) 4 páginas con 8 items cada una
69
T = a + b log2 ( n +1 )
x log2 x
1 0
2 1
3 1.58
4 2
5 2.32
6 2.58
7 2.81
8 3
9 3.17
10 3.32
11 3.46
x log2 x
12 3.58
13 3.7
14 3.81
15 3.91
16 4
17 4.09
18 4.17
19 4.25
20 4.32
21 4.39
22 4.46
x log2 x
23 4.52
24 4.58
25 4.64
26 4.7
27 4.75
28 4.81
29 4.86
30 4.91
31 4.95
32 5
33 5.04

Aplicación de Ley de Hick
Tenemos 32 items con igual probabilidad. ¿Cómo nos conviene disponerlos? 
a)Una sola página con 32 items
50 + 150 log2 (32 + 1) = 806,6 ms.
b)4 páginas con 8 items cada una
50 + 150 log2 (8 + 1) = 525,48 ms. cada pantalla 
x 4 = 2101,92 ms.
70

Windows 3.1: un solo plano de decisión

Windows 95: Jerarquías

Mientras tanto, en el escritorio…

Criterios
• Diseño Centrado en Objetivos
• ¿Qué problema queremos resolver?
• ¿A quién?
• ¿Cómo sabremos si lo logramos?
• Usabilidad
• Diseñador y Cliente no son representativos
• Los Usuarios tienen información valiosa para el diseño
• Foco real en las personas, no en artefactos y herramientas. 
Individuos en lugar de sistemas.
• Investigación es indispensable para informar y evaluar.
• Diversidad
• Contextos de Uso
• Accesibilidad
79

Caso: seguridad vial en
Alberta, Canada
Problema: lesiones y muertes relacionadas con
accidentes de tránsito
Objective: cambio de conducta
Preguntas:
• ¿Quién necesita cambiar un comportamiento peligroso?
• ¿Qué comportamiento es ése?
• ¿Cómo podemos lograr que ese segmento considere
realizar ese cambio?
Design research:
• Investigación cualitativa
• Investigación cuantitativa
Decisiones de diseño:
• Enfocar la comunicación en el daño que puede causar a
otros quien se siente omnipotente frente al volante.
Jorge Frascara (Buenos Aires, Argentina,
1939). Profesor Emérito en la Universidad de
Alberta, asesor a la ISO (International
Standards Organization).
Frascara, Jorge, Finn, Adam, Jenzen, Henri L., Paterson, John G.
and Strickler-Wilson, Zoe (1992) Trafﬁc Safety in Alberta/
Casualty Collision and the 18-24 Year Old Male Driver: Criteria for
a Targeted Communication Campaign, Edmonton: Alberta Motor
Association/Alberta Solicitor General.

Proceso lineal
1. Deﬁnición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
81

Proceso lineal interminable
1. Deﬁnición de requerimientos 
(cómo se cree que se resolverá el problema).
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
4. No es lo que el cliente quería o lo que 
el usuario necesitaba, 
retrocede tres casilleros.
5. Se repite hasta el hartazgo de una 
o ambas partes.
82
Ouch Ouch
Arrgh

Entender el tipo de problema
Problemas bien deﬁnidos
• Es posible deﬁnir estado inicial,
estado deseado, y camino más
corto.
• Se aplican algoritmos: secuencias
estructuradas de pasos que
garantizan “la” solución.
• Metodología secuencial.
• Foco en análisis y documentación. 
Problemas complejos
• El problema no es entendido hasta
no haberlo resuelto.
• Se trabajan de forma heurística, en
un proceso de prueba y error para
aproximarse a “una” solución.
• Metodología ágil.
• Foco en entregables.
83

Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteraciones 
avanzando y validando progresivamente 
aspectos del producto, de general a particular.
3. Entrega.
84

Objetivos  Requerimientos
• ¿Por qué y para qué estamos
haciendo este proyecto?
• Foco en los problemas a
resolver, no en
funcionalidades ni en
soluciones.
• Enmarcan decisiones de
diseño.
• ¿Qué vamos a hacer? 
• Describen funcionalidades
o atributos visibles de una
solución propuesta. 
• Enmarcan ejecución de
diseño.
85

Si pedimos requerimientos a los clientes…
Maurizio Pesce, Elon Musk, Tesla Factory in Fremont - CC BY 2.0
Estoy empezando una
empresa de autos de
lujo… Me gustaría un logo
clásico… Algo como
Mercedes-Benz…

…pueden terminar obteniendo lo que pidieron
Musk Motors
Re: Logo
Hola Elon,
Adjunto el logo basado
en tus
especiﬁcaciones. Te
mando la factura en
mail aparte.
xoxo

Los requerimientos de diseño 
son producto de un proceso de diseño
Reid Parham, Giraffe Project Standards Manual - CC BY-SA 3.0

Design Thinking: 5 Etapas

Doble Diamante
Exploración Síntesis Ideación Prototipado
Divergir en necesidades
Divergir en ideas
Converger en oportunidades
Converger en soluciones

Lean (metodologías ágiles): Proceso iterativo
Ideas
ProductoDatos
EJECUTAR
MEDIR, 
OBSERVAR
IDEAR, 
DECIDIR

Lean software development:
filosofía de reducir el desperdicio
• Sobreproducción: Funcionalidad no usada, entrega de productos de bajo valor
• Espera: Demoras en el proceso
• Transporte innecesario: Pases de manos, falta de acceso remoto
• Sobreprocesamiento: Documentación exhaustiva
• Inventario: Recursos no empleados
• Movimiento innecesario: Task Switching, apagar incendios
• Defectos: requerimientos no cumplidos, bugs
• Creatividad / conocimiento desperdiciados
Richard Durnall: Waste / Muda, 
Eric Harris: Lean in IT, 
Wikipedia: Lean_IT
92

Gestión de Proyectos: triple restricción
COSTO
TIEMPO
ALCANCE
Lo que el equipo se compromete a
lograr
Recursos y
esfuerzo que
deben ser
aplicados o
asignados
Tiempo
calendario
requerido para
completar todas
las tareasCalidad

No se puede tocar una variable sola…
TIEMPO
COSTO
ALCANCE extensión de alcance
Calidad

…a menos que estiremos creativamente…
TIEMPO
COSTO
ALCANCE
Calidad

…y tengamos la suerte de que nadie lo note
Gestión del
proyecto:
• Andamiaje,
soporte
• Observar la
triple restricción
durante la
duración del
proyecto
– =
Calidad perdida
TIEMPO
COSTO
ALCANCE
Calidad

Gestión de Proyectos: Roles elementales
Requerimientos
Entregables
Cliente Desarrollador
Diseñador
Contenidista

…y la forma en que suelen escalar
“Esa manga de inútiles”“Esos cretinos”

Interlocutores para mantener la cordura
Interlocutor del
equipo
Desarrolladores
Diseñadores
Contenidistas
Requerimientos
Entregables
Interlocutor
del cliente
Stakeholders
Sponsors

Herramientas de
relevamiento, validación y 
co-creación

UX Research
Evaluación experta
Este tipo de análisis permite encontrar
problemas de alto nivel en términos de
transgresión o falta de seguimiento de
las reglas fundamentales de diseño.
• Caminata cognitiva: se recorre la interfaz
simulando el punto de vista del usuario,
generando hipótesis sobre puntos a
observar.
• Evaluación heurística: Se examina la
interfaz y se evalúa su cumplimiento de
principios de usabilidad (la “heurística”).
• El análisis se hace en base a heurísticas y
checklists de diseño.
Where am I?
What can I do?
Clear purpose
Transparent
well lay-outed
Call for action
Display of status
Goal oriented
and task driven
Sequencing of
actions
Error tolerant
and robust
Structure o
Users are told the purpose of the scre
Help users to navigate. Use Signposts
Direct: Where there is output, let there
human vocabulary is used; talk to peo
Aestetically pleasing
Graphically, attention is directed to w
Simple lay-out, organized with visua
Constraints are used;constructive g
Correct mapping of displayed funct
Tell/make predictable next steps;
Goals are achieved with the leas
Frequently used functions are d
The tool/interface is not overw
It is forgiving. Every one make
It empowers the user. The us
Consistent, consistent, cons
What looks the same acts t
hort-term
Feedback is informative, yielding c
Tell users what is happening; keep
The visual structure applied matc
ANALYZE
ert

UX Research
Entrevistas cualitativas
Permiten validar los “pain points”,
la necesidad de alternativas, y
desarrollar primeras hipótesis.
• Actividad clave para entender las
tareas y motivaciones del mercado
objetivo.
• Las entrevistas pueden ser formales,
informales o contextuales, según las
necesidades.
• Se puede combinar con otras
técnicas, tales como pruebas de
usabilidad, sacando el mayor partido
de la muestra.
Entrevistas cualitativas en Wayra:
¿Cómo viven los procesos en los
que se inserta el producto?

UX Research
Pruebas de Usabilidad y
Prototipos
Permiten evaluar decisiones de
diseño con productos existentes o
con prototipos económicos, bajando
costos y riesgos del proyecto.
• Son pruebas rápidas, de bajo costo y alto
impacto.
• Se observa la conducta antes que la
opinón, obteniendo métricas de
usabilidad.
• Testear con tan sólo 5 usuarios por
iteración, revela el 80% de los problemas
de usabilidad latentes en el producto.
Pruebas de usabilidad:  
Prototipos en papel

UX Research
Arquetipos (Personas)
Permiten alinear decisiones
estratégicas, de diseño y
funcionales.
• Síntesis de entrevistas cualitativas y/o
relevamiento contextual.
• Foco en necesidades y actividades.
• Segmentación del mercado objetivo por
modelos mentales, características
actitudinales y conductuales.
Foto zpeckler (CC)
“Cuando éramos chicos,
mi hermano se lastimó.
Lo vendé tan bien, que
no tuvieron que darle
puntos”.
Adrián, estudiante
• Dicen que nació para médico.
el “miedo a los libros”. Descubr
tiempo que los ve en la pantall
• Un niño por cada aula puede te
ese niño.
Junto con dislexia, le genera g
• Las páginas muy “cargadas” o
• Agradece que Google entienda
• Los sitios que prefiere Pablo, n
presión.
Foto zpeckler (CC)
“¡Tenemos uno muy
bueno… en oferta!”
Claudio, Represen
• Siempre tuvo facilida
vendedores en el se
• Perdió la vista en un
rehabilitación. Apren
enseñó a sus compa
permiten trabajar má
• Como Claudio no pu
negocia con un clien
Los clientes se sient
• Los sitios que Claud
todas las imágenes,
Modelo de Personas para accesibilidad: 
¿Qué diﬁcultades encuentran en su vida
cotidiana personas con discapacidades, y
cómo las superan?

Mapas de empatía
Paul Boag: Adapting empathy maps for UX design

UX Research, Design Thinking
Journey Map
Katie Shelly: Mindsets, Tools and Terminology of Experience Design

UX Research, Design Thinking
Mapeo conceptual
Organización y visualización de
datos relevados para encontrar
patrones y generar insights.
• Trabajo sobre dos o más dimensiones: 
X/Y, columnas, áreas (ej. categorías,
diagramas de Venn), colores, pilas (ej.
agrupar tarjetas por sinónimos).
• Dinámicas de trabajo contemplando
actividades individuales y grupales, sin
caer en “groupthink”.
Mapeo conceptual: Diagrama de
Afinidad en Universidad Maimónides

IxDA BA • UX para la enseñanza del Diseño Santiago Bustelo • 108
Katie Shelly: Mindsets, Tools and Terminology of Experience DesignUX Research, Design Thinking
Co-Creación

UX Research
Pruebas A/B
• Se sirven alternativamente dos o más versiones a visitantes de un
sitio, y se miden y comparan las conversiones de cada versión.
• Todas las versiones deben ser funcionales, impactando en mayor
costo para realizar las pruebas.
• Requiere de rigor estadístico (en ocasiones, opuesto a la intuición)
para interpretar los resultados.
109

UX Research
Pruebas A/B
¿Cuál ganó?

UX Research
Pruebas A/B
• Version A increased homepage
clicks by 20% and increased
revenue per visitor (RPV) by
5.47%.
• WTW visitors voted: 
Version A (48%), B (52%)
Which Test Won: Dell’s Home Page
Test Results
111

Qué información presentamos y cómo, 
impacta en la capacidad de toma de decisiones

Diseñar para el comportamiento

Conclusiones
• No hay Experiencia de Usuario sin usuarios.
• Los problemas de que no identiﬁquemos y resolvamos dentro
de nuestro proceso, los encontrarán nuestros usuarios.
• Todos los involucrados impactan en la UX, no sólo el diseñador.
• Extender el proceso de Diseño: entender qué problema
queremos resolver, a quién, y cómo sabremos si lo
logramos.
• Extender el alcance del Diseñador: de ejecución a
orquestación.
114Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño

Práctica de taller 
Mapeo y debate: qué y cómo
aplicar a la enseñanza del
Diseño

B U E N O S A I R E S
ixda.com.ar

Principios, procesos y herramientas UX para la enseñanza del Diseño

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Principios, procesos y herramientas UX para la enseñanza del Diseño

Similar a Principios, procesos y herramientas UX para la enseñanza del Diseño (20)

Más de Santiago Bustelo

Más de Santiago Bustelo (20)

Último

Último (20)

Principios, procesos y herramientas UX para la enseñanza del Diseño