Diseño Sitio EAD
| Título | Diseño e-ad web |
|---|---|
| Tipo de Proyecto | Proyecto de Titulación |
| Palabras Clave | Sitio web, diseño gráfico |
| Período | 2014-2014 |
| Del Curso | Taller de Diseño Gráfico Titulación 2, |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Juan Antonio Godoy, Idar González, Gabriela Pérez, Catalina Reyes |
| Profesor | Herbert Spencer |
Introducción
La importancia de un diseño unificador dentro de una organización
El proyecto en sí, plantea la necesidad de unificar el diseño, configurar la forma y contenidos del sitio de la escuela. Existe una necesidad imperante, de rediseñar, partiendo con la idea de que dicho sitio debe reinventarse, reestructurase acorde a los requerimientos de contenidos y usabilidad.
Se deben revisar y/o replantear el siguiente listado de parámetros que miden la eficiencia del sitio:
- General: se refiere a la revisión del cumplimiento desde los contenidos, estructuras, diseño, actualizaciones hasta los objetivos principales del sitio.
- Identidad e Información: verificar que el sitio exponga la identidad de la organización y que exista una coherencia en torno a ello a través de la información que presenta.
- Lenguaje y redacción: preocuparse de un lenguaje claro y definido según el tipo de usuario.
- Rotulado: se refiere a establecer un orden y correcto etiquetado de las secciones que componen el contenido del sitio. De forma que pueda ser entendida y permita ser encontrada la información allí expuesta.
- Estructura y navegación: se refiere a mantener un orden jerárquico, de hipervínculos y un control de la navegación por el sitio.
- Layout de la página: se refiere a la estructuración de la página en relación a jerarquías establecidas para mostrar diferentes objetos, la interfaz y longitud de la página en sus contenidos.
- Búsqueda: sobre la accesibilidad y obtención de resultados.
- Elementos multimedia: sobre el uso de imágenes o recursos audiovisuales o canales para presentar la información de tipo dinámico.
- Ayuda: mantener al usuario informado frente a dudas o información especifíca, ofrece ayuda contextual en tareas complejas (presencia de sección FAQs).
- Accesibilidad: preocuparse de la legibilidad y acceso a los contenidos.
- Control y retroalimentación: sobre la navegación del usuario dentro del sitio, pregunta y respuestas del sistema y pocas restricciones de uso dentro del sitio.
Fuente: Guía de evaluación heurística aplicable a un sitio web
Se trabaja entonces, basándose en el desarrollo de una experiencia gráfica o un entorno digital, que aplica herramientas base para la construcción de los distintos sitios que componen lo que es la organización, en nuestro caso la Escuela de Arquitectura y Diseño e[ad]. Dichas bases o esquemas fundamentales se refieren a establecer un modo y diseño en el organizar, presentar y concebir a la organización, tratando de observarla y plasmarla según su identidad, permitir una coherencia gráfica dentro del lenguaje visual, que cada sitio debiese evidenciar.
Acerca de Pyxis Framework
En general, con el término framework, nos estamos refiriendo a una estructura digital definida por componentes personalizables e intercambiables para el desarrollo de una aplicación o sitio web. En otras palabras, un framework se puede considerar como una aplicación genérica incompleta y configurable a la que podemos ir añadiéndole constantemente piezas para construir una aplicación concreta.
Los objetivos principales que persigue un framework son: acelerar el proceso de desarrollo de un sitio, reutilizar código ya existente y promover buenas prácticas de desarrollo con el uso de patrones o esquemas de diseño.
Nuestro trabajo en este punto, ha planteado, el desarrollo de un framework que establezca normas de diseño web aplicables a los sitios a rediseñar de la escuela.
Documentación de Pyxis Framework
Planificación
Carta Gantt
Con el fin de organizar el trabajo grupal se establecen las distintas tareas y el plazo de cumplimiento que cada una requiere. La carta gantt nos permite definir una metodología de avance en el proyecto y el cumplimiento de metas u objetivos en cada uno de ellos.
Objetivos
- Definir un conjunto de patrones comunes para el desarrollo de interfaces compatibles a la organización (escuela y sus sitios)
- Establecer una medida gráfica, que presente la identidad y cualidades de la organización.
- Implementar un framework que se preocupe tanto del diseño como la instauración de un lenguaje definido, fijando las bases para la creación de los sitios de la escuela.
Análisis
Estadísticas: el sitio en Google Analytics
Google Analytics es un servicio de Google, que permite medir el estado de un sitio web, proporcionando información respecto a sobre cómo los visitantes utilizan el sitio, cómo han llegado a él y qué se puede hacer para que sigan visitándolo.
Analytics propone el uso de herramientas de análisis, que facilitan el acceso a datos de interés para quien esta a cargo del sitio. De manera que se obtienen informes donde es posible medir y entender cómo interactúan los usuarios dentro del sitio.
A partir de esta plataforma podemos observar en relación a las acciones dentro del sitio de la escuela lo siguiente:
- cuántas personas se encuentran en el sitio en un momento dado.
- ubicaciones geográficas y fuentes de tráfico desde donde se está visitando el sitio.
- las páginas y eventos con los que interactúan los usuarios.
- las conversiones de objetivo que se han producido.
Toda esta información, es presentada a través de informes, siendo dos para nuestro caso los que revelan mejores datos: Visualización de Flujo de Tráfico y Analítica de página el primero permite analizar las rutas del visitante en el sitio, en tanto que el segundo, ayuda a evaluar visualmente cómo interactúan los usuarios con las distintas páginas del sitio. Una forma de visualizar este contenido y datos es integrando diversos gráficos que facilitan el entendimiento de la información.
Analítica de página
Visión general del sitio
Dentro de la visión general del sitio podemos encontrar datos de tipo demográfico, modalidad por donde surge la navegación, esto es, navegador utilizado, sistema operativo, tipo de dispositivo (pc o móvil), proveedor de internet (redes). Tal información puede sernos de gran ayuda a la hora de pensar en cómo esta siendo visualizado nuestro sitio; la ampliación del campo de dispositivos, requiere siempre pensar en una adaptación o más bien respuesta del sitio en ellos.
Si se revisan los gráficos, el sitio de la escuela tiene un mayor acceso a través de pc que por medios móviles. Esta baja en los dispositivos móviles puede deberse a la poca visibilidad de los contenidos y adaptación (responsive) del sitio para resoluciones menores como celulares. Las vías o tráfico principal de acceso a la página, en el momento de revisión, es a través de redes sociales (facebook), donde tal vez fue compartido algún link asociado al sitio.
Las principales páginas activas, por donde se mueven los usuarios, en este caso, varían en contenido, van desde artículos de noticias, consulta a ciertas secciones del menú, información académica o docente a datos más específicos de proyectos.
- Visión general de público - Google Analytics (2).png
Datos demográficos de las visitas
- Visión general de público - Google Analytics (4).png
Datos especifícos por ciudad
- Visión general de público - Google Analytics (5).png
Datos por navegador utilizado
- Visión general de público - Google Analytics (6).png
Datos por sistema operativo de la visita
Hay una mayor concentración de visitantes al sitio, del continente americano; siendo Chile, México y Argentina los principales usuarios en el último tiempo. La naturaleza de público a partir de distintas ubicaciones tiene una riqueza notable, por la apertura y conocimiento de la escuela a partir del sitio. Situación que permite la llegada de estudiantes de intercambio que provienen de distintas localidades del mundo. Gran parte de estos usuarios son de habla hispana, en menor grado visitantes norteamericanos; lo que hace pensar en la posibilidad de implantar mejores accesos a los contenidos dependiendo del usuario que lo mire. Encontrar contenidos en modo bilingüe, no debiese ser un problema o limitante para los usuarios.
- Visión general de público - Google Analytics (7).png
Información del proveedor de internet
- Visión general de público - Google Analytics (9).png
Vista de visitas a través de dispositivos móviles
- Visión general de público - Google Analytics (8).png
Información del sistema operativo utilizado a través de móviles
- Visión general de público - Google Analytics (10).png
Información resoluciones de pantalla
Contenido y eventos
Los usuarios recorren diferentes espacios del sitio, obviamente en primer lugar lo más frecuentado es la portada del sitio, pues es la puerta de entrada a los contenidos, le sigue información acerca de las carreras, la temática sobre qué es la observación, noticias,cuerpo docente e información en la sección postgrados.
Por un lado se pueden reconocer patrones de usuarios tipo, a través de sus búsquedas; se puede intuir que el sitio de la escuela, es visitado por personas internas a ella (alumnos, docentes), así como también alumnos novatos y posibles estudiantes que quieren realizar un intercambio.
Títulos páginas y visitantes activos
- Analytics e-ad- Escuela de Arquitectura y Diseño Desglose de contenido 20131101-20131130-01.png
Desglose de contenidos visitados
Gráfico para mostrar eventos diarios en el sitio
Gráfico eventos semanales en sitio
Gráfico eventos mensuales
Un rebote se produce cuando un visitante abandona el sitio después de haber visto una sola página web, en unos pocos segundos. Muchos sistemas de estadística fijan el tiempo para que una visita se considere rebote en 30 segundos: un visitante se define como desinteresado si abandona la página antes de 30 segundos. Un bajo porcentaje de abandono indica una buena organización de los contenidos y un aspecto gráfico correcto, que invita al visitante a continuar la exploración del sitio web.
En el caso del sitio escuela, un usuario permanece un tiempo revisando una página, no mas de 2 minutos. Tiene un gran porcentaje de rebote promedio (cerca del 71,2%) y salidas del sitio (53,5%); lo que hace presumir que no halló lo que buscaba o llegó por error al sitio, entre otras variables.
Ubicaciones del público
Las regiones que componen el mapa de visitantes del sitio, se dan mayormente en el espectro de habla hispana, países cercanos a Chile en su mayoría. El número de nuevos visitantes es mayor que los visitantes recurrentes, lo que aporta la idea de que el sitio es observado constantemente por nuevos usuarios. En ese sentido, el sitio gana espacio disponibilizando los contenidos a público nuevo.
- Analytics e-ad- Ubicación 730 (1)-01.png
Desglose datos visitantes de Estados Unidos
- Analytics e-ad- Ubicación1 (3)-01.png
Mapa con datos de ubicación y gráfica
- Analytics e-ad- Ubicación (2)-01.png
Ubicaciones a nivel nacional
- Analytics e-ad- Visión general de público0-01.png
Visión general de público visitante sitio
Visualización flujo de tráfico página
Fuentes de tráfico del sitio
Se refiere a el tráfico de los usuarios por el sitio, desde la ubicación del usuario (nodos), conexiones y sus interacciones en las páginas. Tal gráfica proporciona el porcentaje de abandono y estadía en las páginas, fijando la ruta que recorre el usuario y entrega la cantidad de visitantes en tales secciones.
Gráfico por estados de Norteamérica visitantes
Detalle estados norteamericanos
- Analytics e-ad- Escuela de Arquitectura y Diseño Tiempos de página de velocidad del sitio 2666140301-20140320-01.png
Velocidad de carga de páginas visitadas
- Analytics e-ad- Visión general de velo0 (1)-01.png
Visión general velocidad del sitio
- Analytics e-ad- Visión general de velocidad del sitio df (1)-01.png
Detalle tiempos de carga por países.
Además es posible visualizar el estado de carga de la página, respecto a su velocidad dependiendo el país, región o ciudad donde se encuentre el navegante.
Arquitectura de la información
Un mapa de navegación es la representación gráfica de la organización de la información de una estructura web. Expresa todas las relaciones de jerarquía y secuencia y permite elaborar escenarios de comportamiento de los usuarios.
El principal valor de un mapa de navegación es que permite anticipar errores de organización de la información, de modo de corregirlos cuando aún no se ha invertido tiempo y dinero en la construcción del objeto de diseño.
Organización actual de contenidos
En conjunto, se decide analizar la estructura de contenidos actual del sitio de la escuela. A partir de esta observación se tienen discrepancias respecto a orden y nombres asignados a algunas secciones. Se tiene piensa a nivel de navegación y profundidad de la información. Se declaran los siguientes posibles cambios en el mapa:
- Cambio en el rotulado de Prensa a Normas gráficas.
- Traslado del tópico Admisión presente en sección Escuela a sección Carreras.
- Cambio de la página Biblioteca (sistema de bibliotecas pucv) presente en sección Escuela a sección Servicios.
- Replanteamiento acerca del contenido disponible en sección Catolicidad.
- Integración en una sola sección de Carreras y Postgrados
- Cambio en rotulado que nombra a carreras y postgrados.
- Diseño de menú de navegación paralelo al principal, con links de acceso rápido a contenidos relevantes para usuarios de tipo experto (cuerpo escuela)
- Modificar la forma y estructura de contenidos expuesta en sección Movilidad estudiantil. Tratar de diferenciar entre los que ingresan (extranjeros) y los que salen (alumnos e[ad]).
- Diseñar una plantilla tipo para mostrar los contenidos de la sección Travesías. Adaptar la modalidad de mapa al diseño que se defina en el sitio.
- Definir las jerarquías internas dentro de la navegación, para cada sección del sitio.
Propuesta de organización de contenidos
Los cambios efectuados respecto al mapa anterior, se componen de un ajuste de orden en ciertas secciones, traslados de objetos o páginas de una sección a otra, re-estructuración de los contenidos expuestos, entre otras cosas. Lo graficado a continuación tiene los cambios (marcado con color rojo) abarcados inicialmente en la propuesta.
- La barra de navegación rápida contendrá los accesos rápidos a: Calendario, Wiki Casiopea, Bolsa de Trabajo, Biblioteca y Archivo Histórico.
- Se ubica la sección Admisión dentro del menú principal. La información contenida allí es dividida acorde al usuario tipo: alumno pregrado y alumno postgrado.
- Se fusionan las secciones Carreras y Postgrados en una sola, que recibe ambos nombres. Interiormente los contenidos son presentados en un orden desde los planes de estudio de las carreras a los programas de magíster.
- Dentro de la sección Estudiantes es cuestionada la importancia y presencia de Cuerpo Coordinador por un tema de no existencia de tal grupo actualmente.
- En el home del sitio se decide colocar: Noticias, Agenda e Información secundaria que corresponde al aside con materias de publicaciones recientes en redes sociales, información de docencia y datos de interés.
_e-ad-.png)
Reunión y evaluación de propuesta
Una vez desarrollada la propuesta de contenidos del nuevo mapa, existe la necesidad de establecer cierta retroalimentación de estas decisiones, con personas entendidas en la materia, que dentro de la escuela y en el espacio digital sean entes de transmisión de la información generada dentro de la escuela. Por ello, se acuerda una reunión con Francesca Cambiaso Oesterle, periodista pucv y Oscar Andrade, encargado de difusión en la escuela.
Junto a ellos, es posible definir ciertos parámetros respecto a lo que se tiene actualmente y lo que se necesita en la navegación por el sitio.
Calendario o Agenda
Se requiere una actualización y mejoras en la visibilidad y contenidos presentes en la agenda o calendario. Lo que se ofrece actualmente, no separa o agrupa el contenido en datos por su tipología, que serian docente (inscripciones, matrículas, fechas, etc) y actividades (charlas, exposiciones, eventos culturales, etc); tal división solucionaría el problema de dar mayor espacio a la información dependiendo del carácter o categoría en que se dispongan. En el fondo, falta precisar una imagen mas despejada de la información que se entrega al alumno.
El implementar esta materia, potenciaría la organización y difusión online de información (actualmente disponible a través de afiches y anotaciones en pizarrones y algunas publicaciones en Google Calendar), creando un canal abierto y actualizado de comunicación, que amplia el rango de alumnos al tanto de lo que sucede en la escuela.
Jerarquías en contenidos laterales (aside)
La información presentada en el sitio, en los espacios laterales, provee de links de acceso directo a noticias, archivos, eventos, publicaciones, entre otras cosas. Dichos contenidos adicionales a lo que se muestra en el espacio central del home, se replican interiormente en las páginas, sin mayor jerarquía que algo dispuesto al azar o bien por temática de lo que se esta leyendo. La estructura debiese contener un orden y mantenerse dinámico en el sentido de que los contenidos sean constantemente actualizados u ordenados por su fecha, para orientar en cierto modo al lector/usuario que visita el sitio.
Canales de información
A través del sitio principal de la escuela, poder establecer puentes de comunicación entre el profesorado y alumnado. De manera que se construya una interacción más plena dentro del sitio, donde los contenidos tengan mayor recepción y/o conocimiento por todos. Que lo que se quiere comunicar no quede sólo en las redes sociales, como sucede comúnmente, sino que el sitio de las instancias de comunicar o inducir aquellas conexiones.
El calendario o agenda junto a la sección La observación de la semana propician esta manera de acceder a contenidos compartidos ya sea por el estudiante o docente.
Sección Movilidad estudiantil
Dentro de lo que es contenidos y presentación, la página interior, creada para dar cuenta de los requerimientos y modalidades de intercambio, tanto para quien pertenece a la escuela y desea efectuar estudios en el extranjero, como para quien viene del exterior y desea cursar parte del programa de estudios en la escuela; no tiene una diferenciación estructuralmente ni una correcta etiquetación para nombrar o destacar los datos. La reformulación de esta sección y sus datos, debe preocuparse de facilitar el acceso a los contenidos dirigidos a ambos usuarios (interno - externo).
Etiquetas para artículos
Una etiqueta o tag es una palabra clave asignada a un dato o información dentro de un sitio, guardada en un repositorio. Las etiquetas son en consecuencia un tipo de metadato, pues proporcionan información que describe el dato y que facilita su búsqueda.
Resulta necesario por un tema de orden y semántica dentro del sitio, fijar categorías de grupos de etiquetas, para asignar a las distintas publicaciones que se van desarrollando. De esta forma, la navegación y sistema de búsquedas al interior del sitio resulta más eficaz y claro.
División en los programas de estudio
La barra de navegación actual divide los programas de pregrado (carreras de arquitectura y diseño) y postgrado (magísters) en dos secciones. La idea es tratar de agruparlos bajo un rotulado que los aúne; por el tipo de información desplegada que ambos contemplan. Se propone pasar de Carreras y Postgrado a Programas de estudio por ser un nombre que abarca las dos temáticas.
Página Travesías
El sitio de travesías funciona de manera alterna al sitio escuela. Se presenta como un mapa extendido (recurso de Google Maps) sobre el cual se van anclando, mediante iconografías, las distintas travesías realizadas y datos asociados a ellas. La idea es incorporar un layout tipo, para presentar los contenidos allí expuestos.
Modificaciones y nueva propuesta
En base al feedback obtenido dentro de la exposición de la propuesta de navegación, y además de las observaciones y consejos allí surgidos, se presenta una nueva arquitectura de los contenidos.
Testeo de contenidos
Aplicación de técnicas participativas: Card-Sorting
La técnica de card sorting se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio.
De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a su modelo mental.
Se debe buscar participantes para realizar el testeo. Hay que tener en cuenta que éstos deben tener características y perfiles acordes con el público objetivo del sitio.
Aplicación con usuarios tipo
Al realizar la prueba, se establecen 3 usuarios tipo:
- Estudiante : Persona realizando estudios de pregrado dentro de la Escuela. Se identifica a sí mismo como parte del cuerpo escuelero.
- Agente interno : Persona administrativa o académica que se involucra con el sitio a modo de colaborador
- Agente externo : Persona no perteneciente ni a la administración, cuerpo académico o escuelero, que accede al sitio de manera esporádica.
A partir de estos modelos, se reúnen 5 participantes para el card-sorting.
Registro y resultados
Los cinco participantes de la actividad se dividen en 3 estudiantes, 1 agente interno y 1 agente externo.
Participante del card-sorting
Participante del card-sorting
Participante del card-sorting
La instrucción dada a los participantes es situar en una primera instancia las categorías (de color rosado) en el orden que ellos estimen convenientes teniendo en cuenta que se modificará el sitio oficial de la Escuela de Arquitectura y Diseño; a partir de ésto, se les indica que deben colocar los diferentes elementos (de color amarillo) bajo las categorías, armando de esta forma el menú principal de la barra de navegación. Se les señala que pueden agregar o quitar categorías y elementos si lo consideran pertinente.
Resultado de card-sorting
Resultado de card-sorting
Resultado de card-sorting
Resultado de card-sorting
Conclusiones a partir de los resultados
La Categoría 'Admisión', tiende a quedarse sin elementos, pero los participantes explicitan que la consideran como necesaria dentro del sitio para dirigirse a los postulantes.
El elemento 'Servicios' tiende a causar confusión en el card-sorting, lo consideran como parte de la categoría 'Escuela'.
Un elemento que pareció quedarse fuera de las categorías fue 'Catolicidad', con el que los participantes tuvieron conflicto.
En dos casos se incorporó una categoría al menú del sitio. En el primer caso se añade 'Investigación', otorgándole mayor protagonismo al desarrollo de proyectos. En el segundo, se incorpora 'Cuerpo Docente', ya que el participante considera que el profesorado debería estar al mismo nivel de importancia que los estudiantes.
Cambios en arquitectura de información
Las categorías principales mantienen sus rotulados pero cambia el orden. Amereida se decide situar al final del menú pensando en que agentes internos visitarían el sitio en búsqueda de información específica.
Se decide retirar 'Catolicidad' del menú, y en cambio, incluirla dentro de la descripción de 'Escuela' (portada).
Se simplifica la categoría 'Admisión', quitando las especificaciones para estudiantes de posgrado (las cuales pasan a formar parte de los magíster en sí).
