Estructuras Editoriales Colaborativas

De Casiopea



TítuloEstructuras Editoriales Colaborativas
Tipo de ProyectoProyecto de Titulación
Palabras Clavediseño de interacción, diseño de interfaz, wireframes, arquitectura de información
Período2007-2008
CarrerasDiseño
Alumno(s)Katherine Exss, Estefanía Trisotti
ProfesorHerbert Spencer

Introducción

corrección de maquetas impresas

El diseño de wireframes y maquetas corresponde a la gráfica literal en pantalla de los procesos de interacción definidos. La diferencia entre wireframes y maquetas a color es que los primeros se diseñan con elementos visuales más simples y se elimina el uso del color para que factores emocionales no incidan en el proceso del diseño e interacción. Cuando estos están bien definidos, se diseñan las maquetas, las cuales perfeccionan el diseño de wireframes (empleo de color, iconografías, tipografías, etc.) para ser implementadas posteriormente. El diseño en la página tiene la delicadeza de hacer que lo complicado se vea fácil y no al revés, manteniendo los contenidos claros, la navegación fácil y haciendo buen uso de los estándares Web. Para cada versión, el diseño se vuelve más fino, especificando cada link, cada margen, tipografías, etc. de manera que se pueda anticipar cómo se resuelve aquel diseño en el código. También se adaptan casos reales para diseñar los modelos, considerando sutilezas como "cuál es el nombre más largo" de manera que el diseño se adapte a todas las posibilidade,s sin perder su estructura.

El diseño de interfaz se va perfeccionando en conjunto a los modelos de interacción. A la vez, la interacción puede ser optimizada una vez que los elementos ya están visualizados en la página, lo que reafirma el hecho de que la interacción y el diseño de interfaz van progresando en conjunto; la página no funciona si la interacción no está bien definida, y la interacción logra ser del todo comprendida cuando esta adquiere una representación gráfica coherente.

A continuación, se presentan las versiones de diseño realizadas entre Diciembre 2007 y Junio 2008, especificando el estado del problema y cómo se va resolviendo en relación a la interacción, contenidos y visualización. Cada versión es acompañada por un link externo para visualizar cada página en detalle de forma semi-navegable.

Modelos de Wireframes

Modelos de Wireframes / primera propuesta 2007

Archivo:Index largo con descripción.jpg.jpg
Primera visualización de Wireframes

WF 00 / ir a secuencia semi-navegable
Al término del trimestre de Título 1, se realizaron un par de wireframes para vislumbrar el trabajo que se vendría para la implementación del sitio durante el siguiente trimestre. Los primeros wireframes son los más difíciles pues implican definir pendientes de la arquitectura (que no están especificados en el mapa de navegación realizado anteriormente), por ejemplo cuales y cuántos son los ítems de navegación principal (término específico y subtemas), qué es lo que ve un usuario registrado, que es lo que ve un usuario no registrado, como funciona la interacción, etc. A medida que se avanza se puede entender las interrogantes y corregir las maquetas.

  • En éste caso, el index o Página de Inicio, tiene a el mapa (de google maps) predominando en la página, mostrando las últimas travesías realizadas con el punto de la obra. Luego una caja de log in, una muestra de los últimos usuarios registrados (con el fin de mostrar que es una red social activa), ultimas actualizaciones (artefactos publicados), y tres secciones de información estática importante como "visión poética", "vida en travesías" y "e.ad" (eso fue cambiado posteriormente). En el head banner se mantiene la caja de búsqueda con opciones de búsqueda especializada más otros links fijos.
  • Luego, en la página del Travesías los elementos se vuelven más engorrosos sobretodo por la falta de claridad acerca de la interacción del sitio, el mapa cambia de ubicación y tamaño, del cual se desprende información del punto donde se realizó la obra, acompañada de su ficha técnica, más abajo en el sidebar de la izquierda aparece un "abstract" de la travesía e información de los miembros que asistieron a la misma con sus respectivos avatares (divididos entre profesores y alumnos de cada taller, cosa que no se mantiene). A su lado aparece el último material publicado - en este caso videos- con sus respectiva descripción, autor y comentarios. La página falla en dos cosas importantísimas: primero no muestra la totalidad de los artefactos que han sido publicados de aquella travesía, y segundo no está pensado ni cómo ni donde un usuario registrado podría publicar material de la misma.


En esta primera entrega se formó una idea de cómo se deben ubicar los elementos en la página, pero no se comprende bien cuales son aquellos elementos ni que pasará con ellos más adelante en la navegación, dejando muchas dudas por definir.

