Análisis y rediseño UST

De Casiopea


TítuloAnálisis y rediseño UST
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)Melany Marin, Christopher Fattori
ProfesorKatherine Exss
URLhttp://www.santotomas.cl/

Universidad Santo Tomás (Chile)

La Universidad Santo Tomás o UST es una universidad privada chilena fundada en 1988. Además de su sede central en Santiago, tiene otras en distintas ciudades a lo largo de Chile. Perteneciente a la Corporación Santo Tomás, la cual está inspirada en el pensamiento Tomista.

Está presente en trece ciudades de Chile con más de 18 mil alumnos,[cita requerida] comenzó a funcionar a fines de los años 80, logrando su autonomía académica y administrativa el 2003 por parte del Consejo Superior de Educación.

Desde 1995 esta institución forma parte del Consejo Internacional de Universidades Santo Tomás de Aquino (IC-USTA), organismo internacional que reúne casas Superiores de estudios inspiradas en el pensamiento Tomista, algunas de ellas fundadas por el mismo Gerardo Rocha.4

Mapa de Nav 1

Revisando el sitio completo de la Universidad Santo Tomás, observando sus menús y secciones, logramos obtener y diagramar el siguiente mapa de contenidos:

MAPA COMPLETO SANTO TOMAS.png

Se puede observar con mejor precisión en el pdf: Archivo:MAPA COMPLETO SANTO TOMAS.pdf

Cart Sorting

Actividad

Para rediseñar el mapa de contenidos de la Universidad Santo Tomás (UST) se realizó un cart sorting con alumnos de 4º medio del colegio Nuestra Señora de Pompeya, ubicado en la comuna de San Antonio.

En una sala reservada se dispusieron las tarjetas que los alumnos organizarían según lo que ellos pensaran sería lo optimo encontrar en un sitio web de una universidad.

Los jóvenes primero organizaron las tarjetas por afinidad de contenidos en una mesa.

Para luego organizarlas en categorías construyendo así una propuesta de mapa de contenido.

Finalizando esta actividad se les hizo unas preguntas acerca de lo que hicieron y qué esperaban de un sitio web universitario.

Observaciones

Contenido didáctico, textos resumidos, que llegue preciso a la información y la imagen demuestre lo que se tiene que ahorrar leer.

Paso a paso. Que te muestre el paso a paso, el como ingresar, el como acceder a una beca, el paso a paso, no beca y págalo, sino el cómo hacerlo.

Galería de fotos y video. Donde haya experiencia de profesionales que tienen un par de años de egresados que muestren cómo fue salir y el apoyo de la universidad, que cuenten a que llegaron. Mas que una reseña que ellos escriban una reseña que ellos cuenten.

¿y eso lo vieron dentro del mapa? ¿donde creen que iría?

En vida universitaria. Que el video que muestren no sea así como maqueteado, sino que sea así como espontáneo. Que no se note todo muy preparado, pautado.

¿y quieren eso? él dice que quiere vídeos, y tu dices que no ¿lo quieren?

Que lo que se ve en una pagina está todo muy preparado, algo más natural, más en donde sea que lo hayan hecho es llegar y grabar en el momento. No que los lleven a una habitación con fondo blanco y le empiecen a preguntar.

Información de las carreras y puntajes que se necesitan para cada carrera, cuánto sale cada carrera en específico. Cuáles están acreditadas y cuántos años.

¿les importa la acreditación?

Si, por que si uno no sabe tiene que esperar y es mejor saber altiro en la universidad.

¿Y esto cómo está dispuesto?

Lo que está es lo que esperamos que esté en una pagina, lo de abajo no es que sea menos importante pero es lo que ve segundo. Lo ordenamos en como es lo que buscamos primero en menú.

Resultado

Como resultado de la actividad se obtuvo el mapa de contenidos que se presenta a continuación:

Mapa cart sorting.png

