Este documento introduce el concepto de partituras de interacción, un lenguaje visual para modelar la interacción en proyectos digitales. Las partituras de interacción descomponen el diálogo entre el usuario y el sistema en tres capas: acciones del usuario, elementos de interfaz, y procesos del sistema. Este lenguaje permite comunicar ideas de interacción entre el equipo de trabajo y detectar problemas tempranamente.

1. PARTITURAS
DE INTERACCIÓN
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014

2. INTRODUCCIÓN

3. PRESENTACIÓN
Hola, soy Rodrigo Vera, y bienvenidos
a la clase Partituras de Interacción.

4. RODRIGO VERA YERKO PEZZOPANE
Diseñador Gráfico
Diseñador UX Diseñador UX
@rots @ypezzopane

5. RODRIGO VERA YERKO PEZZOPANE
Diseñador Gráfico
Diseñador UX Diseñador UX
@rots @ypezzopane
ELIMINADO
POR ESTA CLASE

6. LO QUE VEREMOS HOY
Introducción IXD
Problemática
¿Que Son?
¿Porqué Usarlas?

7. INTRODUCCIóN IXD

8. DISEÑO DE INTERACCIÓN
El Diseño de Interacción (IxD) define la estructura y
comportamiento de los sistemas interactivos. Los diseñadores de
interacción se esfuerzan en crear relaciones significativas entre las
personas y los productos y servicios que utilizan, desde los
ordenadores a los dispositivos móviles a otros aparatos y más allá.

9. DISEÑO DE INTERACCIÓN

10. DISEÑO DE INTERACCIÓN
SERVICIO IXD PRODUCTO
• Ir a la Plaza
• Conversar
• Vender Autos
• Encontrar Casa
• Grabar un disco
• Silla
• Teléfono
• Aplicación
• Web
• etc.

11. DISEÑO DE INTERACCIÓN
La complejidad de un proyecto de desarrollo Web requiere de una metodología escalonada que
normalmente es abordada por un equipo multidisciplinario. Dentro de este proceso podemos distinguir:
!
ESTRATEGIA PERSONA AI IXD UI PRODUCCIÓN TESTEO
!
!
!
!
A lo largo de este proceso, los lenguajes de representación y formalización (mapas de navegación,
wireframes, esquemas de datos, diagramas de flujo, etc.) van marcando cada etapa pero carecemos de
un sistema que permita transversalizar el producto final: la experiencia del usuario.

12. DIAGRAMA DE FLUJOS

13. DIAGRAMA DE FLUJOS
Este diagrama es una representación gráfica de los pasos de un proceso y / o los
procesos de un sistema. El diagrama de flujos concretamente es una conexión de
símbolos que representan operaciones, posibilidades, etc.
Este diagrama se compone de una serie de símbolos específicos con un significado,
es decir, tiene símbolos universales de flujos que han sido normalizados para evitar
las diferencias entre un diagrama y otro, para que puedan ser entendido por
cualquiera que tenga conocimiento de esta simbología básica.

14. DIAGRAMA DE FLUJOS
En los diagramas de flujo se deben cumplir los siguientes aspectos:
• Existe siempre un camino que permite llegar a una solución
(finalización del algoritmo).
• Existe un único inicio del proceso.
• Existe un único punto de fin para el proceso de flujo (salvo del
rombo que indica una comparación con dos caminos posibles).

15. DIAGRAMA DE FLUJOS
1. Rectángulo de lados redondos: Esta figura representa el inicio o el fin de un
proceso (claro que el fin de un proceso también puede ser el comienzo de
otro).
2. Rectángulo: esta forma representa (a diferencia del mapa de navegación) un
evento o un proceso determinado, que en general es parte de una secuencia.
3. Parelelógramo: Este símbolo grafica un campo de entrada o salida de
información del sistema, se utiliza generalmente en los formularios.
4. Rombo: Esta figura (al igual que en los mapas de navegación) significa un punto
de decisión. Una acción del usuario puede tomar distintos caminos
dependiendo de la situación; se entiende como una decisión del sistema.
5. Círculo: Representa un punto de conexión entre procesos. Se utiliza cuando es
necesario dividir un diagrama de flujo en varias partes, ya sea por razones de
espacio o simplicidad. En esos casos, se debe dar referencia para distinguirlo de
otros.
6. Flecha Gruesa: Esta flecha denota la dirección del flujo directo, la trayectoria
óptima del proceso de información.
7. Flecha Delgada: Esta flecha representa otras vías que puede tomar llevar a
cabo un proceso, que no llegan a una solución óptima.
http://wiki.ead.pucv.cl/index.php/Lenguajes_Visuales_para_la_Interacci%C3%B3n

16. PROBLEMÁTICA

17. PROBLEMÁTICA LINEAL
Pensamiento Lineal ….

18. PROBLEMÁTICA LINEAL
Pensamiento Lineal ….

19. PARTITURA DE INTERACCIÓN
La interacción en una plataforma web es tan importante como su estructura de
contenidos y diseño. Sin embargo, no existen muchas herramientas para trabajarla ni
un modo de comunicación estándar para la industria del diseño y desarrollo web.

20. PROBLEMÁTICA EN ENTORNOS DE TRABAJO
Por otro lado, la gran cantidad de profesionales involucrados en la creación de un sitio web
demanda la existencia de más y mejores objetos (modelos o diagramas) que comuniquen de forma
efectiva las ideas desde el comienzo del proyecto, etapa caracterizada por ser altamente abstracta.

21. PARTITURA DE INTERACCIÓN
Es en este contexto es que surgieron las partituras de interacción, como un lenguaje
visual para modelar la interacción en proyectos digitales. Concretamente, lo que
busca esta notación gráfica es articular la relación entre el usuario, la interfaz gráfica
y el sistema que responderá a las acciones ejecutadas por el usuario.