Modelos de Wireframes / versión 01

Página de inicio de Primera Propuesta

WF 01 / ir a secuencia semi-navegable
La versión 1 corresponde a la primera propuesta formal de navegación, la cual se constituye de la siguiente forma:
Herramientas generales: el menú principal aparece dividido en las siguientes categorías: Inicio, Mi Cuenta, Búsqueda de Travesías, Obras, Comunidad y Referencias; para las que contienen subcategorías, éstas aparecen con roll over en el menú principal. Si la persona está logeada, aparece siempre su nombre arriba en la cabecera con la posibilidad de salir, ni lo o está, aparece el link para registrarse. Al igual que en los modelos anteriores, la caja de búsqueda aparece siempre presente, pero sin las posibilidades de búsqueda específica pues eso esta en “Búsqueda de Travesías” en el menú principal. A continuación la descripción de las páginas principales del primer modelo:

  • El Index tiene ahora el sidebar de la izquiera únicamente dedicado al listado de las últimas Travesías realizadas (con nombre / avatar / talleres / profesores), las cuales aparecen paralelamente georeferenciadas en el mapa con la última información publicada por algún usuario; bajo el mapa se mantiene la información fija, que ahora es “Origen de las Travesías” y “Visión Poética”. Éstas áreas llevan a páginas sin carácter colaborativo.
  • La página tipo de una Travesía fue ahora diseñada a partir de datos reales, en ése caso de la “Travesía Iruya” realizada en el año 2004. La página está dividida en 4 áreas relacionadas entre sí. La primera corresponde a la ficha de la travesía -ubicada en el sidebar izquierdo- que contiene datos puntuales como: nombre, recorrido, integrantes, etc. (la lista de integrantes enlaza a la página de usuario de cada uno). A su derecha se mantiene el mapa al igual que en el index, el cual muestra el posicionamiento de cualquier artefacto seleccionado debajo de la ficha, donde está el filtrador de artefactos de la Travesía seleccionada. Éste tercer espacio es importante pues ahí encuentras lo que buscas y tienes enlaces para publicar; los artefactos aparecen divididos según su origen, como fotografías, videos, audio, textos o bitácoras, y dentro de cada tipo se puede filtrar los contenidos por sus categorías, como viaje, obra, actos poétios, faenas, etc. Ésta forma de catalogar la información es relevante pues hace que la búsqueda sea más fina, e implica a la vez que los usuarios tengan ese cuidado de que el material que publiquen esté catalogado y bien, además de la georeferencia. Al seleccionar en ésta área algún cometido en particular, éste se despliega a su lado derecho (bajo el mapa) con la posibilidad de ver más artefactos de su tipo, la descripción de quien la publico (si es que existe) y los comentarios de otras personas (también si es que existe) ; el mapa a su vez, muestra el punto donde fue registrado aquel artefacto.
  • La categoría Comunidad está pensada como un espacio tipo blog donde los usuarios puedan exponer distintos temas que no necesariamente estén ligados a una Travesía en particular, con entradas de diferentes temas, comentarios y posibilidad de crear foros.
  • La página estática de Origen de las Travesías tiene información formal acerca de las travesías, es relevante para usuarios que desconozcan información acerca de las mismas.
  • Búsqueda de Travesías corresponde a un buscador avanzado para buscar artefactos georeferenciados.
  • La Cuenta de Usuario es similar en disposición de elementos a la de Travesías ( la idea es no cambiar mucho la diagramación a modo de no perder la continuidad de la navegación). Se mantienen estas 4 grandes áreas: la primera contiene el perfil de usuario, donde cada persona tiene ciertos datos personales, su lista de contactos, y su lista de Travesías asistidas. A la vez, en el mapa aparecen los recorridos de todas las travesías a las que esa persona asistió, con la posibilidad de subir más o editar la información existente. En la tercera área “filtrador de artefactos” se asemeja mucho al de la Travesía, pero con la diferencia que corresponde solamente a material que aquella persona registro. Y en la cuarta parte, también aparece el artefacto desplegado para ser viso y/o editado. Queda pendiente pensar cómo y donde otro usuario podría contactar a ésta persona si tener que ser por medio de un artefacto.

Modelos de Wireframes / versión 02

Página de inicio de Segunda Propuesta

