Diego Reyes: Rediseño Web de Travesías

De Casiopea




TítuloRediseño Web de Travesías
Tipo de ProyectoProyecto de Taller
Palabras Clavetravesías, diseño de interfaz
Período2010-2010
CarrerasDiseño Gráfico
Alumno(s)Diego Reyes
ProfesorHerbert Spencer

Introducción

Plantea la idea de hacer un análisis exhaustivo al Sitio de la Escuela de Arquitectura y diseño de la PUCV, en el cuál se encuentran diferentes falencias, ya sean de contenidos o la organización de estos. Reconociendo que en ocasiones el contenido no tiene ubicuidad dentro del sitio lo cuál dificulta la navegación y la forma correcta de informarse. Un ejemplo puntual de esto es la malla curricular de cada carrera, la cuál no se encuentra visible al usuario, debido a que está se ubica en la barra lateral derecha del sitio donde se encuentra mucha información con mucho más realce que esta.

Por otro lado, otro problema es que el sitio no genera un espacio de dialogo entre los usuarios. Hay espacio para esto pero realmente no se le da el uso (es el caso de comentario sobre noticias y artículos). Con esto queda demostrado que hay un problema de fondo en el cuál no existe la retroalimentación. ¿Por qué la comunidad de usuario ligados al sitio no participa? ¿Debería haber un espacio para eso?.

Siguiendo con el análisis del sitio aparecen diversos sub-sitios, como es el caso de la Corporacion Cultural Amereida, Wiki Casiopea y el Sitio de Travesías. Me detengo en este último debido a que es un real espacio para la participación entre la comunidad ligada a la e[ad]. Este sub-sitio permite una mayor participación e interacción entre esta comunidad. Pero ¿por qué hay travesías que no contienen los datos suficientes? o ¿por qué no existen algunas travesías?

El propósito de esta investigación es lograr rediseñar el sitio de Travesías y además lograr que este sea una plataforma colaborativa y de gran participación entre los alumnos, ex-almunos y profesores. Aportando, mediante a la creación de un usuario, diversos datos técnicos y material gráfico para completar datos inconclusos. Y así hacer que el sitio sea una gran base de información referente a las Travesías realizadas por los alumnos y profesores de la e[ad].

Propuesta 1

Se busca reorganizar contenidos, haciendo un nuevo mapa de navegación para el sitio de la escuela. Encontrando falencias entre los contenidos de esta. Como es el caso de Carreras, en donde el acceder a la malla curricular de las diferentes carreras, arquitectura, diseño de objetos y diseño gráfico no se encuentra fácilmente. Esta se encuentra en la barra lateral derecha, lugar donde no toma real importancia.

Tras revisar las estadísticas de la navegación del sitio, se ve que algunas secciones no son visitadas o tienen muy poca interacción con el usuario. Para cambiar esto, una propuesta fue hacer que existiera una base de datos de la biblioteca, en la cuál uno pudiese revisar la disponibilidad de libros desde su hogar y a la vez revisar si tiene alguna deuda con esta.

Otra falencia que se encontró fue el sitio de las Travesías, el cuál por falta de datos está inconcluso, ya sean datos de travesías de de varios años atrás e incluso actuales. Ademas la engorrosa navegación por tener de imagen de fondo google maps, el cual molesta al hacer scroll.

Mapa de Navegación del sitio de la escuela

Mapa navegacion sitioescuela.jpg


Propuesta 2

Rediseño Web de Travesías

Análisis detallado Sitio Travesía

Home travesias.png


Home googlemaps.png

Lo primero que uno nota al navegar, es lo dificultoso que suele ser google maps como imagen de fondo del sitio, me refiero a que uno cuando hace scroll el mapa disminuye y aumenta de tamaño cuando lo que deberia bajar es el contenido.

Home menu inferior.png

Se destaca la barra de menú inferior, la cuál debería encontrarse bajo el logo del sitio como menú principal, destacando “Colabora”, “Nueva Travesía” y “Conectarse”. Esto permitiría que hubiese una mayor participación y colaboración por parte de alumnos como exalmunos para completar datos de travesías inconclusas. Este punto es el más relevante a mi parecer, con esto se podría lograr tener una base de datos que permitan completar cada descripción de travesía

Distribucion travesias.png

Otro punto que produce problemas en la navegación es cuando se abre un año y aparecen las travesías, sucede lo mismo que en el primer ejemplo de la página de inicio. El scroll al momento de ir en busca de las otras travesías del año hace que los mapas se alejen o acerquen.


Proyecto travesias.png

Proyecto trav googlemaps.png


Una forma de que el scroll no entorpezca la navegación sea que google maps deje de ser imagen de fondo del sitio y que quede enmarcado en un recuadro donde permita su navegación facil a google maps como el sitio mismo

Imagenes: Proyecto de Bitácora Colectiva (2007-2008) http://travesias.ead.pucv.cl/proyecto-travesias/

