Análisis y rediseño sitio PUCV
| Título | Análisis y rediseño sitio PUCV |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | sitio web universidad |
| Período | 2014-2014 |
| Asignatura | Construcción 4° DG 2014, |
| Del Curso | Construcción 4º DG 2014, |
| 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) | Sofia Enriquez, Carla Cárcamo |
| Profesor | Katherine Exss |
Pontificia Universidad Católica de Valparaíso
La Pontificia Universidad Católica de Valparaíso, conocida como PUCV o simplemente UCV, es una de las seis universidades católicas de Chile, y una de las cuatro universidades eclesiásticas presentes en el país junto a la Pontificia Universidad Católica de Chile, la Universidad Católica del Norte y la Universidad Católica de la Santísima Concepción, fue la primera fundada fuera de la capital.
En el ranking 2014 del QS World University Ranking1 se ubicó en el puesto 29 a nivel latinoamericano y quinta a nivel nacional. En el Ranking Universitario de la revista América Economía, versión 2013,2 la PUCV ocupó el quinto lugar a nivel nacional, y primero dentro de la Región de Valparaíso.
Observaciones generales
El sitio web posee dos menú principales, en el primer menú, de mayor importancia estaba constituido por 17 ítems, de los cuales muchos entre ellos se repetían en cuanto a contenidos, nombres poco claros, muy mala jerarquía en cuanto a la organización, era totalmente horizontal, sin profundidad, por lo tanto existía un mal uso del espacio y páginas que solo tenían un párrafo.
El segundo menú se constituía por 14 ítems de los cuales muchos eran muy utilizados y otros en donde los conceptos no eran claros o simplemente no eran utilizados por los alumnos, por lo tanto nuevamente el nivel de importancia estaba mal plantado.
Card Sorting
El card Sorting fue realizado con tres niñas de 17 años, las cuales estaban en tercero medio, estudiantes del Colegio Altazor. Primero se procedió a poner sobre dos pliegos de papel todos los conceptos de la universidad para que luego ellas lo fueran organizando, en donde se demoraron aproximadamente una hora.
Usuario 1
- Nombre: Isidora González
- Edad: 17 años
- Ocupación: Estudiande de 3º medio, Colegio Altazor
- Descripción: Isidora está constantemente revisando sitios de internet de acuerdo a sus gustos, a su vez navega mucho en la pagina de su colegio, durante el Card Sorting estuvo constantemente relacionando esta ultima con el rediseño del sitio PUCV.
Usuario 2
- Nombre: Amalia Burgos
- Edad: 17 años
- Ocupación: Estudiande de 3º medio, Colegio Altazor
- Descripción: Amalia solo utiliza internet para cosas especificas, lo justo y necesario, no cree manejar mucha información al respecto
Usuario 3
- Nombre: Javiera Escobar
- Edad: 16 años
- Ocupación: Estudiande de 3º medio, Colegio Altazor
- Descripción: Javiera dice estar constantemente en las redes sociales, tanto en movil como en computador de escritorio, fuera de ellas no se interesa por una mayor utilización de sitios de internet.
Proceso
El primer paso de organización fue ir a agrupando en las grandes areas que ellas consideraban pertinentes o relevantes, tuvieron gran facilidad para este ejercicio, pedían opiniones entre si y su agrupación la pensaron desde una estructura de sitio, lo que iba en un primer nivel, y luego lo que se desplegaba de el, ya que constantemente lo iban relacionando con el sitio de su colegio.
observaciones
Dentro del proceso de reorganización surgieron una serie de dudas, sobre todo en cuanto a conceptos y su ambigüedad. En este sentido todas las siglas, como virrey, daad o dpd causaron dudas y confusiones, no sabían que podría significar. Al igual que los programas específicos que ofrece la PUCV Su metodo fue a partir de un proceso de jerarquización, en donde primero hicieron un menú para luego ir derivando a las diversas áreas de la universidad que ellas consideraban importantes. Pensaon primero en carreras y universidades, los magister cursos y diplomados como algo aparte, ya que para ellas eso pertenecía a otro publico, más reducido y ya con su primera etapa universitaria finalizada.
No entendían que porque había tantas cosas relacionadas con la iglesia, ni quién era el gran canciller, pero como existían tantas tarjetas respecto al tema decidieron incluirlo dentro de sus categorías, a pesar de que no les causara sentido.
Finalmente su ultimo problema fueron las palabras muy generales, que podían abarcar muchos aspectos y finalmente quedaban poco claras. Estas fueron: vías de ingreso (ingreso a que?), cooperación institucional, intranet pucv, servicios (de que tipo?)
resultado
Organización de Card Sorting
El traspaso exacto de como fue la agrupación de postit según los usuarios.
Segunda propuesta
Luego de traspasar y revisar el Card Sorting llegamos a una serie de ajustes para la segunda propuesta del mapa de navegación. Todos apuntan a una simplificación de página, deja roa horizontalidad y extensión de esta para pasar a una agrupación mayor de contenidos bajo un criterio de jerarquización e importancia en cuando a usabilidad de los ítems.
Primer menú
Home
- navegador acadmeico
- Aula virtual
- Quienes somos
- Noticias
Facultades y carreras
- contacto y mapa
Estudios avanzados
- sacamos vice rectoría
Admisión
- Ponderaciones
- Vías de Ingreso
- Becas de Apoyo y arancel PUCV
- Por qué estudiar en la PUCV
- Seguro Estudiantil PUCV
- Vida Universitaria
Asuntos estudiantiles
- Beneficios
- Gestión y desarrollo estudiantil
- Vive salud
- Apoyo al aprendizaje
Becas y beneficios
- todo lo de beca
Procesos docentes
(cambiamos el nombre por asuntos estudiantiles)
- certificados
- gestión curricular
- gestión docente
- graduación y titulación
- Reglamento
Intercambio
- toda la pagina
Programa para estudiantes y profesores
- programa beta
- lo que está dentro de convenios y desempeño
Pastoral
- Todo lo relacionado con la iglesia
BUSCADOR
Segundo menú
- Actividades
- concursos calendario
- Intranet
- Web mail academic
- Normas gráficas
- Ediciones universitarias
- Reglamentos
Eliminados
- La universidad
- Gran cancilleria
- Capitulo academico
- cooperación tecnica
- postgrados
- CEA Santiago
- Pucv notivias y videos
Nuevo mapa
Archivo:Segunda propuesta unida pucv.pdf
Re diseño
Wireframes
Los 6 wireframes que se pensaron para el re-diseño fueron el inicio, admisión, facultades y carreras, una pagina interna de carreras, intercambio y becas, consideramos lo más importante, necesario y atractivo que puede ofrecer la universidad, además de poseer cada una una plantilla en particular.
A mano
Fireworks
Con grilla
Home
Facultades y carreras
Carrera
Admisión
Intercambio
Becas
Sin grilla
Home
Facultades y carreras
Carrera
Admisión
Intercambio
Becas
Home rediseñada
Usuarios
Partimos mostrando el inicio del sitio, en donde les explicamos a grandes rasgos el proyecto, para luego preguntarles que es lo que creen que hay detrás de cada botón, si entienden la organización, si lo creen funcional y simple. Para que luego ellos mismos vayan analizando y dando sus propias opiniones y percepciones.
Perfil usuario 1
Estudiante del colegio Alianza francesa, cuarto año medio, dentro de sus opciones está entrar a la PUCV, pero no sabe bien que estudiar. Lo primero en lo que se fija es el buscador, dentro de un gran sitio como es la universidad lo cree indispensable. Piensa que está organizada funcionalmente, y es simple, tiene que estar lo justo y necesario. Cree muy buena practica que no estén las palabras del rector o la universidad y si aparesca las funciones principales como el navegador académico. Como un estudiante que aún no sabe bien lo que quiere le gustaría que existiese un acceso directo a carreras o facultades.
Perfil usuario 2
Académico PUCV, cree que el segundo menú es totalmente interno de la Universidad y que "normas gráficas", "ediciones" y "reglamento" debería estar todo dentro de intranet al ser exclusivamente cosas internas de la universidad y que a nadie más le interesan. Piensa en un reordenamiento del menú, admisión antes que carreras, de manera de hacer "cronológico". Le parece una buena práctica el hecho de tener lo justo y necesario, las cosas funcionales y no el relleno del que nadie se percata.
Perfil usuario 3
Estudiante del colegio Capellan Pascal, logra entender los elementos del menú principal en su mayoría y cuáles serían sus contenidos internos; con dos conceptos a dudar:"Investigación y Estudios Avanzados" y "Programa para Estudiantes y Profesores". El usurio duda acerca de los conceptos anteriores pero luego se logra explicar a sí mismo el significado de "Programa para Estudiantes y Profesores".
El estudiante se encuntra de acuerdo con que no aparezcan conceptos como "Gran Cancillería" o "Cuerpo Docente", debido a que fueron mencionados y no entendía que podría pertenecer en esa categoría.Luego en la parte inferior de la página no comprende en un principio el significado del concepto de seminario, pero luego lo asocia con los magister. Tampoco entiende en el segundo menú las "Normas Gráficas" y "Ediciones".
Es necesario destacar que el usuario comprende en plenitud la diferencia entre "Aula Virtual" y "Navegador Académico" debido a que en su colegio también tienen un aula virtual. Se encuentra de acuerdo con la práctica de hacer más preciso el inicio de la página ya que manifiesta su falta de interés por ver tantas noticias escritas.
Perfil usuario 4
El usuario es ex-alumno del colegio capellan pascal, pero sin haber entrado el año 2014 a la universidad. Logra entender todo los conceptos del primer menú y a lo que podrían llevar cada de uno de ellos, pero se enfoca en manifestar su desentendimiento de elementos del segundo menú.
Los conceptos que causan la duda hacia qué podría lelvar, son "Normas Gráficas" y "Ediciones" y menciona que no sabría qué podrían contener.
Éste usuario manifiesta que siente que la página le da la sensación de estar demasiado acotada y muy simple, y que a pesar de ser más entendible en cuanto a conceptos, le da la impresión de estar "estática".
Luego de que termina la sesión se le explica qué contienen los elementos que no entendía del segundo menú, y ahí logran entender y le causan coherencia con la explicación.
Perfil usuario 5
El usuario es alumno de cuarto año del Seminario San Rafael, no logra captar un elemento del primer menú que es : "Gestión Académica",pero luego lo asocia con procesos de certificados. Tampoco entendió qué podría ser "Programas para profesores y estudiantes", lo asocia con actividades, talleres.
Coloca en el mismo nivel el aula viertual y el navegador, pero manifiesta que el primero de ellos ya tiene los ramos de cada alumno inscritos, lo que es correcto; luego coloca web mail, y lo asocia al aula virtual pero a nivel de funcionarios para subir el material. No logra entender "Normas Gráficas" ni "Ediciones".
Primer rediseño
El planteamiento y los cambios de este primer rediseño se piensan desde las necesidades y observaciones de los usuarios. Primero, en el segundo menú se eliminan los últimos 3 items para ponernos dentro de la intranet, luego como noticia principal se plantea la idea de poner un atractivo para todo estudiante de cuarto año medio que quiera o piense estudiar en la universidad, y poder captar más gente de esta manera, y por lo tanto, crear al final una sección de noticias, ya que estas fueron desplazadas por la propuesta de carreras para el nuevo estudiante.
Segundo rediseño
Se plantea el rediseño tomando como base las correcciones de la primera propuesta. Se toma la desición de en vez de crear una página inicial donde se encuentre la elección al usuario de su perfil, cada menú esté dirigido hacia un perfil de usuario.
El primer perfil que se decide como central es aquel que considera como usuario a los futuros estudiantes, de todo tipo, es decir, aquellos que deseen postular ya sea a postgrados, intercambios, primer año, etc. También incluye todos aquellos asuntos que podrían llegar a ser de interés para ellos como la realización de trámites de ingreso, postulaciones, es por ello que en éste menú se encuntra gestiones académicas. Por lo tanto en el primer menú se encuentra: Admisión, Facultades y Carreras, Investigación y Estudios Avanzados, Gestión académica, Intercambios,Becas y Beneficios, Asuntos Estudiantiles. Dentro de ellos, hay uno que poseía una dudosa pertenencia, que es "Asuntos Estudiantiles", pero se decide dejar en el primer menú debido a que podría llegar a ser de interés de los futuros integrantes para saber qué es lo que tratan los estudiantes actuales.
El segundo perfil son aquellos que ya pertencen a la universidad, centrado en aquellos temas que ya forman parte de la vida del estudiantes y funcionarios. Es por ello que en esta categoría se encuntran: Actividades, Noticias, Pastoral, Información Interna (Itranet),Biblioteca.
Wireframes
- Home
En el home se cambiaron los elementos del menú, pero se mantuvo la idea del llamado a los futuros estuadintes como primera pantalla.Se modifican elementos en el footer como agregar las categorías de ayuda y preguntas frecuentes. Por útimo se decide que en vez de mostrar las facultades, en la primera sección, se muestren imágenes de las diferentes carreras, y se agrega una sección abajo que muestre las diferentes facultades.
- Facultades y Carreras
Se crea un dropdown en el side bar, para poder navegar dentro de la mismas categorías y que se conserva al momento de entrar en una carrera. A la página interior se le modifica el sidebar, para que indique dónde se encuentre el usuario, también se muestra el enlace que lleva al sitio de la carrera.
- Intercambios
Se mantiene el enfoque en la primera pantalla como recepción con la fotografía principal como medio de atracción. Junto a ello, se colocan las becas relacionadas al intercambio.
- Becas y Beneficios
Se modifica en la ficha de la asistente social el tipo de socitud a "tipo de asistente social" ya que la asistente depende de la carrera por lo que también se agrega a la ficha. Se cambia el nombre de los botones encontrados en la parte inferior de la ficha.
- Admisión
Se modifican los nombres de los botones que se encuentran a la derecha del sidebar, junto con eso se cambian los elementos generales de todas las páginas como los menú y el footer.
Interfaz
Interfaz Propuesta1
Se decide ocupar tonos claros, conservando los azules de la página actual pero sumándole los grises, como colores bases del sitio.
Se realizan dos propuestas ya que al momento de realizar la primera propuesta con la sección de categorías en la parte inferior del primer pantallazo, la agenda no tiene el mismo interés para aquel futuro alumno como lo tienen las facultades.
Dentro de la sección nueva de facultades en el inicio, se decide crear un hover a la imágenes de cada facultad, que cuando con clikeadas lleven a la página de facultades y carreras.
Interfaz Propuesta2
Paleta de colores y Tipografía
- Colores
- Tipografía
Home
Admisión
Se decide construir un espacio que tenga un gran peso construido por el azul oscuro donde se pusieron los botones principales . En ésta sección se utiliza el sidebar para navegar en los distintos ámbitos de ésta categoría.
Facultades y Carreras
El sidebar aumenta su largo en una gran cantidad, pero dentro de cada elemento se realiza un "dropdown" que se abre y muestra las carreras dentro de la facultad y así tener menos plantillas.
Se decide ocupar en los textos donde se nombran las carreras con la tipografía en light pero en azul oscuro.
Carrera
(dentro de facultades y carreras)
En ésta categoría es posible navegar dentro de las diferentes carreras, las cuales aparecen el el sidebar en un tamaño más pequeño que las facultades y con menos peso, pero igual son legibles, debido a que el hover creado muestra un contraste que lo permite.
Becas y Beneficios
Dentro de las becas y beneficios se mantiene la idea que se ocupo en admisión de los bloques de la sección a destacar con las becas o beneficios más solicitados. Pero en vez de ponerlos en el centro de la página, se ubican bajo la solicitud de fecha con la asistente.
Se agregan tonos de verde y rojo como parte de la sección. Se utiliza en el calendario para demostrar los días habilitados y los que no.
Intercambios
En la sección de intercambios en donde más se sigue la idea de estructura y color del home, debido a que para la sección de la foto me mantiene la consistencia de color. También la misma estructura de los botones de la parte inferior de la foto donde se dan tres opciones de becas relacionadas al intercambio.
