Consuelo Miranda: Rediseño Carreras

De Casiopea
La versión para imprimir ya no se admite y puede contener errores de representación. Actualiza los marcadores del navegador y utiliza en su lugar la función de impresión predeterminada del navegador.

carpeta de documentación

documentación pdf

Archivo:Anexo1---mapa-sitio-actual.pdf

anexo 2


introducción

Como punto de partida del taller analizamos la distribución de los contenidos dentro del sitio. Para esto se desarrolla un mapa de navegación del sitio, el cual es llevado a cabo para tener una noción del tamaño del sitio en su totalidad y de la estructuración de sus contenidos. Mediante el desarrollo de este ejercicio recorremos todos los sitios de la escuela, lo que nos permite desarrollar un diagnóstico de acuerdo a la jerarquía de dichos contenidos dentro del sitio y su encontrabilidad en la navegación.

mapa navegación sitio escuela sección escuela

mapa navegación sitio escuela sección amereida

mapa navegación sitio escuela sección alumnos

mapa navegación sitio escuela sección carreras

mapa navegación sitio escuela sección postgrados

mapa navegación sitio escuela sección mundo

El mapa de navegación es una representación visual de los contenidos de un sitio y su profundidad de capas en que este se ve dispuesto y es por esto que los mapas de navegación siguen una disposición horizontal.


Ésta representación solo toma en cuenta la información y su distribución abstracta dentro del sitio y no involucra a la interfaz en que esta se ve dispuesta, por lo tanto para poder desarrollar un análisis completo de la realidad del sitio debemos desarrollar un estudio de su realidad visual.

observación inicial

Llevando a cabo este ejercicio llegamos a la conclusión de que los puntos con mayores problemas en cuanto a su organización corresponde al área de las carreras, donde los contenidos se encuentran ocultos a primera vista. Esto se produce por la estructura visual planteada por el sitio, donde la posición de los elementos importantes dentro de las secciones se encuentran confundidos con aquellas que son de segunda categoría. En otras palabras, existe un problema de jerarquía visual de los contenidos.


-

Estudio previo

audiencia

En primer lugar debemos considerar los datos arrojados por el análisis realizado a nuestro sitio http://www.ead.pucv.cl/ por google analytics. Entre los resultados arrojados nos encontramos con los siguientes:

  • 2:31 min....El tiempo de permanencia promedio
  • 50,5%.......Nuevas visitas
  • 2.47..........Páginas vistas por visita
  • 63,85%.....Porcentaje de rebote

El tiempo de permanencia es alto para un sitio web, lo que nos indica que el usuario lee dentro del sitio y busca contenidos.

El porcentaje de rebote nos indica que los usuarios se informan del contenido del sitio a través de la portada. Profundizando el número de páginas vistas por visita nos encontramos con los siguientes datos:

El ranking de páginas más visitadas del sitio es el siguiente:

  1. /http://www.ead.pucv.cl.............................. 27,86%
  2. /carreras/arquitectura/................................... 2,07%
  3. /escuela/cuerpo-docente/.............................. 1,95%
  4. /2010/exposicion-y-examenes-talleres-t1-....... 1,60%
  5. /carreras/diseno/diseno-grafico/..................... 1,42%

De acuerdo con los resultados del ranking, podemos asumir que el usuario promedio de este sitio busca información referente a las carreras que se imparten en la escuela, y siendo el 50% de las visitas nuevas, esto quiere decir que los usuarios tienen un propósito en la navegación del sitio.

Además de esto, profundizamos en el método utilizado por los usuarios para ingresar al sitio, Google Analytics nos muestra al respecto los siguientes datos:

  • 39,42% motores de búsqueda
  • 37,24% sitios web de referencia
  • 23,26% tráfico directo

De esto rescatamos el alto índice de tráfico directo, ya que esto significa que gran cantidad de los usuarios tiene conocimiento del sitio.

Por lo tanto ya sabemos lo siguiente de nuestro usuario:

  • De acuerdo al tiempo de permanencia es un usuario lector.
  • De acuerdo con la cantidad de visitas nuevas y habituales, y el número de páginas visitadas por ellos, ingresa con un propósito.
  • De acuerdo al ranking busca informarse, además de las noticias de la portada, de las carreras y los profesores que las imparten.
  • De acuerdo a la fuente de tráfico, es en gran parte un usuario familiarizado con el sitio.

jerarquías visuales

interfaz actual

A continuación del estudio de audiencia o usuario comprobamos la situación visual a la que nos enfrentamos. Identificamos el orden jerárquico de los contenidos de acuerdo con la disposición en columnas del sitio.

Como punto de inicio distinguimos las secciones en que se distribuye la información y comprobamos la visibilidad de estos contenidos para distinguir la profundidad inicial de la interfaz actual. En otras palabras, a partir de la designación de la intensidad de grises en la imagen, catalogamos la jerarquía de los contenidos de acuerdo a su ubicación.

