Diseño de Wireframe e interfaz
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
Propuestas de Wireframes
Un wireframe es una representación esquemática de una página web sus elementos gráficos son sencillos para privilegiar el contenido y comportamiento de las páginas dentro del sitio web. Son una herramienta útil para la comunicación comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios. Una vez discutidas y evaluadas todas las apreciaciones que se tienen sobre ellos se comienza con las maquetas, donde se definen todos los rangos de detalles que va a tener el sitio con lo que respecta a la diagramación, tamaños, tipografía, etc; todo lo necesario para hacer de la navegación un proceso fácil y agradable para los usuarios. El desarrollo de los wireframe es la base de la visualización final del sitio web, por lo que el proceso es bastante complejo y minucioso, para trabajar en ellos se utiliza Firework cs 3 programa especializado en el diseño para pantallas.
1ra Propuesta Wireframe Usuarios
La primera propuesta de wireframe estaba pensada para pantallas de 800x600
2da Propuesta Wireframe Usuarios
La segunda propuesta de wireframe fue pensada para pantallas de de 1024x768 que es la resolución de pantalla mas usada hoy en día. El primer trimestre concluyo con el desarrollo de unos wireframe semifuncionales que responde a una secuencia de uso inventada como un caso probable en la navegación del sitio. para navegar en el debenhacer click en los links de color rosa. En este enlace podrán ver un pdf con la descripción detallada de cada página diseñada.
3ra Propuesta Wireframe Usuarios
Se plantea comenzar a trabajar con maquetas e información real del contenido del archivo José Vial Armstrong, la Home tiene como función mostrar información concerniente de lo que es el archivo y además un adelanto a modo de preview del material que contiene la institución.
En el índex, Home o página de inicio, en su cabecera se pues de ver el nombre de la institución su logo, link relacionados y la fecha del día, luego está el espacio destinado al buscador semántico, más abajo se verá información sobre la historia de la institución, efemérides que mostraran archivos o artículos relacionados con la fecha del día o en su defecto el más cercano, para que se muestren los archivos que tal vez puedan pasar inadvertidos entre la gran cantidad de información y así tengan una mayor presencia en el sitio; también existe un lugar de navegación dinámica que muestra a modo de resumen lo que cada colección tiene en una galería de imágenes seleccionadas al azar.
En la propuesta semifuncional se puede apreciar como son las páginas de Fondos, Servicios y Contacto, además del método de navegación por pestañas. Mediante secuencia de uso realizada:Índex > obras > seleccionar una imagen (el primer cuadrado) se llega a la página de los artefactos, la cual muestra contenido relacionado con el artefacto seleccionando, toda la información que se ve en la pantalla, está relacionada semánticamente.
4ta Propuesta Wireframe Usuarios
Para esta entrega la preocupación estuvo centrada en la navegación del menú principal del sitio, se diseña el Home que cuenta con El buscador patrimonial que está presente en todas las páginas de sitio al igual que los links relacionados, luego en la columna izquierda un banner de una imagen representativa y descripción de las características del archivo, junto con una lista de las colecciones, con una pequeña parte de la descripción del contenido de cada una de ellas, en este caso como se puede ver son 6 colecciones. En la columna derecha debajo de link relacionados, noticias o artículos publicados por el administrador para informar al público de algún evento o circunstancia trascedente para la institución, seguido en la parte inferior, la últimas publicaciones hechas y en el pie año licencia link y datos para mejorar la usabilidad del sitio ( este se mantiene en todas las paginas) Con respecto a la usabilidad, el tamaño tipográfico se ha repensando para una mejor lectura, siendo el tamaño mínimo 11pt, en cualquiera de las tipografías usadas Georgia para las serifas y Arial para las palo seco. El catalogo muestra una lista de la colecciones que existen y su descripción además el sistema arrojara un texto descriptivo que da cuenta de la cantidad de series y artefactos que la colección posee. Al hacer click sobre alguna colección se va a desplegar y plegar según sea el caso, al desplegarse mostrara las series que hay dentro de ellas con una fotografía y su descripción respectiva.
5ta Propuesta Wireframe Usuarios
Se desarrolla un esquema para organizar la información dentro de la pantalla y facilitar el desarrollo de los html y las cascadas de estilo. En este caso se ajusta el lenguaje para lograr una mejor llegada a las personas y facilitar la comprensión, mejorando la usabilidad, se cambia específicamente "Home" por "Inicio" e "Historia" por "acerca de", la jerarquiza de la información en el inicio se modifica, la columna izquierda contiene un resumen de las colecciones y se propone una navegación dinámica de deslizamiento horizontal de los menús (también conocido como efecto deslizante de Coda). aquí un ejemplo
Para el catálogo se propone una visualización que varia según el la cantidad de artefactos(o contenido) que haya dentro de cada fondo o colección, esta se irían ajustando proporcionalmente dentro del espacio asignado en la pantalla, se pensó de esta manera para facilitar las relaciones visuales y disminuir la lectura.
6ta Propuesta Wireframe Usuarios
1era Propuesta Wireframe Administrador
El proceso de administración del sitio web de un archivo patrimonial debe ser lo mas sencillo 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 estime convenientes en pos de facilitar la visualización semántica de los datos a los usuarios. La 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. Para esta primera propuesta se tomo a modo de referencia la interfaz de Wordpress, que sirve muy bien para administrar el contenido se algunos sitios Web y Blog, pero la sencillez de su diseño, no se adapta a la complejidad de datos que tiene una archivo con documentos de carácter patrimonial, ya que sus datos deben dar cuenta sobre su ubicación, nombre material etc., que tiene un archivo 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.
La propuesta semifuncional en la parte superior viene acompañada con la secuencia de uso planteada y los procesos que hacen el sistema y el usuario al momento de navegar en el sitio
El proceso comienza en lo que se llamo Consola de Administración en este lugar la interfaz le mostrar al administrador un resumen de todos los contenidos que tiene el archivo, al ver la página verán un recuadro que se llama controversias, está pensado para mostrar un mensaje cuando los usuarios tiene alguna información sobre algún archivo o artículo que está viendo ya sea para aportar con información o cuestionar lo que ya esta publicado.
A través de la navegación por pestañas, crear una nueva página, este proceso es similar al que posee wordpress (idea que se abandona por que no tiene sentido y las publicaciones se crearan a partir de los artefactos que se suban)
La secuencia plantea crear un Fondo para poder seguirla hagan click siguiendo este orden:
Crear página > caja de titulo> caja de descripción > desplegar lista de colecciones > Caja de palabras claves > Crear > Publicar
Luego se crea una colección:
Colección > Colecciones (desplegar lista) > Seleccionar evento > Etiquetas (caja de tiempo) > Crear > Asociar fondos > desplegar lista > seleccionar obras > Jerarquías (escuela) > publicar.
2da Propuesta Wireframe Administrador
Esta propuesta está pensada y como en todos los casos anteriores en hacer de la interfaz un proceso sencillo para organizar información que en la práctica es compleja y se rige en estándares de catalogación de archivos patrimoniales a nivel mundial para los archiveros, la lógica de pensamiento para este caso es inversa a lo que el usuario ve, para el administrador del archivo se pensó de la siguiente manera:
Artefacto > serie > fondo y/o colección en cuanto a la organización y disponibilización del material.
En esta propuesta se exponen dos escenarios de uso reales el primer casoes de: Paz Undurraga, Administradora del Centro de Estudios para el Desarrollo Urbano Contemporáneo, quiere subir material que recientemente un usuario dono. El cual consta de la versión fotográfica de los planos de varios inmuebles ubicados en paseo atkinson en el cerro alegre. Actualmente el archivo cuenta con el registro fotográfico de la fachada de los inmuebles, por lo tanto, tiene que anexar nueva información a la página creada anteriormente y el segundo caso es el de Jaime Reyes, encargado de la administración del archivo José Vial Amstrong, desea disponibilizar una serie con sus expedientes de imagen y texto pertenecientes a la colección Obras.
Los términos usados anteriormente se cambiaron para regirse al estándar, ya que fondos y colecciones en la práctica conceptos paralelos y diferentes, esto quiere decir que para el estándar colecciones no se subordina a fondos; Nicole Dupre al respecto escribe:
La administración de un archivo considera la preservación, resguardo y catalogación del material. Su disponibilización en un sitio web requiere la digitalización de dicho material y el traspaso de su jerarquía de catalogación a estructuras de fácil comprensión y accesibilidad para el desarrollo del sistema y para la navegación del usuario. Dentro de la estructura del sitio se consideran 3 niveles de profundidad, colección y/o fondo, serie, expediente.
Para administrar el sitio la estructura de organización parte desde los artefactos en su versión digital los cuales de podrán subir individualmente o por "lotes", de esta forma este podrá seleccionar un expediente completo, teniendo la posibilidad de asignarle título, descripción, categorías y etiquetas al conjunto de artefactos, como también editar su información individualmente siguiendo esta lógica los administradores deberán seguir los siguientes procedimientos:
a. Seleccionar una carpeta contenedora de artefactos (expediente) desde la respectiva base de datos.
b. Asignar información referente a su procedencia (Colección o fondo, serie, expediente en el cual están ubicados sus originales). Como también una serie de datos como título, autor, descripción, etiquetas, etc. Los cuales corresponderán a un formulario de campos editables de carácter obligatorio.
2. Los artefactos tiene dos nombres, el primero correspondiente a la ubicación física donde se ubica su original el cual consta de un código más su extensión según formato, y el de publicación el por el cual será reconocido por el buscador.''
En esta segunda secuencia de usoel diseño estuvo enfocado a la manera de subir y organizar los artefactos dentro del sitio se elimino la pestaña "crear pagina" de la secuencia anteriory se cambio el nombre "Consola de administración" por Administración solamente que es más adecuado.
3ra Propuesta Wireframe Administrador
Para definir la estructura se crea una lista desordenada del material que posee el archivo patrimonial José Vial Armstrong del la escuela de arquitectura y diseño, PUCV con la información que la institución tiene disponible públicamente. El resultado de este primer orden es un acercamiento a un mapa de navegación
Luego de analizar la primera propuesta se reformula el orden de los contenidos y las jerarquías, se deja claro la función que debe tener un mapa de navegación, el cual debe dar orden a los contenidos y mostrar el modo de como se navegara por ellos; esto facilita la comprensión de quien diseña y programa el sitio, los resultados se ven reflejados en lo eficiente o no que es la interfaz con la estructura propuesta
Una vez corregido se llaga una tercera y ultima propuesta de navegación, el la cual se establece una estructura genérica y semántica, que sigue la siguiente lógica: Fondos contienen Colecciones, Colecciones contienen Categorías y cada Categoría puede estar en más de una Colección y la Colección en más de un Fondo. A modo de facetas. con tres niveles de profundidad.
Consideraciones básicas para el diseño de una interfaz
El diseño de interfaces de usuarios semánticas tiene como desafío disponibilizar grandes cantidades de datos de manera eficaz y eficiente, lo que permite al usuario minimizar los tiempo de búsqueda, captando la atención del usuario, “bien” que en nuestros días es escaso, para esto es fundamental que las relaciones se hagan de manera natural, visualmente sean intuitivas y fáciles de comprender, la interfaz debe permitir que el usuario acceda al conocimiento con comodidad, explorar con facilidad y debe expresar necesidades de información orientadas a problemas y obtener respuestas relevantes.
Premisa de E. Tuftte
- Mostrar los datos y maximizar el uso de-ink (tinta en los datos)
Esto hace referencia a quitar toda la "basura visual" para facilitar la comprensión y relación entre los datos.
- Evitar el Charkjunk
este término hace referencia para evitar los elementos que confundan la comprensión, como demasiados colores y adornos que no sean inherentes a la información que se entrega para así evitar datos que no deberían existir y se generan por relaciones naturales.
- Utilizar elementos multifuncionales
Como implementación de los 2 principios anteriores, Tuftte propone utilizar elementos que posean varias funciones. Un ejemplo son las leyendas que pueden utilizarse también para resaltar características destacables de los datos.
- Small Multiple (múltiplos pequeños)
utilizar gráficos pequeños de igual escala para fomentar las comparaciones ya que inevitablemente al tener el mismo tamaño se hacen comparaciones entre ellos.
- Textos y leyendas
los textos deben ir en la orientación de lectura tradicional y las leyendas se incorporan dentro de los gráficos y no en un recuadro espacial para ellas.
- Utilizar cuidadosamente los colores
resaltar características relevantes y utilizar combinaciones agradables a la vista, se puede buscar inspiración en paisajes placenteros y calmos.
Características de una interfaz usable
- Consistentes
el sistema debe proveer las funcionalidades requeridas, el sistema debe brindar el acceso a las funcionalidades en el contexto correspondiente, y sólo en ese.
- Predecibles
para disminuir el tiempo de aprendizaje del sistema a los usuarios
- Controlables
el sistema debe responder a los requerimientos que el usuario tenga.
- Conocer al usuario
tener claro las capacidades y gustos de las personas que van utilizar el sistema. El entorno que se diseñe debe ser cómodo para que los usuarios puedan trabajar en ellos cómodamente.
