El documento describe el proceso de diseño de interacción, incluyendo técnicas como safaris de usuario, observación participativa y storytelling. Explica cómo utilizar estas técnicas para comprender mejor las necesidades y experiencias de los usuarios a través de la documentación de casos y escenarios reales. El objetivo final es mejorar la interacción y satisfacción del usuario.

3. Diseño de la InteracciónUNIDAD 3. El proceso del diseño de interacción

4. Vamos poniéndonos empáticos: Safari
01El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

5. Pie de foto.
Safari
Sal a explorar lo desconocido, incluso aunque la tarea sea
conocida, ponte en los zapatos de alguien que vive la experiencia
por primera vez.
Documenta TODO
02El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

6. Pie de foto.
Safari : Caso de Estudio ir a cargar Gasolina
ESCENARIO. Vas camino a dejar a tu pequeña en la escuela y debes
cargar gasolina. La niña demanda mucha atención de tu parte por
lo que normalmente van platicando camino a la escuela.
03El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

7. Pie de foto.
Safari : Caso de Estudio ir a cargar Gasolina
ESCENARIO. El sitio es un auto servicio. Es decir, debes encargarte
tu de todo. El manejo de la bomba de gasolina, el pago, abrir y
cerrar el tapón de gasolina de tu auto.
04El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

8. Todo marcha bien y
comienzas el llenado
del tanque
Tu hija comienza a
estar inquieta y exige
atención
Safari : Caso de Estudio ir a cargar Gasolina
05El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

9. Todo marcha bien y comienzas el
llenado del tanque
Tu hija comienza a estar inquieta y exige
atención
Llega el momento de pagar pero no
conoces la maquina, tu tarjeta es
rechazada, es necesario pagar en la tienda
pero tu tienes manos sucias, niña inquieta
y mucha prisa
Safari : Caso de Estudio ir a cargar Gasolina
06El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

10. Todo marcha bien y
comienzas el llenado
del tanque
Tu hija comienza a estar
inquieta y exige
atención
Pagar Recoger la tapa del deposito
de gasolina
Safari : Caso de Estudio ir a cargar Gasolina
07El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

11. Iniciar carga Entretener niña Pagar Gasolina
Recoger tapa y
cerrar tanque
Limpiar todo
(COVID)
Safari : Caso de Estudio ir a cargar Gasolina
08El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

12. Pie de foto.
Safari
Documentar la experiencia
Puntos favorables
SOBRE TODO aspectos difíciles y mala experiencia de usuario
Retos que tuviste
Esto es clave, SI LOGRAS MEJORAR LA EXPERIENCIA SEGURO MÄS
USUARIOS TE VAN A PREFERIR
09El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

13. Imagen de Banco
Santander
Imagen de sala de
espera banco Banamex
Safari : ¿A qué banco prefieres ir?
10El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

14. Safari : No Perder de Vista la Accesibilidad
11El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

15. Pie de foto.
Safari: Actividad
Diseña con tus compañeros de equipo la estrategia para hacer un
safari de las actividades de su proyecto
12El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

16. Vamos poniéndonos empáticos:
Observación Participativa
13El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

17. Pie de foto.
Observación Participativa
Observador pasivo de un fenómeno
Documenta TODO lo que ves
Interferir lo menos posible en el fenómeno observado
Deja que las cosas fluyan con naturalidad
Por ejemplo su analizas el sistemas de pago en caja de una
tienda departamental te podrías ubicar en una esquina
14El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

18. Participatory Observation
Fuente:Scott Klemmer
www.hci-class.org
https://upload.wikimedia.org/wikipedia/com
mons/thumb/0/00/SuperMaxi_Bosque_Caj
as.JPG/800px-
SuperMaxi_Bosque_Cajas.JPG
Posición ideal para Observar Funcionamiento de
Cajas, Super Maxi Bosque Cajas, Recuperado de
https://upload.wikimedia.org/wikipedia/commons
/0/00/SuperMaxi_Bosque_Cajas.JPG
15El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

