PiX: Antecedentes

De Casiopea

El proyecto PiX surge de la titulación del año 2008 de Katherine Exss, ex-alumna y actual profesora de la Escuela de Arquitectura y Diseño, en la cual se realiza un estudio y posterior ensayo en torno a las partituras de interacción (“Partituras de Interacción: Hacia un lenguaje unificado para su representación ”).

Las partituras de interacción son una herramienta desarrollada para diseñadores de interacción y sus equipos de trabajo, permitiendo una mejor comunicación. Su metodología plantea al diseño de interacción como un lenguaje que debe ser construido y explicitado de manera que se vuelva abordable para los diferentes agentes de un proyecto, incluyendo diseñadores, profesionales de otras disciplinas y clientes.

Para este periodo de la titulación, surge la oportunidad de formar parte del rediseño de las partituras de interacción, en el cual el foco es ampliar el rango de uso de las mismas considerando los avances que han ocurrido en el mundo digital.

Repositorio de PiX


Diseño de experiencia

El diseño de experiencia o UX (siglas en inglés para user experience) es un área que se encarga de las prácticas de diseño centradas en el usuario, de cómo el contexto en el cual una persona se relaciona con un servicio o producto puede causar en éste efectos predecibles, afectando objetivos y emociones de la persona. Se concentra en la interacción entre personas y artefactos en un determinado entorno, tomando en cuenta las características asociadas tanto al nivel emocional como aspiracional de la persona busca satisfacer necesidades del usuario mediante experiencias positivas asociadas a productos o servicios. El diseño de experiencia plantea entonces el desarrollo de los elementos de la interfaz en pos del usuario y cómo éste navega siguiendo intuiciones y objetivos propios, siendo el diseño una herramienta que desencadena emociones y acciones.

Modelo de los elementos que toman parte dentro de la experiencia de un usuario

Como se puede apreciar en el modelo de Jesse James Garrett, el diseño de experiencia se basa en la perspectiva del usuario que interactúa con el producto o servicio, en vez de apreciar la interacción desde el desarrollo de los mismos. Los objetivos y necesidades del usuario toman protagonismo dentro del proceso, mientras que el diseño construye el entorno y contexto para que se desencadenen una serie de acciones durante la experiencia.

Esta área del diseño involucra dentro de su proceso herramientas que le permitan conocer y analizar las respuestas de los usuarios frente a determinados servicios o productos. El diseño de experiencia es interdisciplinario, ya que se necesitan distintas perspectivas para poder elaborar una experiencia completa y con los efectos deseados en el usuario. Algunas de las disciplinas involucradas en el proceso son el diseño de arquitectura de información, diseño de interfaz y el diseño de interacción.

Diseño de interacción

El diseño de interacción o IxD (interaction design) es un área del diseño que se preocupa del comportamiento entre productos o servicios y sus respectivos usuarios.

Se dedica a definir los comportamientos de artefactos, entornos y sistemas, y por lo tanto se preocupa de anticipar cómo el uso de ciertos productos formará parte de relaciones humanas y de su entendimiento, además de explorar el dialogo entre productos, servicios, personas y contextos.

El diseño de interacción como disciplina surge desde el área de la ciencia, en donde se analizaba el comportamiento directo entre humano y computador. Personajes como Alan Cooper y Bill Buxton veían a la investigación como un elemento clave dentro del diseño de interacción, donde la psicología cognitiva juega un rol importante.

