Partituras de Interacción

De Casiopea

Proyecto de Título de: Nicole Dupré Ch

Otras versiones del estudio:

Herramientas desarrolladas:

Alfa 2.0 versión Omnigraffle Pro | versión Illustrator

Referencias: Bibliográficas | Weblográficas

El proyecto se divide en:

Partituras de Interacción|Estudio de Modelos de Interacción | 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.


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]


Usuarios

Agentes involucrados en el desarrollo de un servicio digital

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.

Actualmente existen distintos sistemas de modelado entandarizados que se encargan de graficar, mediante un lenguaje particular, el funcionamiento de un sistema desde distintas perspectivas.



Lenguaje Visual

Este hace referencia al conjunto de elementos gramaticales y sintácticos que operan en cualquier imagen. Las cualidades que distinguen a la imagen como un lenguaje autónomo tienen que ver con su sintaxis, las relaciones que surgen de ella cuando se encuentra dentro de un conjunto de imágenes que se relacionan entre si visualmente.

El poder del lenguaje visual radica en su inmediatez, donde se puede ver simultáneamente contenido y forma. Su trato debe ser como una unidad que trasmite información ya que adecuadamente elaborado, el mensaje visual llega directamente a nuestro cerebro donde es comprendido.

De esta forma el ser humano trasmite y recibe mensajes visuales a tres niveles:

  • Mediante representaciones, correspondiente a lo que se ve y reconoce desde el entorno y la experiencia.
  • Abstractamente, referente a la cualidad cinestética (posibilidad para controlar movimientos y manejar objetos) de un hecho visual, reducido a sus componentes visuales y elementales de confección de un mensaje.
  • Simbólicamente, mediante un universo de sistemas de símbolos codificados que el ser humano a creado y al cual adscribe un significado.[3]

Los distintos sistemas de información codificada han sido desarrollados para sintetizar la información de modo que sea posible registrarla y comunicarla a una audiencia masiva. Es por esto que estos lenguajes son trabajados y utilizados por las distintas áreas profesionales, ingenieros, arquitectos, diseñadores, etc.


Percepción Visual

Las personas adquieren conciencia de sí mismas y del mundo que le rodea por medio de sus sentidos. A partir de los estímulos recogidos por los ellos el hombre descubre, organiza y recrea la realidad, adquiriendo conciencia de ella por medio de la percepción.

A partir de los estímulos recogidos por los ellos el hombre descubre, organiza y recrea la realidad, adquiriendo conciencia de ella por medio de la percepción. [4]

La percepción visual de las formas consiste en un acto óptico-físico que funciona mecánicamente de manera parecida en todas las personas. Se trata de una lectura, de una interpretación de señales, cuyo código recide en el cerebro. Estas formas o imágenes se leen de forma semejante a como se hace con un texto, una fórmula matemática o una partitura musical. Conlleva un aprendizaje que requirie una gramática que explique sus leyes y profundice el sentido de la lectura.

Rechazamos aquello que aparece ante nuestros ojos como una configuración aleatoría de cosas, en desorden o de modo caótico. Los ojos buscan continuamente desprender de ello una organización, una estructura, un significado, una forma conocida.

Teoría sobre la persepción visual: Psicología de Gestalt

Surge en Alemania a principios del siglo XX que trata los modos de percepción de la forma de las cosas que vemos.

Sus principios son los siguientes:

  • Relación figura-fondo

El ojo reconoce una figura sobre un fondo, sin embargo figura y fondo pueden funcionar de forma independiente sosteniendo una relación reversible o ambigua. Cuando la relación figura-fondo esta bien definida la imagen se destaca claramente del fondo. Por el contrario cuando esta relación no esta bien definida se produce una confusión que no permite que estos elementos se diferencien claramente uno del otro.

  • Cierre

Dice que cuando una figura esta incompleta nuestro cerebro añade los elementos faltantes para completarla.

  • Semejanza

Alude a la relación que establece nuestra mente entre elementos semejantes y los agrupa en una unidad. De este modo, cuando existen elementos de forma similares dentro de un conjunto elementos de formas distintas, estos serán asociados. Esta semejanza se puede establecer por sus caracteristicas, forma, tamaño, color, textura, etc.

  • Proximidad

Consiste en la agrupación parcial o secuencial de elementos realizada por nuestras mentes.

  • Simetría

Las imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia. Aún sabiendo que la mitad de nuestro cuerpo no es exactamente igual a la otra mitad, al dividirlo, percibiremos dos partes simétricas ya que responden a un mismo patrón de formas.

  • Continuidad

Al percibir elementos como un patrón, nuestra mente lo continua aun después de que este halla desaparecido.

  • "La buena forma"

Se basa en la observación de que el cerebro intenta organizar los elementos percibidos de la mejor forma posible, esto incluye el sentido de perspectiva, volumen, profundidad etc. El cerebro prefiere las formas integradas, completas y estables. Esta ley de alguna manera involucra a otras leyes, ya que el cerebro prefiere también formas cerradas y /o continuas o simétricas con buen contraste es decir, definidas.[5]

La Visualización

Esta permite observar y comprender aspectos y fenómenos de la realidad que por su naturaleza no son visibles. Fenómenos complejos, procesos que son inhaprensibles por encontrarse fuera del alcance del sistema sensorial. Visualizar no es un resultado implícito en el acto de ver, es un trabajo que consiste en transformar datos abstractos y fenómenos complejos de la realidad, en mensajes visibles. Se trata de una mediación didáctica en la dialéctica de lo real visible y lo invisible, es una puesta en conocimiento por medios gráficos y una puesta en común, es decir un hecho de comunicación. La visualización gráfica propone transmitir nuevos conocimientos, facilitar informaciones técnicas y científicas al entorno multidiciplinar, facilitando las acciones inmediatas de desarrollo. Lo cual se hace posible mediante un acto de transcodificación basado en configuraciones gráficas, combinatorias de formas, colores y estructuras gráficas significantes.[6]

Los Esquemas

Estos se caracterizan por el manejo de elementos cada vez más abstractos, ya que su función es la de informar fenómenos que cuya esencia es in-visible. Se utilizan como modelo de organización, donde es posible mostrar los organismos que constituyen un sistema.

En el caso especifico del desarrollo de plataformas digitales como lo es Aura, se trabaja la modelación de la administración y recuperación de datos por parte de los usuarios del síto mediante lenguajes que muchas veces no son comprensibles a la realidad multidiciplinar de su desarrollo. Estas herramientas permiten el diseño de acciones, procesos y operaciones que se podrán realizar en el sistema y cumplen con la función especifica de transmitir este conocimiento a las personas que conforman el equipo de trabajo en desarrrollo del proyectos.

Más sobre los diagramas en Estudio de Modelos de Interacción


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

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

Error al crear miniatura: Falta archivo
Lectura.jpg
Lectura1.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

  • 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.

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.

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.


  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
  3. COSTA, Joan.La esquemática: visualizar la información, 1a ed. Madrid : Paidós,1998.
  4. DONIS,Adonis.La Sintáxis de la Imágen, introducción al alfabeto audiovisual.Capitulo 1, 1º edición, 2003, 214 paginas
  5. http://www.turemanso.com.ar/fuego/psi/gestalt.html
  6. COSTA, Joan.La esquemática : visualizar la información.1a ed. Madrid: Paidós.1998