Rediseño web sitio Travesías

De Casiopea



TítuloRediseño web sitio Travesías
Tipo de ProyectoProyecto de Titulación
Palabras Claveinterfaz, sitio web, travesías
Período2014-2014
Del CursoTaller de Diseño Gráfico Titulación 3
CarrerasDiseño Gráfico
Alumno(s)Gabriela Pérez
ProfesorHerbert Spencer, Katherine Exss


Tabla de Contenidos

Investigación teórica

Sobre las travesías

Para la Escuela de Arquitectura y Diseño PUCV, las travesías son viajes poéticos por América realizados anualmente a partir del año 1984. Estos viajes son integrados por los alumnos y profesores de las carreras de Arquitectura, Diseño Gráfico y Diseño Industrial. Dichas travesías tienen por finalidad realizar obras a partir de la creatividad del oficio, desplegado en algún punto de América, lugar fijado a través del estudio que desarrolla cada Taller.

En 1965 los fundadores de la Escuela decidieron partir bajo la siguiente visión:

América ha de recorrerse en su extensión; es preciso ir al continente,ir a él para reconocerle y habitar su emergencia.partida mañana a las siete antemeridiano desde santiago escalas del avión santiago puerto montt punta arenas los nueve están – jonathan boulting alberto cruz fabio cruz michel degury francois fédier claudio girola godofredo iommi jorge pérez román edison simons – henri tronquoy nos alcanzará en medio de la patagonia. Amereida I, pág 58

La primera de travesía, unió Tierra del Fuego, en la Patagonia chilena, con la ciudad boliviana de Santa Cruz de la Sierra, la que proclamaron Capital Poética de América. Los participantes de este viaje fueron Alberto Cruz, Fabio Cruz, Godofredo Iommi, Edison Simons, Michel Deguy, Jonathan Boulting, Henry Tronquoy, Claudio Girola, François Fedier y Jorge Pérez Román.

La primera travesía permitió expandir el horizonte dentro de los procesos educativos y de aprendizaje en el ámbito académico de esos tiempos; en 1984 se incorpora al currículum de los alumnos de Arquitectura y Diseño la realización de una Travesía anual dentro del ámbito de cada Taller. Se han realizado ya más de 100 travesías, éstas se llevan a cabo durante el tercer trimestre de cada año y duran alrededor de 2 semanas.

Fundamentos

Ame image 04 w.jpg

El fundamento de esta modalidad se remite a Amereida y a su visión poética sobre la extensión americana. Amereida dice:

..." el signo peculiar de la aparición de esta tierra americana, 
es que ella irrumpe como un regalo"...

América no se ha hecho cargo de si misma, de esta condición de ser regalo y reconocer su origen como sentido poético. Es necesario cambiar este sentimiento y comprender que este continente irrumpió como un regalo, y que hay que agradecerlo.

Así nos dice la voz poética: "el único lazo posible con América es la gratitud", y en otra parte: "el sentido del regalo es el alma donde se funde América"...

¿Cómo debemos entonces conocer América?... La poesía nos dice: atravesar y dejarse atravesar por esta América regalada bajo el signo de la gratuidad.

     "travesía
      que no es descubrimiento o invento
      consentir
      que el mar propio y gratuito nos atraviese
      levante
      en gratuidad o reconocimiento
      nuestra propia libertad..."

Se inician las travesías en la búsqueda del lugar, definido como el espacio donde hay encuentro y con la voluntad de hacerse parte de la construcción de un nuevo continente, trazando signos, conformando su propia heredad.

Se han realizado más de 100 travesías, abarcando desde la desembocadura del Amazonas hasta el Estrecho de Magallanes y desde Isla de Pascua hasta el Atlántico.

En cada travesía se culmina construyendo obras propias surgidas de los oficios: arquitectura, diseño, escultura. Obras a partir de "signos" que se transforman en ejecuciones a través de las manos y del trabajo de todos.

Cada travesía construye su contingencia mistificando la presencia de lo que aparece. Las obras que ellas acometen son genuinas obras de arte y su rol es el de abrir la realidad americana mas que el dominio de ella.

Ejes conceptuales

Amereida

La primera Travesía, realizada en 1965, dejó como testimonio una serie de textos, crónicas, poemas, dibujos, anotaciones y cartas que poco a poco fueron editadas hasta constituir lo que hacia 1967 se publicó como el primer poema de Amereida. El título es el resultado de la contracción de las palabras América -"la América regalada, América sin dueño"- y Eneida, el célebre poema épico del siglo I a. C. compuesto por Virgilio.

De acuerdo con el espíritu colectivo, libre y desjerarquizado que guía a los integrantes de la Escuela, el texto no posee referencia a autor alguno, está escrito sin mayúsculas, sin signos de puntuación y sus páginas carecen de numeración.

El poema representa a América como un mar interior que invita a ser descubierto con la Cruz del Sur como guía. Los autores visualizan América del Sur en posición invertida, imagen que se vuelve recurrente hacia el final del libro, donde se muestra el inicio de la travesía -la Patagonia- en el extremo superior del mapa.

El poema se interroga sobre la condición de América Latina, la filiación europea que lo surca y la identidad propia que se revela de la invocación a la esencia del territorio virgen con el cual se encontraron los conquistadores.

Este escrito y la experiencia que a él subyace se convirtieron en el referente de toda la actividad creativa desarrollada al interior de la Escuela. Todo acto poético remite a esa obra fundacional: "Amereida es, después de todo, una visión."