En la representación exponemos con la escala de grises la visibilidad de la información, en que a medida que avanzamos hacia abajo vemos que los contenidos se vuelven más invisibles, mientras que la columna derecha, donde tenemos el ingreso hacia las otras capas de profundidad de esta sección se encuentra localizada, lo cual dificulta la navegación del sitio.

En primera instancia comprobamos la disposición vertical del sitio, que se dispone en tres columnas. De estas tres columnas tenemos que la columna derecha tiene una menor visibilidad general. Este punto se ve reflejado en la imagen a continuación, donde integramos la variable horizontal de la visualización del sitio.

primer acercamiento visualización lectura interfaz

En segunda instancia comprobamos en el sitio el cumplimiento de esta situación, comprendiendo la situación vertical tanto como la horizontal y como estas se despliegan en la realidad. Se trata de 7 zonas que se conjugan de acuerdo al resultado del ejercicio de comprobación de lectura.

De acuerdo a esto, notamos que el espacio que cuenta con mayor visibilidad, la triangulación que se genera en el sector superior izquierdo, no está lo suficientemente aprovechado.

A continuación integramos la imagen, lo que actúa como la guía de la interacción con el contenidos si consideramos la realidad de lectura con que cuenta la web.

Una vez que integramos la imagen, comprobamos que las mismas imagenes tienden a volver menos visibles los contenidos de acuerdo a su disposición.

De acuerdo a lo exhibido por este mapa de visualización de los contenidos, podemos notar dos cosas:

  • La ubicación del link que nos lleva a la información de la carrera se encuentra ubicado arriba de una imagen, lo que dificulta su visibilidad, ya que el ojo tiende a bajar desde la imagen hacia los links ubicados a continuación, no a subir.
  • El link además se encuentra en el mismo nivel jerárquico que el resto de los links que se encuentran en una categoría inferior en cuanto a su contenido.


-

prototipos

primera propuesta

A partir del estudio realizado de la lectura de la interfaz comenzamos el desarrollo de propuestas de diseño de la interfaz. Estos prototipos integran tanto el ámbito visual como la observación que surge a base del estudio de los usuarios que visitan el sitio y las páginas más vistas.

primer prototipo interfaz base por carrera

En primera instancia cabe destacar la incorporación de nuevos elementos, como es el caso de las publicaciones alumnos y talleres, que busca integrar a los alumnos y talleres para generar un nuevo interés de parte de los alumnos en el sitio de la escuela además de acercar a las nuevas visitas a la temática planteada tanto por los talleres como el modo de pensar que imparte la escuela de forma real y sustancial.

Esta integración de la realidad del taller al sitio además responde a una necesidad de un sector demográfico de la audiencia, puesto que el 50% de las visitas del sitio son nuevas, esto acerca a esa fracción de forma real al planteamiento de la escuela, puesto que ven los trabajos de los alumnos de cada carrera además de las publicaciones llevadas a cabo por los profesores.

Estas publicaciones de los alumnos y talleres tiene como fuente la wiki, siendo así, además. un nexo entre estas dos plataformas.

Además esta sección no sólo actuaría como un vínculo entre el sitio y la wiki, sino que además actuaría como un insentivo de colaboración hacia los alumnos, volviendo a la wiki una herramienta y un ejercicio habitual para los talleres y además actuar como un insentivo académico al existir la posibilidad de publicación y exposición formal de sus proyectos y por lo tanto sus ideas.

fragmento destacados de alumnos de primer prototipo

Otro punto de avance es la integración de los artículos fundamentales, lo cual actúa como vínculo con la Biblioteca Constel. Al integrar esta sección, disponibilizamos estos contenidos de acuerdo a su relación con la carrera sobre la cual estamos informándonos.

La idea de esto es catalogar y diferenciar los textos fundamentales relacionados con cada carrera para volverlos más visibles sin la necesidad de buscar cada uno de ellos en el catálogo.

Por otra parte se secciona o cataloga a los usuarios para simplificar la navegación de los contenidos, los cuales, por ejemplo, la malla curricular y descripción de los ramos, es útil y relevante a aquellos que no forman parte de la escuela y buscan postular a ella, ya sea estudiante escolar o de intercambio.

navegación por tipo de usuario de primer prototipo


avance sobre propuesta

A partir por las modificaciones expuestas en el punto anterior, avanzamos sobre la dinámica y jerarquización visual de contenidos. Como punto de avance definimos una barra menú de discriminación más discreta que la anterior, que vuelve más limpia la estética de la página y además al ser un menú desplegable da cabida a una cantidad de links variable, volviendolo más flexible.