WF 02 / ir a secuencia semi-navegable
Esta segunda version se caracteriza por eliminar todas las herramientas principales del header correspondientes a la versión anterior, pues ninguna es tan necesaria. Se eliminú la página de "comunidad" expuesta anteriormente, pues corresponde a información anexa al sitio mismo, y finalmente se plantearon nuevas formas de visualizar la página de una Travesía. El problema en cuestión era cómo lograr graficar en la pantalla coherentemente toda la información y sistemas de búsquedas que una Travesía puede contener, se pensó en la pasibilidad de mantener información fija y módulos con información que sea colapsable con AJAX, de modo que existan zonas de información variable.

  • En la Página de Inicio, se agregó un banner horizontal destinado a los usuarios no registrados para crearse una cuenta. El sidebar muestra una lista de las 10 últimas actualizaciones realizadas (publicaciones). Se determinó esa decisión pues las "últimas actualizaciones de travesías" solo serán actualizadas una vez al año, mostrando poco movimiento en el sitio. Las publicaciones se visualizan paralelamente en el mapa; el globo conserva un icono que muestra el tipo de artefacto publicado.
  • La página de Travesía muestra una ficha con información objetiva como talleres, integrantes y recorrido. Las categorías de los artefactos pueden ser filtradas el el módulo posterior a la ficha en el sidebar. Para mostrar los contenidos, el mapa a un costado una área de contacto la cual se despliega con AJAX sobre le mapa, visualizando el contenido filtrado y seleccionado. Los elementos se despliegan a la vez sobre la imagen visualizada en pequeños thumbnails, como herramienta de segunda navegación por objetos. Bajo esa zona se despliega la información del elemento selecionado, con su descripción, publicador y comentarios respectivos. La ficha mencionada anteriormente también puede colapsarse con AJAX, con el objetivo de subir los contenidos y se relacionen directamente con el mapa.
  • Travesía (primer estado): La travesía aparece con su ficha desplegada (que se puede minimizar), con el punto característico de travesía en el mapa (es probable que corresponda a la ubicación de su obra) y ese punto corresponde a la travesía, denominándose "Travesía -nombre de la tra- año". En el sidebar a la izquierda (bajo la ficha) está el "fitrador" de contenidos, según su orgigen luego categorías sin resultados de búsqueda aún.
  • Travesía (segundo estado): La página se mantiene igual al primer estado, pero la persona filtró los contenidos de fotografías a partir de la categoría "Actos Poéticos" y el sistema le arrojó 13 resultados. Los resultados se muestran simultáneamente en el mapa con las ubicaciones de cada artefacto encontrado.
  • Travesía (tercer estado): La persona selecciona el primer resultado filtrado, el cual se destaca en el pop out del mapa y se despliega su información a la derecha, con los elementos vistos en wireframes anteriores. (nombre, descripción, comentarios, etc.)
  • Travesía (cuarto estado): El usuario despliega en el mismo espacio donde aparece en mapa el artefacto seleccionado (con la barra lateral), la información abajo se mantiene, pero el mapa-artefacto cambian dinámicamente en la página.
  • Travesía (quinto estado): La página es idéntica a versiones anteriores, pero se grafica con le ficha comprimida, dejando el filtrador flotando más arriba.


Observaciones a considerar: Considerar posibilidad de crear "campos" o "eventos" en los cuales se inserten artefactos relacionados / La diagramación de cómo se relaciona el mapa con el "filtrador" aún queda difusa / Aún no queda definida la interacción de cómo se publica un artefacto

Modelos de Wireframes / versión 03

Página de publicación de artefacto, aparece el evento como elemento geolocalizador del objeto)
Página de Cuenta de Usuario

