Presentación para la comunidad de Friends of Figma Chile.

1. Katherine Exss Cid
Diseñadora y Académica PUCV
@alikathe
PiX
una herramienta para la
comunidad UX

2. ¿Qué es PiX?
PiX (Partituras de Interacción) es un lenguaje visual diseñado para
modelar la interacción entre usuarios y sistemas. Representa una secuencia
de momentos de izquierda a derecha, y sirve para coordinar los elementos
que afectan la experiencia de los usuarios mientras interactúan con
servicios digitales
PiX se estructura en 3 capas:
1. La capa de la persona
2. La capa del diálogo
3. La capa del sistema

3. Contexto
“Todo lo que se interpone
entre mi entorno y yo
presenta un problema de
diseño de interacción”
BillVerplank (2009)
Desarrollo
Arq. software
Ing. informática
Diseño front
User interface
Writers
Ergonomics
Usability
Psicología
UX Research
Cognitive science

4. Ejemplo de partitura PiX
Título de la
partitura Descripción o bajada
Encabezado
Anotaciones
comentarios
Compás, sección o página
donde ocurre la acción

5. Características de PiX
1. Se enfoca en la experiencia humana, en el flujo de
diálogo y su significado en el tiempo
2. Es específico en funcionalidades e implicancias que afecten
comportamiento del sistema
3. Es legible y comprensible por los participantes de un
proyecto (lenguaje transversal)

6. Notaciones de UX

7. Microinteracciones

8. ¿Hipótesis de PiX?
Ya que vivimos en una economía basada en la experiencia, más que en la
transacción de commodities y bienes (Pine, Gilmore; 1998), planteamos que:
● La interacción persona-sistema se puede codificar de forma legible en
contextos transversales (multi-dominio)
● Esta codificación puede comprimir información relativa a las distintas
áreas involucradas (herramienta de codiseño)
○ marketing
○ diseño
○ desarrollo
● Podemos modelar la propuesta de valor de los servicios
(principalmente digitales) con PiX

9. Plano presentado por los hermanos Wright para obtener la patente de su invento.

10. Capa del Usuario
qué especifica • intenciones
• expectativas
• impresiones
cómo se informa • contexto social, tecnológico y económico
• modelos mentales
• investigación de usuarios en general
• Mapas de empatía y user personas
qué valor define valor simbólico
• arbitrario y subjetivo
• depende del contexto cultural
• se analiza desde el punto de vista comunicacional e implica una
comprensión del sentido social de la interacción
quién participa • Gerentes de Marketing y Experiencia del cliente
• Gerente de oferta o producto
• Encargado de contenidos
• RRSS (community managers)
• Usuarios finales

11. Capa del Diálogo
qué especifica • acciones del usuario en tipos de <input>
• respuestas del sistema en formas de <output>
• tiene distintos grados de resolución
cómo se informa • desde el marketing que sabe qué se proyecta y cual es el carácter
de la marca
qué valor define valor como experiencia
• objetivo y subjetivo a la vez
• dentro de un contexto cultural determinado
• se analiza como punto de contacto entre persona y servicio y
requiere una comprensión o modelo de experiencia
quién participa • diseñador UX
• diseñador Front-end
• usuarios finales

12. Capa del Sistema
qué especifica • el estado de los datos
• funciones internas (procesos requeridos)
• comunicaciones con 3ª partes
cómo se informa • arquitectura global del servicio
• tecnología disponible
qué valor define valor como intercambio
• objetivo determinado por el precio
• por lo deseable de la transacción
• se analiza desde la situación de intercambio donde las cualidades
del producto o servicio deben ser visibles y claras
quién participa • Arquitecto de software
• Desarrolladores (senior / junior)
• Operaciones y/o logística

13. Desarrollo de PiX
Etapa 1 | Lenguaje fronterizo: Un problema de comunicación visual
Etapa 2 | Lenguaje como herramienta: Un problema de interdisciplina
Etapa 3 | Herramienta y colaboración: Un problema de inclusión y codiseño

14. Etapa 1 | Lenguaje fronterizo: Un problema de comunicación visual

15. Etapa 2 | Lenguaje como herramienta: Un problema de interdisciplina

16. Etapa 2 | Lenguaje como herramienta: Un problema de interdisciplina

17. Etapa 3 | Herramienta y colaboración: Un problema de inclusión y codiseño

18. Codiseño con PiX

21. Pixograms
Instrucciones,
recomendaciones y
tips
Partitura de
ejemplo
Lienzos de PiX
vacíos para
practicar

22. Recursos
➔ Sitio web PiX
➔ App online PiX
➔ PiX Miro template
➔ PiX Figjam template

23. Publicaciones sobre PiX
AlcavilVega,A.A., & Muñoz Araya, R. (2020). PiX como lenguaje y
método accesible para el codiseño [Tesis Pregrado].
Pontificia Universidad Católica deValparaíso
Exss Cid, K. & Trisotti Bernain, E. (2008). Bitácora Colectiva de
Travesías Amereida [Tesis pregrado]. Pontificia Universidad
Católica deValparaíso
Exss Cid, K,; Spencer González, H.;Vega Córdova,V.; Jarpa
Azagra, M.; Álvarez-Aguado, I.;AlcavilVega,A.A., & Muñoz
Araya, R. (2024).Toolkits para una participación accesible:
El caso de PiX como herramienta universal para el
codiseño (enviado, por publicar)
Muñoz Araya, R. (2022). Narrativas iconográficas: Un lenguaje
para la facilitación de la escritura narrativa [Tesis
posgrado]. Pontificia Universidad Católica deValparaíso.
Spencer González, H., & Exss Cid, K. (2015). PiX Language
Proposal Interaction Notation for Digital Systems Design.
Recuperado de
https://www.academia.edu/27515771/PiX_Language_Prop
osal_Interaction_Notation_for_Digital_Systems_Design
Garrett, J. J. (2007). The elements of user experience:
User-centered design for the web and beyond. New
Riders.
Pine, J., & Gilmore, J. H. (1998, julio 1).Welcome to the
Experience Economy. Harvard Business Review.
https://hbr.org/1998/07/welcome-to-the-experience-econ
omy
Quesenbery,W., & Brooks, K. (2010). Storytelling for User
Experience: Crafting Stories for Better Design. Rosenfeld.
Shostack, G. L. (1984, enero 1). Designing Services That Deliver.
Harvard Business Review.
https://hbr.org/1984/01/designing-services-that-deliver
Verplank, B. (2009). Interaction Design Sketchbook.
http://billverplank.com/CiiD/IDSketch.pdf
Referencias externas

24. Muchas gracias.
25.01.24 | PiX: una herramienta para la comunidad UX Comunidad FoF
Friends of Figma
Katherine Exss Cid
Diseñadora Gráfica PUCV, MA en Diseño de Información, University of Reading, UK.
Candidata a doctora en Arquitectura y Urbanismo, Universidad del Bío Bío. Profesora de
pregrado y posgrado en la Escuela de Arquitectura y Diseño de la Pontificia Universidad
Católica deValparaíso, en el área "Forma, Cultura y Tecnología" bajo las líneas de diseño
de interacción y experiencia de usuario. Miembro del Núcleo Interdisciplinario de
Accesibilidad e Inclusión PUCV. Fundadora y co-líder local IxDAViña del Mar.
kexss@ead.cl // @alikathe
http://eadpucv.github.io/pix/