Partituras de Interacción

De Casiopea




TítuloPartituras de Interacción
Tipo de ProyectoProyecto de Titulación
Palabras Clavelenguajes visuales, notación gráfica, diseño de interacción, AURA
Período2007-2008
CarrerasDiseño Gráfico
Alumno(s)Katherine Exss, Nicole Dupré
ProfesorHerbert Spencer

Relacionados

Referencias: Bibliográficas | Weblográficas

  1. Partituras de Interacción
  2. Estudio de Modelos de Interacción
  3. Diseño de Iconografía

Introducción

Partituras de la interacción es un proyecto que continua con la investigación y la propuesta del proyecto Lenguajes visuales para la interacción de Katherine Exss. Tomando los modelos ahí estudiados, centrándose en su utilización para así avanzar en modelado del sitio, y a su vez interiorizar los conceptos que en ellos se manejan, enfocado el análisis en el reconocimiento de sus fortalezas y debilidades. De esta forma se pretende llegar a la proposición de un modelo, donde el mensaje visual y conceptual favorezca el desarrollo de un sistema. Esto mediante la elaboración de un lenguaje visual comprensible por los distintos actores de un proyecto.


Contexto, el servicio como experiencia

El rápido desarrollo tecnológico y la fuerte demanda de servicios subyacentes en la actualidad, ha despertado el interés de las economía mundiales su innovación de, siendo de radical importancia tomar en cuenta dentro las etapas de desarrollo: estrategia,diseño e implementación el enfoque en la experiencia que el cliente vivirá durante la entrega del servicio.

Desde el punto de vista del diseño de interacción, un servicio es una oferta creada para y con el cliente, donde el producto final no es algo tangible si no que la propia experiencia que este tenga durante el proceso. Los servicios se caracterizan por ser fluidos, dinámicos y porque muchas veces llevado a acabo en tiempo real por consumidores, empleados, y la tecnología pertinente.[1]

Lo que nosotros consumidores, esperamos de los servicios, es que sean de fácil accesibilidad, con contenidos personalizados, interactivos, fáciles de compartir e innovadores, en cualquier momento y en cualquier lugar e independiente del dispositivo.[2]

Problemática

La creación y la innovación de un servicio requiere la coordinación, el trabajo y comunicación de equipos multidisciplinares de profesionales. Dentro de este entorno la comunicación entre agentes es la base para lograr un buen diseño y desarrollo del servicio para que se constituya como una experiencia para el usuario. Proyectos de diseño como estos generalmente involucran la comunicación entre periodistas, diseñadores, sicólogos, ingenieros y técnicos. Cada cual participa en tareas específicas y utiliza metodologías propias de su área de trabajo. Esta situación genera un distanciamiento entre los integrantes del proyecto.

El punto crítico del proceso de desarrollo se produce en el traspaso de información entre los agentes encargados de las distintas etapas de desarrollo, debido a la distancia que existe entre los lenguajes y medios gráficos que utiliza y que son particulares de cada disciplina. No existe un lenguaje estandarizado capaz de apoyar la comunicación de la interacción desde lo abstracto (investigación) a lo concreto la (implementación).

Por consiguiente una gráfica comprensible de los procesos podría aproximar las áreas de creación y construcción, además de acercar los procesos a los participantes, lo que disminuye el margen de error o las posibles confusiones en el momento de la implementación

Agentes involucrados en el desarrollo de un servicio digital

El rol del diseño, La innovación en procesos

Un Patrón de Diseño es una solución genérica y re-utilizable para problemas que surgen comunmente en la etapa de diseño. Es un modelo, para resolver dichos problemas, el cual puede utilizarse en distintas situaciones, previniendo la aparición de detalles que pueden causar inconvenientes mayores a la hora de la implementación. Los lenjuages utilizados anteriormente en la modelación del sitio del Archivo Historico Jose Vial Armtrong son patrones que corresponden a sistemas de modelado entandarizados que se encargan de graficar, mediante un lenguaje particular, el funcionamiento de un sistema desde distintas perspectivas.



Gramática visual para el diseño de interacción