La lectura del texto nos adentra indistintamente en la pregunta permanente por el ser americano a partir del reconocimiento de la aparición de América vista como un hallazgo; desde el primer poema el encuentro con lo desconocido abre la posibilidad para comenzar a pensar el nuevo mundo tal un regalo, un don; su seña: la Cruz del Sur, la luz que remonta el horizonte y guía en el septentrion.

La Travesía de Amereida se constituyó como un tiempo extendido en el acto que atraviesa América y le canta su aparecer.

Fuente: www.ead.pucv.cl

Ubicación geográfica - ruta

Las travesías definen su recorrido por el continente americano, dicha ruta esta fijada bajo la concepción de Amereida y la disposición de los distintos talleres que conforman la escuela.

Los destinos por lo general se enmarcan en el territorio sudamericano, pocas travesías se han realizado al noreste del continente, teniendo una mayor concentración en los países cercanos a Chile dentro del mapa.

Pre-travesía

Corresponde al proceso de organización realizado con antelación a la travesía por los alumnos de taller y profesores. Dicha organización responde a la necesidad de distinguir las distintas labores a realizar para hacer efectivo el viaje y los requerimientos o implementos necesarios que deben tomarse en cuenta.

Los participantes de travesía, se distribuyen por lo general en grupos encargados ya sea en lo que respecta a: cocina, tesoreria o finanzas, salud o botiquín, pañol de herramientas, ámbito (actos o pasatiempos en travesía), campamento, obra y ruta.

Faenas

Se refiere a las labores de trabajo para la realización de la obra, escultura o evento o acto que se donará al lugar o comunidad visitada.

Obra, acto o regalo

La creación de obras o intervenciones artísticas de carácter leve, es un componente esencial que completa lo que es la travesía, puesto el fin de estas, es representar de manera simbólica lo que Amereida dice acerca de la América regalada, donada. Con este fin, la obra es la esencia del viaje y el regalo otorgado a sus habitantes.

Registro actual de travesías

Sitio actual

El presente sitio es una propuesta que propone ser la bitácora colectiva de las travesías de Amereida, permitiendo a todos quienes han participado de ellas, publicar sus textos, dibujos y fotografías.

Este sitio corresponde a la tercera edición de la publicación digital de las travesías de Amereida.

Para participar como colaborador-editor de esta bitácora es preciso contar con un usuario registrado en personas y luego solicitar acceso especial como editor.

Interfaz gráfica

Proyecto título: Bitácora Colectiva de Travesías Amereida

Portada carpeta título

La propuesta del Proyecto de Título del año 2008, de las alumnas Katherine Exss y Estefanía Trisotti consistió en la creación de un espacio virtual basado en una comunidad de usuarios estables y activos, los cuales estarían a cargo de levantar los distintos contenidos del ámbito travesía, que pudiesen haberse generado en los distintos viajes y rutas realizadas por los miembros de la Escuela de Arquitectura y Diseño PUCV.

La idea central bajo este proyecto, estaba en crear un espacio donde, a partir del registro colectivo, se pudiese mostrar una dimensión más real y cercana de cada travesía, conectando las diferentes percepciones que se puedan reunir de un mismo lugar y hecho.

Propuesta de interfaz

Proyecto taller: sitio travesías

Proyecto realizado en el taller de contrucción IV Diseño Gráfico, año 2003.

Edición: Amereida Travesías 1984 a 1988

Portada edición

Esta edición trata de dar cuenta de las Travesías; realizando una mirada de estos viajes, como eventos de gran envergadura que la escuela adoptó a partir del año 1984, lo que finalmente derivó en su implementación dentro del plan de estudios y quehacer en general del cuerpo escuela. Este volumen recoge todas las travesías realizadas entre 1984 y 1988; ordenadamente muestra las distintas concepciones y faenas de un taller tras otro. Para lo cual cada profesor de los distintos talleres y etapas, presentan el material de sus viajes, de la manera que estos dispongan. La conformación de la edición entonces fue emprendida por un curso de Titulación de Diseño Gráfico, los cuales recopilaron todo el material que cada taller entregó.

Cada presentación de cada taller respecto a sus travesías comienza con una página de Amereida, un plano de ello, esto para dar una suerte de gráfica inicial, que según la edición mantiene al vivo, el origen, al recorrer de las páginas que dan cuenta de su generación. Además se incluye, en algunas páginas, poemas o versos de Godofredo Iommi e Ignacio Balcells, recitados en algunas travesías o bien pertenecientes a otros autores.

El libro termina con un texto que se refiere a la Escultura: todo origen abre, desata, todas las posibles generaciones. Por eso cada una de estas reclama ir - no aislada - sino que junta, acompañada por una hermana que avance paralelamente. Espaciando por tanto la obra escultórica de Claudio Girola y José Balcells.

Páginas especiales

Plataformas del archivo

Travesías en Flickr

Este registro actualmente consta de 58 colecciones fotográficas, que de manera interna, cada una de ellas contiene una serie de álbumes del mismo carácter, con la diferencia de los años en que dichas travesías han sido cursadas.

Travesías en Vimeo

Existe un registro actual disponible en línea, de 32 vídeos de esta índole, que destacan por ser grabaciones originales derivadas de vhs que han sido digitalizados por el Archivo Histórico y puestos a disposición en su canal Vimeo. Los registros datan del periodo 1984 pasando al año 1996. En ellos se puede visualizar contenido netamente de las labores y acontecer de la travesía, tales como actos, registro de la obra, lugar y colectividad.

Enfoque del proyecto

Experiencia de usuario