WF 03 / ir a secuencia semi-navegable
Esta maqueta significó el primer paso al diseño más estricto de PNG, se plantearon problemáticas más complejas como el modo de publicar un artefacto, cómo se visualizan diferentes tipos de artefactos, y cómo se constituye la cuenta de usuario. De ahora en adelante, el diseño de interfaz es de mayor impacto pues se detalla cada paso del usuario para realizar una acción, y es detallada en una secuencia de uso en los modelos de interacción. Ésta propuesta trae incorporada la posibilidad de incluir los artefactos publicados a "eventos", de manera que los objetos puedan ser ubicados también según sucesos que hayan ocurrido durante una travesías, ahorrando la cantidad de puntos o líneas marcadas en el mapa. Se definió que los eventos además de tener un punto o línea tienen nombre y descripción, y son los mismos usuarios quienes los crean, pasando a ser meta-artefactos incluidos en los meta-artefactos "Travesías".

  • Página de Inicio: A diferencia de los modelos anteriores, la página de inicio muestra las últimas 10 actualizaciones de artefactos publicados (y no de las últimas 10 travesías) ya que de esta forma se la página se actualizará frecuentemente y no con intervalos de 1 año (tiempo que pasa entre una generación de travesías y las siguientes). El "pop-out" de cada artefacto graficado en el mapa mostrará solo el tipo de artefacto que es (ícono) y su respectivo nombre. Las herramientas del header se resumen a links auxiliares, caja de usuario log in/out, caa de búsqueda, y búsqueda avanzada. Se incluyó un banner que incentive a crearse una cuenta y colaborar con el registro. Se mantienen las columnas que enlazan a páginas fijas de "visión poética" y "orígen de las travesías".
  • Crea tu Cuenta corresponde a la primera propuesta de cómo se debería crear la cuenta un usuario que se registra por primera vez.
  • Cuenta de Usuario Muestra el diseño de la cuenta de una persona que se acaba de registrar.
  • Cuenta de Usuario (agregar travesía): la página muestra como el usuario podría agregar sus travesías asistidas al sistema.
  • Publicar Corresponde a la primera secuencia de publicación de artefactos, esta incluye la posibilidad de relacionar el artefacto con un evento, el cual le otorga la georeferencia.
  • Publicar texto Corresponde a la secuencia de publicación para el caso de textos.
  • Cuenta de Usuario (con artefacto publicado): cómo se visualizan los elementos publicados por el usuario en su cuenta personal.
  • Travesía "Inicio" (con elemento recién publicado) El sidebar se desplazo a la derecha en relación a la maqueta anterior, la ficha aparece colapsada por default, luego vienen los check box que filtran la información de esa travesía, y los resultados aparecen divididos según el evento al cual pertenecen. Al seleccionar un evento, se pueden visualizar sus artefactos contenidos.
  • Travesía "Fotos": cambia el main, se despliega una fotografía
  • Travesía "Texto": no existe texto, por lo que se mantiene el mapa y el usuario publica uno
  • Travesía Texto visualizado posterior a la publicación del mismo


Observaciones a considerar:

  • La separación por tipo de artefacto no es un aspecto primordial; las pestañas no deben ser en base a el tipo de artefacto sino más bien en base a los contenidos, como eventos, categorías, etc.
  • Se define el espacio pero no el tiempo, no está considerado. Qué pasa antes, que viene después, entender el orden, cuánto dura cada evento. Cómo se expone la dimensión del tiempo.
  • Pensar en la posibilidad de incorporar breadcrumb en el sitio, o definir bien la estructura de menús, etc
  • Considerar la posibilidad que los elementos tengan un nombre oficial y nombres alternativos, (ej. Aka.) podrían tener las cosas uno o más nombres acumulables; alguien además de comentar podría agregar descripción, o autores, o quienes aparecen en cierta fotografía, etc. Pensar si esos campos estarán contemplados en el proyecto, cómo pensar una estructura donde siempre se pueda agregar más (flexibilidad) en los casilleros para que puedan crecer, no por llegar después no puedo describir las cosas, que no son comentarios.
  • Tomar un caso de Travesía y comenzar exhaustivamente a revisarlo y graficarlo.
  • El genérico es imagen, pero imagen pueden ser fotos, planos, croquis, etc.
  • Pensar en utilizar los mismos íconos para los modelos de interacción y para los wireframes, iconografía más genérica
  • Saltar el paso de agregar la travesía cuando la persona se inscribe en el sistema y no cuando la persona ya creó la cuenta.
  • Idea de la primera fuente: yo escribo de lo que yo sé
  • No debemos centrarnos en los objetos pues éstos no son el fin últio de alguien que está buscando contenidos, el tipo de objetos no es lo más interesante, puede ser una opción de filtro pero no es lo que prima en el meta-artefacto Travesía, como fechas, etc.
  • Las cosas se repliegan, está todo en el mismo
  • Quizás los comentarios no están en la misma página o se expanden
  • No puenen coexistir tres scroll
  • Ajustar sidebar pegado al mapa
  • Pensar que pasa si el menú esta en un banner arriba y se colapsa, y no al costado del mapa

Modelos de Wireframes / versión 04

WF 04 / ir a secuencia semi-navegable

  • Página de inicio: no mantiene mayor modificación. Origen de las Travesías y Fundamento se unen en "Origen y Fundamento". Se mantiene el concepto de las últimas 10 publicaciones
  • Visor propone un buscador avanzado de búsqueda general en el sitio, a partir de categorías generales y específicas según el tipo de artefacto. también tiene espacio para escribir la búsqueda. Los resultados aparecen georeferenciados en el mapa. El intervalo de tiempo también actúa como elemento filtrador de los resultados.
  • Travesía Los artefactos se agrupan según el evento al que pertenecen, ocupando un mismo punto en el mapa. En la zona superior de mapa se ubica una linea de tiempo de los días de la travesía seleccionada, esta se comporta como checkbox para agregar o descartar resultados de búsquedas. La idea fue incorporar la dimensión del tiempo.
  • Publicar Video la publicación debe incluir la fecha del artefacto (día específico o intervalo de tiempo, dos o más).