Está organizado desde lo más alto en mayor jerarqía y lo más bajo en inferior jerarquía. Luego en relevancia de izquierda a derecha. Ademas están organizados según tópicos con pequeñas secciones de tarea, es decir, es una organización híbrida.

Mapa Nav 2

Analizando el mapa propuesto por los alumnos de 4º medio y el mapa que realizamos originalmente, realizamos una segunda propuesta. En esta propuesta realizamos lo siguiente:

  • Síntesis del menú: El anterior diagrama contaba con 2 menú en distintos niveles. Aquí las secciones Universidad e IP/CFT, que anteriormente contaban con menú particular ahora comparten las mismas secciones admisión y becas. Muchas secciones se sintetizaron en la sección "universidad".
  • Conexión de secciones: Sintetizamos secciones que eran paginas que se reiteraban en otras secciones.
  • Footer: Realizamos un mismo footer general para todos, pues compartían varios enlaces entre todos, y las diferencias se suprimieron por ser poco relevantes.


SEGUNDA PROPUESTA santo tomas.png

Se puede observar con mejor resolución en el siguiente pdf: Archivo:SEGUNDA PROPUESTA santo tomas.pdf

Test con usuarios: wireframe Inicio

Para esta prueba se realizó una versión prueba del sitio Inicio de la UST, para ello se les presentó el wireframe en un computador, dejar que inspeccionen lo que ven y luego nos digan qué ven, si lo entienden, qué dudas tienen, qué arreglarían.

Wireframe Inicio

Usuario 1

Usuario 1 santo tomas test.jpg


  • Nombre: Ricardo Vásquez
  • Edad: 18 años
  • Ocupación: Estudiande de 4º medio y preuniversitario
  • Descripción: Ricardo es un alumno que visita constantemente los portales de diferentes universidades, con el fin de averiguar principalmente los puntajes de ingreso a carreras que le interesan, recibe charlas en el liceo y preuniversitario de ingreso a la universidad.

Los primeros puntos que observa del sitio

  1. Acreditación de las carreras
  2. Admisión
  3. Sedes para saber en que sedes se encuentran sus carreras de interés.

Lo que cree que significa cada punto del inicio

  1. Admisión: Que le digan lo que necesita para postular a una carrera, documentos, informes de notas.
  2. Becas y financiamiento: Becas internas de la universidad
  3. Áreas: De cada carrera, cual es el estado de cada carrera, como ejercen a futuro, su campo laboral.
  4. Acreditación: Cuantos años de acreditación tiene cada carrera para ver si le sirve según los beneficios que el postula, lo sabe diferenciar de becas y financiamiento
  5. Quienes somos: Le hablan de la universidad y aparece también el contacto
  6. Universidad: Listado de las carreras con la malla, mas le causa
  7. CFT: Carreras técnicas
  8. Postgrados: Después de la titulación de la carrera
  9. Capacitación: Cursos que se hacen dependiendo de la carrera
  10. Contáctenos: Por vía telefónica, por correo y redes sociales
  11. Preguntas frecuentes: Que las personas puedan dejar su pregunta y que se les conteste allí, con un encargado que responda, fechas de postulación, etc.

Le causa duda los términos

  1. Áreas: Piensa que le cuentan de que se trata la carrera y el campo laboral de las carreras, le queda una duda
  2. IP: No lo reconoce ni le resulta familiar,
  3. CFT: Lo conoce debido a que el estudia en un liceo con carreras técnicas, en ves de llamarlo "centro de formación técnica" lo llama "carreras técnicas"
  4. Área alumnos: No se encuentra familiarizado con los términos, solo con vida universitarias e intercambio estudiantil
  5. Vínculos: Si es de su interés entraría, si fueran publicitarias no.
  6. Universidad: No sabe a que se refiere en especifico
  7. Capacitación: Lo identifica como "cursos de capacitación" dependiendo de las áreas de estudio.
  8. Colegios: No sabia que Santo Tomás tenia colegios, pero al explicarle explico que deberían mostrar los establecimientos por regiones.
  9. Traducción: No lo encuentra útil por que su computador lo traduce, no lo notó y no entiende que las letras japonesas sean la traducción al japones, aclarar que son traductores de la página