Hoy en día, los diseñadores de interacción pueden asumir distintos roles: usabilidad, investigación, arquitectura de la información y diseño front. Un hito importante dentro del diseño de interacción ha sido la creación de la Interaction Design Association o IxDA (http://www.ixda.org/). Esta asociación es un espacio para que diseñadores crean, desarrollen y compartan métodos prácticos y teorías en torno a la interacción.


Herramientas de diseño

El proceso detrás del diseño de interacción involucra una serie de herramientas que buscan analizar el comportamiento del usuario. El diseñador de interacción evalúa resultados priorizando la usabilidad del objeto de diseño y su influencia positiva dentro de la experiencia total del usuario.

Encuestas online

Una encuesta online es un cuestionario estructurado que se le envía a los participantes a través de la web. Los datos recopilados por el formulario se almacenan dentro de una base de datos y normalmente la herramienta de encuestas provee de un análisis de resultados. A diferencia de las encuestas tradicionales, el utilizar una plataforma digital permite recopilar información de una audiencia extensa por un mínimo costo, indagando en quiénes son los usuarios de un determinado producto o servicios, sus expectativas y críticas. Algunas aplicaciones que permiten hacer encuestas web son: Surveymonkey, Typeform, Obsurvey y Google Documents.

Casos de uso / Personas

Los casos de uso son una descripción escrita de cómo el usuario se comunicará con el servicio o producto en cuestión. Tiene como objetivo enfocar el punto de vista del usuario del sistema y sus interacciones. Cada caso de uso es construido como una secuencia de pasos, comenzando con los objetivos personales del usuario y terminando una vez que éstos sean cumplidos. Esta herramienta ayuda a explicar cómo el sistema debería comportarse y actuar durante el proceso de una interacción. A esta metodología de casos de uso se le puede incorporar las llamadas “personas”. Una “persona” es una descripción ficticia de un personaje, la cual permite enfocarse en sus características y aptitudes más relevantes según el caso de uso. Uno de los beneficios del uso de “personas” dentro del diseño de interacción es que le entrega un modelo mental de distintos tipos de usuario al equipo de trabajo, evitando que sus miembros proyecten necesidades y deseos al diseño.

Pruebas de usabilidad

Las pruebas de usabilidad hacen referencia a la evaluación de productos o servicios testeándolos con usuarios representativos de su tipo. Normalmente las pruebas son realizadas pidiéndole a los participantes hacer determinadas tareas, mientras que un equipo de observadores toma nota de sus acciones y comentarios.

Los testeos permiten aprender si los participantes pueden o no realizar ciertas tareas identificando cuanto tiempo se demoran, y además, qué tan satisfechos o insatisfechos quedan con el producto o servicio. De manera de hacer una prueba de usabilidad efectiva se debe realizar un buen plan del testeo, reunir una cantidad adecuada de participantes y posteriormente analizar e informar de los resultados.

Esta metodología dentro del diseño de interacción permite a los diseñadores y desarrolladores identificar problemáticas en una etapa temprana, de manera que se puedan arreglar a tiempo y no se produzca una pérdida de tiempo y dinero.

Focus groups

Un focus group es una discusión moderada entre alrededor de cinco a diez personas en la cual se puede aprender sobre las actitudes del usuario, sus creencias, deseos y reacciones a determinados conceptos. Normalmente en los focus groups los participantes hablan sobre sus experiencias en relación a un producto o servicio, a diferencia de las pruebas de usuario, en las cuales los participantes mediante acciones muestran sus deseos y expectativas.

Card sorting

El card sorting es un método utilizado para diseñar y evaluar la arquitectura de información de un sitio. En una sesión de card sorting los participantes organizan y categorizan ciertos términos de manera que haga sentido para ellos. Estos términos pueden estar escritos en tarjetas, papeles o incluso se puede realizar la actividad de modo digital en aplicaciones gratuitas como Xsort (http://xsortapp.com/) y UXSort (http://www.uxsort.net/).

Esta técnica de categorización de contenidos ayuda para comprender las expectativas y entendimiento de ciertos tópicos por parte de los usuarios de un producto o servicio. El conocer esta información ayuda a construir la estructura de la arquitectura de información y también cuáles elementos son de mayor o menor prioridad.

Prototipado

El prototipado es un tipo de borrador de un producto que permite explorar ideas y mostrar intenciones a un usuario en una etapa temprana del diseño. Esta herramienta puede variar de un dibujo a mano hasta una maqueta navegable que funcione a través de clicks. Algunas aplicaciones web de prototipado son InVision (http://www.invisionapp.com/), Fluid UI(https://www.fluidui.com/), POP (https://popapp.in/).

El lenguaje dentro del diseño de interacción

Como se explicó previamente, de manera que el diseño de interacción sea un proceso completo y visto desde diferentes ángulos, se vuelve necesario el formar equipos de trabajos entre diseñadores y profesionales de otras áreas. Es de esta conjugación de factores que surge la problemática de falta de lenguaje común.

En la búsqueda de una mejor comunicación entre actores dentro de un proceso de diseño comienzan a aparecer construcciones de lenguajes que permiten estandarizar ciertos procesos, tanto concretos como abstractos, mediante diagramas y símbolos.

Los diagramas tienen la cualidad de representar gráficamente las relaciones entre elementos, aterrizando ideas abstractas sobre la vinculación entre conceptos. Estableciendo un tipo de lenguaje modelo, que se replique en distintos casos y situaciones, permite que personas de distintas áreas de trabajo puedan observar, analizar y sacar conclusiones comprendiendo en su totalidad la abstracción del diagrama.

Se hace una recopilación de los modelos visuales existentes dentro de las herramientas del diseño de interacción. Esta selección es posteriormente analizada para identificar pros y contras.

UML

El UML o Lenguaje Unificado de Modelado (Unified Modeling Language) es uno de los lenguajes para sistemas de software más usados en la actualidad. El UML presenta un modelo estandarizado que permite describir elementos, procesos y sistemas, tanto completos como parte de ellos.

Este lenguaje se compone de elementos gráficos que combinados dan origen a esquemas y diagramas. Su estandarización se basa en una serie de normativas que rigen el uso de estos elementos gráficos.

Mapas de navegación

Los mapas de navegación de Jesse James Garrett son un diseño de un vocabulario visual o conjunto de símbolos para la arquitectura de información y el diseño de interacción, describiendo la estructura o flujo de la experiencia de un usuario en plataformas digitales.

Estos tipos de diagramas se enfocan en la macro-estructura de la interacción, a partir de tres factores: los caminos que el sistema presenta al usuario, las acciones que este último toma durante la navegación y los resultados que las decisiones causan en el sistema.

Este lenguaje de símbolos permite no solo representar de manera estandarizada los flujos dentro de la interacción de una interfaz, sino que también las jerarquías presentes en la arquitectura de información, siendo útiles de manera transversal para distintos actores dentro de un equipo de trabajo.

Ejemplo del mapa de navegación
Service blueprint

Los service blueprints o diagramas de servicios son una herramienta que sirve para la planificación y diseño de servicios, permitiendo visualizar procesos, actores e interrelaciones. Son usadas tanto en ingenierías como en diseño de servicios, por lo que permite establecer una comunicación a partir de un mismo lenguaje en ambas áreas.

Una de las problemáticas dentro del rediseño de un servicio es lo intangibles que pueden ser sus procesos internos, la cual el service blueprint resuelve utilizando un lenguaje que permite representar gráficamente las distintas interacciones dentro del servicio.

Estos diagramas se dividen en capas de interacción entre las acciones realizadas independientemente por el cliente, aquellas en las cuales se relaciona directamente con el servicio y los procesos internos del servicio, tanto respuestas para las acciones del cliente como acciones internas administrativas. Estas divisiones permiten segmentar la interacción entre los actores, identificando posibles errores dentro de la planificación del servicio.

Ejemplo dibujado de un service blueprint

Partituras de interacción

Las partituras de interacción, elaboradas por Katherine Exss en su proyecto de titulación con el profesor Herbert Spencer, son una respuesta frente a la problemática de la comunicación dentro del diseño de experiencias.

El desarrollo de un proyecto colaborativo consta de diversas áreas de trabajo, contando con sicólogos, ingenieros, diseñadores, y otros. Cada uno de estos campos de estudio participa comunicándose entre los mismos durante distintas etapas del proyecto, desde los lenguajes propios de cada oficio. Es en esta comunicación que se produce la problemática de falta de coordinación y comprensión entre actores del proyecto.

Se plantea la problemática de comunicación como motor dentro de la construcción de un lenguaje visual, que en conjunto con una metodología de uso, permite facilitar los procesos de intercambios de información en un proyecto de diseño. A partir de otros lenguajes estandarizados como el diagrama de UML, mapa de navegación de Jesse J. Garrett y el service blueprint, se construyen las partituras de interacción con el propósito de visualizar de manera más clara los procesos dentro de la interacción.

¿Qué son las partituras de interacción?

Las partituras de interacción son una construcción de un lenguaje que incorpora la secuencia de uso como modulación dentro de su propuesta. La secuencia de las acciones define y permite visualizar los patrones de interacción entre el usuario y el sistema, explicitando y esquematizando procesos complejos mediante un lenguaje gráfico.

Esta bajada de la interacción, desde un proceso abstracto a uno complejo, da pie a una mayor comprensión.

Capas de interacción

Siguiendo la modalidad del service blueprint, se establecen capas que dividen el diagrama según los actores involucrados en las acciones. Son un total de cuatro capas contenidas dentro del diagrama que organizan los componentes de la interacción.


Capas-partituras.jpg


La primera capa es la modular y su función es titular el módulo de interacción según el tipo de acción que realiza el usuario dentro de éste. La segunda capa concentra las acciones e intenciones del usuario, es donde se gatilla toda la interacción entre usuario y sistema.

La tercera capa corresponde al contacto directo entre usuario y sistema, representando la interrelación de la persona-servicio o persona-producto. Es donde aparece el diseño de interfaz como protagonista de las acciones, a partir de las inquietudes u objetivos del usuario.

La cuarta y última capa es la capa de proceso interno, la cual se limita a las acciones fuera del campo de visibilidad del usuario. Hace referencia a la sucesión de eventos que el usuario desencadena en del sistema con sus acciones.

Lenguaje unificado

La construcción del modelo de partituras de interacción es a partir de una iconografía y un sistema de flechas que van guiando el despliegue de acciones. El uso de íconos permite que mediante la representación y esquematización de elementos, se construya una horizontalidad y mayor entendimiento en la comunicación interdisciplinaria.

El lenguaje que construyen y transmiten las partituras de interacción tiene como finalidad el entendimiento del contexto en el cual se desarrolla una interacción, tomando en cuenta los distintos factores y organizándolos de forma que se vuelvan comprensibles.

Se establece para las partituras un set iconográfico que consta de 36 íconos para representar acciones en las distintas capas del diagrama. Son de un nivel de abstracción alto, de modo que el uso de los mismos sea amplio para el diseñador o desarrollador que utilice esta herramienta. Los íconos están pensados como dibujos simples, de manera que este lenguaje pudiera ser llevado a casos reales de manera digital como análoga, a modo de bosquejo.

El uso de íconos dentro de la partitura viene acompañado de una leyenda en la cual se menciona la acción específica que se desea comunicar dentro de la interacción.

Set iconográfico

Modo de uso

El modo de uso de esta herramienta para el diseño de interacción se plantea digitalmente a través de los programas Adobe Illustrator e Omnigraffle Pro.

Illustrator

Adobe Illustrator es un software que edita gráficos vectoriales; se trabaja a partir de un tablero de dibujo o “mesa de trabajo” en donde se dibujan principalmente elementos vectoriales, incluyendo las tipografías.

En el programa, se dispone para su uso el set iconográfico completo alineado en una plantilla de la partitura organizado según la capa de la interacción a la cual pertenecen. Además se incluyen dentro del archivo flechas tipo que permiten representar el flujo y secuencia de las acciones; y líneas tipo que permiten vincular páginas entre sí.

Partituras-illustrator-01.jpg

Omnigraffle

Omnigraffle es un software diseñado especialmente para su uso en Mac OS X, el cual sirve para crear diagramas, diagramas de flujo y distintos tipos de gráficas. Se caracteriza por tener un sistema de “drag & drop”, o “arrastrar y soltar”, con plantillas de elementos gráficos que se van incorporando al documento.

La misma disposición de elementos se lleva a Omnigraffle, con la diferencia que el programa automáticamente reconoce los elementos de iconografía y flujos, y permite arrastrarlos hacia un nuevo documento.

Partituras-omnigraffle-01.png

Casos de estudio

A partir de las plantillas disponibles para libre uso, se estudian una serie de casos de interacción de modo de adentrarse en la materia y comprender de la mejor manera la metodología que proponen las partituras de interacción

Búsqueda en Google

Se analiza en una primera instancia el caso de estudio del buscador de la interfaz en desktop. Construyendo la partitura de interacción se encuentran una serie de pasos y respuestas, tanto inmediatas como procesadas, a las acciones que realiza el usuario. Mediante la iconografía y el sistema de flechas para representar el flujo de la interacción se logra retratar el modo en que aparece la interfaz para un usuario cualquiera.

Creación nuevo elemento en Wiki Casiopea

Aprovechando las plataformas digitales de la Escuela de Arquitectura y Diseño, PUCV, se hace el estudio de la interacción en la dependencia de Wiki Casiopea, un espacio de registro y documentación, de carácter colectivo y colaborativo. Se analizan las respuestas del sistema frente al objetivo de crear un nuevo elemento dentro del sitio por parte del usuario.

Proyecto PiX

Las partituras de interacción, que fueron presentadas académicamente en la titulación de Katherine Exxs el año 2008, con una herramienta del diseño de interacción que cada vez han ido tomando más fuerza a nivel local. Mediante la difusión de los autores -Katherine Exxs y Herbert Spencer- gradualmente se fueron posicionando en el área laboral, siendo aplicadas en proyectos reales en torno al diseño de experiencias.

El mundo digital ha ido innovando continuamente los últimos años, gracias al uso de nuevas tecnologías y disciplinas. Debido a estos avances, se plantea que las partituras de interacción, elaboradas hace ya seis años, apremian un rediseño de su metodología y lenguaje.

Para el tercer periodo de la titulación, surge la oportunidad de integrarse al proyecto de investigación y construcción de las partituras de interacción. El rol que es asumido es el de apoyar a lo largo del proyecto el proceso de estudio de usuario, mediante el registro y análisis de resultados, y la etapa constructiva, transcribiendo las partituras desde su plataforma web hacia distintos softwares de diseño.

Screenshot del sitio público de la aplicación de las Partituras de Interacción

Planteamiento

Dentro de las propuestas de esta nueva etapa para las partituras de interacción se encuentra el elaborar un lenguaje visual que responda a los requerimientos del diseño de experiencia actual, pensando en las aplicaciones uso para distintos dispositivos móviles de interacción y agregar dinamismo al modo en que se representa la interacción entre persona e interfaz.

Se plantea en una primera instancia del proyecto, paralela a la construcción de un lenguaje visual iconográfico, el estudio con usuarios de las previas partituras de interacción, de forma de identificar fortalezas y debilidades de éstas.

Posteriormente viene una etapa plenamente constructiva, que pretende habilitar el uso de las partituras a través de una aplicación web y facilitar otros modos, en plataformas de softwares, para quienes deseen incorporar las partituras dentro de su área de trabajo.


Apertura del proyecto

El proyecto PiX desarrollado por Katherine Exxs, Herbert Spencer y Hugo Solar; tiene de por sí un potencial enorme como metodología, de crecimiento y expansión en el área del diseño de experiencias.

Uno de los principales motores en el rediseño de las partituras de interacción, produciendo el desarrollo de Pix App, fue la integración del proyecto en un simposio de diseño de sistema llevado a cabo en Noruega.

El simposio de nombre “Relating Systems Thinking & Design 3” o en su abreviación, RSD3, trata de una serie de conferencias que exploran el desarrollo interdisciplinario del design thinking como una práctica progresiva basada en la información proveniente de la teoría de sistemas.

Durante este simposio, que se llevará a cabo durante el mes de octubre del presente año, el proyecto PiX es inserto mediante una conferencia llamada “Interaction Scores: Experiments with Interaction Notation”, o en su traducción, “Partituras de Interacción: Experimentos con la Anotación de la Interacción”.

Estudios de usuario

Dentro de la metodología del desarrollo del proyecto PiX, inserto en el ámbito del diseño de interacción, se vuelve natural y necesario el implementar herramientas en torno al estudio del usuario, con la finalidad de conocer tanto inquietudes como objetivos de quienes han incorporado las partituras de interacción a sus áreas de trabajo.

Los estudios del usuario implementados son una encuesta web como primera etapa de acercamiento al grupo de estudio y una sesión de entrevistas presenciales a modo grupal para recopilar información sobre el uso de las partituras y posibles mejoras a partir de la experiencia personal de los asistentes.

Encuesta

Una encuesta online es un cuestionario estructurado que se le envía a los participantes a través de la web. Los datos recopilados por el formulario se almacenan dentro de una base de datos y normalmente la herramienta de encuestas provee de un análisis de resultados. A diferencia de las encuestas tradicionales, el utilizar una plataforma digital permite recopilar información de una audiencia extensa por un mínimo costo, indagando en quiénes son los usuarios de un determinado producto o servicios, sus expectativas y críticas.

Se realiza una encuesta via mail a distintos profesionales que trabajan o han tenido la oportunidad de trabajar con partituras de interacción.

El principal propósito de la encuesta es averiguar el grupo real de usuarios de las partituras y el área se trabajan; cómo y cuándo han recurrido a las partituras de interacción como herramienta de trabajo; y posibles críticas o mejoras a la metodología actual de ellas.

Se añade como pregunta final dentro de la encuesta la interrogante “¿Te interesaría participar en una conversación sobre tu experiencia de uso de las partituras de interacción?” para una siguiente etapa de profundización dentro de los estudios de usuario.

Resultados

De un total de 55 encuestados, 42 personas respondieron que sí habían utilizados las partituras de interacción. De los encuestados, las áreas en que se desempeñaban eran principalmente arquitectura de información, diseño de interfaz, diseño de interacción y estrategia o marketing.

25 personas respondieron que sí usan actualmente las partituras de interacción en proyectos. Al preguntar para qué le había servido esta herramienta, las respuestas escritas tendieron a los verbos definir, ordenar y formalizar tanto actividades como flujos e interacciones.


Otras herramientas que los encuestados mencionaron utilizar en sus proyectos fueron wireflow, flujogramas, prototipos, mapas de navegación, service blueprint y diagramas de UML.

Nubepalabraspix.jpg

Entrevista grupal

A partir de las respuestas positivas conseguidas en la encuesta online para una conversación sobre la experiencia de uso de las partituras de interacción, se arma una base de datos con los contactos y se agenda una modalidad de entrevista grupal presencial.

Esta entrevista tiene como principales objetivos entender el uso actual de las partituras de interacción a partir de la experiencia propia de los participantes. Abrir la discusión a posibles cambios o mejoras de la herramienta, de manera de satisfacer mejor las necesidades de los usuarios. Por último, analizar el modo en que las partituras están siendo usadas, para proponer cambios y correcciones a la metodología actual de las mismas.

Resultados

Asisten a la reunión un total de cinco participantes, provenientes del área de diseño y del marketing.

En forma de contextualizar, se recopiló información sobre el tipo de proyectos y etapas en las cuales han aplicado las partituras de interacción; en cuanto al uso de las mismas, se analizaron las distintas capas del diagrama y el uso de la simbología e iconografía; y por último, los cambios que los participantes han realizado a las partituras al incorporarlas a sus proyectos, estableciendo posibles correcciones a la metodología.

Registro
Conclusiones

Aunque las partituras de interacción cumplen su cometido y se adaptan de una buena manera a las distintas necesidades de los diseñadores y desarrolladores surgen algunas problemáticas y por lo mismo, espacio para seguir siendo mejoradas.

Se desprende de las entrevistas una serie de problemáticas sobre la partitura de interacción.

El modo en que las partituras están siendo utilizadas hoy en día, es principalmente para explicitar las acciones dentro de la interfaz, por lo que tanto las intenciones como objetivos del usuario pasan a un segundo plano. No están siendo articuladas como un herramienta para representar la experiencia completa de un usuario, si no para representar las interacciones directas de éste con productos o servicios.

En muchos casos, se ha dejado la iconografía de lado para usar una simbología similar a los diagramas de service blueprint. Esto es debido al modo de trabajo en el que es usada la herramienta, usualmente siendo un bosquejo rápido del proceso de interacción.

Las partituras que presentaron los participantes representaban el flujo de la interacción mediante flechas, que en casos de procesos complejos ayudaban a diagramar una multiplicidad de opciones de navegación de la interfaz.

Construcción del lenguaje visual

PiX es un herramienta entregable del diseño que busca encapsular el flujo de la interacción, lo que es considerado como una cualidad fundamental de la experiencia. El lenguaje que se construye para el diseño de interacción tiene como propósito reflejar la complejidad del proceso, pero a la vez, establecer un modo tal de comunicación que sea accesible para distintos actores a lo largo del desarrollo de un proyecto.

El rediseño de las partituras de interacción toma en cuenta las necesidades actuales de los profesionales dentro del diseño de experiencia, incorporando una simbología basada en capas de interacción sobre las cuales se desenvuelven las acciones del usuario y del sistema.

Estas acciones son representadas mediante un set iconográfico de un alto nivel de abstracción el cual permite una variedad de usos, incluyendo la posibilidad de agrupar íconos, de manera de adaptar de la mejor forma las partituras al contexto en el que sean requeridas. Esta simbología es categorizada según la capa de interacción a la cual pertenece (persona, diálogo o sistema) y también según la índole de la acción, incorporando elementos integrados en la tecnología touch, es decir, desempeñados con la gestualidad de la mano.

Se toma la decisión, en esta nueva versión del proyecto de titulación de Katherine Exxs, de llevar las partituras a plataformas digitales, mediante la creación de una aplicación web que permite elaborar desde un sitio web los diagramas.

El sitio, el cual lleva por nombre Pix App, presenta las partituras como una metodología nueva y asertiva, las cuales añaden una dimensión temporal al diseño de interacción, proponiendo el flujo de tiempo como pilar fundamental dentro de la experiencia del usuario.

Partituras

Las partituras de interacción planteadas dentro de esta nueva versión y tomando el nombre de PiX, siguen a grandes rasgos el mismo tipo de diagrama planteado en el año 2008. Esto es, establecer la representación de acciones a lo largo de una interacción en capas de profundidad mediante un lenguaje unificado que permita a quien utilice la herramienta comunicar de fácil manera el proceso que se está proponiendo.

Cada sección de la partitura representa un momento durante la interacción, donde simultáneamente se pueden dar acciones en las tres capas de interacción. Esto establece una diferencia con la versión previa de las partituras, en las que mediante líneas y flechas iban indicando el flujo del proceso, las cuales se dejan de lado en el rediseño de los diagramas.

La partitura se puede dividir según las páginas que visita el usuario, mediante líneas verticales, a las cuales se les añade un leyenda que indica el cambio de página.

Capas

La partitura de interacción está dividida en tres capas: la capa del usuario, la de interacción y la del servicio.


Capas-pix.jpg


  • Persona: Esta capa muestra los objetivos de la persona mediante el desarrollo mental de la tarea planteada en cuestión. También muestra las emociones esperadas involucradas en la experiencia global.


  • Diálogo: Esta es la capa del diálogo que representa las acciones concretas sucediendo en la interfaz tales como gestos, mensajes, acciones; toda manipulación directa de elementos y constructos sucediendo en el punto de contacto.


  • Sistema: Esta es la capa del sistema que muestra lo que ocurre tras bambalinas, aquello que permite que el servicio se desarrolle; todas las acciones que sostienen y permiten que se trabaje satisfactoriamente el sistema, las cuales posteriormente son entregadas y presentadas como una reacción a la persona.

Iconografía

La iconografía para esta nueva versión de las partituras de interacción se plantea desde la plataforma web, incorporándola mediante una fuente digital o webfont, que toma el nombre de PiX, desarrollado por el diseñador visual y de interacción, Herbert Spencer.

Fuente webfont PiX

La fuente iconográfica PiX (que se encuentra actualmente en su versión 2.5) está diseñada especialmente para representar acciones y procesos involucrados en el flujo de la experiencia del usuario. Cada ícono puede ser usado de manera aislado para representar acciones, o bien combinarlos para precisar la idea.

La combinación de los íconos se lleva a cabo mediante la función de “stack” o agrupación, la cual permite posicionar un símbolo por sobre otro usando en la plataforma web. Los íconos están diseñados utilizando una grilla base, que alinea los elementos siguiendo un uso sistemático de los diferentes símbolos, logrando una estandarización del lenguaje gráfico.

El modo de sintaxis de esta serie de íconos se establece según el nivel de profundidad de la interacción al que pertenecen, planteando el siguiente ordenamiento:

  1. Íconos simples
    1. Grilla
    2. Contenedores
    3. Objetos
    4. Flechas y botones de reproducción
    5. Usuario
      1. Expresiones faciales
      2. Gestualidad touch
    6. Aparatos y controles
  1. Íconos agrupados
    1. Gestualidad touch
    2. Aparatos y controles
    3. Usuario
      1. Intenciones
      2. Acciones
    4. Respuesta del sistema


Set iconográfico (versión 2.5) diseñado para PiX

Plantillas

Se planteó desde un inicio del proyecto el objetivo de ampliar el uso de las partituras, tanto extendiendo el lenguaje gráfico diseñado como incorporando distintas plataformas de difusión de la herramienta de diseño.

Como parte de la segunda tarea, se diseñan una serie de plantillas para su uso en distintos softwares relacionados con el diseño de interacción, facilitando el material de trabajo para quienes busquen incorporar las partituras a sus proyectos y metodologías.

Los softwares para los cuales son desarrolladas estas plantillas son Adobe Illustrator, Omnigraffle Pro y Visio. Estas tres soportes de diseño fueron los más utilizados según la información recopilada durante la entrevista grupal, en el fase de estudios del usuario, instancia en la que profesionales del área de diseño de interacción contaron su experiencia con las plantillas.

Illustrator

Screenshot de la plantilla en el software Adobe Illustrator

Adobe Illustrator es un software o soporte, utilizado dentro del diseño. El programa permite editar gráficos vectoriales trabajando a partir de un tablero de dibujo o “mesa de trabajo”.

La plantilla diseñada para Adobe Illustrator, disponible en inglés y su versión traducida al español, consta de dos mesas de trabajo.

La primera mesa de trabajo es una infografía sobre el modo de uso de las partituras de interacción, donde se incorporan descripciones detalladas de sus partes, el set iconográfico completo con agrupaciones de íconos y el correcto ordenamiento de los mismos. Esta sección de la plantilla tiene como objetivo el instruir a quien está comenzando a usar esta herramienta de diseño, facilitando el uso de la simbología y su correcta comprensión.

La segunda mesa o tablero de dibujo es una partitura en blanco, con estilos tipográficos definidos, de forma de lograr un aspecto homogéneo entre los distintos procesos de interacción.

El modo de trabajo que se plantea, es ir copiando y pegando los diferentes íconos desde la infografía hacia la nueva plantilla, la cual posteriormente puede ser exportada como un archivo independiente y entregable.


Infografía que explica el uso de la plantilla
Nueva Partitura de Interacción en blanco presentada en el programa

Omnigraffle

Omnigraffle es un soporte exclusivamente para equipos con el sistema operativo Mac OS X. Este software es usado para crear diagramas, diagramas de flujo y distintos tipos de gráficas. El modo en que funciona es a través de una serie de plantillas pre diseñadas sobre las cuales se van colocando elementos llamados “stencils”, que son símbolos ya dibujados y que siguen una cierta norma de estandarización.

Trabajando desde esta modalidad de trabajo el diseño de la plantilla, se propone crear una galería de stencils con la simbología de las partituras de interacción. Esta galería que incluye todos los íconos simples y agrupados de PiX se encuentra a su vez categorizada según la indexación planteada previamente. Además de la galería, se incluye una plantilla en blanco de la partitura.

Cabe destacar que esta forma de administrar los stencils como galerías está disponible de la versión 6 en adelante.

Screenshot de la plantilla en el software Omnigraffle Pro
Screenshot de la plantilla en el software Omnigraffle Pro
Screenshot de la plantilla en el software Omnigraffle Pro

Visio

Microsoft Visio es un soporte de dibujo vectorial para uso exclusivo en el sistema operativo Microsoft Windows.

Las herramientas que incluye el software permiten realizar, entre otras funciones, diagramas de sistemas, diagramas de bases de datos, diagramas de flujo, diagramas de UML. Incorporan de la misma forma que Omnigraffle el concepto de stencils agrupados en galerías.

El modo en que se diseña la plantilla dentro de este soporte es parecido a como se desarrolló en Omnigraffle, con diferencias menores.

Screenshot de la plantilla en el software Visio

Casos de uso

Una vez finalizada la etapa constructiva de las plantillas, se propone comprobar la efectividad del rediseño de las partituras como herramienta dentro del diseño de interacción. Para lograr este propósito, se analiza un serie de casos de experiencia de usuario, los cuales a partir de una tarea u objetivo por parte del usuario representan las respuestas desencadenadas a modo de diálogo a lo largo del proceso.

Google

Se vuelve a analizar el caso de estudio del buscador de la interfaz en desktop, para así comparar el modo en que es representado el proceso de la interacción del usuario.

Primeraspix-1.jpg

Como puede ser observado, el rediseño de las partituras de interacción hace mucho más compacto el modo en que se representan acciones y flujos.

Otra caso de estudio que se analizó es la experiencia de un usuario al usar la aplicación de búsqueda de voz por Google, en un dispositivo móvil.

Este caso se planteó para incorporar elementos de gestualidad touch, una de los grandes progresos del proyecto PiX.

Primeraspix-2.jpg

Wiki Casiopea

Aprovechando el estudio previo, realizado en la etapa de recopilación de antecedentes de estudio para el proyecto PiX, se elabora el caso de la interacción contextualizado en la dependencia de Wiki Casiopea, un espacio de registro y documentación, de carácter colectivo y colaborativo.

Se analizan las respuestas del sistema frente al objetivo de crear un nuevo elemento dentro del sitio por parte del usuario.

Primeraspix-3.jpg

Google Play Music

Se analizan una serie de casos de uso de la experiencia del usuario al ocupar una aplicación para dispositivos móviles llamada Google Play Music.

Google Play Music es una aplicación para escuchar música la cual lleva como eslogan: “Disfruta de tu musica al instante estes donde estes”. Esta aplicación permite escuchar canciones en desktop, tablet y dispositivos móviles, incluso sin la conexión a internet. Se pueden administrar una serie de listas de reproducción y también descargar música pagando un determinado precio.

A continuación se analizan distintas funciones contenidas en la aplicación de manera de integrar la tecnología actual a la propuesta metodológica de las partituras de interacción.

Pix-google-music new-score.jpg

Pix-google-music new-score 2.jpg

Pix-google-music new-score 3.jpg