Cuando se habla de diseño de experiencia de usuario en el entorno digital, nos estamos refieriendo a una experiencia que incluye todo, desde la arquitectura de información, diseño visual, la usabilidad, el diseño de interacción y desarrollo de prototipos. Más importante aún, debemos tener en cuenta que el diseño de experiencia de usuario no tiene que ver con el diseño únicamente.

Como dijo acertadamente Steve Jobs, " El diseño no es sólo lo que se ve y cómo se siente. El diseño es cómo funciona. " Por lo tanto podemos deducir con seguridad que la experiencia del usuario comienza mucho antes que los usuarios visitan un sitio web, lo que hace que sea bastante plausible pensar la experiencia del usuario, incluso antes de que se concibió la idea de producto.

No hay una fórmula definitiva para crear una gran experiencia de usuario, pero hay algunos principios básicos que pueden ayudar a hacer de esta algo agradable, entendible y accesible.

Experiencia-usuario-puntos2-06.png

Arquitectura de la información (IA)

Esquema-ai-07.png

Es la ciencia de la organización, etiquetado y clasificación de la información en sitios web. El objetivo es crear una estructura que ayuda a los visitantes - usuarios del sitio a completar sus tareas con éxito y fácilmente.

Diseño desde la perspectiva de los usuarios finales

La IA debe estar orientada a ofrecer alternativas significativas para los usuarios que se centran en completar una tarea en particular. La mejor manera de hacerlo es mediante la realización de la investigación de las necesidades del usuario. A menos que se sepa cual es el público objetivo del sitio no servirá realizarla si no contamos con los objetivos propios del sitio y las expectativas de los usuarios.

Definir los objetivos del sitio

Además de conocer el público objetivo, un sitio web también debe tener un propósito claro (vender, informar o educar a la gente, entre otros). Toda la arquitectura de información de un sitio está impulsada por las metas que desea alcanzar a través de él.

Por ejemplo, si el objetivo de una página web es conseguir que los visitantes compren productos, el contenido debe estar organizado de tal manera que conduzca efectivamente a los visitantes hacia esa meta. Es como crear un camino paso a paso a un destino.

Uniformidad

El diseño uniforme juega un papel esencial en la creación de arquitecturas de información ideales. Cumplir con un mismo patrón para los diseños de navegación hará que sea más fácil para los usuarios navegar por el sitio. Layouts con información inconsistente tienden a confundir a los visitantes y los obligan a abandonar el sitio.

Organizar el contenido

La forma en que el contenido se organiza tendrá un impacto directo en la capacidad de los usuarios a encontrar y gestionar la información en una página web.

No importa si se está rediseñando un sitio o construyendo desde cero, se deben hacer las opciones de estructura y clasificación después de la realización de un inventario de contenido en profundidad, la construcción de wireframes y mapas de sitio. Tener una estructura visual del contenido ayudará a la organización precisa de la información a través del sitio.

Diseño de interacción

Dis-interaccion-esquema-07.png

El diseño de interacción define la estructura y el comportamiento de los sistemas interactivos. Se centra en el comportamiento del usuario, cómo piensan y cómo esperan que la interfaz de usuario funcione al ejecutarla.

Se pueden establecer principios clave dentro del diseño de interacción:

Consistencia

Es la clave para la creación de interacciones exitosas entre el sitio web y los usuarios. Por ejemplo, si el menú de navegación se coloca en diferentes posiciones, se ve diferente, o se comporta de manera diferente a través de las páginas, daría lugar a confusión. Un elemento básico, como el menú de navegación debe seguir una ubicación coherente y comportarse igual a través de cada página.

Un sitio web debe ser coherente en relación con los siguientes elementos de diseño de interacción:

  • Contenido consistente, por ejemplo mismas palabras o frases no deben transmitir diferentes significados en diferentes páginas o interacciones.
  • Coherencia tipográfica, como fuente, tamaño de fuente, etc
  • La consistencia del color, incluyendo el color del texto, color de fondo, etc
  • Consistente menú de navegación de diseño, posicionamiento y comportamiento.
Perceptibilidad

Los usuarios del sitio deben ser capaces de percibir las oportunidades de interacción dentro de un sitio. Proporcionar pistas visibles a los usuarios acerca de cuándo iniciar una interacción e identificar las señales de interacción. Algunos elementos que mejoran la perceptibilidad de la interacción:

  • Texto legible
  • Iconos fácilmente distinguibles y legibles
  • Los hipervínculos con diferentes colores respecto a otros contenidos
Facilidad de aprendizaje

Esto significa que los usuarios deben ser capaces de usar una interfaz, instruirse a través de ella, repetir y recordar el procedimiento para futuras interacciones. Utilizar lenguajes y símbolos que los usuarios puedan entender fácilmente.

Previsibilidad

Hacer la interacción predecible. Los usuarios deben tener una idea clara de lo que es una interacción particular, a lo que lleva y cuáles son los pasos a seguir.

Capacidad de feedback

En la mayoría de los casos, los usuarios no tienen mucha paciencia para esperar una tarea especial en proceso, por lo que a menudo abandonan la interacción. Proporcionar pistas visuales o mensajes de texto, mientras que una tarea está ejecutandose le dará al usuario una imagen clara de lo que está sucediendo dentro de la aplicación.

Usabilidad

Usabilidad-esquema-09.png

La experiencia del usuario se enfoca en gran medidad en la facilidad de uso. Existen algunos principios de usabilidad claves para construir un sitio fácil de usar para un público objetivo.

