En esta plática se presentan principios, métodos y estrategias que permiten entender la importancia de diseñar experiencias de usuario óptimas con sistemas interactivos y la forma de lograrlo. Partiendo de las bases que definen la interacción sensorial que tenemos con sistemas digitales, los esquemas que limitan o facilitan la comprensión de los requerimientos de usuarios, y las formas de organizar el proceso de creación de productos a través de equipos multi-disciplinarios, se proponen ideas concretas para integrar una estrategia que parta del reconocimiento del valor de la empatía, la iteración y validación constante con usuarios, y el prototipado rápido de ideas. Hoy en día no es posible que un producto interactivo sea exitoso si no se diseña de manera correcta la experiencia de usuario. Más allá de los elementos estéticos el diseño de la UX implica una buena empatía con los usuarios y sus necesidades. Por otro lado implica también un sólido conocimiento de la forma en como los seres humanos dadas nuestras capacidades cognitivas y sensoriales hacemos sentido de los sistemas interactivos. Este conocimiento es necesario a todos los niveles en una organización que diseña sistemas interactivos.

1. Diseñando
la
Experiencia
del
Usuario
con
Sistemas
Interac7vos:
¿Cómo
diseñamos
para
quienes
realmente
somos?
Presenta:
Victor
M.
González

2. Diseñando
la
Experiencia
del
Usuario
con
Sistemas
Interac7vos:
¿Cómo
diseñamos
para
quienes
realmente
somos?
Víctor
M.
González
Laboratorio
de
Usabilidad
y
Sistemas
Interac7vos
Departamento
Académico
de
Computación
Ins7tuto
Tecnológico
Autónomo
de
México

3. ¿Quiénes
somos
y
cómo
eso
condiciona
nuestro
actuar
con
sistemas
interac9vos?
¿Cómo
diseñamos
innovaciones
para
tal
escenario?

4. hNps://www.interac7on-­‐design.org/encyclopedia/human_computer_interac7on_hci.html

5. hNps://www.pinterest.com/pin/269723465158027357/

6. Operators - K: pressing key, P: Pointing a location with mouse, D: Drag
movement, H: Moving hand to home position, M: Mentally preparing for an
action, R: Waiting for response.

8. hNp://cdn-­‐www.airliners.net/avia7on-­‐photos/photos/6/5/6/2217656.jpg

9. hNp://i.dailymail.co.uk/i/pix/2015/01/27/251BD2DB00000578-­‐2927910-­‐image-­‐a-­‐12_1422350107973.jpg

10. • Somos
nuestras
emociones
• Somos
nuestro
contexto
• Somos
nuestros
sen7dos
• Somos
nuestra
indefinición
–
• en
cuanto
a
innovaciones:
no
sabemos
lo
que
queremos
hasta
que
lo
vemos

11. Somos nuestras
emociones

12. hNp://home.arcor.de/pats604/img/image_uxd_01.png

13. hNp://vertassets.blob.core.windows.net/image/4da52951/4da52951-­‐d63e-­‐46f9-­‐ada5-­‐224deeceff72/
apple_store2.jpg

14. Somos nuestro contexto:
Percibimos lo que esperamos
• Nuestra percepción del mundo no se basa únicamente
en lo que nos rodea
• Percibimos, en buena medida, lo que esperamos percibir
• Nuestras expectativas – y de ahí nuestras percepción –
son influenciadas por tres factores:
– el pasado: nuestra experiencia
– el presente: nuestro contexto
– el futuro: nuestras metas
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

15. Percepción influenciada por nuestra
experiencia
• Nuestras experiencias pueden también influenciar otros
tipos de percepción, por ejemplo la comprensión de un
enunciado
• A Headline: “New Vaccine Contains Rabies”
(Nueva Vacuna Contiene Rabia)

16. Percepción influenciada por nuestra
experiencia
Patrones de Percepción (Frames)
• La exposición repetida a un tipo de situación, escenario
o contexto crea un patrón en nuestras mentes de lo que
esperamos ver.
• Objetos esperados: Cocina, oficina, consultorio
• Mental shortcuts: no es necesario examinar a detalle …
pueden resultar en obviar cosas
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

17. • El sistema visual ha
sido llevado a un
nivel de no-atención
por la consistencia de
los botones en las
primeras páginas.
• Puede tomar varios
intentos erroneos el
que el usuario se de
cuenta de que los
botones han
cambiado de su
posición estándar.

