|
|
| Línea 25: |
Línea 25: |
|
| |
|
| ---- | | ---- |
|
| |
| =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==
| |
| [[Archivo:Pizarra_existencias_y_relaciones.jpg|thumb|350px|Mapa mental: Proyecto Web Archivo]]
| |
| 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 [http://es.wikipedia.org/wiki/Lluvia_de_ideas 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.<br/>
| |
| 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==
| |
| [[Archivo: mapa travesía.jpg|thumb|350px|Mapa conceptual: Meta-artefacto Travesía]]
| |
| 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.<br/>
| |
| 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.<br/><br/>
| |
| 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. <br/>
| |
| 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.
| |
|
| |
| ==Mapa de Navegación==
| |
| [[Archivo:mapa navegacion.jpg|thumb|350px|Fragmento Mapa de Navegación]]
| |
| [[Archivo: simbolos_arquitectura_informacion.jpg|thumb|200px|Lenguaje de J. J. Garrett]]
| |
| La [http://es.wikipedia.org/wiki/Arquitectura_de_la_informaci%C3%B3n 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.
| |
| <br/><br/>
| |
| 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.<br/>
| |
| [http://en.wikipedia.org/wiki/Jesse_James_Garrett Jesse James Garrett] perfeccionó el [http://www.jjg.net/ia/visvocab/ 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==
| |
| [[Archivo:diagrama_flujo.jpg|thumb|350px|Ejemplo de 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.
| |
| <br/>
| |
| 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 [http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=11955 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.
| |
| <br/>
| |
| 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 [http://es.wikipedia.org/wiki/Algoritmo 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 [http://es.wikipedia.org/wiki/Lenguaje_Unificado_de_Modelado 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. <br/>
| |
| 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 [[Lenguajes_Visuales_para_la_Interacci%C3%B3n#Diagramas_de_clases | Clases]], [[Lenguajes_Visuales_para_la_Interacci%C3%B3n#Diagramas_de_objetos | Objetos]], Componentes, Despliegue y Paquetes
| |
| *'''Dinámicos''': Diagramas de [[Lenguajes_Visuales_para_la_Interacci%C3%B3n#Diagramas_de_secuencia | Secuencia]], [[Lenguajes_Visuales_para_la_Interacci%C3%B3n#Diagramas_de_comunicaci.C3.B3n_.2F_colaboraci.C3.B3n | Colaboración o Comunicación]], [[Lenguajes_Visuales_para_la_Interacci%C3%B3n#Diagramas_de_casos_de_uso | Casos de uso]], Actividades y Estados
| |
|
| |
| A continuación se describen algunos de los principales diagramas.
| |
| ===Diagramas de clases===
| |
| [[Archivo: diagrama_clase.jpg|thumb|200px|Diagrama de clase]]
| |
| [[Archivo: diagrama_objeto.jpg|thumb|150px|Diagrama de objeto]]
| |
| 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). <br/>
| |
| 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. <br/>
| |
| 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.
| |
| <div style="clear:both;"></div>
| |
|
| |
| ===Diagramas de secuencia===
| |
| [[Archivo: diagrama_secuencia.jpg|thumb|200px|Diagrama 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===
| |
| [[Archivo: diagrama_colaboración.jpg|thumb|200px|Diagrama de comunicació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.
| |
| <div style="clear:both;"></div>
| |
|
| |
| ===Diagramas de casos de uso===
| |
| [[Archivo: diagrama_casos_pequeño.jpg|thumb|150px|Diagrama 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:''
| |
| * [http://www.uml.org/ www.uml.org]
| |
| * [http://www.mcc.unam.mx/~cursos/Objetos/Cap18/cap18.html www.mcc.unam.mx]
| |
| * [http://www.clikear.com/manuales/uml/diagramasestructuraestatica.aspx www.clikear.com]
| |
| * [http://www.sparxsystems.com/uml-tutorial.html www.sparxsystems.com]
| |
| <div style="clear:both;"></div>
| |
|
| |
| ==Blueprinting==
| |
| [[Archivo: 800px-Blueprint_luxury_hotel.jpg|thumb|500px|Ejemplo de blueprinting: Una noche en un hotel]]
| |
| 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.<br/>
| |
| 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.<br/>
| |
| 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.
| |
|
| |
|
| =Contexto, el servicio como experiencia= | | =Contexto, el servicio como experiencia= |
| Título | Partituras de Interacción |
|---|
| Tipo de Proyecto | Proyecto de Titulación |
|---|
| Palabras Clave | lenguajes visuales, notación gráfica, diseño de interacción, AURA |
|---|
| Período | 2007-2008 |
|---|
| 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, Nicole Dupré |
|---|
| Profesor | Herbert Spencer |
|---|
Relacionados
Referencias: Bibliográficas | Weblográficas
- 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.
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
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
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.
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.
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.
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
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
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
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.
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.
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
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.
Las etiquetas de búsqueda corresponden a la frase que ingreso el usuario, y son de resul
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)
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.
