Interacción, gestión y visualización de contenidos
Proyecto de Titulación Diseño Gráfico
Esteban Saavedra Nilo
Etapas del proyecto
Administrador Web de Archivo | Diseño de Wireframe e interfaz | Interacción, gestión y visualización de contenidos
Otras versiones del estudio
Introducción
El proceso de administración del sitio web de un archivo patrimonial debe ser lo más fluido posible, ya que la gran cantidad de información que se maneja debe ser disponibilizada de manera tal que el usuario pueda ver la totalidad de los contenidos que el archivo decide diponibilizar. El administrador debe, por medio de la interfaz, crear relaciones no existentes o incluir las relaciones que se estimen convenientes en pos de facilitar la visualización semántica de los datos a los usuarios. La primera complejidad gráfica radica en diseñar listas de formularios que faciliten, a los administradores, crear estas relaciones y completar automáticamente las que ya existen, al momento de subir y catalogar los documentos en la web. La segunda es desarrollar una interfaz amigable para la gestión de los contenidos una vez publicados, y un tercer punto es que toda esta información sea realmente accesible para los usuarios tanto digital como físicamente.
El primer acercamiento a un administrador de contenidos digitales fue la plataforma para blogs Wordpress. Una primera propuesta tomó a modo de referencia su interfaz, la cual por la manera en que está pensada como herramienta de comunicación y difusión más la sencillez de su diseño, no se adapta a la complejidad de datos que tiene un archivo con gran cantidad de documentos de carácter patrimonial, ya que sus datos deben dar cuenta sobre una ubicación, nombre material, etc, de los elementos en el espacio físico (biblioteca, oficina, museo, etc), así como también su nombre, tamaño, formato, etc; que tiene en su versión digital.
Lo que se rescató de esta plataforma fue la dualidad de interfaces entre los usuarios y el administrador.
Si bien existen repositorios digitales de archivos como DSace y Eprint, la interfaz de la mayoría de los sitios web que utilizan estas herramientas son deficiente en cuanto a la adaptación de los tipos de elementos que se están mostrando (video, foto, texto o imagen) sólo mostrando largos y tediosos listados de texto, que llevan a la descarga del archivo (si es que se tienen los permisos).
DSpace es uno de los programas de código abierto preferidos por las instituciones académicas para gestionar repositorios de ficheros (textuales, audio, vídeo, etc.), facilitando su depósito, organizándolos en comunidades, asignándoles metadatos y permitiendo su difusión en recolectores o agregadores.
A diferencia de nuestra propuesta, DSpace sólo se encarga de disponibilizar la información de ficheros, pero no se preocupa de la visualización de los mismo en la web. No hay una preocupación por desarrollar una interfaz adecuada que facilite el acceso a la información, no sólo que la administre y "disponibilice" -entre comillas ya que si la manera de catalogar la información no es adecuada y su visualización es deficiente, difícil es la tarea de acceder a los contenidos. interfaz Dspace Universidad de Talca
Para facilitar el acceso, administración y visualización de contenidos en repositorios de archivos digitales , es que se ha desarrollado una interfaz que simplifica estos procesos.
Interfaz de administrador
Se pondrán links de acceso a todas las páginas mientras se describen las características de uso.
El inicio del administrador de contenidos es la lista de las colecciones o fondos que posee el archivo.
La navegación de los elementos se hace posible mediante pestañas, las que permiten acceder a los elementos que hay en cada ítem.
La propuesta plantea que el desarrollo se realice por medio de AJAX para poder editar cada uno de los campos, agregar o eliminar información publicada y no publicada. La información publicada se divide en coleccione > series >elementos(artefactos) y los no publicados” que son los elementos que aun no completan el proceso de catalogación.
Durante todo el tiempo que el administrador se encuentra catalogando información podrá ver las controversias que son enviadas por los usuario o aquellas que no ha revisado aun. Al acceder a ellas podrá el cuestionamiento hecho y editar inmediatamente de ser pertinente.
En la cabecera, podrá previsualizar los cambios hechos en la interfaz de otros usuarios (investigador y observador)
Subir archivos: Este es uno de los puntos más delicados en la administración debido a la gran cantidad de información y a los datos que esta poseen. Su adecuada catalogación influirá directamente en la manera en que se accede a ella.
El proceso cuenta con tres pasos dispuestos en una lista de forma tal, que la atención del usuario administrador se centre en completar el proceso sin distracciones.
El paso uno es la selección de los elementos (documentos que se van a subir) mediante un cuadro de diálogo. Los archivos seleccionados se verán listados con su nombre, formato, peso y la opción de quitar elementos de la lista. Esto es paso dos que finaliza al presionar el botón subir.
Al subir los archivos serán guardados en el servidor y automáticamente pasara al paso tres que es la catalogación de los archivos por lote. Para esto se completa un formulario con los campos descriptivos que son obligatorios, las descripciones hechas se aplicaran a todos los elementos subidos, una vez terminado este proceso se agregaran los datos a los nuevos elementos, los que podrán ser editados individualmente. En esta parte del proceso se podrá seleccionar las opciones guardar (para mantener los archivos sin publicación ) y publicar los que serán vistos inmediatamente por cualquier usuario, finalizando el proceso de subir archivos.
Entradas: es la parte blog del archivo. Aquí se podrán escribir noticias y cualquier artículo que el administrador crea conveniente según su línea editorial. Cuenta de dos partes:
Nueva entrada: donde podrá escribir nuevos artículos y Entradas anteriores: donde podrá gestionar los artículos o noticias ya publicados.
Preferencias: la concepción genérica de la interfaz permite que cualquier institución pueda implementarla para administrar sus archivos y modificar algunos aspectos de ella para adaptarlos a sus requerimientos si modificar su estructura.
En esta página se puede seleccionar la licencia para todo el archivo, modificar el nombre, la gama cromática de la interfaz y gestionar a los usuarios.
Interfaz de usuarios
Cabecera del sitio
En el menú de navegación auxiliar se encuentran los accesos "iniciar sesión" y "crear cuenta" Los formularios de ingreso y registro son sencillos con mucho espacio alrededor, libre de distracciones visuales. Al iniciar sesión, el usuario investigador volverá a la misma página desde donde accedió al sitio, la cabecera mostrara un saludo de bienvenida junto con el icono de usuario y tendrá la posibilidad de acceder a su mesa de trabajo y gestionar sus expedientes de investigación. El administrador vera la interfaz de administración. Las personas que no están registradas accederán automáticamente a su mesa de trabajo una vez terminado el formulario, donde podrán crear un expediente y resguardar su investigación Los componentes del menú de navegación permiten acceder al contenido del sitio web y explorar a través de ellos. El inicio y catálogos son los que poseen mayor profundidad y dinamismo, servicios, acerca de y contacto, son estáticos y su etiqueta va a variar según las necesidades de cada sitio. A modo de ejemplo se puede dar el caso de que las instituciones no presten servicios, este ítem sería irrelevante y no se visualizaría.
Inicio
La portada del archivo consta en su estructura básica de tres columnas, cabecera, barra de navegación y pie, en la columna izquierda se presenta un resumen del contenido mediante miniaturas (thumbs) que aparecen al azar además de una propuesta iconográfica que da cuenta de los elementos existentes en cada colección. La idea del inicio es que los contenidos se visualicen de manera rápida mediante un tipo navegación dinámica conocida como “deslizamiento coda”, que se aplicara en todas sus columnas. A la derecha muestra los últimos elementos subidos para que la interfaz se actualice y se vea en constante actividad. Además de los links relacionados, el pie está pensado como navegación auxiliar y datos sobre la ubicación, horarios de atención y licencias, entre otros.
Catálogo
El primer nivel de visualización del catálogo es un listado de las colecciones o fondos (en este caso el archivo no posee fondos), la visualización listada favorece la lectura es más efectiva para mostrar grandes cantidades de información y hace más sencilla la implementación del diseño en plataformas móviles. Las colecciones se muestran colapsadas, al seleccionar una de ellas se ve un listado con sus series y la posibilidad de acceder a la página de cada serie, que tienen sus propios datos y un fragmento de su descripción, para incentivar la curiosidad de los lectores y accedan a ellas. La navegación planteada permite acceder a todas las colecciones, desplegando y colapsando su contenido por lo que no posee una url propia.
Serie
En la serie se accede directamente a los elementos, estos pueden ser filtrados para visualizar solo los que el usuario desea (imágenes, vídeos, textos o audio), por defecto aparecen todos simultáneamente, ordenados por fecha de publicación en la parte derecha de la páginas haciendo una diferencia iconográfica del tipo de elemento que es. En la columna izquierda se podrán ver los datos de la serie, desde donde se podrá a acceder a la página de las facetas y a otra colección en el caso de que pertenezca a más de una. El mosaico de los elementos que posee cada serie se diseña pensando en la información relevante de cada uno, Titulo, fecha de origen, licencia que da cuenta de su disponibilidad. Se diferencias aquellos elementos por los cuales se debe pagar para en caso de los textos estos se pueden descargar directamente, para ser leídos con los respectivos software que los soportan (adobe reader, Word, entre otros) se especifica su formato y peso.
Elementos (Artefactos)
La pagina de los artefacto tiene gran variedad de componentes, el más importante v isualmente junto con el artefacto seleccionado son las etiquetas que están separadas por facetas. Éstas incorporan miniaturas colapsables de otros artefactos relacionados semánticamente por etiquetas, esto para facilitar al usuario la recuperación de información y acceder al contexto en el que se encuentra el elemento seleccionado. Cada faceta tiene un listado de etiquetas asignadas por el administrador o el investigador, el campo para agregar nuevas etiquetas siempre será visible, pero para poder agregar la nueva etiqueta se debe estar registrado en el sitio, al igual que para descargar los elementos. A la iconografía heredada de las páginas anteriores se suman, código de enlaces, link para enviar a la mesa de trabajo, el breadcram y las controversias. Las controversias están pensadas como una manera de ampliar y mejorar el tipo de información que se muestra en el sitio, si un usuario decide cuestionar la información de algún elemento del sitio, podrá completar los campos debajo de los componentes que se pueden poner en controversia, y enviar al administrador las observaciones pertinentes haciendo click en el botón destinado para ello.
En el caso de ser un elemento pagado, el link de descarga se cambia por el de compra.
La georeferencia es un “pop up” que enmascara el sitio permitiendo ver el mapa. Está pensado en base a la API de google maps, se geoposicionan los elementos y se pueden ver en una previsualización de la selección, con la posibilidad de ir a la página para acceder a la información detallada, los usuarios podrán navegar por las georeferencias.
Como se menciona anteriormente Servicios, Acerca de y Contacto son paginas estáticas de información, el formulario de Contacto consta de campos de datos para enviar un mail directo al administrador del archivo.
Pagina de descargas
A esta página se puede acceder tanto por el link de descarga como por la lupa (zoom) y ver la foto en diferentes tamaños, se agregan elementos de navegación como “volver a la página de imagen” (para este caso), las licencias del artefacto de muestran al pie de cada imagen, y la posibilidad de descargar y enlazar en el tamaño que se está visualizando.
Mesa de trabajo y órdenes de compra
Solo los usuarios registrados pueden acceder a la mesa de trabajo. Aquí pueden seleccionar un expediente, editar, eliminar o exportar uno nuevo, podrá ingresar a los expedientes creados y ver sus archivos recolectados, conceder el permiso para hacer pública su investigación que por defecto es privada. Y ver el estado de sus peticiones de compra a través un submenú de navegación con los estados de su orden.
Transacción.
Consta de dos pasos, el primero es seleccionar tamaño y calidad del elemento que deseas comprar, el segundo es seleccionar forma de pago mediante checkboxes, se visualiza una miniatura del elemento requerido. Básicamente entre la interfaz del usuario administrador y el observador la única diferencia es que el observador debe registrarse para realizar las acciones e interactuar activamente en el sitio.
La navegación listada permite mostrar en la pantalla grandes cantidades de información, debido a la naturaleza de la información y la posibilidad de que esta se incremente en el tiempo es que los componentes de las paginas están dispuestos de manera tal que puedan extenderse sin desarmar la estructura del sitio, los contenidos se colapsaran mediante el uso de aplicaciones java script y Ajax, haciendo de la navegación un proceso dinámico si tener la necesidad de cambiar constantemente de páginas para poder ver los contenidos. Con respecto a coda slider, es un efecto que permite navegar los contenidos del sitio avanzando pestaña a pestaña deslizándose horizontalmente (también se puede deslizar de forma vertical), la idea de implementar esta forma de navegación nace por su similitud con la navegación que tienen los teléfonos celulares de última generación, lo que para favorecerá la implementación del sitio a dispositivos móviles. Es novedosa, estéticamente elegante y da la sensación de avanzar por los contenidos fluidamente. Para implementar esto se requieren una serie de plugin desarrollados por jQuery que es un una biblioteca o framework de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. jQuery, al igual que otras librerías, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta librería se logran grandes resultados en menos tiempo y espacio (wikipedia, 2008).
Propuesta de color y estilos
Para seleccionar la gama cromática del sitio se recurrió a Colourlovers.com,] sitio web que muestra paletas de colores de las más diversas combinaciones. El criterio de selección de paletas fue el concepto de sobriedad, adecuado para una institución que preserva archivos patrimoniales y evidenciar grados de contraste necesario para establecer las jerarquías dentro del sitio. Se diseñó una propuesta en verde, pero a raíz del bajo contraste de los tonos fue reemplazada por tonos mas cálidos y de mayor contraste entre sí. Toda esta gama se aplica sobre un fondo blanco, que no es modificable en las preferencias del sitio, para mantenerlo con un aspecto común de todos en todos los archivos además de la estructura de navegación
Diseño de Formularios interactivos
En la propuesta anterior se mostraron dos secuencias de uso de cómo el administrador de un archivo sube y organiza el contenido dentro del sitio, la corrección de los wireframe revelo ciertas fallas en la lógica y diseño del formulario “ Completar campos” por lo que ahora veremos [1] su rediseño y algunas consideraciones al momento de diseñar este tipo de interacción.
El formulario consta tres columnas agrupadas por tipo de campo, los de selección están todos juntos a la izquierda de la pantalla, de esta manera la atención de los usuarios se centra en los campos de entradas que se despliegan ya que estos tienden a ser más llamativos que los campos de texto. La diagramación del formulario con su nombre sobre los campos de entrada fue pensada así por que permite a los usuarios capturar los elementos con un solo movimiento de los ojos y completar los formularios con mayor rapidez, disminuyendo la carga cognitiva.' Label Placement in Forms By Matteo Penzo
El diseño de formularios es una de las disciplinas más complejas en el campo de diseño de interfaz ya que actúa y dialoga directamente con los usuarios y su experiencia al navegar el sitio web.
Investigando sobre el tema, vemos el caso del rediseño del formulario de registro de eBay del cual se obtienen los siguiente tips:
- La introducción y o explicación de un formulario debe ser concisa y unificada, se debe evitar el movimiento que producen las diferentes longitudes de línea y enriquecer el contraste, hay guiar al usuario para que sepa que poner en cada campo de entrada.
- Al nombrar cada campo de entrada se debe tener en consideración aquellos datos que son conocidos más los datos que son de reflexión.
Organización Visual
El diseño de interfaz tiene relación directa con la organización visual. Lo primero que observamos al ingresar a un sitió son las similitudes y diferencias de los que estamos viendo, estas relaciones nos permiten n solo distinguir objetos sino que también darles sentido. Diferentes colores > diferentes partes, diferente escala > distancia o lejanía Estos procesos se ven acelerados por nuestra capacidad de agrupar.
Psicológicamente la forma en que agrupamos la información visual no es suficiente para transmitir un mensaje concreto, para lograr esto necesitamos saber cómo utilizar la relaciones visuales a nuestro favor.
Para agrupar existen según Luke Wroblewski cinco categorías generales, Color, Forma, Textura, tamaño y Forma. La introducción de variaciones en cualquiera de estas categorías crea contraste visual. Cuanto más contraste haya entre dos objetos más probable es que se perciba como diferentes o no relacionados.
Jerarquía visual
“los diseñadores pueden crear la normalidad del caos, ya que pueden comunicar claramente las ideas a través de la organización y manipulación de las palabras y las imágenes” Jeffery Veen, El arte y la ciencia del diseño visual. Al hablar de jerarquía visual hablamos de la utilización de relaciones que cuenten una historia coherente. Un centro que atrae la atención del espectador para luego dirigirse la resto de los puntos focales para crear jerarquías visuales y utilizamos relaciones visuales para añadir pero visual a los elementos de la página y pro tanto establecer un patrón de movimiento a través de la disposición en la pantalla. Una clara jerarquía no solo genera un camino para el reconocimiento y la comprensión de la información, sino que ayuda a unificar los elementos dispares dentro de un diseños de pagina en un todo coherente-
Orden y Equilibrio
En general la jerarquía visual dentro de un sitio web se basa en la distinción entre el contenido, la navegación y la información, a la vez dentro de cada una de estas características se pueden crear nuevos distingos. Cuando se diseña una jerarquía visual es conveniente no “hablar en voz alta” se educa en silencio y se guía al público a través de la interfaz.
Traducido del articulo
Visible Narratives: Understanding Visual Organization por Luke Wroblewski publicado originalmente el 20 de Enero del 2003 en Boxes & Arrows