22. ¿QUE SON?

23. PARTITURA DE INTERACCIÓN
Katherine Exss
Nicole Dupré
Herbert Spencer

24. PARTITURA DE INTERACCIÓN

25. PARTITURA DE INTERACCIÓN

26. INTRODUCCIÓN
Este lenguaje propone un sistema de notación que pueda acompañar el proyecto
desde la etapa de estrategia (alto grado de abstracción) hasta la etapa final de
implementación en código (alto grado de especificidad), permitiendo a cada actor del
proyecto (estrategas, diseñadores y programadores) comprender el total y cuidar el
cumplimiento de la visión original. Se trata de un sistema que permite coreografiar y
orquestar cuidadamente el díagolo en continuidad entre la persona y el servicio.

27. PARTITURA DE INTERACCIÓN
• Es un lenguaje visual que propone un sistema de notación gráfica para
formalizar los flujos de interacción en una plataforma o servicio digital.
• Es un lenguaje visual que propone un sistema de notación que pueda
acompañar el proyecto desde la etapa de estrategia hasta la etapa final
de implementación en código.
• Las partituras de interacción descomponen el diálogo entre la persona y
el servicio en tres distintas capas horizontales: Acciones de Usuario,
Contacto Directo y Procesos.

28. PARTITURA DE INTERACCIÓN
Acciones del usuario: la intencionalidad del usuario expresada en sus acciones concretas
———————— línea de interacción ————————
Contacto directo: los elementos de interfaz que permiten al usuario ejecutar tales acciones
———————— línea de visibilidad ————————
Proceso: las funciones que permiten al sistema (servidor) dar respuesta en el diálogo con el usuario

29. PARTITURA DE INTERACCIÓN
INTERFAZ
USUARIO
(acciones)
SISTEMA
los elementos de interfaz que permiten al
usuario ejecutar tales acciones
la intensionalidad del usuario expresada en
sus acciones concretas
las funciones que permiten al sistema (servidor) dar
respuesta en el diálogo con el usuario
Cada módulo de interacción se compone como un compás en esta partitura. Estos
compases (o patrones de interacción) permiten ensamblarse para verificar la lógica
y la calidad de la experiencia en determinados escenarios de uso, así como
detectar inconsistencias o puntos críticos en el servicio.

30. LENGUAJE VISUAL

31. MODO ROTS (?)
INTERFAZ
USUARIO
(ACCIONES)
SISTEMA
HOME
Login Usuario
RUT
CONTRASEÑ
A
Sistema Valida Rut y
Contraseña para
ingresar al
Dashboard
DASHBOARD
1. CUENTAS ASOCIADAS
2. CUENTAS DISPONIBLES
3. MODIFICAR CUENTA
4. COMPROBANTES DE
PAGO
5. GRUPOS DE CUENTAS
Sistema usa el Rut
para mostrar las
cuentas asociadas
6. NUEVO PAGO
7. PAGO NO INSCRITO
• Cuenta 1
• Cuenta 2
• Cuenta 3
• Cuenta 4
• Etc…
MIS PAGOS
CUENTAS ASOCIADAS
Mis Pagos
Cuentas Asociadas se
pueden Filtrar por Servicio
• Cuenta 1
• Cuenta 2
• Cuenta 3
• Cuenta 4
• Etc…
Las cuentas asociadas si el
usuario desea se pueden
convertir en "Cuentas
Disponibles" CUENTAS DISPONIBLES
Cuentas Asociadas se
pueden Filtrar por Servicio
NUEVO PAGO
AGREGAR
Sistema guarda
cuenta dentro de
las cuentas
disponibles
GRUPOS CUENTAS
CREAR
GRUPO
Un usuario puede pagar una cuenta Asociada necesidad de agregarla a sus "Cuentas Un agrupar gestionar Sistema guarda
grupo de
cuentas dentro
de los datos del
cliente
Cuentas
Asociadas
Cuentas
Disponibles
MODIFICAR
LOG OUT
1
2 3
6
5 LOGIN

32. ¿PORQUÉ USARLAS?

33. EQUIPO DE TRABAJO
Nos ayudan a unificar las ideas que cada profesional involucrado tiene sobre los flujos de
interacción. Además, son un entregable para los clientes, quienes pueden leer y comprender
fácilmente nuestra propuesta, mucho antes de crear las maquetas de diseño.
!
Diseñadores y desarrolladores deben colaborar codo a codo en la creación de estas partituras.
Creemos que las mejores discusiones de los equipos multidisciplinarios salen de estas instancias,
cuando todos podemos hablar al mismo nivel y con un mismo lenguaje de interacción.
!

34. EN RESUMEN
• Permite la comunicación fluida entre el equipo de trabajo (creativos e
ingeniería).
• Identificar tipos de usuario y roles dentro del sitio
• Permiten evaluar cantidad de plantillas a diseñar y HH involucradas
• Permiten visualizar interacciones y flujos.
• Las discuciones son basadas en funcionalidades e Interacciones.
• Se pueden identificar tempranamente problemas de Interacción.
• Se reducen los tiempos de trabajo y costos
• Posibilidad de ejecutar cambios anticipadamente, evitando rediseñar
sobre el producto final.
• Los harás felices a los desarrolladores

35. REFERENCIAS
Documentación de Katherine Exss
http://wiki.ead.pucv.cl/index.php/Lenguajes_Visuales_para_la_Interacci%C3%B3n
Documentación de Nicole Dupré
http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacci%C3%B3n
Descarga Plantillas
http://www.ead.pucv.cl/2008/partituras-de-interaccion/

36. FIN CLASE