Análisis y rediseño sitio UNAB
| Título | Análisis y rediseño sitio UNAB |
|---|---|
| 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) | Ingrid Céspedes, Cindy Sanhueza |
| Profesor | Katherine 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.
Card Sorting
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.
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
Perfil de Evaluadores
- 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.
- Nombre:Rodrigo Bustos
- Edad:18 años
- Estudiante de Cuarto año Medio, del colegio Los Reyes.
- Nombre:Aranxa Ross
- Edad:18 años
- Estudiante de Cuarto año Medio, del colegio Los Reyes, asiste a interescolares por su colegio.
- 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.
- Nombre:Pablo Romero
- Edad:18 años
- Estudiante de Cuarto año Medio, del colegio Los Reyes.
Proceso de Prueba - Evaluador 1
Proceso de Prueba - Evaluador 2
Proceso de Prueba - Evaluador 3
Proceso de Prueba - Evaluador 4
Proceso de Prueba - Evaluador 5
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
Archivo:Nuevo mapa UNABdesde eñ PDF.png
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.
Home
- Página 1unab.png
Admisión 1
- Página 2unab.gif
Admisión 2
- Página 3unab.gif
Admisión 3
Carreras
Carreras
Carreras
- Wireframe caextensión cultural.png
Noticias
- Wireframeextensión-cultural2.png
Noticias
Portal de empleo
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.
Home del sitio UNAB
Página de Carreras
Página de la Noticia
Interior de la Noticia
Interior de la Carrera
Búsqueda de Empleo
Admisión
- Wireframe admision UNAB Página 2.png
Admisión página 2
- Wireframe admision UNAB Página 3.png
Admisión página 3
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).
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.
Diseño de la Interfaz
Parte superior de la Home
Parte inferios de la Home
Parte superiorde Noticias
Parte inferior de Noticias
Parte superior de la carrera
Parte inferior de la carrera
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.
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.
Interior de Carrera
Página de Admisión
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
Referencias
- ↑ http://www.alzado.org/articulo.php?id_art=10 alzado.org Prototipos de papel