Usuario 2

Usuario 2 santo tomas test.jpg
  • Nombre: Katherine Mella
  • Edad: 21 años
  • Ocupación: Estudiante de 4ºaño de fonoaudiología en Universidad de Valparaíso
  • Descripción: Katherine principalmente usa el "portal académico" o intranet de su universidad para confirmar las claves de las clases, acceder a ficha de aranceles, boletas, certificados de alumno regular, entre otros.

Lo que cree que significa cada punto del inicio

  1. Becas y financiamiento: Es muy útil para observar si se acercan los plazos de un crédito o beca.
  2. Quienes somos, acreditación de las carreras y admisión: Lo observan principalmente postulantes a la universidad.
  3. Áreas: No sabe a que se refiere, al verlo en el recorrido de la home lo reconoce como "áreas de especialización" o "facultades".
  4. Capacitación:¿Es solo para posgrados o pregrado, charlas y cursos, congreso? ¿capacitación para quien? porque podrian ser eventos o charlas, conferencias o actividades extraprogramáticas o son los cursos a trabajadores.
  5. Universidad: Entiende que es pregrado, pero le parece raro que tanto ip, cft y postgrados tambien son parte de la universidad.
  6. DAE: No conoce la sigla.
  7. Intranet: Sabe que es pero lo conoce por otros nombres.
  8. Vínculos: Le suena como intercambio estudiantil, vinculación con el medio, al explicarle que son proyectos desarrollados dentro de la institución o entidades que apoyan a la universidad, lo llama "patrocinadores" o "colaboradores"
  9. Colegios: No sabia que los colegios son propios de la universidad, creía que eran convenios con colegios.

Comentarios respecto a la agrupación de contenidos

  1. Quienes somos, admisión y sedes debiesen estar juntas debido a que son dirigidas a postulantes a la universidad
  2. Becas y financiamiento con acreditación de carreras acercarlas ya que tratan temáticas similares
  3. El portal académico (intranet) debiese estar arriba (en el menú secundario) con la palabra "ingresa" o "portal académico". Para ingresar al portal cuando ya eres estudiante y hacer tramites personales.
  4. Intranet, DAE y biblioteca debiesen estar juntos porque implican interacción directa con el alumno y subirlo de categoría (esta muy sutil), todos los demás debiesen estar aparte.
  5. Crea empleo sala prensa y todos los demás items de alumnos debiesen estar aparte, porque solo se revisan de vez en cuando.

Le causa duda los términos

  1. Áreas: Palabra muy ambigua
  2. Capacitación: Cursos y capacitaciones
  3. Universidad: Pregrado, carreras pregrado o carreras
  4. Intranet: Ingreso pregrado, portal academico o intranet alumnos
  5. Vinculos:"Patrocinadores" o "colaboradores"
  6. Colegios: Especificar que son colegios de la Santo Tomás

Usuario 3

Estudiante ust3.jpg
  • Nombre: Solange Gutiérrez
  • Edad: 18 años
  • Ocupación: Estudiante de 4ºaño medio del instituto comercial
  • Descripción: Solange busca una manera de elegir una carrera que se encuentre en la región de valparaíso, no está segura de qué estudiar y le interesa elegir una buena carrera que le quede cerca. A la vez le interesa la acreditación y cómo contactarse con la universidad.

Lo que cree que significa cada punto del inicio

  1. Becas y financiamiento: supone que aquí se encuentran como pagar y las becas particulares de esta universidad
  2. Acreditación: Reconoce que se refiere a los años acreditados de las carreras.
  3. Instituto-CFT: No reconoce la sigla, piensa que es algo aparte de la universidad.
  4. Universidad: No entiende porqué está a parte de "quienes somos" si univerisidad y santo tomas es lo mismo, cree aquí muestran las partes de la universidad.
  5. DAE: No reconoce la sigla.
  6. Intranet: no sabe lo que es intranet.
  7. Vínculos: para ella cree que son lazos de la universidad con otras instituciones.
  8. Colegios ust: Pensaba que otorgaban "servicio técnico".