19. ¿Qué hacen hoy?
• Es nuestro punto de arranque
¿Qué valores y objetivos
identificas?
• Alinearnos a los valores y las
expectativas de la gente
¿Cómo se integran estas
actividades en el ecosistema?
• Análisis de procesos coincidencias y
diferencias
• que otros tipos de contexto hay cerca
Acércate a las personas
experimentadas
• Establecer un vínculo con las personas
que serán observadas
Identifica cuándo se logró la
interacción y cuando salió mal.
• Ofrece más opciones de las que quieren
¿cómo manejan su cuerpo, el
monedero, el móvil?
Claves de la Observación
16El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

20. Mira desde todos los ángulos, Image result for 360
degrees, Recuperado de
https://upload.wikimedia.org/wikipedia
17El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

21. Plumas Prestadas para
Anotaciones o Firmas
Usar el Lápiz para Peinarse Identifica el Lenguaje
Corporal
¿Qué Comunica?
Identifica situaciones o
acciones que detonan el
inicio de otra
Ayudas o Atajos para Hacer las Tareas de una Forma “Diferente”
18El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

22. Híncate y poco y mira el mundo como lo mira un niño
Ponte en los zapatos de otro
19El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

23. Pie de foto.
Safari: Actividad
Diseña con tus compañeros de equipo la estrategia para hacer la
observación participativa de las actividades de sus usuarios de su
proyecto
20El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

24. Comunica tus Hallazgos: Story Telling
21El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

25. Pie de foto.
Story Telling
Los humanos somos buenos contando historias y nos encanta contar historias.
Para poder comunicar de forma efectiva nuestras
observaciones podemos apoyarnos de las herramientas de Story
Telling
Ver vídeo
https://www.youtube.com/watch?v=YSp-AXzPaHc&feature=emb_logo
22El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

26. Trama - ¿Qué están tratando de lograr /
superar los usuarios?
Carácter: ¿Quiénes son los usuarios: no
solo demográficamente, sino qué ideas
necesita para comprender cómo son
realmente (y sus necesidades)?
¿Cómo puede establecer una presencia
confiable para ellos y aún así
diferenciarse de sus competidores?
¿Cómo reflejará los obstáculos generales
que los usuarios deben superar?
Diálogo / Dicción: ¿qué dirá su diseño a
los usuarios y cómo? ¿Un tono formal /
informal coincide con sus expectativas?
¿Cuánto texto es apropiado?
¿cómo el patrón de diseño general
parecerá agradable y predecible para los
usuarios, moviéndolos emocionalmente?
Decoración: ¿cómo presentará todo para
que los gráficos coincidan con la
configuración que los usuarios pueden
sentir? ¿Un diseño clásico o un diseño de
nicho estilizado satisfaría sus
expectativas?
Espectáculo: ¿cómo puede hacer que su
diseño sea sobresaliente para que los
usuarios lo recuerden?
Story Telling: 7 Elementos según Aristóteles
23El proceso del diseño de interacción | Comprensión y conceptualización de la interacción
What is Storytelling?, traducción, texto original recuperado de
https://www.interaction-design.org/literature/topics/storytelling

27. Pie de foto.
Story Telling: Actividad
Apoyado de la herramienta story board that realiza la narrativa del
problema que quieres resolver en tu proyecto. Con fundamento en
el safari y la observación participativa
24El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

28. La inversión a tiempo en investigación y desarrollo
puede ahorrarnos muchotiempo y dinero..
No hacerlo puede dejarte sin clientes Las técnicas de análisis y diseño de experiencias de
usuario suelen ser muy divertidas y favorecen la
colaboración, úsalas.
Comprensión y conceptualización de la interacción
25El proceso del diseño de interacción | Comprensión y conceptualización de la interacción

29. Pie de foto.
Bibliografía
•Muñoz Artega, J., GONZALEZ CALLEROS, J. M., & Huitrón, A. S. (2015). La interacción
humano-computadora en México. Pearson Educación.
71Técnicas de evaluación | Métodos de Usabilidad

30. gracias.
©2020
Es responsabilidad exclusiva de los autores el respeto de los derechos de autor sobre los contenidos e imágenes en el presente
documento, en consecuencia, la BUAP no se hace responsable por el uso no autorizado, errores, omisiones o manipulaciones de los
derechos de autor y estos serán atribuidos directamente al Responsable de Contenidos, así como los efectos legales y éticos
correspondientes.