Proyecto trav enfasis.png

Proyecto trav formulario.png


De este sitio, resalto esta imagen, en la cuál muestra donde uno puede colaborar con el sitio, a diferencia del sitio actual esto no está a la vista. Esta se encuentra en el menú inferior. 2) Al clickear en la imagen se abre un formulario, en este uno se registra y crea un usuario para poder agregar información al sitio.


Imagenes: Proyecto de Bitácora Colectiva (2007-2008) http://travesias.ead.pucv.cl/proyecto-travesias/


Distribucion travesias.png

Distribucion travesias2.png


La forma en que se muestran las travesías en el sitio actual se entorpece con el problema de los mapas, a diferencia del “Primer Proyecto de las Travesías de Amereida” en la cuál el acceso a estas es clara y menos engorrosa


Imagenes: Primer Proyecto de las Travesías de Amereida http://proyectos.ead.pucv.cl/travesias-v1/

Propuestas Mapa de Navegación de Contenidos

Mapa travesia.jpg

Esta es la primera proposición de Mapa de Navegación Sitio de Travesías



Mapa naveg 2.jpg

Segunda proposición de Mapa de Navegación Sitio de Travesías

Propuesta 3

Índice de Contenidos Sitio de Travesía

  1. Colabora
    1. ¿Cómo colaborar?
  2. Log In
    1. User
      1. Nueva Travesía
      2. Agregar Datos
  3. Travesías
    1. Travesía por años
      1. Travesía
  4. Acerca de Travesías
  5. Colofón


Nueva Propuesta Mapa de Navegación

Mapa navegacion travesias dreyes.jpg

Wireframes

Página de inicio Sitio de Travesías
Página "Colabora", aquí se explica al usuario como cooperar con el sitio
Página "Log in" Aquí el Usuario crea su cuenta al sitio para poder colaborar
Página de "TRAVESÍAS", se despliegan los años en los cuales se han realizados estas, luego al seleccionar el año aparecen las travesías correspondientes
Tras seleccionar la travesía, aparece esta nueva página, la cuál tiene el contenido, Descripción, Fotos y Ubicación


Propuesta 4

Se reorganizan los contenidos, se agrega uno mas, que es el link al sitio de la escuela. Cambian en el orden del menú principal, resaltando lo mas importante del sitio, las Travesías

Nuevo Mapa de Navegación

Travesias mapanavegacion 001.jpg

Wireframes

Grilla utilizada para la creación de Wireframes, basada en 8 columnas



Mapa de divs

Web travesias mapa de divs .jpg


Interfaz

Home
Interfaz que corresponde al acto de seleccionar un año y una travesía
Tras la selección de la travesía aparece la descripción de esta
Explica como aportar al sitio de Travesías, linkeando directamente el formulario para tener un usuario al sitio
Se despliega el primer paso para colaborar, el formulario para hacerse un usuario en el sitio, llenando los campos obligatorios
Al tener creado el usuario da paso para agregar una nueva travesía o modificar una existente

Personas y Escenarios

Estas encuestas son metodologías que se utilizan frecuentes para poder llegar a acercarse a los usuarios que potencialmente utilicen el sitio diseñado y además si el diseño de este funciona de una forma correcta y práctica. Para esto se crearon diferentes Personas y Escenarios que se aproximen a estos usuarios. Estos usuarios se han pensado en personas que hallan sido ex-alumnos, alumnos y profesores que han participado en alguna travesía. Y por otra parte personas que de una u otra forma han llegado al contenido el cuál a sido proporcionado por algún buscador o por artículos leídos con relación a las travesías.

Web trav personas escenarios caso1.jpg

Web trav personas escenarios caso2.jpg

Web trav personas escenarios caso3.jpg


Protocolo para medir el diseño mediante usuarios

TAREA 1:

El usuario debe ser capaz de encontrar las travesías que desee buscar, ya sea mediante el buscador o la búsqueda por años de esta. Como también su ubicación en el mapa y a la vez sus fotos.

¿Cómo se medirá?: Se pondrá el inicio del Sitio de Travesías y tendrá que buscar ciertos aspectos de las travesías en las cuáles ha participado, como por ejemplo, buscar el material fotográfico de esta. Junto a esto se verá cuanto se demora en encontrar los datos que busca


TAREA 2:

El usuario debe ser capaz de crear un usuario para poder colaborar con datos fidedignos de las travesías a las cuales haya asistido.

¿Cómo se medirá? se le pedirá al usuario que logre crear un usuario y a la vez crear una travesía nueva agregando datos de esta


TAREA 3:

El usuario debe iniciar sesión y a la vez debe crear o modificar datos de una travesía

¿Cómo se medirá? El usuario al encontrarse en el inicio del sitio deberá encontrar el lugar donde iniciar sesion para la posterior entrega de información al sitio. Midiendo la accesibilidad del sitio de Travesías