avance sobre menu discriminatorio de usuario
avance sobre menu discriminatorio de usuario

Por otro lado, se define la realidad en que se sitúa la idea de publicación de los alumnos, designando su espacio físico, la wiki, para así otorgar un movimiento o comunicación entre las dos plataformas, entrelazandolas y dando un nuevo uso e interacción entre los talleres y las plataformas digitales con que la escuela cuenta.

segundo prototipo

mapa navegación

En este momento, una vez que nos hemos interiorizado en la propuesta en cuanto a los contenidos y modificaciones visuales, presentamos una nueva propuesta de mapa de navegación, la cual además de volver visibles los cambios en comparación con el mapa existente, nos es útil para formalizar los cambios estructurales en cuanto a la disposición de las capas de profundidad con que nuestra interfaz contaría.


prototipo

Luego de llevar a cabo una serie de correciones a la propuesta inicial, llegamos a una nueva propuesta, que apuesta por una economía de scroll y además por la utilización de distintas capas de profundidad dentro de la misma interfaz.

En un primer momento se estudiaron las zonas de mayor visbilidad de la interfaz, pero este estudio no se vió reflejado en el primer acercamiento de prototipo.

Es así que en esta segunda propuesta de interfaz respondemos a esta situación de visibilidad y usabilidad, disponiendo los contenidos de forma horizontal y dividiendo la pantalla de acuerdo a la relevancia de los contenidos en portada desde un punto de vista editorial. Es así que mientras la imagen principal crece, incluimos el uso de color para que los contenidos que se encuentran a la derecha no pierdan relevancia con respecto a dicha imagen.

A modo general incluimos dos nuevos elementos de navegación del sitio. El primero de estos elementos es la barra lateral de navegación, donde aparecen dispuestas las carreras al igual que la premisa, información que en otro momento se encontraba oculta, ya que en la navegación anterior uno ingrsaba a las portadas de cada carrera y esta se trata de una información general a todas las carreras.

Además una segunda barra de navegación se dispone dentro de cada carrera ubicada bajo la barra de navegación general del sitio.

Esta pretende ordenar los distintos elementos por temática. Estas temáticas en la propuesta anterior se encontraban discriminadas de acuerdo al tipo de usuario que ingresaba al sitio. Esta segregación de usuarios en vez de actuar como un modo de ordenar los contenidos actuaba como una discriminación a los usuarios y no era amistosa con ellos. Es así que al disponer todos los contenidos a primera vista, estos se vulven más disponibles a todos y elimina la necesidad de disponerlos en una tercera columna lateral, dejando más espacio para los artículos.

PRIMERA CAPA DE PROFUNDIDAD

En primera instancia trabajamos la portada de la carrera, donde se exponen tanto publicaciones de profesores, trabajos de alumnos y noticias relevantes al área de estudio.


segunda propuesta sitio portada arquitectura


SEGUNDA CAPA DE PROFUNDIDAD, SUBMENÚ

Dentro del menú de navegación de cada carrera nos encontramos con la malla curricular, la cual se encontraría distribuída en 3 capas de profundiad. Teniendo en un primer momento los ciclos en que se encuentran dispuestas. Cada uno de estos ciclos se divide por año y cada año tiene una serie de ramos que la conforman. En la interfaz actual estos se encuentran dispuestos como un listado de ramos distribuídos por año, pero el problema que este tiene es que oculta la navegación de cada ramo. Es precisamente esta navegación la que se replantea, de modo que el contenido de cada ramo cobra relevancia en esta nueva distribución donde podemos ver de forma paralela el contenido de cada ramo y los demás ramos de cada año sin la necesidad de volver a la página anterior, cambiando el objetivo de ésta sección.



El segundo item dentro de la barra de navegación corresponde a la incorporación de las lecturas transversales. Esta sección pretende acercar los textos fundamentales relacionados con cada carrera y como punto de avance respecto a la situación planteada en la propuesta anterior, incorporamos el abstract de cada lectura.

Este abstract está planteado como punto de apertura de la temática de cada uno pensado para los usuarios que no esten familiarizados con el lenguaje y las lecturas fundamentales de la escuela. Además en caso de que quien busque otro texto, incluimos un acceso directo a la biblioteca constel.

segunda propuesta sitio lecturas transversales


interfaz

En este punto integramos a la imagen dentro de la prueba para comprobar la situación real de la interfaz. Esto significa considerar las variables de tamaños de imágenes dentro de la interfaz y como reacciona la estructura ante este caso.

prueba interfaz con imagenes


interfaz con distinción de color en links

mapa de divs

Una vez que tenemos una interfaz definida visualmente comienza el proceso de diseño front del sitio. Es por esto que comenzamos con el traspaso de los elementos visuales a html y css. Esto se ve traducido en el desarrollo de los mapas de divs.