18. Percepción influenciada por nuestro
contexto
• Cuando tratamos de entender la manera en cómo opera
nuestro sistema visual, podemos creer que se trata de
un proceso de abajo a arriba (bottom-up process),
combinando características básicas, tales como líneas,
angulos, curvas y patrones, con otras figuras para
eventualmente formar objetos completos.
• Nuestra percepción visual – la lectura en particular – no
es un proceso de abajo a arriba. Se puede entender
mejor como un proceso de arriba a abajo.
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

19. Percepción influenciada por nuestro
contexto
• La palabra en que una letra aparece puede
afectar cómo identificamos la letra
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

20. Percepción influenciada por nuestras metas
• Nuestras metas filtran nuestras percepciones: cosas
que no están relacionadas a nuestras metas tienden
a ser filtradas, y no se registran en nuestra mente
consciente
• Cuando la gente inspecciona una interfaz (ej.
software o página web), buscando información una
función específica, no leen cuidadosamente.
• Normalmente pasamos por encima de la pantalla de
forma rápida y superficial sobre elementos no
relacionados con nuestra meta.
• No es sólo ignorar esos elementos, la mayoría de las
veces, no los notamos.

21. Percepción influenciada por nuestras metas
• Fenómeno de la Fiesta (Cocktail Party
Phenomenon): nuestra metas filtran
nuestras percepciones
• Mientras más interesado estés en una
conversación, más inténsamente tu
cerebro filtrará el ruido que te rodea
(conversaciones).
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

22. • Somos
nuestras
emociones
• Somos
nuestro
contexto
• Somos
nuestros
sen4dos
• Somos
nuestra
indefinición
–
• en
cuanto
a
innovaciones:
no
sabemos
lo
que
queremos
hasta
que
lo
vemos

23. Actividad Sensorial: El Ojo Humano
hNp://www.gusgsm.com/

24. Resolución de la Fóvea vs. Periferia
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

25. This error message for faulty sign-in appears in peripheral vision, where it will probably be missed.
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

26. This error message for faulty login is missed by some users even though it is not far from “Login” button.
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

27. A simulation of a user’s visual field while the fovea is fixed on the “Login” button.
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

28. This error message for faulty login is missed by some users even though it is not far from “Login” button.
Fuente:
Designing
with
the
Mind
in
Mind
–
2nd.
Edi7on
-­‐
Jeff
Johnson

29. • Somos
nuestras
emociones
• Somos
nuestro
contexto
• Somos
nuestros
sen7dos
• Somos
nuestra
indefinición
-­‐
en
cuanto
a
innovaciones:
no
sabemos
lo
que
queremos
hasta
que
lo
vemos

30. ¿Como
diseñamos
innovaciones
para
tal
escenario?
• Un
usuario
que
demanda
considerar
emociones,
sen9mientos
• Un
usuario
que
no
está
libre
de
su
contexto
•
Un
usuario
que
es
mucho
menos
poderoso
desde
el
punto
de
vista
sensorial
• Un
usuario
que
no
sabe
lo
que
quiere

31. Pensar
como
diseñador
-­‐
Diseñar
con
empafa
-­‐
Diseñar
in
situ
-­‐
Diseñar
a
través
de
iteraciones
-­‐
Diseñar
con
capital
intelectual

32. Pensar
como
diseñador
Diseñar
con
empafa
¿cómo
ves
el
agua?
Fuente:
hNps://dschool.stanford.edu/

33. Pensar
como
diseñador
Diseñar
con
empafa
1.
Sal
del
agua
2.
Observa
de
cerca
el
agua
y
todo
lo
que
pasa
en
ella.
3.
Habla
con
otras
creaturas
que
viven
en
el
agua.
4.
Perturba
el
agua.
5.
Alcanza
y
captura
la
atención
del
viejo
pez
y
pregunta
qué
es
lo
que
intenta.
Fuente:
hNps://dschool.stanford.edu/

34. Pensar
como
diseñador
Diseñar
con
empafa
¿para qué?
para entender su
cliente / usuario /
cliente / a ti mismo
de una nueva manera
Esto requiere
EMPATÍA
Fuente:
hNps://dschool.stanford.edu/

35. Pensar
como
diseñador
Diseñar
con
empafa
Para entender su
cliente / usuario /
cliente / a ti mismo
de una nueva manera
Esto requiere
EMPATÍA

36. Fuente: The User is Always Right: A Practical Guide to Creating and Using Personas for the
Web Book by Steve Mulder