Aplicación del Diagrama en la modelación de servicios

Para probar el lenguaje y el espectro de servicios que abarca se tomaron 3 casos para los cuales se plantean secuencias de uso de sus componentes, para asi poder captar la eficacia del lenguaje en cuanto a la justeza de sus elementos iconográficos, su lectura del fragmento, de la interacción particular hasta la lectura genérica, del "panorama general".

Estos casos tiene en comun las siguientes características:

  • Son servicios digitales
  • Necesitan la interacción usuario-interfaz
  • El usuario tiene una identidad
  • En el desarrollo estratégico, conceptual, su diseño y programación involucra a profesionales de distintas áreas.

Los casos escogidos son el Explorador semántico de ARPA, el Administrador Web para archivos patrimoniales AURA, Gmail. Los primeros 2 en etapa da de desarrollo paralelas a este proyecto y el último por ser casos cercanos de servicios digitales de audiencia masiva y diversa.

Versión Alfa 3.0

Plantilla illustrator cs3 para descargar

LA PÁGINA

Lectura2.jpg

Una página es un espacio de contenidos que dependiendo de sus características puede ser estática (sólo de lectura) o dinámica compuestas por módulos de interacción complejos donde el usuario tiene algún tipo de control sobre sus contenidos. Su lectura es vertical y contiene los módulos que la componen ordenados hacia abajo. La página forma parte de la cabecera del diagrama, por encima de la caja que declara las secciones en que se divide cada módulo. De esta forma la página independientemente de la cantidad de módulos por los cuales se compongan, pueden ser vistas como una unidad. Al disponer las páginas dentro de un contexto máyor, en el mapa de navegación, este se completará con las relaciones que los módulos establecen entre si y con otras páginas.

LOS MÓDULOS

Composición.jpg

Son unidades que construyen el diálogo usuario/servicio. Por lo general su nombre responde a una acción concreta del usuario como buscar, comentar, etc. Su dirección de lectura es horizontal e identifica el origen - respuesta de una acción. Se compone de 3 secciones que se suceden de izquierda a derecha en este orden.

Lectura.jpg
Lectura1.jpg
  • Acciones del usuario

Se refiere a la acción concreta que realiza la persona en el sito. Por ejemplo: buscar, asignar etiqueta, iniciar sesión, etc. Por lo general corresponde al nombre del módulo.

  • Contacto directo

Se separa de la sección anterior por la línea de interacción. Especifica las operaciones a realizar en la interfaz para llevar a cabo la acción. Su iconografía corresponde a los elementos que intermedian o conducen la comunicación entre el usuario y el sistema. Cada elemento de interfaz es un tipo de dato reconocible visualmente por el usuario y a la vez una ecuación o código del sistema. La notación de estas coordenadas constituyen un flujo similar al de un diálogo pregunta-respuesta.

  • Proceso interno

Se separa de la sección de contacto directo por la línea de visibilidad la cual indica que los procesos que se generan en el sistema serán invisibles Estos procesos que realiza el sistema son basicamente relación y discriminación de datos. Generan una repuesta que se traduce en la sección anterior como un cambio en la interfaz y de contenidos entregados al usuario.

notación

Iconos.jpg

El diseño de la iconografía responde a la síntesis gráfica de los procesos, reducidos a sus componentes visuales y elementales para la confección de un mensaje. De esta forma la notación de los módulos es similar a la de una partitura musical donde la nota es el símbolo que representa el sonido de un tono.

En los módulos estas notas corresponden a iconos que significan operación especifica, acompañados de una leyenda que relaciona el icono a un contenido especifico. Estos están construidos de líneas y formas simples para que sea posible que cualquier persona pueda dibujarlos, sin necesitar un programa específico.

caso administración archivos digitales

Preferencias-usuario.jpg

ALFA 2.0 : versión de prueba

Propuesta 04 : Alfa 2.0 Descargar diagrama

Para testear el diagrama como herramienta de diseño, se trabajó en una plantillas para disponibilizar en internet para que la gente pueda descargar: Plantilla Illustrator CS3 | plantilla Omnigraffle Pro y se esta trabajando en la plantilla para MIcrosoft Visio.