Fotos de pruebas de usuario

PU MG 5073.JPG PU MG 5074.JPG PU MG 5077.JPG

Observaciones Generales tras Prueba de Usuarios

Tras las pruebas a los diferentes usuarios se ve que la

TAREA 1 es abordable para todos los usuarios encuestados, cada uno de estos no tuvo problema para llegar a los contenidos. Un punto a mejorar de esta parte del sitio es el mapa, para hacer mas ubicable cada travesía.

TAREA 2 de crearse un usuario, hubieron ciertas diferencias entre cada persona que se encuenstó, unas por un lado no tuvieron problemas en ir desde el menú principal al "colabora" en donde se sugiere crear un usuario, en donde se linkea a "ingresa" para la creación de un usuario registrado en el sitio. Como contraparte hubo personas que se les hizo un poco engorroso encontrar el link para poder colaborar. Siendo esto un punto a mejorar, lo cuál hará modificar el menú principal del sitio. Como primera medida se pondrá en el menú "Acerca del sitio" porque no se sabe en que contexto se encuentra el sitio, aquí se explicará que es TRAVESIAS y como colaborar. Como también queda en duda la continuidad del HOME como una galería de imágenes aleatorias Luego vendría el contenido de este sitio, el cual corresponde a todo material gráfico y de contenido del sitio, el cuál estará en el menú nombrado como TRAVESÍAS. Tras agregar "ACERCA DEL SITIO" y poner en contexto a este, es posible eliminar dos puntos del menú principal: "colabora" y "ingresa". El menú "ingresa" se cambiará su nombre a "iniciar sesión" el cuál estará de menú auxiliar en el lado superior derecho .

TAREA 3 Aquí no hubo dificultades para los usuarios en agregar datos a las diferentes travesías


INTERFAZ PROPUESTO TRAS PRUEBA A USUARIOS

Home, con el menú principal modificado
"Acerca de Travesías, explíca y da contexto al sitio
"Travesias" muestra el contenido del sitio, la idea principal de esta sección es que cuando el usuario pase sobre el año aparezcan las travesías para hacer una búsqueda mas rápida
Luego al seleccionar una travesía, se despliega la descripción de esta dejando los años para su posterior búsqueda de otra travesía
Explica de forma mas detallada como colaborar, incluyendo el link para poder crear un usuario
Campos obligatorios a ingresar para la posterior creación de un usuario
Tras la creación de usuario uno modifica o agrega nuevos datos a las travesías a las cuál ha asistido

Propuesta Final

Mapa de Navegación

Interfaz

HOME: Da la bienvenida al sitio de Travesías, en cual se despliega de inmediatamente lo que proviene del primer elemento del menú principal “Acerca de Travesías”. El cuál nos dará a conocer cuál es el sentido del sitio, nos pondrá en contexto y además, y lo mas importante, nos invita formar parte de esta comunidad para poder aportar con la mayor cantidad de información al sitio
NAVEGACIÓN: Uno de los puntos mas importantes del sitio es la navegación de este mediante las diversas travesías. El usuario al estar inmerzo en este sitio, al seleccionar “TRAVESÍAS” tiene la posibilidad iniciar su búsqueda de dos formas, una directa en el mapa y la otra es la búsqueda por año. En esta última trata sobre que el usuario al pasar por sobre el año se despliegan las travesías correspondientes al año, para luego seleccionar la travesía que desee
INFORMACIÓN: Tras seleccionar la travesía, por el lado izquierdo la barra de años se mantiene para una búsqueda directa en el caso de cambiar opción. Bajo esta barra se encuentra la “ficha base” de cada travesía. Además tenemos al sector superior derecho una galeria de fotos las cuales fueron contribuidas por el resto de la comunidad
GALERIA: Esta galería tiene la cualidad de ver las fotos en alta resolución, además de poder descargas estas imágenes
USUARIO: En el costado superior derecho se encuentra el link que te permitirá iniciar sesion en el sitio si tienes un usuario creado. En el caso contrario existe al costado derecho de este el enlace para crear un usuario
USUARIO: Para crear el usuario se deben llenar diferentes campos obligatorios. Además de seleccionar las travesías a las cuál uno ha ido. Lo que permitirá posteriormente editarlas, agregar mas datos o fotos
USUARIO: Al tener tu usuario creado podras ver tu ficha, en la cual saldran los datos personales y tus travesías. Al lado de cada travesía existe la opción de editarlas
EDICIÓN: Al seleccionar la travesía a editar, tu podrás realizar los cambio que sean en el texto, para luego guardarlos. Tras guardar tus cambios aparecerá la opción de agregar mas fotos a la travesía
AGREGAR FOTOS: Tendrás la opción de agregar las fotos que estimes conveniente a la travesía, posteriormente al guardar estos cambios las fotos quedan inmediatamente dentro del album de la travesía