Múltiples opciones de accesibilidad

Los usuarios deben tener múltiples opciones para acceder a una determinada pieza de información en su sitio web. Por ejemplo, un archivo puede estar en formato HTML y PDF descargable, por lo que el usuario puede descargarlo para verlo más tarde.

Jerarquía

Aspirar a proporcionar pasos lógicos para llegar a determinada información en un sitio web. Sin embargo, lo que puede sonar lógico puede ser confuso para el usuario, por lo tanto, una buena práctica es llevar a cabo las pruebas de investigación de usuario y usabilidad antes de decidir sobre la jerarquía de la información.

Contenido accesible

En términos de usabilidad, este aspecto no esta limitado sólo a la categorización o etiquetado de contenidos, también se refiere a la estructura del texto, como el formato, párrafos, títulos, fuente, etc, el objetivo es hacer del contenido algo legible y accesible. Los diseñadores deben tener en cuenta que los usuarios tienen diferentes patrones de lectura en la web y en el papel.

Diseño visual

Dis-visual-esquema-10.png

Al igual que todos los otros elementos de diseño de experiencia de usuario, el diseño visual o el diseño centrado en el usuario es también una actividad estratégica. El diseño no es todo acerca de los elementos visuales, se trata también de la capacidad del diseño para interactuar con el público objetivo. Un diseño centrado en el usuario debe seguir un proceso bien definido, como se menciona a continuación:

Estrategia

Se trata de la planificación de las actividades de diseño basado en el objetivo y las metas de un proyecto de diseño. A menos que los objetivos de diseño no sean claras, el diseño no va a entregar una buena experiencia de usuario.

Requisitos

El diseño nunca debe comenzar sin una comprensión clara de los requisitos de los usuarios finales, el contenido, las necesidades de información, y el alcance del proyecto.

El diseño de información

El diseño de información tiene como objetivo la presentación de información de manera que los usuarios sean capaces de entenderla. Se trata de esquemas de navegación, tablas de contenidos, jerarquía visual, para que los usuarios finales pueden navegar fácilmente a través de la información.

Diseño visual

Es el paso final en el proceso de diseño centrado en el usuario que permite ver y sentir toda la estructura de la plataforma de información. Aquí, los diseñadores trabajan en los elementos gráficos del diseño, tales como la tipografía, colores, texturas, y la alineación, para mejorar el atractivo visual de la información .

Investigación de usuario

Investigacion-usuario2-11.png

Es el componente más esencial en cualquier iniciativa de diseño de experiencia de usuario. Es bastante evidente que si se está diseñando para un usuario, se debe investigar las necesidades del mismo, requisitos y expectativas.

Prototipos

Implica la evaluación de un prototipo con usuarios potenciales para entender cómo una interfaz de usuario o la aplicación web se ve y se comporta en un escenario real. Un prototipo da una buena idea de cómo un determinado producto, sitio o aplicación responderán a las entradas del usuario, y qué mejoras se pueden hacer en el diseño del producto para que sea factible.

Esquemáticas - modelación

Para poder facilitar la comprensión de la información que se quiere analizar, por la gran cantidad de datos y relaciones posibles que surgen de ello; es necesario hacer uso de diagramas o esquemas, que nos permitan modelar las partes que arman el sistema.

El uso de un lenguaje visual permite que los datos sean leídos con mayor facilidad antes que presentar grandes pilas de información, a veces incomprensible para un futuro lector. El modelo debe presentar la simplificación de la realidad estudiada, tomando como base lo más relevante y dejando de lado aspectos innecesarios.

Tomando como base el análisis teórico anterior del sitio travesías, y a modo de poder representar gráficamente lo analizado, de manera que permita desprender información relevante en cuanto a usuarios, sistema, funciones y necesidades, se utilizan los diagramas de tipo UML (Unified Modeling Language)como primera opción de representación.

Lenguaje de Modelado Unificado (UML)

El UML está compuesto por diversos elementos gráficos que se combinan para conformar diagramas. Un diagrama es la representación gráfica de un conjunto de elementos con sus relaciones. En concreto, un diagrama ofrece una visión del sistema a modelar. Debido a que el UML es un lenguaje, cuenta con reglas para combinar tales elementos.

Un modelo es una representación simplificada de la realidad; el modelo UML describe lo que supuestamente hará un sistema, pero no dice cómo implementar dicho sistema.

Para poder representar correctamente un sistema, UML ofrece una amplia variedad de diagramas para visualizar el sistema desde varias perspectivas. Se presentan los siguientes diagramas:

  • Diagrama de casos de uso
  • Diagrama de clases
  • Diagrama de objetos
  • Diagrama de secuencia
  • Diagrama de colaboración
  • Diagrama de estados
  • Diagrama de actividades
  • Diagrama de componentes
  • Diagrama de despliegue

Sobre los Diagramas UML

Para analizar el caso del sitio travesías, las interacciones posibles en él, funcionalidad y atributos se utilizarán dos diagramas: caso de usos y el de clases. Para aprender a construir estos, se utilizan las aplicaciones Lucidchart y Gliffy, ambas con distintas funcionalidades y diagramas.

Diagrama de casos de uso

El diagrama de casos de usos representa gráficamente los casos de uso que tiene un sistema. Se define un caso de uso como cada interacción supuesta del cliente (actor) con el sistema a desarrollar, donde se representan los requisitos funcionales (forma, tipo y orden en como los elementos interactuan). Es decir, se está diciendo lo que tiene que hacer un sistema y cómo.

Un diagrama de casos de uso consta de los siguientes elementos:

Actor

Es un rol que un usuario juega con respecto al sistema. Es importante destacar el uso de la palabra rol, pues con esto se especifica que un Actor no necesariamente representa a una persona en particular, sino más bien la labor que realiza frente al sistema.

Casos de Uso

Es una operación o tarea específica que se realiza tras una orden de algún agente externo, sea desde una petición de un actor o bien desde la invocación desde otro caso de uso.

Relaciones de Uso, Herencia y Comunicación:

Asociación: es el tipo de relación más básica que indica la invocación desde un actor o caso de uso a otra operación (caso de uso). Dicha relación se denota con una flecha simple.

Dependencia o Instanciación: es una forma muy particular de relación entre clases, en la cual una clase depende de otra. Dicha relación se denota con una flecha punteada.

Generalización: este tipo de relación es uno de los más utilizados, cumple una doble función dependiendo de su estereotipo, que puede ser de Uso (<<uses>> <<include>>) o de Herencia (<<extends>>).

Include o Uses: cuando relacionamos dos casos de uso con un include, estamos diciendo que el primero (el caso de uso base) incluye al segundo. Es decir, el segundo es parte esencial del primero. Sin el segundo, el primero no podría funcionar bien; pues no podría cumplir su objetivo.

Extend: en el caso del extend hay situaciones en que el caso de uso de extensión no es indispensable que ocurra, y cuando lo hace ofrece un valor extra (extiende) al objetivo original del caso de uso base. En cambio en el include es necesario que ocurra el caso incluído, tan sólo para satisfacer el objetivo del caso de uso base.

Usuarios, acciones y sistema

Para entender un poco el funcionamiento, acciones y las personas involucradas en lo que respecta al sitio de travesías, se esquematiza esto, antes de pasar a crear el diagrama de casos de uso.

Esquema usuario-acciones-01.png

Elementos e interacciones

Esquema-travesias-v3-13.png

Caso de uso: usuario registrado

Se define un usuario general, ya registrado, que visita el sitio travesías, que tiene como posibles acciones : navegar, buscar, publicar nueva travesía y editar travesía.La acción Buscar utiliza la relación extend puesto la acción realizada no esta condicionada, es más bien opcional.

Caso-uso-registrado.png

Caso de uso: usuario no registrado

Se realiza un diagrama especial, separado del anterior para la acción publicar, puesto la idea de los diagramas de caso de uso, no es crear confusión y caracterizarse por ser bastante simples, para entenderlos tanto por quien lo dibuja como los posibles clientes a los que es presentado en un proyecto.

La acción Publicar se presenta en el caso de un usuario que no se encuentra registrado y la intención de publicar o editar una travesía dentro del sitio. Para ello se utiliza la relación include ya que esta determina que hay un paso que debe cumplir que es el de ingresar a el login de Personas y registrarse.

Caso-uso-no-registrado.png

Diagrama de clases

El diagrama de clases muestra un conjunto de clases,interfaces y sus relaciones, en torno al sistema. Esta información respecto a cómo la relación entre un objeto y otro, la herencia de propiedades de otro objeto, conjunto de operaciones/propiedades son implementadas para una interfaz gráfica.

Un diagrama de clases esta compuesto por los siguientes elementos:

  • Clase: atributos, métodos y visibilidad.
  • Relaciones: Herencia, Composición, Agregación, Asociación y Uso.

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 en la parte inferior, 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.

Diagrama de clases : relaciones que derivan del elemento travesía

Diagrama de clases-trav-01.png

Modelo visual

Modelo-trav1-09.png

Se realiza un primer esquema para poder comprender las relaciones entre el usuario y sistema(sitio travesías)

El esquema se divide en 3 ejes: participantes, interfaz y contenidos. Cada una de estas variables comprende una modalidad analizada.

Para el caso de los participantes (alumno, docente e investigador) se plantean las posibles acciones de realizar dentro del sitio de travesías.

Luego se revisa el entorno en el cual navega este usuario (interfaz). Para llegar a los objetos o contenido revisado o disponible dentro de la plataforma.

Problemáticas y requerimientos

Con el fin de poder identificar las posibles falencias que inciden en el sitio actual de travesías, se realiza inicialmente un esquema a modo de diagnóstico; sobre el cual se pueda desprender el funcionamiento y factores que dan forma al sitio.

Diagnóstico general

Esquema-diagnostico1-03.png

Se plantean dos entornos digitales relacionados entre sí (travesías - casiopea), que se retroalimentan al recibir información y utilizarla cada cual en su interfaz. El sitio de travesías tiene una relación sostenida con Casiopea a través de su uso para el registro de la información. Casiopea funciona en este caso como una especie de base de datos que alimenta al sitio de travesías, proporcionando a través de los enlaces la interacción con el usuario.

Se definen 4 usuarios o lectores tipo que navegan el sitio:

  1. Alumno
  2. Ex-alumno
  3. Docente
  4. Investigador o ente externo

Tales usuarios determinan acciones dentro de ambos sitios. Se grafican estas haciendo un paso desde el sitio que nos interesa explorar (travesías) y la acción que nos lleva al otro (casiopea).

Las interacciones posibles en una primera instancia en el sitio travesías comprenden: Buscar, Visualizar, revisar, Localizar en el mapa, Leer y Publicar, documentar. Esta última acción, Publicar - documentar requiere el registro o login en el sitio Personas, de este modo la acción se ve condicionada a pertenecer al sistema Personas o bien registrarse. Una vez pasado este punto, se tiene otro grupo de acciones disponibles: Publicar nuevo objeto, Subir archivo, Editar, Entender lenguaje wiki, Descargar, Cancelar y Llenar formulario wordpress.