A continuación se describe la correspondencia de la simbologia e iconografia diseñada con los agentes, elementos y procesos que constituyen el diagrama y lo conforman como un plano en planta del servicio que se este modelando.

El diagrama cuenta con 4 elementos esenciales

  • Niveles

Estos son las áreas en jerarquía del sitio estas dan cuenta de la profundidad que este tiene. Un nivel de profundidad esta compuesto por páginas.

  • Páginas

Unidad estructural del sitio compuesto por módulos de interacción. Cada una cuenta con sus respectivos módulos de interacción, indicando las posibles acciones que se pueden efectuar en una pagina.

  • Módulos de interacción

Son acciones” compuestas de una secuencia de operaciones que llevan a una respuesta, la cual satisface una necesidad del usuario.

Un módulo se compone de tres horizontes:

  • 1º Horizonte: declara la acción específica a realizar por el la persona. (Acciones del usuario) este esta limitado por la linea de interacción, línea que indica contacto con el siguiente horizonte.
  • 2º Horizonte: Evidencia física, nivel intermedio por el cual se comunican, mediante una interfaz, usuario y sistemas. Esta limitado por una linea de visibilidad, la cual indica que todo proceso desarrollado en el horizonte inferior, no será visible para el usuario.
  • 3º Horizonte: En este se declara el agente servidor o base de datos, que realiza el proceso interno del sistema, generando una respuesta que se hará visible a nivel de la evidencia física, en el segundo horizonte.

Caso: Gmail.com

cuarta propuesta

Basada en la primera versión del diagrama Alfa 2.0

La imagen muestra la interacción dentro del primer nivel de navegación, en la página de inicio del sitio. Página desde la cual se puede acceder a los módulos "Salir" , “Iniciar sesión” y "Crear cuenta de usuario".



La página de inicio tiene tres módulos de interacción, correspondiente a acciones que puede realizar el usuario: salir, iniciar de sesión y crear una cuenta. Cada acción con un proceso y una respuesta distinta

  • El módulo navegar compuesto de enlaces a páginas internas del sitio. El cual dentro de la estructura e interfas de la página, ocupa la zona del footer o pie.

El usuario selecciona el link correspondiente a la página específica y el servidor carga la página correspondiente.

  • Una segunda opción corresponde al módulo Iniciar sesión. Esta acción requiere que el usuario ingrese su ID, contraseña y que seleccione el botón “entrar”.

Para que exista una respuesta hay un proceso, por parte del sistema, invisible a los ojos del usuario. En este caso, la operación ejecutada por el servidor es comprobar los datos, si estos estuviesen correctos, éste cargará la página de usuario, en el caso específico de Gmail, la casilla de entrada. Si por el contrario, alguno de los datos estuviese errado el servidor negará la petición, y responderá con un mensaje de error, pidiendo que se ingresen nuevamente los datos.

  • Un último módulo corresponde a la Crear cuenta de usuario, esta acción llama a una página especifica y da inicio a una secuencia de operaciones de ingreso de datos más largas y estructuran el formulario de registro.


Caso Explorador Semántico

Modulos de búsqueda simple

Esta propuesta de interacción es la versión que actualmente es posible programar

Busquedasimple.jpg

La búsqueda se puede realizar por medio de 2 módulos de interacción:

  • Búsqueda Simple, donde el sistema hace equivalente las palabras de la frase con las etiquetas registradas, y por lo tanto a una faceta.
  • Busqueda Avanzada, es por facetas (tiempo, lugar, persona), en ella el usuario ingresa las etiquetas bajo las cuales quiere buscar y especificando la faceta con la cual se relaciona la etiqueta. Estando permitido agregar el número de etiquetas que estime conveniente para obtener resultados satisfactorios.
Busqueda-ed faceta.jpg

Las etiquetas de búsqueda corresponden a la frase que ingreso el usuario, y son de resul

Busqueda-visualizaporfaceta.jpg