Modelos de Wireframes / versión 05

WF 05 / ir a secuencia semi-navegable
Los cambios realizados en esta versión de wireframes están especificados en cada página en el siguiente PDF: Quinto Modelo de Wireframes formato PDF

  • Página de inicio Se mantiene la estructura establecida anteriormente.
  • Visor propuesta "a" El visor reúne todas las posibilidades de búsqueda del sitio, se pueden conjugar diferentes posibilidades, la primera tiene un dropdown donde se puede escojer entre ciudad, persona, etc. para luego tipearlo abajo. Se puede agregar los años los cuales se limita aquella búsqueda. Los resulados (si es que se eligió la primera forma de búsqueda) pueden ser filtrados por las categorías generales y/o las opcionales, éstas últimas limitadas a tipo de artefacto.
  • Visor propuesta "b" En el caso que la propuesta “a” tenga demasiadas posibilidades de búsqueda, la posibilidad “b” tiene dos pestañas, donde se separa la búsqueda de categorías por la búsqueda específica. El de esta página corresponde a la búsqueda por categorías, las que pueden ser limitadas por un intervalo de años. la siguiente pantalla muestra muestra la segunda pestaña activada con la posibilidad de búsqueda específica.
  • Travesía - Ficha Página de la Travesía con la primera pestaña desplegada, aparece la “ficha” o información oficial, y aparecen los eventos de la travesía (al hacer click en cualquiera de ellos se pasa a la segunda pestaña.) En el mapa aparecen las georeferencias de cada evento unidas directamente (en el caso que no esté trazado el trayecto),
  • Travesía - Ficha con linea de tiempo Es el mismo wireframe anterior, pero esta versión tienen bajo el mapa una línea de tiempo -pues la travesía es finita- que de estar activada se puede recorrer para visualizar cuáles eventos son antes y cuáles vienen después.
  • Travesía - Eventos Descripción de los eventos de travesía ordenados cronológicamente, con visualizaciones de imágenes de artefactos que están contenidos en ellas. Al hacer click en cualquier imagen se pasa a la visualización de aquel artefacto en la tercer pestaña “Archivo”. La pestaña eventos da la posibilidad de leer la travesía como una bitácora creada por todos.
  • Travesía - Archivos La última pestaña de Travesía “Archivo” (artefactos) es donde finalmente ellos se visualizan, y su búsqueda puede ser más especifica sin son filtrados por las categorías. Cada evento se despliega con sus respectivos artefactos de ser activados, y pueden ser visualizados y referenciados en el mapa en la misma zona
  • Cuenta de Usuario - Perfil La cuenta de usuario se divide en dos pestañas, la primera con información del perfil y lista de travesías asistidas por aquel usuario. También aparece las últimas actualizaciones que se han realizados en las travesías asistidas por esa persona.
  • Cuenta de Usuario - Archivo En la segunda pestaña de la cuenta de usuario es donde se ubican y ordenan los artefactos publicados por esa persona. Estos se agrupan por travesía, y pueden ser filtrados por las categorías generales. Los objetos publicados se visualizan el el mapa.
  • Cuenta de Usuario - Archivo (AJAX desplegado) Con AJAX el mapa se comprimió hacia la izquierda, apareciendo los elementos encontrados en el sidebar para ser vistos o editados; el que está marcado con fondo oscuro es el que fue seleccionado previamente en el mapa. Para “ver” el elemento aparece desplegado en la página de su Travesía Correspondiente, y para “editar” se llega a una nueva página donde se cambia su información.
  • Origen y fudamento Cambia la diagramación respecto a modelos anteriores.

Modelos de Wireframes / versión 06

WF 06 / ir a secuencia semi-navegable Esta versión formaliza y ordena las propuestas versión 5 y 6.

Modelos de Wireframes / versión 07

WF 07 / ir a secuencia semi-navegable

Modelos de Maquetas a Color

Maqueta a color / versión 01

MC 01 / ir a secuencia semi-navegable???

Maqueta a color / versión 02 (modelo actual)

MC 02 / ir a secuencia semi-navegable