Comentarios respecto a la agrupación de contenidos

  1. Quienes somos y universidad debieran estar juntas debido a que se refieren a lo mismo.
  2. Cree que debe haber la sección noticias en el menú para verlas de inmediato ahí.

Le causa duda los términos

  1. Áreas: Prefiere la palabra Carreras
  2. Capacitación: Cursos y capacitaciones
  3. Intranet: debería llamarse "avance de alumnos" o algo que indique que es para ver las notas.
  4. Vinculos:"colaboradores"
  5. Colegios: Especificar que son colegios de la Santo Tomás.

Usuario 4

Estudiante-ust4.png
  • Nombre: Jaime Sepúlveda
  • Edad: 20 años
  • Ocupación: Estudiante de 2ºaño de educación física.
  • Descripción: Jaime le interesa participar de las actividades de la universidad, saber qué tipo de eventos se hacen, tomar algún curso extra para perfeccionar su titulo.

Lo que cree que significa cada punto del inicio

  1. Admisión: requisitos, becas, puntajes.
  2. Becas y financiamiento: Becas de la universidad y el estado.
  3. Áreas: por tema de carreras, pero prefiere que diga facultades.
  4. Acreditación: los años protegidos de cada carrera y facultad.
  5. Quienes somos: Misión y visión de la institución.
  6. Universidad: Un recorrido de la historia y sus facultades, los profesores y directores.
  7. Contáctenos:Lugar, teléfonos de la universidad y facultades, correos y redes sociales.
  8. CFT: le costó reconocer la sigla centro de formación técnica, pero cree más directo "Carreras técnicas".
  9. Postgrados: Para fortalecer el título, los magister y postitulos.
  10. Capacitación: Cursos que se hacen dependiendo de la carrera
  11. Sitio Alumnos-Dae:referente a necesidades de los estudiantes, prefiere que se llame Asuntos Estudiantiles y quitar la sigla.
  12. Crea Empleo:Para formular un proyecto y obtener trabajo dentro de la universidad.
  13. Circulo de egresados:donde se juntan los egresados para pedir apoyo a la universidad, como asistencia.
  14. Preguntas frecuentes: listado de preguntas de como matricularse, cuando pagar y como, etc.

Comentarios respecto a la agrupación de contenidos

  1. noticias de la universidad debería estar en área de alumnos por que son las actividades que hacen los alumnos dentro de la universidad.
  2. en noticias debería estar en lo que ofrece la universidad como postgrados y postitulos.
  3. en área alumnos debería ser más visual darle importancia a lo que hacen los alumnos.
  4. Invertir los menús, porque lo que la gente mas lee es lo que está en el menú de abajo y aumentar la tipografía.
  5. quienes somos debería al principio para que sepan de inmediato de qué se trata.
  6. en área alumnos separar los servicios de la universidad como "sala de prensa", "editorial", "empleo" de las cosas netamente de los alumnos como la "dae", la "intranet", la "vida universitaria" y el "intercambio estudiantil"

Le causa duda los términos

  1. Áreas: Prefiere la palabra Facultades
  2. CFT: Prefiere la palabra Carreras técnicas
  3. editorial: ¿son talleres de los alumnos o libros hechos por la universidad?
  4. Vinculos:"enlaces"
  5. Colegios: Especificar que son colegios de la Santo Tomás.

Diseño de Wireframes

Tomando en cuenta lo aportado por las pruebas de usuarios se corrigen algunos términos y se agrupan de mejor maneras unas secciones dentro del inicio. Así luego se decidierón qué otras plantillas dentro del sitio diseñar.

Plantillas

Plantillas UST.png

Inicio

