PARTITURAS 
DE INTERACCIÓN 
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
INTRODUCCIÓN
PRESENTACIÓN 
Hola, soy Rodrigo Vera, y bienvenidos 
a la clase Partituras de Interacción.
RODRIGO VERA YERKO PEZZOPANE 
Diseñador Gráfico 
Diseñador UX Diseñador UX 
@rots @ypezzopane
RODRIGO VERA YERKO PEZZOPANE 
Diseñador Gráfico 
Diseñador UX Diseñador UX 
@rots @ypezzopane 
ELIMINADO 
POR ESTA CLASE
LO QUE VEREMOS HOY 
Introducción IXD 
Problemática 
¿Que Son? 
¿Porqué Usarlas?
INTRODUCCIóN IXD
DISEÑO DE INTERACCIÓN 
El Diseño de Interacción (IxD) define la estructura y 
comportamiento de los sistemas interactivos....
DISEÑO DE INTERACCIÓN
DISEÑO DE INTERACCIÓN 
SERVICIO IXD PRODUCTO 
• Ir a la Plaza 
• Conversar 
• Vender Autos 
• Encontrar Casa 
• Grabar un ...
DISEÑO DE INTERACCIÓN 
La complejidad de un proyecto de desarrollo Web requiere de una metodología escalonada que 
normalm...
DIAGRAMA DE FLUJOS
DIAGRAMA DE FLUJOS 
Este diagrama es una representación gráfica de los pasos de un proceso y / o los 
procesos de un siste...
DIAGRAMA DE FLUJOS 
En los diagramas de flujo se deben cumplir los siguientes aspectos: 
• Existe siempre un camino que pe...
DIAGRAMA DE FLUJOS 
1. Rectángulo de lados redondos: Esta figura representa el inicio o el fin de un 
proceso (claro que e...
PROBLEMÁTICA
PROBLEMÁTICA LINEAL 
Pensamiento Lineal ….
PROBLEMÁTICA LINEAL 
Pensamiento Lineal ….
PARTITURA DE INTERACCIÓN 
La interacción en una plataforma web es tan importante como su estructura de 
contenidos y diseñ...
PROBLEMÁTICA EN ENTORNOS DE TRABAJO 
Por otro lado, la gran cantidad de profesionales involucrados en la creación de un si...
PARTITURA DE INTERACCIÓN 
Es en este contexto es que surgieron las partituras de interacción, como un lenguaje 
visual par...
¿QUE SON?
PARTITURA DE INTERACCIÓN 
Katherine Exss 
Nicole Dupré 
Herbert Spencer
PARTITURA DE INTERACCIÓN
PARTITURA DE INTERACCIÓN
INTRODUCCIÓN 
Este lenguaje propone un sistema de notación que pueda acompañar el proyecto 
desde la etapa de estrategia (...
PARTITURA DE INTERACCIÓN 
• Es un lenguaje visual que propone un sistema de notación gráfica para 
formalizar los flujos d...
PARTITURA DE INTERACCIÓN 
Acciones del usuario: la intencionalidad del usuario expresada en sus acciones concretas 
——————...
PARTITURA DE INTERACCIÓN 
INTERFAZ 
USUARIO 
(acciones) 
SISTEMA 
los elementos de interfaz que permiten al 
usuario ejecu...
LENGUAJE VISUAL
MODO ROTS (?) 
INTERFAZ 
USUARIO 
(ACCIONES) 
SISTEMA 
HOME 
Login Usuario 
RUT 
CONTRASEÑ 
A 
Sistema Valida Rut y 
Contr...
¿PORQUÉ USARLAS?
EQUIPO DE TRABAJO 
Nos ayudan a unificar las ideas que cada profesional involucrado tiene sobre los flujos de 
interacción...
EN RESUMEN 
• Permite la comunicación fluida entre el equipo de trabajo (creativos e 
ingeniería). 
• Identificar tipos de...
REFERENCIAS 
Documentación de Katherine Exss 
http://wiki.ead.pucv.cl/index.php/Lenguajes_Visuales_para_la_Interacci%C3%B3...
FIN CLASE
Próxima SlideShare
Cargando en…5
×

Partituras de Interacción

831 visualizaciones

Publicado el

Clase de Partituras de Interacción para el Diplomado de Arquitectura de Información y Experiencia de Usuario 2014

Publicado en: Diseño

Partituras de Interacción

  1. 1. PARTITURAS DE INTERACCIÓN DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
  2. 2. INTRODUCCIÓN
  3. 3. PRESENTACIÓN Hola, soy Rodrigo Vera, y bienvenidos a la clase Partituras de Interacción.
  4. 4. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
  5. 5. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane ELIMINADO POR ESTA CLASE
  6. 6. LO QUE VEREMOS HOY Introducción IXD Problemática ¿Que Son? ¿Porqué Usarlas?
  7. 7. INTRODUCCIóN IXD
  8. 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. 9. DISEÑO DE INTERACCIÓN
  10. 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. 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. 12. DIAGRAMA DE FLUJOS
  13. 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. 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. 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. 16. PROBLEMÁTICA
  17. 17. PROBLEMÁTICA LINEAL Pensamiento Lineal ….
  18. 18. PROBLEMÁTICA LINEAL Pensamiento Lineal ….
  19. 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. 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. 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. 22. ¿QUE SON?
  23. 23. PARTITURA DE INTERACCIÓN Katherine Exss Nicole Dupré Herbert Spencer
  24. 24. PARTITURA DE INTERACCIÓN
  25. 25. PARTITURA DE INTERACCIÓN
  26. 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. 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. 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. 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. 30. LENGUAJE VISUAL
  31. 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. 32. ¿PORQUÉ USARLAS?
  33. 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. 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. 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. 36. FIN CLASE

×