Lenguajes Visuales para la Interacción
| Título | Lenguajes Visuales para la Interacción |
|---|---|
| Palabras Clave | partitura de interacción, notación gráfica, diagramas |
| Período | 2007-2008 |
| Del Curso | Taller de Diseño Gráfico 7ª Etapa, Construcción de Diseño Gráfico 4 |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Katherine Exss |
| Profesor | Herbert Spencer |
Estudio de diagramas
- El modelado es una técnica cognitiva que trata de crear una representación, mediante un conjunto de simplificaciones y abstracciones, de un objeto concreto.
- Un modelo es una simplificación de la realidad, donde sólo se toman los puntos de gran importancia y se omiten los que no tienen relevancia para el nivel de abstracción dado.
- Se modela para aproximarse lo más pòsible a un sistema ya que los sistemas complejos no se pueden comprender en toda su magnitud.
Mapa Mental
Un modelo mental, o mapa mental es un diagrama que se usa para representar ideas, palabras o conceptos relacionados a una idea central. La conexión entre las partes no debe ser necesariamente lineal, de hecho no muestra ningún tipo de restricciones formales, ya que se trata de graficar directamente desde la metodología de lluvia de ideas (brainstorming), donde las relaciones se generan intuitivamente de un tema a otro, surgiendo sólo las ramas, grupos o áreas del diagrama.
Es por eso que se dice que los mapas mentales se construyen de manera personal, no existe un método único para la creación de estos diagramas. Estos pueden utilizar palabras clave, números e imágenes, colores, lógica y ritmo visual.
Mapa Conceptual
Los mapas conceptuales son una visualización de las relaciones entre diferentes conceptos, son diagramas de redes de términos relacionados entre ellos mediante verbos que especifican un tipo de relación. Un buen mapa conceptual construye ramas de frases legibles, como por ejemplo: Persona tiene Familia; Familia se compone por Padre; Padre tiene Nombre.
La estructura de estos diagramas es: Concepto – relación – Concepto; donde el concepto gráficamente es una caja y la relación puede ser tanto una línea como una flecha, con una descripción del tipo de relación.
Los mapas conceptuales son útiles para organizar los términos que rondan un proyecto ya que permiten aclarar las relaciones básicas, para luego establecer nuevas y más complejas relaciones. Este proceso comienza a distinguir agrupaciones de términos en común, tipos diferentes de conceptos y niveles de información.
Por los motivos anteriores y porque estos diagramas ofrecen una primera visualización de la magnitud de un proyecto, es que los mapas conceptuales son una buena herramienta para las primeras etapas de estrategia, planteamiento de diseño de la información y de interacción.
La arquitectura de la información (AI) crea esquemas de organización y navegación con el objetivo de que la persona que use el sitio web pueda navegar por él de forma fluida y por lo tanto eficientemente. Estos esquemas se llaman mapas de navegación. La AI se preocupa de que la información contenida en el sitio sea encontrable fácilmente. Para esto jerarquiza verticalmente los contenidos, separándolos en páginas según su capacidad de relación con otras páginas, por ejemplo: desde el Home de un sitio web se puede acceder a cualquiera de las cuatro opciones del Menú. En este caso, el Home representa el primer nivel de profundidad; luego las cuatro opciones del Menú, el segundo. De esta manera, cada opción del Menú desplegará otras posibles páginas que corresponderán a un tercer nivel, y así hasta llegar hasta los contenidos más profundos en un mapa.
Gráficamente un mapa de navegación se compone de cajas y líneas. Una caja representa una página; una línea, una posibilidad directa de acceder desde la caja 1 a la caja 2, es el vínculo entre dos páginas.
Jesse James Garrett perfeccionó el lenguaje visual de la arquitectura de la información, proponiendo soluciones gráficas para distinguir el elemento “página” del elemento “archivo” y separar el sitio web en áreas condicionales o de flujo, lo que ayuda a aclarar los mapas de navegación complejos, donde existen, por ejemplo, áreas de transacción que deben ser tratadas con mayor delicadeza. También distinguió tipos de relaciones distintas entre las partes del sitio web, por lo que tipos de líneas y flechas se separaron. Por último, entendiendo que los procesos del sistema no son indiferentes a la navegación de los contenidos, el lenguaje de J. J. Garrett incluye símbolos que irrumpen las relaciones, dando opciones en la relación de las páginas, lo que hace que la navegación se vuelva menos lineal. Estos símbolos son figuras básicas que hablan de las posibles respuestas del sistema a la interacción del usuario en el sitio web.
- Semicírculo: Este símbolo grafica la simulatáneidad. Una acción del usuario desata múltiples respuestas simultáneas.
- Rombo: Esta figura significa un punto de decisión. Una acción del usuario puede tener distintas respuestas que dependiendo de determinados factores producen una respuesta única (a diferencia del caso anterior) que se entiende como una decisión del sistema.
- Triángulo: Esta figura representa una rama condicional, es decir, la elección del sistema entre uno de los caminos que se desprenden de él (exclusivamente uno). A diferencia del rombo, la decisión es tomada por el sistema según las decisiones anteriores del usuario, es decir, la persona no gatilla en esta ocasión la decisión tan directamente como en el caso anterior.
- Trapecio: Este símbolo significa un selector condicional, o sea cumple la misma función que el triángulo pero la selección de la rama que tomará el sistema no es exclusiva, puede ser más de una opción.
- Círculo: El círculo representa la agrupación. Se habla de un racimo o agrupación, cuando un camino en la navegación ofrece llegar a más opciones que una sola.
Diagrama de Flujo
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.
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).
El diagrama de flujo es un tipo de visualización clara a pesar de requerir de una simbología. No es tan hermético como lenguaje, ya que se fundamenta en recorridos o posibilidades de cumplir una meta más procesos complejos internos. Algunos de los principales símbolos son los siguientes:
- 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).
- 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.
- Parelelógramo: Este símbolo grafica un campo de entrada o salida de información del sistema, se utiliza generalmente en los formularios.
- 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.
- 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.
- Flecha gruesa: Esta flecha denota la dirección del flujo directo, la trayectoria óptima del proceso de información.
- Flecha delgada: Esta flecha representa otras vías que puede tomar llevar a cabo un proceso, que no llegan a una solución óptima.
UML - Lenguaje Unificado de Modelado
Un diagrama UML es un simplificación de la realidad que tiene como ventaja ser la unificación de varias notaciones ya existentes, pero la desventaja de ser un método de modelado complejo, que no es de fácil construcción ni comunicación, por lo tanto, es un lenguaje hermético.
Los diagramas UML se utilizan en la creación o construcción de un software para:
- Comprender mejor lo que se está construyendo.
- Comunicar la estructura de un sistema complejo.
- Especificar el comportamiento deseado del sistema.
- Descubrir posiblidades de simplificación y reutilización.
Los modelos UML se dividen en:
- Estáticos: Diagramas de Clases, Objetos, Componentes, Despliegue y Paquetes
- Dinámicos: Diagramas de Secuencia, Colaboración o Comunicación, Casos de uso, Actividades y Estados
A continuación se describen algunos de los principales diagramas.
Diagramas de clases
Conjunto de clases con sus relaciones básicamente señaladas, que representan el diseño estructural (clase: nombre genérico). La caja distintiva de este diagrama se compone de tres partes: el nombre de la clase, abajo los atributos de la clase y por último más abajo, las operaciones de ella. Esta estructura de símbolo permite que el elemento sea mejor definido, logrando que el lenguaje sea más claro entre las partes y las relaciones sean comprensibles. La línea de relación se complementa con un número llamado multiplicidad. Esta cifra precisa una cantidad que se refiere al número de clases (del tipo de la caja X) que componen el sistema. La cifra de multiplicidad puede ser exacta (por ejemplo ‘3’), puede estar contenida entre límites (por ejemplo ‘0;8’ – leído: de cero a ocho), puede ser una cantidad indefinida (por ejemplo ‘*’ – entendido como cualquier número); y puede ser "menor o igual" o "mayor o igual" que un número (por ejemplo: ‘1,*’ – cualquier número mayor o igual a uno).
En conclusión, los diagramas de clases son buenos determinando las relaciones entre cantidades de elementos de un sistema en estudio.
Diagramas de objetos
Conjunto de objetos y sus relaciones básicas que representan una situación concreta en un momento determinado. (Objeto: nombre específico, en relación a una clase). El diagrama de objetos en comparación con el diagrama de clases es más específico en el nombramiento de la caja, pero a la vez menos profundo en la definición de lo que puede llegar a hacer el elemento, ya que no menciona ni los atributos ni las operaciones. La caja del objeto se distingue gráficamente porque el nombre se escribe subrayado, o también puede ser escrito el nombre de la clases con dos puntos y el nombre del objeto.
A diferencia de la clase, las relaciones de los objetos no llevan multiplicidad, ya que los objetos mismos son los elementos contenidos dentro de las clases, por lo tanto si a una caja de clase se le asignaba un 2, en el diagrama de objetos de la misma situación, serán 2 las cajas de objetos.
Diagramas de secuencia
Conjunto de elementos, dentro de los cuales se destacan el rol, los objetos, las asociaciones y los mensajes, que interactúan organizadamente según la secuencia temporal de los eventos. La temporalidad en el diagrama de secuencia se representa verticalmente y se separan las acciones según los objetos que involucren. Los objetos encabezan las columnas de acciones y se ordenan entre ellos según el momento de uso o la profundidad de los pasos realizados. Por otro lado, las asociaciones se diferencian de los diagramas estáticos al ser direccionadas, es decir, las acciones relacionan un objeto con otro en un sentido y no vise-versa y además incluyen un mensaje que hace que la relación sea clara y única. El rol se grafica con una figura que representa una persona/usuario de algún sistema, dando a entender que es quien gatilla la secuencia de acciones para cumplir un objetivo.
Diagramas de comunicación / colaboración
Mismo conjunto de elementos que en el diagrama de secuencia (rol, objetos, asociaciones y mensajes), que resaltan la organización estructural de los objetos que se enlazan entre sí e intercambian mensajes. La diagramación de este modelo no es en base a la temporalidad como en el caso anterior, sino en base a una intuición de relaciones entre los objetos involucrados; entonces para entender la secuencia se enumeran los mensajes de las relaciones, acentuando el orden de las acciones. El diagrama de comunicación o colaboración es una traducción directa del de secuencia, esto quiere decir que al tener los mismo elementos, los dos modelos pueden ser transformados en uno o en otro, dependiendo del sentido o enfoque que se le quiera dar.
Diagramas de casos de uso
Conjunto de elementos que describen secuencias de interacciones entre actores y un sistema. En este modelo se da la posibilidad de presentar los distintos roles que participan como usuarios en un proyecto y a los cuales se le pueden atribuir acciones de acuerdo a las diferentes posibilidades que tiene cada actor. En el diagrama se separa de forma clara el sistema de la persona, graficando que las acciones son procesos que ocurren dentro del sistema necesariamente. Las relaciones entre la persona y las acciones son básicas, es decir, sólo muestran una conexión entre los dos elementos.
Referencias:
Blueprinting
El Blueprinting es un diagrama de capas que muestra una sucesión de acciones realizadas por una persona que interactúa con un sistema de cualquier tipo. Concretamente se compone de secuencias lineales, a base de cajas y flechas, que se organizan estrictamente según los niveles de interacción que participan en el proceso. Los niveles se ordenan verticalmente desde lo más visible (arriba) a lo más oculto (abajo), de esta manera, los procesos quedan graficados de forma clara, de acuerdo a la ubicación de la caja de interacción, más la flecha que llega a él y la que sale de él.
Los niveles se dividen en los siguientes:
- Evidencia física: Elementos tangibles que participan en las acciones.
- Acciones de usuario: actos que gatillan un proceso.
- Contacto directo: persona o elemento que es intermediario entre el usuario y el proceso.
- Contacto indirecto: persona que es intermediario entre el usuario y el proceso, pero que no es visible a los ojos del usuario (este nivel puede ser omitido dependiendo del tipo de sistema).
- Proceso: acciones internas de un soporte técnico.
Los niveles de interacción son divididos por líneas que demuestran una relación con el usuario. Entre las acciones del usuario y el contacto directo separa la línea de interacción; entre contacto directo y contacto indirecto, la de visibilidad; entre contacto indirecto y proceso, la de interacción interna.
Por sus cualidades, el blueprinting es un diagrama útil para presentar una secuencia de uso que se detallará con otros diagramas e imágenes que sean necesarias, es decir, es una primera mirada de un proceso que tiene mayores complejidades internas en cada columna (donde una acción manda). Por su linealidad en las relaciones, es de fácil comprensión.
Avances del proyecto
Modelos de relaciones entre conceptos
Estos diagramas se realizaron a finales de título 1 a raíz del ejercicio del modelo de lana, donde se presentaban todas las posibles relaciones entre los elementos involucrados en el proyecto. En el modelo de lana, se usaron dos núcleos de los cuales se desprendieron las relaciones con los otros componentes con un alto nivel de detalle, estos núcleos son los meta-artefactos “cuenta” y “travesías”.
Desde esa base se derivó a separar el modelo en tres diagramas principales: Artefactos, Meta-artefactos y Roles; ya que cada uno representa un tipo de elemento distinto, con funciones y relaciones específicas. Con esto, se afinó el significado de los términos que se habían empezado a adoptar desde la construcción del modelo de lana, entendiendo que la interacción del sitio se basa en cómo estos tienen la capacidad de relacionarse.
- En el modelo del artefacto se definió todo lo que el artefacto puede ser, tiene y es parte de. Según lo anterior, se nombra como artefacto los tipos materiales que pueden ser publicados por los usuarios de sitio: Texto, Imagen, Audio, Video. Estos cuatro elementos son la base de los contenidos publicables. De ellos se desprende la totalidad de posibilidades de registro. a la vez, cada uno de ellos debe tener título, descripción, autor, categoría y geo-referencia. Los artefactos se relacionan con la cuenta de usuario y la travesía. (la imagen corresponde a una primera versión del modelo, por lo que presenta algunas diferencia con lo que se explica en el texto)
- El modelo del meta-artefacto, destaca la travesía, por sobre la cuenta personal, mostrando como la publicación del usuario es en función del registro de la travesía, como información perteneciente al patrimonio de la escuela. Así podemos ver cómo la información básica de una travesía constituye una ficha de ésta con los siguientes datos: nombre, fecha, participantes, recorrido, ciudades visitadas, obra (o lugar dintintivo de la travesía). La travesía también se relaciona con un mapa, donde se visualizan los artefactos ubicados geográficamente.
- El modelo de rol se hizo en función del Publicador (persona con cuenta), ya que representa el personaje con las acciones principales para el funcionamiento del sitio. Así, las acciones más importantes que desarrolla el usuario son las siguientes: publicar, geo-referenciar, editar, comentar y categorizar. Aparte, la persona tiene una cantidad de información personal, algunas obligatorias y otras opcionales: nombre, apellidos, contraseña, avatar, url, email.
Motor de búsqueda: Explora
En esta etapa se piensa en la forma en que un elemento "travesía" muestra sus contenidos. Por un lado, se sabe que la travesía debe tener una ficha que contenga la información estática como: nombre, año, talleres que asisten, participantes, recorrido, fecha y abstract. Aparte de lo anterior debe tener su mapa único con el recorrido de la travesía con un punto característico, los artefactos propios del viaje, más algún elemento que los vincule. Entonces se plantea que la búsqueda de elementos es fundamental en la interacción del sitio, ya que representa la relación entre los artefactos y el mapa, y porque es entorno a ella que se catalogan las publicaciones. Al lograr que la información sea accesible para quienes la busquen, se hace más atractiva la navegación y por lo tanto debería incentivar a los usuarios a participar en el sitio, aun si es como observadores. Ahora bien, Sabiendo que el mapa se usará como un "mostrador de elementos" y que a la vez da la opción de acceder a ellos, hace falta un filtro de contenidos, ya que sin filtro la acumulación entorpecería en encuentro de información. A grandes rasgos este colador debe separar en un primer momento por tipo de artefacto. No es posible visualizar más de un tipo de artefactos en un mapa (esta decisión puede cambiar si se hace necesario). Luego, a modo de checkbox, las categorías seleccionan según clase de información. Los resultados serían visibles tanto en una lista, como en una georeferencia del mapa. La relación entre el motor de búsqueda y el mapa es directa, por lo que visualmente deberían estar vinculados. Los wireframes de esta sección se pueden ver en la página de Estructuras Editoriales Colaborativas
Definición de conceptos
Para poder entender las relaciones y conjugar las partes que componen el sitio web es necesario detallar, ya sea nombrando o definiendo, qué es lo que significa cada uno de los términos que se emplean frecuentemente, más qué contienen y qué tienen.
Esta diferencia entre el contener y el tener es fundamental para organizar un modelo que distinga lo que es un objeto de un dato. En los primeros encuentros con las partes todo se muestra en una horizontalidad que no permite ver jerarquías ni diferencias entre tipos de palabras. Pero a medida que se describe detalladamente estos términos se empiezan a diferenciar unos de otros.
Para partir de esto, se tomó el meta-artefacto travesía y todos los conceptos que vienen en él, con el objetivo de aclarar el nivel de complejidad de estos elemento que lo componen y ordenar la relación que tiene con los artefactos.
- META-ARTEFACTO TRAVESÍA
- El meta artefacto travesía es una agrupación de unidades complejas que reúnen toda la información publicada de una travesía determinada. Es el primer nivel en la organización de las publicaciones generales, separa un viaje de otro. Este meta-artefacto toma los contenidos propios de un publicador con una cuenta personal y los contextualiza en un viaje, junto con todos los otros contenidos relacionados a él. Las unidades que contiene son las siguientes: una ficha, una mapa.
- FICHA
- La ficha como elemento es una agrupación de datos específicos propios de una travesía. Tiene la cualidad de manejar información estática, es decir, datos concretos que no varían con el tiempo.
Una travesía contiene sólo una ficha y los campos que esta incluye son los siguientes: nombre, fecha, abstract, ciudades visitadas y participantes.
- MAPA
- El mapa es una representación geográfica de la tierra o una parte de ella en una superficie plana. En él se visualiza la información de una travesía a la cuál se le puede atribuir una referencia geográfica, ya sea como punto, línea o superficie.
El mapa tiene el doble rol de ser un medio cuando se considera como parte del proceso para acceder a la información, y por otro lado, un fin como herramienta de visualización, ya que ofrece una imagen única de una travesía basado en sus contenidos publicados.
El mapa, cuando se usa como buscador en el Explora, tiene la capacidad de filtrar los contenidos que se muestran en él. Esto puede ser según el tipo de artefacto y/o las categorías. De esta manera se pretende facilitar en encuentro de la información.
Los componentes que contiene un mapa de travesía son: un punto distintivo de la travesía (preferentemente relativo a la ubicación geográfica de la obra), cero o más eventos, cero o más artefactos contenidos en los eventos.
- EVENTO
- Un evento es un contenedor de artefactos de acuerdo a una ocasión puntual de una travesía. Es un elemento de organización y representa un paso en el acceso al artefacto. Esta reunión se caracteriza por darle una sola geo-referencia en el mapa a todos las publicaciones inscritas en el evento, por lo que disminuye las probabilidades de sobre carga de puntos por superficie en el mapa.
Para ello, es necesario que un evento, tenga una geo-referencia definida, un nombre y una descripción, más la posibilidad de agregar una imagen distintiva.
- ARTEFACTO
- El artefacto es el contenido mismo del sitio, es el trasfondo de la interacción, lo colaborado, lo publicado. Concretamente el término se refiere a un elemento determinado perteneciente a alguno de los formatos publicables en el sitio, en este caso: una imagen, un video, un audio o un texto. El artefacto representa el punto último de profundidad que puede alcanzar una travesía. A este se le asocia un tipo de de artefacto, uno o más nombres, una descripciones ediyable colaborativamente, un autor (publicador), una o más categorías, una geo-referencia y cero o más comentarios.
Definición de páginas y relaciones
Para la creación de los modelos definitivos de la interacción de Web Travesías, fue necesario, en primer lugar, definir cuáles son las páginas que componen el sitio Web, luego, cuáles son los módulos de interacción que contiene cada una de ellas. Bajo esa necesidad se creó el diagrama de tipos de página, donde se específica el contenido de cada una y se inscriben en uno de los tres tipos:
- Página contenido: Cuenta de Usuario, Mapa de Travesía, Eventos, Archivo.
- Página vínculo: Explora, Bitácora.
- Página formulario: Registro, Inicio de Sesión, Publicar, Crear Travesía, Crear Evento.
Después se establece cómo se vinculan las paginas entre sí, es decir, qué tipos de navegaciones ofrece el sitio Web. Esto no considera la ’’’navegación interrumpida’’’ que provocan las pestañas y los links fijos del sitio, sino la ‘’’navegación fluida’’’ propia del proceso de ir profundizando en un tema dentro de la plataforma.
En los diagramas se destaca en naranjo las posibilidades que son exclusivas para usuarios registrados, y sea en los módulos, como en las páginas.
Una vez que estos diagramas están claros, es posible empezar a especificar los procesos de interacción del usuario con el sistema, mediante secuencias de uso divididas en dos niveles de profundidas, como se presenta en los modelos finales de interacción.
Iconografía
Propuesta de lenguaje visual
Existe una necesidad de representar gráficamente la propuesta de interacción de un proyecto Web. Esta situación se puede abordar de diferentes formas según la función que debe cumplir el modelo. En todos los casos, el entendimiento de los procesos del proyecto debe ser completo. Según el estudio de diagramas, existen varios tipos de modelos que se utilizan para representar distintos casos o situaciones relativas a la interacción. De esta manera se podría armar una línea evolutiva del proyecto ubicando qué tipo de diagrama sirve para qué parte, desde las etapas más abstractas a las más concretas.
Modelo General
El mapa de un sistema completo es el modelo más general que se puede proponer. Como contenido tiene que cumplir con ser una síntesis del proceso más importante del proyecto, centrado en el rol, la acción y el objetivo principal. El modelo debe lograr ser comprendido tanto por las personas involucradas con el proyecto, como con las personas que son ajenas a él. Por eso, no debe enfocarse en los proceso internos del sistema, sino el los flujos de los contenidos de acuerdo a la interacción de los usuarios.
Al tratarse de un proyecto donde la interacción de la persona con el sistema es fundamental, las acciones son parte de lo más importante a destacar, manteniendo siempre la relación de ellas con el usuario.
La imagen, al ser de rápida comprensión, debe tomar un rol protagónico en el diagrama, primando por lo tanto, los íconos y símbolos por sobre el texto, que se vuelve un elemento subordinado a la imagen. Éste último debe detallar la información de las acciones del sistema, entonces se distingue una jerarquía básica: el texto titulante y el texto descriptivo.
Siguiendo con la idea de que las acciones son la base de la interacción, éstas correspondería entonces a los títulos, y el detalle de ellas, al texto descriptivo.
Secuencia de uso 01: Publicar
Para mostrar un proceso, se propuso crear una secuencia de uso donde se detalla una serie de acciones realizadas por una persona/usuario del sitio web. Se utilizó como primer lenguaje para la presentación un blueprinting, ya que es óptimo representando series de acciones y sus repercusiones en los distintos niveles un sistema. Es un diagrama elocuente con el proceso y sirve como introducción para los detalles tanto en wireframes como modelos de interacción que vienen a continuación.
Segun el blueprinting se dividieron los diagramas necesarios para mostrar los wireframes principales.
Para partir con la metodología de la secuencia de uso fue necesario hacer una caracterización de usuario que representa a quien realizará la secuencia más la situación que debe cumplir:
- Esteban Saavedra es un alumno de la Escuela que ha participado varios años consecutivos en las travesías y que, por lo tanto, tiene material de registro que desea compartir. Él sabe del sitio de las travesía, entonces ingresa a él para crearse una cuenta y poder publicar; luego de completar el formulario de registro de forma correcta y confirmar mediante un email, accede a su cuenta personal donde debe, en primer lugar, agregar las travesías en las que ha participado y luego publicar lo que desea.
Luego de definir al usuario, su misión y la serie de acciones que desata, se propone una visualización que divide en tres partes al proceso mayor: El proceso de crear una cuenta de usuario, el de publicar desde su cuenta personal y el de publicar desde una travesía.
Se define que la estructura de las visualizaciones consiste en un usuario - representados por una persona - que tiene una voluntad - representada por una burbuja de pensamiento. Existe una pantalla como intermediaria que relaciona los wireframes con el esquema y que contextualiza la interacción. Finalmente, exite un proceso iniciado por una interacción del usuario en el sistema, que como consecuencia tiene una respuesta que se manifiesta en la pantalla, nuevamente.
Secuencia de uso 02: Explorar y Publicar
Para la secuencia de uso que muestra el blueprinting a la derecha, se estableció la exporación como la primera acción realizada por el usuario, y a ella como la causante del registro y la posterior publicación. Según esto, la secuencia de páginas recorridas en el sitio es la siguiente:
- Home (últimos archivos: audio / últimas travesías) - Explora (imagen / video / texto) - Mapa (evento en mapa) - Evento - Archivo (imagen / texto) - Registro - Perfil - Bitácora - Publicar
En esta serie se quiere mostrar el uso de popouts y la variación de ellos según el artefacto que están representando. Al trabajar con cuatro formatos distintos, cada uno tiene necesidades de acuerdo a sus características, según eso se diferencia la información entregada en el mapa de la que muestra en extención el archivo. También se especifica la forma de mostrar el popout de una Travesía y de un Evento. Se define que siempre es posible vincular el archivo, el evento y la travesía desde la burbuja en el mapa, de manera que no pierda el contexto en el que se encuentra archivado.
Para visualizar los pasos realizados por el usuario, se pueden visitar los wireframes navegables, donde sólo se puede simular la navegación sugerida en la secuencia de uso anterior.
Se crea el modelo pensando en un mapa conceptual donde los conceptos principales son las páginas del sitio, las que se representan en wireframes como máxima evidencia tangible. Esto se propone ya que es necesario que el diagrama relacione y dé a entender una secuencia de wireframes navegables que se presentan a la par con el esquema. Se destacan también, los elementos de la página como Ficha, Mapa, etc, ya que a partir de ellos se vinculan las acciones del usuario. Esta parte es justamente el área que no cubren los mapas de navegación de Garret, la interacción del usuario con elementos de la página. Una página del sitio es una unidad compleja que ofrece variadas opciones de navegación e interacción interna con el sistema.
Volviendo a la graficaciòn del modelo, la dirección de un elemento al otro está determinado por la lectura lógica, ya que el "elemento vinculador" del mapa conceptual no es una flecha, sino una frase. La flecha se usa sólo para el caso en que de una rama (frase) se puede bifurcar a más de un concepto (página).
La utilización de íconos es clave para la graficación de los artefactos y sus formatos, más el usuario. Es posible seguir trabajando en la iconografía para incluirla más y apurar la comprensión del diagrama.
Lo que se rescata de esta propuesta de visualización, es que una página ya no es la unidad mínima del sitio, sino un contenedor de módulos de interacción, que sí representan las unidades mínimas del proyecto. Estos módulos interactivos funcionan como patrones que se repiten en diferentes instancias. Este punto se trabajará con mayor profundidad en la siguiente propuesta.
Modelo Secuencia de Uso 03: Explorar - Registrar - Publicar
A partir de las propuestas de secuencias de uso representadas con blueprintings, se profundizó en los grandes procesos que se desprenden de estas secuencias de páginas. Para este caso puntual se usó como ejemplo:
- Home – Explora – Mapa – Evento – Archivo – Registro – Perfil – Bitácora – Publicar – Archivo
(El orden de la serie es elegido para simular una posibilidad de navegación, no se refiere a una única y estricta línea.)
Al detallar la relación entre las páginas de la secuencia, se ve que concretamente el usuario simulado se enfrenta a tres procesos durante su recorrido en el sitio:
- El primero es el de exploración que refleja en su pasada por las páginas Home – Explora – Mapa – Evento – Archivo
- El segundo es de creación de cuenta que se ve en Registro – Perfil
- El tercero es de publicación con las páginas Bitácora – Publicar – Archivo
Esta división de procesos de una misma secuencia abre la posibilidad de plantear que existen procesos básicos como módulos del sitio que se relacionan entre ellos. Por esta razón se decide dividir el blueprinting inicial en los tres procesos mencionados, para detallar cada uno independientemente. Así se de la posibilidad de detallar a un nivel de detalle de diagrama de flujo, un diagrama más organizado y comprensible como el blueprinting, o diagrama de capas, que además presenta una relación directa con las páginas en que se desarrollan los procesos. Queda en esta etapa inconcluso el vínculo del diagrama con las iconografías.
Los Wireframes correspondientes a esta secuencia de uso pueden ser navegados aquí.
Modelo Secuencia de Uso 04: Explorar - Registrar - Publicar
Finalmente, para los modelos de interacción se creó una nueva secuencia de uso, con el objetivo de mostrar nuevos casos y posibilidades del sistema. La serie de acciones ordenadas por la secuencia de páginas que recorre el usuario, es la siguiente:
- Home – Explora – Cuenta Usuario (no registrado) – Mapa de Travesía – Evento – Archivo – Registro – Cuenta Usuario (registrado) – Publicar – Archivo – Otros Formatos – Archivo – Bitácora
Esta secuencia la representa el blueprinting general. Luego, cada página es especificada según los módulos de interacción utilizados por el usuario en la secuencia propuesta.
La secuencia es organizada por un esquema básico de capas que ubica de arriba a abajo, según niveles de interacción, los elementos involucrados en el proceso, mediante cajas y flechas: Página - Acciones del Usuario - Interacción Directa - Proceso interno.
El blueprinting específico concretamente se compone de íconos y relaciones que hilan la serie. Se trabaja con íconos con la para apelar al reconocimiento de los objetos mediante de su representación, de manera que el entendimiento no se vea afectado por la disciplina específica del lector, por eso mismo es que un ícono puede o no tener una especificación a favor de su comprensión. Se propone que el modelo propuesto debe ser esquemáticamente simple ya que idealmente es exportable y re-dibujable por otras personas en otras etapas del proyecto. Una vez que la estructura está en la memoria, queda abierto para ser modificado y profundizado según las necesidades específicas del proyecto en que sea utilizado, tanto análoga como digitalmente.
Tanto los modelos de interacción como los wireframes correspondientes a esta secuencia de uso pueden ser navegados en el orden mencionado anteriormente.
