Análisis y rediseño sitio UNAB

De Casiopea


Logo unabgrande.png


TítuloAnálisis y rediseño sitio UNAB
Tipo de ProyectoProyecto de Curso
Palabras Clavesitio web universidad
Período2014-2014
AsignaturaConstrucción 4° DG 2014
Del CursoConstrucción 4º DG 2014
CarrerasDiseño Gráfico
Alumno(s)Ingrid Céspedes, Cindy Sanhueza
ProfesorKatherine Exss

Universidad Andrés Bello

La Universidad Andrés Bello fue fundada en 1988 y consta el día de hoy con más de 70 carreras y un programa Diurno y Vespertino, con sedes en Santiago, Viña del Mar y Concepción, además de que se preocupa de colaborar en el desarrollo de la investigación científica de alta competitividad y destacándose como la mayor universidad privada de Chile. Además de tener una amplia gama de postgrados, desde diplomados y magister, hasta doctorados. Cuenta con más de 16 carreras acreditadas por agencias de acreditación privadas, autorizadas por la Comisión Nacional de Acreditación (CNA.

Mapa de Navegación de UNAB

Mapa universidad UNAB Mapa unab1 parte1.jpg

Card Sorting

Propuesta de Mapa de Navegación

Nueva propuesta de Arquitectura de la Información para el sitio web de la Universidad Andrés Bello, con modificaciones de etiquetado, de agrupaciones y nuevas categorías a partir del Card Sorting.

Nuevapropuesta-mapa-UNAB.jpg

Prueba Prototipo de Papel

Hemos realizado una primera maqueta (wireframe) de lo que será la home del sitio de la Universidad Andrés Bello.

¿Qué es un Prototipo de Papel

Es ideal para una fase inicial de definición y conceptualización de funcionalidades en un proyecto. Es una buena forma de iniciar un debate acerca de lo que se espera de una futura aplicación o sitio web. - Nos permite detectar que estamos incluyendo las funcionalidades adecuadas a las necesidades de los usuarios finales así como su flujo (workflow). - Que los contenidos son los apropiados, sin la necesidad de redactar contenidos finales (basta con transmitir el concepto de lo que será cada contenido mediante texto simulado). - Sirve como una primera aproximación a la maquetación final de las pantallas que conformen la aplicación. (Sin necesidad de presentar una maquetación exacta de lo que será cada pantalla, ni colores e iconos).[1]

Nuestro Prototipo de Papel

Esta contiene:

  • menú principal
  • menú secundario
  • menú auxiliar
  • Agenda
    • Cultural
    • Investigación
  • Acceso a las noticias
    • Culturales
    • Investigación
    • Difusión
    • UNAB Social
  • Destacados
    • Programas
    • Talleres
    • Vida Universitaria
    • Becas
  • Footer
    • Redes sociales
    • Documentos
    • Links de ayuda
    • Contacto
    • Mapa
Wireframe-UNB-home-1.png




Perfil de Evaluadores

Evaluador 1


  • Nombre:Nadia Iturra
  • Edad:18 años
  • Estudiante de Cuarto año Medio, del colegio Los Reyes.

Le interesa entrar a una Universidad y por eso ya ha comenzado a navegar en los distintos sitios que ofrecen carreras del Consejo de Rectores.


Evaluador 2
  • Nombre:Rodrigo Bustos
  • Edad:18 años
  • Estudiante de Cuarto año Medio, del colegio Los Reyes.


Evaluador 3
  • Nombre:Aranxa Ross
  • Edad:18 años
  • Estudiante de Cuarto año Medio, del colegio Los Reyes, asiste a interescolares por su colegio.


Evaluador 4
  • Nombre:Loreto Muñoz
  • Edad:17 años
  • Estudiante de Cuarto año Medio, del colegio Los Reyes, asiste a un preuniversitario y le interesa conocer sobre carreras universitarias porque aún no decide que va a estudiar.


Evaluador 4
  • Nombre:Pablo Romero
  • Edad:18 años
  • Estudiante de Cuarto año Medio, del colegio Los Reyes.



Resultados de la prueba

¿De que trata el sitio?/ Logrado 100%

  • Evaluador 1: Es una página de Universidad de carreras, investigación
  • Evaluador 2: Sitio de la UNAB
  • Evaluador 3: Es un sitio con talleres de la Universidad Andrés Bello, entrega tipo de actividades de diversas áreas
  • Evaluador 4: Son cosas de la Universidad UNAB
  • Evaluador 5: Sitio de una universidad, UNAB


Acerca de la UNAB / Logrado 100%

  • Evaluador 1: Historia y quienes trabajan, información sobre la Universidad
  • Evaluador 2: Información sobre la Universidad
  • Evaluador 3: Son años que lleva, prestigio, profesores y alumnos destacados
  • Evaluador 4: Sedes, personal de trabajo
  • Evaluador 5: De que trata la U y las carreras que tiene


Admisión Diurna/ Logrado 100%

  • Evaluador 1: Postular a las carreras de día
  • Evaluador 2: Clases de la mañana o ramos
  • Evaluador 3: Capacidades para entrar
  • Evaluador 4: Todo lo relacionado con carreras, postulaciones , becas y créditos
  • Evaluador 5:Sobre la admisión de la Universidad


Carreras/ Logrado 100%

  • Evaluador 1: Son las carreras que hay
  • Evaluador 2: Diferentes carreras de la UNAB
  • Evaluador 3: Distintos tipos de carreras, formas de pago y duración
  • Evaluador 4: Tipos de carreras y las sedes
  • Evaluador 5: Tipo de carreras y el puntaje para postular


Vespertina/ Logrado 80%

  • Evaluador 1: Es para la gente que estudia de noche
  • Evaluador 2: Carreras de noche y horarios
  • Evaluador 3: Formas de ingreso a las carreras de noche
  • Evaluador 4: Información sobre carreras de noche
  • Evaluador 5: No sé


Pregrado para Ejecutivos/ Logrado

  • Evaluador 1: No sé
  • Evaluador 2: Se difine de que se trata y como postular, los medios que entrega la universidad para hacerlo
  • Evaluador 3: ¿Profesores?
  • Evaluador 4: Es algo para antes de terminar la carrera
  • Evaluador 5: No sé

Postgrados/ Logrado 60%

  • Evaluador 1: No sé
  • Evaluador 2: Facilidades y guías para hacer un postgrado
  • Evaluador 3: Es algo para realiza después de terminar la carrera
  • Evaluador 4: Títulos que se pueden sacar después de terminar la carrera
  • Evaluador 5: No sé

Acceso a intranet/ Logrado 20% / hay que separa o posicionar de forma distinta el buscador del acceso a intranet

  • Evaluador 1: Es al página de cada alumno, donde se ven las notas
  • Evaluador 2: ¿Acceso a intranet?, colocar el nombre de lo que se quiere buscar( lo confunde con buscador)
  • Evaluador 3: Tipos de carreras, información ( lo confunde con buscador)
  • Evaluador 4: No sé
  • Evaluador 5: Buscar en la misma página ( lo confunde con buscador)


Investigación/ Logrado 0% / podría ser Investigaciones

  • Evaluador 1: Trabajo de alumnos sobre temas
  • Evaluador 2: Sobre los estudios , tipos de carreras, carreras más elegidas(no entiende muy bien, cree que son estudios sobre la Universidad)
  • Evaluador 3: Más sobre las carreras
  • Evaluador 4: Buscar información sobre la Universidad
  • Evaluador 5: Investigación sobre la Universidad


Egresados/ Logrado 100%

  • Evaluador 1: Es para la gente que posee un título y hablan de las carreras
  • Evaluador 2: Información de egresados, si tienen trabajo fijo y entregan ayuda ara trabajar
  • Evaluador 3: Personas que salieron de la U y en que trabajan ahora
  • Evaluador 4: Buscar gente que ya salio de la Universidad y en que trabajan ahora ahora
  • Evaluador 5: Los que ya salieron de la Universidad


Intercambio/ Logrado 100%

  • Evaluador 1: Información para hacer un intercambio
  • Evaluador 2: Personas de la Universidad que se han ido de intercambio
  • Evaluador 3: Cuales son los requisitos que piden para viajar de intercambio
  • Evaluador 4: Información de intercambio
  • Evaluador 5: Asociado de Universidades con otros países para irse de intercambio, está toda la información


Extensión cultural/ Logrado 80%

  • Evaluador 1: Actividades que se pueden realizar en la Universidad, van dentro de la Agenda
  • Evaluador 2: Cultura de la Universidad, ramos culturales como juegos Mapuches
  • Evaluador 3: Que diga y nos enseñe cosas de cultura
  • Evaluador 4: Galería, cosas de música con artes y eventos culturales
  • Evaluador 5: No sé

Matrícula en Línea/ Logrado 100%

  • Evaluador 1: Para no tener que ir a la Universidad se puede pagar por internet
  • Evaluador 2: Proceso de Admisión, para estudiar y pagar
  • Evaluador 3: Facilidad de pago para no ir presencialmente a la institución
  • Evaluador 4: Para poder ingresar y pagar
  • Evaluador 5: Matricularse por internet

Portal de Empleo/ Logrado 40% / podría ser Búsqueda de empleo

  • Evaluador 1: No se si es para alumnos o para los que trabajan en la Universidad
  • Evaluador 2: Buscar trabajo
  • Evaluador 3: Saber cuanto ganará a futuro
  • Evaluador 4: Trabajo y opciones de acuerdo a la carrera
  • Evaluador 5: Empleados de la Universidad

Agenda/ Logrado 80%

  • Evaluador 1: Fechas de eventos
  • Evaluador 2: Agenda relacionada a las carreras, programación
  • Evaluador 3: Agenda de interescolares, ciencia, talleres
  • Evaluador 4: Cultural, cursos para aprender más
  • Evaluador 5: Es una agenda dividida en área cultural y de investigaciones

Programas/ Logrado 0% /podría ser Programas y seminarios

  • Evaluador 1: Doctorados
  • Evaluador 2: Puedo encontrar cosas sobre la doble titulación
  • Evaluador 3: Computación, algo externo a la carrera
  • Evaluador 4: Actividades
  • Evaluador 5: Sobre las clases

Talleres/ Logrado 60% /podría ser Talleres libres

  • Evaluador 1: Clases optativas
  • Evaluador 2: Reforzar y mejorar en los talleres para aprender algo más
  • Evaluador 3: Para distraerse y aprender algo
  • Evaluador 4: Adelanto de ramos
  • Evaluador 5: Tipo de talleres para alumnos

Vida Universitaria/ Logrado 0% / podría ser Información para estudiantes

  • Evaluador 1: Cosas sobre los estudiantes o interescolares
  • Evaluador 2: Dimensiones y sitios de la universidad, el ambiente
  • Evaluador 3: La realidad de la Universidad que es diferente a la del colegio
  • Evaluador 4: Que se espera y que es ser estudiante
  • Evaluador 5: Cómo es la vida en la Universidad

Becas/ Logrado 100%

  • Evaluador 1: Sobra las becas de la Universidad y como postular a ellas
  • Evaluador 2: Diferentes tipos de Becas como por nota o deportes
  • Evaluador 3: Tipos de Becas que existen y quienes acceden
  • Evaluador 4: Postulaciones a créditos y Becas
  • Evaluador 5: Becas que se pueden obtener

¿Qué cosas reconoces en el final de la página (footer)/ Logrado 100%

  • Evaluador 1: Direcciones
  • Evaluador 2: Mapa de la Universidad, direcciones, contactos, sedes
  • Evaluador 3: Donde se sitúa la Universidad
  • Evaluador 4: Mapa, sede, links de ayudad que es lo que no se puede encontrar en otras áreas
  • Evaluador 5: Mapa donde se ubica la Universidad, creo que esta es en Santiago



Nuevo Mapa de Navegación y Wireframes

500px

Admisión

Admisión diurna se divide en categorías precentes en el menú que son Becas y beneficios,Aranceles, Admisión 2015 y Admisión Vespertina; además se encuentra un sidebar con accesos a como postular, las vías de ingreso y la atención financiera y matrícula.

En la imagen se presenta la pimera opción del menú, Becas y Beneficios. Al ingresar a esta opción aparece un sidebar con accesos rápidos a secciones de la información desplegada en la página. En el sitio original el modo de acceder cada una de las infomaciones de las becas había que ingresar por uno de los dos link presentes en la página que llevaban al mismo sitio, teniendo que cada vez volver un paso atrás para ingresar a otro link.


Carreras

Aparece organizado de forma geográfica los lugares donde se ubican las sedes de la UNAB, con una fotografía del campus, luego están las facultades y las careras que imparten. El menú es de ancla, por lo que a elegir por ejemplo las sedes de viña del Mar, te lleva a la zona de las carreras de Viña del Mar.


Interior de Carreras

Esta página aparece en el momento de seleccionar una carrera y despliega información general, sobre el perfil profecional, el campo ocupacional, el requisito para la titulación, la ponderación y aranceles en cada sede. Además de la malla que es visible desde la misma pagina y tiene la opción de descargarse.

En un sidebar a la derecha aparecen las carreras que también se imparten en la misma facultad perteneciente a la carrera seleccionada.



Noticias Culturales

Esta página de Noticias está dividida en diferentes secciones, ya que el sitio original estaba dividido en dos páginas diferentes del mismo sitio, donde una agrupaba a las facultades y sus noticias, la otra por tópico cultural, de investigación, difusión de Conocimiento y RSU (Responsabilidad Social) La nueva AI agrupa los contenidos por Tópico y se distingue con etiquetas las áreas a las que pertenece cada noticia (ej: Arquitectura, Diseño, Periodismo) Tópicos:

  • Noticias Culturales
  • Noticias de Investigaciones
  • Noticias de Difusión
  • Noticias UNAB Social


La página de noticia

Al ingresar a una noticia aparecerá en primer nivel el titular de la noticia, en segundo nivel la etiqueta al área a la cual pertenece, en tercer nivel la fecha de la publicación y posteriormente el cuerpo de la noticia.

En un costado se mantiene el sidebar con la agenda, otras cosas de interés como las autoridades que organizan la sección cultural, Otras noticias relacionadas.


Búsqueda de Empleo

Esta página tiene un menú para navegar con las opciones de cómo postular, práctica, oferta de empleo, empresas, contacto.

En el wireframe se muestra la opción oferta de empleo en la cual aparece una lista con todas los avisos de trabajo indicando la fecha, el cargo y la organización y este a su vez se puede ordenar temporalmente o por abecedario. Además se encuentra un buscador para filtrar la búsqueda.

A la derecha se encuentra un sidebar con opciones para filtrar la lista de avisos, estos son, part-time, egresado, del cual se despliegan las carreras e ingeniería comercial.

Modificación de Wireframe

Hemos modificado la estructura del mapa de navegación para mostrar y elevar la importancia de algunos contenidos. En la nueva propuesta de la Home incorporamos las sedes en fotografías, se modificó los tamaños de los sidebar.




Propuesta de Diseño de Interfaz

Para la propuesta de interfaz decidimos utilizar los matices de colores originales del logo de la Universidad azul(#0f1e30), rojo (#ac1a2f).

Logo unabgrande.png


Paleta de Colores

La paleta de colores azules fue utilizada principalmente en los títulares, los títulos más importantes son los más oscuros y así fueron cambiando de color a los más claros. Además en la página de noticias los colores son utilizados para dividir las cuatro secciónes que contiene: Noticias Culturales, Investigación, Difusión, Social.

Mientras que os grises fueron utilizados para las zonas de menú y el footer.

Especifición Tipográfica

Se decidieron dos estilos tipográficos, una para títulos y otra para párrafos continuos. La tipografía Helvetica Neue fue utilizada para los títulos ya que sus formas rectas y delgadas eran legibles y agradable a la vista. Pero decidimos cambiar la tipografía Helvetica Neue para los paárrafos ya que sus letras muy redondas no favorecian la lectura de texto continuo, cambiandola por una Roboto.

Archivo:Tipograìa paraUNAB.png
Tipografía utilizada para el sitio de la UNAB

Diseño de la Interfaz



Correciones de la Interfaz

Las modificasiones se centraron en los detalles tipográfico, anchos de párrafos, los márgenes, el ancho de los sidebar que en la primera propuesta de una grilla de 12 columnas utilizabamos para ellos sólo tres columnas. Ahora utilizan 4 y mejora el aprovechamiento del espacio en nuestras páginas que s caracterízan por ser ser largas.

También existían pequeños detalles como el espaciado de los las palabras del menú, además de que determinamos el color de las páginas activas en el menú.


Home Universidad Andrés Bello

La home al igual que las páginas de Admisión, y la de carreras poseen una slide con grandes imágenes. En la Home cumplen la función de mostrar al usuario las noticias que la universidad quiera destacar, como premios hacia alumnos, profesores o la Universidad.

En el sitio actual la mayoría de las fotografías son pequeñas y de baja calidad, lo que hace parecer que el sitio es antiguo y que por lo menos la home no se ha actualizado.

Interfaz-UNABlisto copia.jpg

Página de las Carreras

Para la página de las carrera pensamos que además de cumplir la función de permitir encontrar lo que el usuario busca, también debía ser atractiva y clara. Por lo que el slide se cambia por una imagen grande que muestra un texto que contextualiza de que trata la página, para ayudar amablemente al usuario encontrar lo que vino a buscar.

En la página actual las carreras se dividen por lugar geográfico (Santiago, Viña del Mar, Concepción) y se muestra una lista de las facultades y carreras, en otra página se encuentra los nombres de los campus y su ubicación pero no especifica que carreras están en cada campus.

Nuestra propuesta trata de unir el campus, facultades y carreras, manteniendo la división geográfica en diferentes páginas.

En todas las páginas que están relacionadas a las carreras o admisión predomina el color rojo como en la línea que marca cuando el manú secundario está activo o en los sidebar.


Carrerasde la UNAB copia.jpg

Interior de Carrera

Interiorcarrerainterfaz-UNAB.png


Página de Admisión

Admisioninterfaz-UNAB.png
Admisioninterfaz-UNAB2.png
Interadmision diurna3.png


Página de Noticias

La página de noticias fue dividida en cuatro secciones y a cada sección se le designo un color que predominará en la página. Para enfatizar que pertenecen a una misma seción pero que ha sido separada.

Las etiquetas van en la parte inferior de las noticias y cuando el mouse de posiciona sobre ella se activa un hover del color que caracteriza a la página.


Página del interior de Noticias


Búsqueda de Empleo

Busquedadetrabajointerfaz-UNAB.jpg

Referencias

  1. http://www.alzado.org/articulo.php?id_art=10 alzado.org Prototipos de papel