37. Observa
a
tus
usuarios
interactuando
con
tu
producto
• Lo
que
el
usuario
dice
no
es
lo
que
el
usuario
hace
• Si
quieres
descubrir
los
problemas
de
tus
productos,
necesitas
hacer
que
los
usen
• Pruebas
de
Usabilidad:
Eficiencia,
Efec7vidad,
Sa7sfacción
Fuente: La Fábula del Diseñador Centrado en el Usuario: David Travis, 2010
Pensar
como
diseñador
Diseñar
in
situ

38. • Todos
los
sistemas
interac7vos
7enen
problemas
• La
mayoría
de
los
problemas
serios
7enden
a
ser
fáciles
de
encontrar
• Observar
a
usuarios
te
hace
un
mejor
diseñador
David Travis, 2010
Observa
a
tus
usuarios
interactuando
con
tu
producto
Pensar
como
diseñador
Diseñar
in
situ

39. Observa
a
tus
usuarios
interactuando
con
tu
producto
Pensar
como
diseñador
Diseñar
in
situ

40. Pensar
como
diseñador
Diseñar
a
través
de
iteraciones
• Los
requerimientos
se
definen
de
manera
gradual
• Dividir
el
desarrollo
en
periodos
cortos
y
constantes
de
entregas
permite
asimilar
mejor
los
requerimientos
• Enfocar
los
elementos
a
desarrollar
en
aquellos
elementos
que
den
más
valor
a
los
dueños
del
producto
Iterando
para
definir
requerimientos
Fuente: La Fábula del Diseñador Centrado en el Usuario: David Travis, 2010

41. Pensar
como
diseñador
Diseñar
a
través
de
iteraciones
Proto4pos
de
Papel
• Mucho
esfuerzo
es
desperdiciado
en
codificar
sin
tener
claro
un
diseño
• Un
proto7po
puede
ser
u7lizado
de
manera
temprana
en
el
proceso
de
diseño
con
el
propósito
de
comunicar
y
compar9r
ideas
entre
el
diseñador,
los
usuarios
y
otros
interesados,
de
tal
modo
que
los
detalles
de
los
requerimientos
puedan
aclararse
para
todas
las
partes
Fuente: La Fábula del Diseñador Centrado en el Usuario: David Travis, 2010

42. Pensar
como
diseñador
Diseñar
a
través
de
iteraciones
Proto4pos
de
Papel
• Los
propósitos
de
un
proto7po
pueden
ser:
– Verificar
la
fac7bilidad
de
las
ideas
con
los
usuarios
– Verificar
la
u7lidad
de
la
aplicación
– Permi7r
a
los
usuarios
el
contribuir
al
diseño
de
la
aplicación
– Permi7r
a
los
usuarios
probar
ideas
– Validar
los
requerimientos
(i.e.,
para
revelar
inconsistencias
o
requerimientos
incompletos)
Fuente: La Fábula del Diseñador Centrado en el Usuario: David Travis, 2010

43. Pensar
como
diseñador
Diseñar
a
través
de
iteraciones

44. Pensar
como
diseñador
Diseñar
con
capital
intelectual
• Diseñar
más
allá
del
front
end:
– No
diseñamos
cascarones,
diseñamos
un
huevo
completo
• Concebirse
a
si
mismo
como
creador
– no
como
implementador
• Hacer
ingeniería
• Los
diseñadores
inventan
el
futuro

45. Pensar
como
diseñador
Diseñar
con
capital
intelectual

46. Pensar
como
diseñador
Diseñar
con
capital
intelectual

47. Pensar
como
diseñador
-­‐
Diseñar
con
empafa
-­‐
Diseñar
in
situ
-­‐
Diseñar
a
través
de
iteraciones
-­‐
Diseñar
con
capital
intelectual

48. Diseñando
la
Experiencia
del
Usuario
con
Sistemas
Interac7vos:
¿Cómo
diseñamos
para
quienes
realmente
somos?
Víctor
M.
González
Laboratorio
de
Usabilidad
y
Sistemas
Interac7vos
Departamento
Académico
de
Computación
Ins7tuto
Tecnológico
Autónomo
de
México
victor.gonzalez@acm.org
Q&A

49. @vmgyg
hNps://www.facebook.com/
vmgonz
Victor
M.
González
hNps://mx.linkedin.com/pub/
victor-­‐m-­‐gonzalez/2/935/b47
victor.gonzalez@acm.org
hNp://victormgonzalez.me/
vmgonz