Definición de problemáticas

  • Menú de navegación y jerarquías: en cuanto a la navegación o información proporcionada por el sitio, no existe como tal un menú principal visible, las opciones de navegación se dan en el footer del sitio, quedando un poco ocultas a primera vista; es necesario por ello desplazarse verticalmente para poder acceder a dichas secciones o enlaces.Se puede indicar que no hay mayor profundidad respecto a este menú inferior, puesto todos los enlaces contemplan una única página o vista de la sección consultada.
  • Interacción:las interacciones posibles de realizar por parte del usuario son mínimas. Se tiene un filtro por años, que desprende información de travesías realizadas. Sobre el mapa es posible encontrar datos menores acerca del punto o ubicación de alguna travesía en especifíco.
  • Interfaz: se utiliza un mapa base en todas las plantillas del sitio; además de una franja transparentada que en ocasiones al contener texto o enlaces se confunde con la trama de fondo del mapa.
  • Disponibilidad de contenidos: la información o ficha que cada travesía presenta, se halla incompleta o bien no existe en algunos casos.

Conclusión al respecto

Por un tema de usabilidad y presentación, por la riqueza de estos contenidos, el sitio actual de travesías requiere una renovación en primera instancia, principalmente de lo que sostiene todo el diseño, su arquitectura de información y luego una propuesta de interfaz que permita hacer visible dichas capas de información.

Objetivos del proyecto

Esquema-objetivos2-04.png

Permitir una cohesión a partir de su Arquitectura de información, interfaz y contenidos. De manera que el centro articulador (AI) pueda generar una estructura a través de los contenidos (recursos del mapa, búsquedas y navegación, reseñas y presentación) que sostienen una organización mediante esta arquitectura. A su vez la AI en su relación con la interfaz, se configura en el diseño de la información, para permitir una experiencia de usuario agradable, basada en la interacción y respuesta, el diseño e identidad visual y la accesibilidad y usabilidad.

Arquitectura de información

Mapa de navegación

Los mapas de navegación proporcionan una representación esquemática de la estructura del hipertexto, indicando los principales conceptos incluidos en el espacio de la información y las interrelaciones que existen entre ellos. Un mapa es, por ejemplo, una representación completa (o resumida) del sitio web para orientar al lector-usuario durante el recorrido o para facilitarle un acceso directo al lugar que le interese.

El menú refleja la estructura del sitio por medio de enlaces a los nodos principales, pudiendo estos también desarrollarse para mostrar los subnodos. El mapa de navegación puede representarse de manera textual, esquemátizado o una combinación de ambas.

Organización actual de contenidos

El sitio actual de travesías presenta el recurso de GoogleMaps, que incorpora la visualización de los puntos sobre el mapa, para poder distribuir e indicar la ubicación de las travesías albergadas en el registro del sitio.

Sobre esta capa de información, surge un elemento fijo que se mantiene como una franja trasparentada, donde los contenidos se van desplegando. La interfaz base entonces se genera en estas dos capas imagen - texto.

Mapa-navegacion-ac-01.png

Navegación

No existe como tal un menú, las opciones de navegación se dan en el footer del sitio, quedando un poco ocultas a primera vista; es necesario por ello desplazarse verticalmente para poder acceder a dichas secciones o enlaces.

Se puede indicar que no hay mayor profundidad respecto a este menú inferior, puesto todos los enlaces contemplan una única página o vista de la sección consultada.

Respecto al mapa

Búsqueda por años sobre el mapa

Junto a la información inicial que se desprende en torno al mapa, se tiene una serie o listado de años y número de travesías del enlace a consultar. Al elegir uno de estos se despliega sobre el espacio destinado a textos y datos, una estructura de títulos (nombre travesía o lugar) y mapas con la ubicación especifíca de las travesías del año elegido. Esto dirige a la ficha informativa con los antecedentes del viaje.

Año-dato.png

Puntos de georreferencia sobre el mapa

Se utiliza un mapa de Google para apuntar las zonas de travesías realizadas. De este modo, al posicionarse sobre uno de estos marcadores se indica el lugar, nombre de la travesía y algunos datos importantes como los participantes, distancias y talleres asistentes.

Geolocalizacion-dato.png

Respecto a los enlaces o menú

Escuela de Arquitectura y Diseño PUCV

redirigue al sitio principal de la Escuela.

Colabora:

Presenta una reseña que invita y cuenta los fines del sitio y la importante labor de colaboración del posible usuario, en general para todos los que hayan recorrido América en alguna travesía. Expone la modalidad de registro para aquellos que quieran contribuir, a través del acceso y registro en Wiki Casiopea.

Nueva travesía:

Redirige a el login de Personas para poder acceder a registrar travesía.

Acceder:

Dirige a login de Personas para acceder a registrar travesía

Acerca de las travesías:

Es una breve reseña del inicio y lo que da forma a las travesías; citando un escrito perteneciente a Amereida I, que indica parte del recorrido y viaje de los fundadores de la escuela en la primera travesía realizada.

Colofón:

Especifica la forma de proceder en el sitio y lo que representa. Indica que tipo de publicaciones son requeridas y se explica que el sitio corresponde a la tercera edición de la publicación digital de las travesías de Amereida.

Primera Propuesta

Map-nave-travesias-version1-02.png

Secciones

Explorar