Los cambios que se generan en el área de inicio se relacionan a los términos que son dificiles o ambiguos en su comprensión para los usuarios, los cuales son:

  • Univesidad > Carreras universitarias
  • IP > Instituto profesional
  • CFT > Carreras técnicas
  • Capacitación> Cursos de Capacitación
  • Colegios > Colegios Santo Tomás
  • Áreas > facultades
  • Intranet > Portal academico
  • English version y japanise version > traduce nuestro sitio
  • Vínculos > Extensiones

Además se modifica la jerarquía de las áreas de alumnos, que se presentaba como listado sin diferenciación, cambia al aumentar la relevancia de las secciones de Portal academico, Biblioteca y Sitio Alumnos-DAE. Se arregla la sección de Áreas y carreras, a Estudia en Santo Tomás y Encuentra tu sede, ya que los títulos genéricos resultaban ambiguos a los usuarios.

UST home.png

Admisión

Continuando con nuestra propuesta el sitio admisión sirve como centro para posturlar a los distintos aspectos de la UST, es decir, para postular a todas las carreras de la UST, a los postgrados y para los colegios.

Carreras universitarias

La página de carreras universitarias sirve como plantiila tanto para instituto profesional, carreras técnicas, postgrados, cursos de capacitación y colegios. Usa la misma plantilla que la home, pero presenta las facultades que tienen carreras relacionadas a la categoría.

UST UNIVERSIDAD.png

Carrera específica

Al seleccionar una carrera específica, se despliega un menu lateral que apoya a la lectura cuando posee sub categorias, que funciona como ancla. Al final entrega temas relacionados, como otrs carreras de esa facultad y otras facultades.

UST carrera especifica.png

Noticias

Funcionando como sitio en común, esta sección se agrupan las noticias de las secciones Universidad, Instituto profesional y Centros de formación técnica, cada una con su correspondiente galería de imágenes.

Wireframe-noticias-santo tomas.fw.png

Detalle Noticias

Al ingresar a una noticia

Wireframe-detalle noticias-santo tomas.fw.png

Detalle Gallería

Al ingresar a una galería

Wireframe-detalle galleria-santo tomas.fw.png

Quienes Somos

Qiens somos utiliza la misma estructura de las carreras específicas en donde se despliega un menú lateral que apoya las lecuras extendidas.

UST quienes somos.png

Contáctanos

Simplificación del formulario original del sitio de la UST, se presenta en lectura vertical.

Wireframe-contacto-santo tomas.fw.png

Corrección de wireframes

Diseño de interfaz

Una vez definidos los wireframes ubicando las secciones relevantes de los contenidos a partir de los mapas de contenidos, se crean los wireframes de interfaz, los que establecen criterios de color y estilos, para facilitar y conducir la lectura de los contenidos, estableciendo jerarquías por color y tipografía.

Para la realización de estos wireframes de carácter visual se definieron las siguientes paletas de color y tipografías.

Paleta de color

Los colores que utilizará el sitio de la UST está definido por esta paleta de color:

Santo tomas color.png

Esta paleta de color nace del color institucional de la UST el cual es el color verde más oscuro, a partir de aquél se definen variantes de menor opacidad y mayor luminosidad dentro del rango de los verdes.

Estilos de texto

Estilos de texto.png

Inicio

Se definen la división de secciones por color, variando entre el amarillo y el blanco, estilizados con un franja de color. Además se definen los estilos tipográficos, como también los estilos de hover y fotografías.

Interfaz santo tomas home copia.jpg

Correción interfaz

Inicio

Interfaz santo tomas home2.jpg

Admisión

Admision-santo tamas-final.jpg

Facultades y carreras

Facultades y carreras-santo tamas-final.png

Carrera específica

Carrera especifica-santo tamas-final.png

Noticias

Interfaz santo tomas noticias.jpg

Detalle Noticias

Interfaz santo tomas detalle noticias.jpg

Detalle Galería

Interfaz santo tomas galeria.jpg

Contacto

Interfaz santo tomas contacto.jpg

Quienes somos

Quienes somos-santo tamas-final.png