A continuación encontramos los principales mapas desarrollados:

  • PORTADA:


mapa de divs de portada carreras


  • MALLA CURRICULAR:


mapa de divs malla curricular 1


mapa de divs malla curricular 2


mapa de divs malla curricular 3


propuesta 2

Posterior a la última corrección se efectúan una serie de cambios en la interfaz con la finalidad de optimizar la distribución de espacios y blancos y facilitar la navegación. Este último punto es fundamental, puesto que en la propuesta anterior ésta se volvió demasiado engorrosa.

Premisa


premisa carreras, introducción a postura escuela

A modo de avance de la propuesta anterior agregamos la interfaz de la premisa de la postura de la escuela, a modo de completar la propuesta de interfaz en todas sus áreas y páginas.

Portada


portada carrera arquitectura


Malla Curricular

Esta es la página que cuenta con mayores modificaciones para optimizar la distribución de espacio y facilitar la navegación.


nueva proposición disposición malla curricular


despliegue nueva proposición malla curricular

Lecturas Transversales


lecturas transversales


corrección problemas detectados

Malla Curricular

interfaz real malla curricular arquitectura


interfaz real malla curricular arquitectura contenidos semi-desplegada


interfaz real malla curricular arquitectura contenidos desplegados


interfaz real malla curricular arquitectura visualización imágenes


Exámenes Talleres

interfaz exámenes talleres arquitectura


Despliegue menú acceso a wiki

despliegue menú de acceso a wiki de cada taller


propuesta 3: replanteamiento visual de la interfaz

En una última corrección notamos que el espacio dentro de la propuesta está mal distribuido, puesto que si en la propuesta anterior nos encontrábamos ante demasiado blanco, en este último caso nos encontrábamos ante un exceso de información. Es por esto que debemos replantear la distribución de los contenidos en ciertas secciones para llegar a la justeza, en que hay soltura en la lectura y a su vez un nivel de información medido.

Por otro lado, nos encontramos ante la necesidad de generar una distinción entre el sitio actual de la escuela y la propuesta, lo que conlleva a un cambio en la paleta de colores. Ésta paleta es el resultado de la consulta a los usuarios del sitio acerca de la gama de colores con la que se sentirían más cómodos o que les gustaría tuviera el sitio.


Premisa


interfaz final, premisa


Titulares


interfaz final, titulares

  • Entre las modificaciones a la interfaz, nos encontramos con un nuevo modelo de sidebar desplegable. Esto nos permite aprovechar más los blancos, sin perder esa columna a medida que los contenidos se van desplegando.


Malla Curricular

interfaz final, malla curricular

  • Otro de los ejes de conflicto dentro de la interfaz era la sección de la malla curricular, donde los contenidos se veían expuestos todos a la vez y la información permanente tenía demasiado peso y chocaba con aquella que se iba desplegando.


interfaz final, malla curricular, segunda capa


interfaz final, malla curricular, tercera capa


interfaz final malla curricular, caso 2


interfaz final, malla curricular, caso 2 segunda capa


interfaz final, malla curricualr, caso 2 tercera capa


Lecturas Transversales

Este caso no necesita de mayores modificaciones más allá del cambio en el esquema de color y las modificaciones de la interfaz general.


interfaz final, lecturas transversales


Exámenes Talleres

Otro punto que presenta modificaciones, no tanto en estructura sino en la exposición del contenidos es la sección de exámenes, puesto que se integra la realidad visual de los talleres dentro de la vista previa.


interfaz final, exámenes talleres

Pruebas de usuario

protocolo y presentación tareas

protocolo pruebas


escenario y tarea 1


escenario y tarea 2


escenario y tarea 3

resultados

A partir del desarrollo de estas tareas por parte de los usuarios podemos detectar tanto las falencias como las virtudes con que cuenta nuestra propuesta de interfaz.

Falencias

Entre los problemas detectados con la interfaz nos encontramos con el menú desplegable, ya que al no ver a primera vista su contenido los usuarios se confunden y dificulta la navegación de los contenidos.

Por otro lado tenemos el contraste de colores entre el cyan y el gris oscuro, ya que no es legible y dificulta la lectura.

Virtudes

Entre las virtudes nos encontramos con el modelo propuesto por la malla curricular, ya que este despliega los contenidos de acuerdo a las necesidades de los usuarios.

Además nos encontramos con la catalogación de los tipos de artículos por secciones, facilitando la ancontrabilidad de los contenidos de acuerdo a su contenido.


interfaz final

A continuación presentamos las estructuras básicas sobre las que se rige el diseño del resto de las interfaces posibles:

premisa


titulares


ingreso a wiki de talleres


malla curricular 1


malla curricular 2


malla curricular 3


malla curricular 4


lecturas transversales


exámenes talleres


exámenes título