Esta sección corresponde a la visualización de un mapa de tipo interactivo y un buscador con filtros para la información que se desea analizar.

Mapa interactivo

Los elementos o capas de información sobre el mapa que son visibles o bien que son activados por el usuario o lector al momento de interactuar con ellos. Esto es marcadores, iconografías, pop-ups con información o imágenes, enlaces, etc.

Filtros de búsqueda

Los filtros de búsqueda son una estrategia que nos permiten encontrar artículos de manera eficiente dentro de un sitio web. Es una herramienta cuyo objetivo principal es atenuar el efecto negativo causado por el exceso de información en las bases de datos, reducir al mínimo la obtención de información superflua o redundante, así como elevar el nivel de especificidad o sensibilidad de la búsqueda al máximo posible.

Los filtros a utilizar clasificarían las visualizaciones por: año, lugar, nombre de travesía, participantes, obra y talleres.

La idea principal radica en que el sitio de travesías tenga una sección especial dedicada a sólo las búsquedas y despliegue de información de los resultados en pantalla; no del modo en que se encuentra ahora, donde los datos y toda la información es trabajada sobre una misma base o plantilla, que es el mapa.

Existirá entonces como primera idea de esta sección, al filtrar y hallar lo que se andaba buscando una ficha de la travesía, que especifica el viaje emprendido y metadatos que surgen de ella, además de otros elementos que acompañan al mapa; estos artefactos o elementos según su disponibilidad (videos, textos, imágenes, audios, etc).

Ficha travesía

Corresponde a los datos de la travesía, la bitácora que narra el proceso de faenas, actos y ruta. Cada ficha puede tener una sección de comentarios o la posibilidad de compartir la información.

Travesías

La sección contempla de la versión anterior del sitio, el rótulo e información a modo reseña Acerca de las travesías. Se expondrán en cierto modo los ejes o directrices de lo que es la travesía: América, Obra y Acto. Luego, la subsección Bitácora abordará las distintas publicaciones relacionadas , tales como textos, poemas o relatos derivados en travesía. Dentro de esta misma línea se potenciará la revisión de los canales externos que contienen material de este tipo, como Flickr y Vimeo.

Acontecer

Se publicará información de travesías destacadas y recientes ya sea por la obra o labor allí realizada, la experiencia, anotaciones y material relacionado.

Colaborar

Se extrae esta sección de la versión ya existente del sitio, con la intención de instar al usuario a ser partícipe a través de la contribución de información y recursos gráficos o audiovisuales de las travesías en las que haya sido parte durante su vida como estudiante en la e[ad]. Por medio de un formulario se podrá detallar el registro o bien contactarse con el Archivo Histórico como medio principal para realizar la entrega.

Footer

Se utiliza el footer dispuesto por Gamma maquetas, que responde a una coherencia gráfica para con los sitios pertenecientes a la escuela. Dicho footer permite acceder a los distintos enlaces relacionados a la escuela, canales o redes sociales, un mapa de ubicación y contacto.

Buscador general

Se pondrá a disposición un buscador que permita el rastreo de información relevante para el usuario, a través de todo el sitio; obteniendo una página tipo con los resultados de búsqueda.

Portada o home

Los contenidos iniciales a incluir en este apartado serán a partir del acontecer de las travesías, publicaciones recientes (audio, vídeo, fotografías o documentos) y noticias relacionadas. El funcionamiento de cada componente en este punto, se piensa como una estructura cliqueable o enlazable, de acceso rápido donde la información se relaciona con alguna sección del menú y que puede revisarse con más detalle en una página especial enfocada en ello.

Segunda Propuesta

Mapa-navegacion-propuesto-12.png

Se modifica el mapa de navegación propuesto en una primera etapa, por la complejidad y poco análisis de las reales necesidades que presenta el sitio.

Modificación a las secciones

Home

Se reformulan los contenidos a presentar en la portada del sitio, con la intención de poder mantener lo más posible la propuesta actual donde se muestra el mapa interactivo desde un inicio; fijando ese aspecto que resulta necesario para la ubicación y esencia del sitio; donde se muestre en completitud cada uno de los puntos geográficos que han sido abordados en cada travesía registrada.

Además del mapa, la información relacionada a los fundamentos u origen que dan forma a las travesías será expuesto, como reseñas para orientar a quien visita el sitio.

Otra variable importante a incorporar en la portada y que se mantiene de la idea inicial, anticipada en el primer mapa de navegación es un espacio para las travesías recientes, esto es publicaciones recientes de viajes realizados, que funcionarán como enlaces a la información en mayor amplitud.

Explorar

Corresponde al mismo mapa presentado en el home, pero además con los filtros de búsqueda propuestos (por nombre, año, participante, taller y lugar).

Estos campos de búsqueda o filtros se generan frente al usuario, por un lado como espacios selectivos (año, taller, nombre ) y por otro como campos de llenado de información (lugar, participante).

Por cada resultado derivado de la búsqueda, se obtiene, si es que se encuentran coincidencias: ficha técnica de la travesía, registros o archivos y Bitácora o reseña del viaje. Cada uno de estos elementos son visualizados previamente y se pueden ampliar en detalle los datos, cliqueando el nombre de la travesía.

Travesías

Mantiene la información referente a los fundamentos de las travesías, como modo de explicar de dónde provienen estos viajes y su funcionamiento.

Un cambio en esta sección se da en que se incorporan los contenidos interiores presentados en la navegación anterior, pertenecientes a la sección Acontecer, nombre que fue eliminado por su difícil reconocimiento y porque era necesario integrar esta materia dentro del rótulo Travesías por hallarse más relacionado a este contexto.