La selección de las visualizaciones es excluyente, es decir que solo se podrá desplegar una a la vez. Sus resultados corresponderán a las etiquetas que se hayan ingresado bajo una faceta determinada, durante el proceso desarrollado en modulo de búsqueda avanzado. (Búsqueda por facetas)

Busqueda-navegacionresult.jpg



Módulo de interacción Explorados Semántico ARPA

Tercera propuesta

Se estructura de izquierda a derecha, partiendo desde la página de inicio y dividiendose según las opciones de navegación que tendrá el usuario, estas opciones pueden ser módulos de interacción específicos de la página o a otras páginas con sus respectivos módulos de interacción.

Un módulo de interacción es una necesidad u acción especifica del usuario. Cada módulo de interacción esta compuesto de una secuencia de operaciones que este efectúa en la interfaz del sistema, la cual se constituye como puente de comunicación entre usuario y servidor o base de datos.

De esta forma un modulo esta compuesto por 3 horizontes, nombre del módulo, operación en la interfáz y proceso del sistema. Cada cual señalada con un icono y una nota de especificación de la acción.

Leyenda

  • Cuadros magenta: Páginas, estas corresponden a la estructura de navegación del sistema.
  • Flechas gris oscuro: opciones de navegación que puede seleccionar el usuario
  • Flechas gruesas gris claro: salidas del sitio
  • Flechas magenta: secuencia de operaciones que realiza un usuario para llevar acabo una acción o módulo.
  • Flechas discontinuas grises: Esperas que debe efectuar el usuario para recibir una respuesta del sistema
  • Iconografía gris: operaciones
  • Iconografía magenta: Módulos de acción correspondiente a una necesidad especifica del usuario. Estos son ejecutados o compuestos por una secuencia de operaciones que conllevan respuestas especificas por parte del sistema.

Segunda propuesta

diagrama de interacción y estructura Módulo Explorador Patrimonial Arpa


A partir de la propuesta anterior se busca la explicitación de las acciones que se generan a en cada módulo de interacción, sus operaciones en los elementos de interfaz y la respectiva respuesta generada por sistema, todo esto dentro de la gráfica estructural del sitio. Como ejemplo y ejercicio se toma el módulo explorador patrimonial ARPA, diseñado para AURA. El problema de la proposición radica en la dirección de la lectura, basándose en el diagrama propuesto anteriormente la lectura se daría de derecha a izquierda, yendo contra el flujo de lectura convencional y dificultando la comprensión al lector. Por otro al eliminar las lineas de interacción no se distinguen los distintos los horizontes donde fluyen los distintos agentes que interactuan en el sistema.</br>

Caso administrador de archivos patrimoniales aura

Primera propuesta: Diagrama General AURA

[Propuesta final segunda etapa

Fragmento del del diagrama presentado al fin de las egunda etapa de desarrollo

Este diagrama se propone como un esquema complementario, que facilita la comprensión y el desarrollo de la interacción que se da en el sistema. En él se visualiza el panorama general donde fluyen estas acciones para así contextualizar las secuencias de uso especificas de cada página.

Su lectura corresponde a una organización arbórea que plantea conceptualmente la arquitectura del sistema mediante el reconocimiento de elementos estructurales de interfaz. Estos elementos son opciones o módulos de navegación del sistema.

Los módulos de navegación corresponden a la agrupación de páginas que descienden paralelamente trazando una ruta de navegación que se puede transversalizar según las particularidades de interacción cada página. Debido a esto se expresan todas las acciones que se podrían realizar en cada una de ellas, pudiendo contabilizar la cantidad de modificaciones que se puede alcanzar sin salir de ella como la cantidad de relaciones o accesos que estas tienen a otras páginas. Estos accesos siempre son bidireccionales y pueden conectar páginas del mismo módulo de navegación como también páginas de distintos módulos.</br>


  1. http://people.ischool.berkeley.edu/~glushko/IS243Readings/ServiceBlueprinting.pdf
  2. http://www.tynmagazine.com/1026-La-experiencia-Multimedia-acercará-innovadores-servicios-para-los-usuarios.note.aspx