Colaborar

Expone las modalidades posibles para que el usuario pueda contribuir en lo que respecta a la bitácora colectiva. Se elimina la opción de poder subir archivos directamente, puesto para realizar esto es se deja en claro que es posible a través el registro en el sistema de Personas o realizar una donación documental a través del Archivo Histórico de la escuela, puesto este mantiene un registro detallado de gran parte de las travesías (registro fotográfico y documental).

Además se tiene la opción de registrar una Nueva Travesía, mediante el acceso previo por el sistema Personas para luego crear un nuevo objeto semántico en la wiki, con los contenidos de la nueva travesía a ingresar, de modo que esta información se replica en el sitio de travesías.

Colofón

Se mantiene este rótulo que proviene del sitio original, allí se presenta información relativa al sitio en general, una especie de Quiénes somos.

Mapa de navegación final

Mapa-navegacion-travesias-04.png

Prototipado

El prototipado nos permite definir de una manera rápida y sencilla, a través de la construcción de wireframes, los bloques o secciones que va a tener cada una de las páginas de un sitio web, de modo que podamos jerarquizar la información y definir los contenidos.

La idea no es presentar el aspecto estético, sino que dar espacio a cómo el contenido debe representarse; de manera que pueda servirle al usuario, como una base para entender las ideas que se tienen. Por ello, el diseño de los bloques no debe contener mayores detalles, como titulares o fotografías, sino que debe centrarse en definir las partes del sitio, dando énfasis a los bloques y su estructura y no en los elementos que irán dentro.

Wireframes

Un wireframe es un bosquejo de la ubicación de elementos en una pantalla. Dependiendo de la etapa de desarrollo del proyecto, generamos el wireframe básico, que expresa los elementos de una pantalla genérica, aplicable a todo un sistema; wireframe tipo, que expresa la estructura de pantallas de una misma categoría, como canales o páginas terminales; y wireframe detallado, que especifica la composición de páginas específicas (se aplica especialmente a pantallas que implican la realización de acciones).

Un wireframe grafica básicamente:

  • Elementos de navegación: menús, accesos directos e hipervínculos.
  • Elementos de información: contenidos de texto e imágenes.
  • Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar.

Primera versión: Wireframes

Segunda versión: Wireframes

Las modificaciones radican en torno al mapa y el desglose de resultados que este deriva. Se piensa de manera más fluida la navegación, excluyendo páginas que pudiesen ser erradas en cuanto a su estructura; esto se produce porque en una primera propuesta los elementos o componentes de algunas páginas fueron pensadas muy separadamente, porque no existía un análisis acabado de la realidad del problema y sus requerimientos, generando layouts dispares y poco relacionados.

Diseño de Interfaz

Se construye un diseño de interfaz que responde a lo que se tiene actualmente, para producir una propuesta en el plano organizativo, mediante la presentación de sus contenidos.

Los recursos tipográficos, iconográficos, cromáticos, grilla, estructura de cajas,interacciones se toma en base a lo planteado por Pyxis Framework en su versión inicial.

Una premisa fue tratar de no alejarse a lo que visualmente es ahora el sitio de travesías: un espacio colaborativo, interactivo a través de un mapa muy presente, que integre el lenguaje gráfico como herramienta que logra aunar los distintos sitios de la escuela.


Maquetación uno

Maquetación dos

Secciones generales

Explorar: detalles buscador

Referencias sobre mapas

Mapbox

Mapbox-1.png

Mapbox es uno de los mayores proveedores de mapas en línea personalizados para grandes sitios web como Foursquare, Pinterest, Evernote, Financial Times, entre otros.

En él, a través del recurso Mapbox Studio, se puede crear rápidamente atractivos mapas interactivos y visualizaciones de datos. Para una personalización básica de mapas, el usuario puede diseñarlos con un editor de mapas en línea o bien descargar un programa base que permite la construcción de mapas a través de código y dibujo.

GoogleMaps

Googlemaps-v1.jpeg

Google Maps es un servidor de aplicaciones de mapas en la web que pertenece a Google. Ofrece la capacidad de realizar acercamientos y alejamientos para mostrar el mapa.

El usuario puede controlar el mapa con el mouse o las teclas de dirección para moverse a la ubicación que se desee. Los usuarios pueden ingresar una dirección, una intersección o un área en general para buscar en el mapa.

Permite la creación de pasos para llegar a alguna dirección. Esto permite al usuario crear una lista paso a paso para saber cómo llegar a su destino, calculando el tiempo necesario y la distancia recorrida entre las ubicaciones.

Además, presenta la búsqueda por ingreso de coordenadas, por negocios, vistazo de imágenes y capas.

Referencias

Bibliográficas

  • Escuela de Arquitectura y Diseño,(1991), Amereida Travesías 1984 a 1988, Viña del Mar, Chile, Primera edición, 861 AME, Editorial Taller de Investigaciones Gráficas, Escuela de Arquitectura UCV.[1]
  • Varios Autores,(1967), Amereida, Santiago, Chile, Primera edición, 861 AME, Editorial Cooperativa Lambda. [2]
  • Spencer, D. (2010) A Practical Guide to Information Architecture (Practical Guide Series),United Kingdom, ISBN: 978-0-9561740-4-8, publicación digital, Editorial Five Simple Steps.

Recursos web

Acerca de travesías

Elementos experiencia de usuario

Diagramas de Jesse James Garrett

Sobre Arquitectura de Información

Diagramas UML