Estudio y nueva propuesta para el sitio de la UTFSM

Título	Estudio y nueva propuesta para el sitio de la UTFSM
Tipo de Proyecto	Proyecto de Curso
Palabras Clave	usabilidad, estudio heurítico, lenguaje computacional
Período	2013-2013
Asignatura	Lenguaje Computacional 3,
Del Curso	LC3 2013
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)	Camila Valenzuela, Josefina Borja, Javiera Rojas, Franco Baldassare, Caterina Da Silva
Profesor	Jorge Barahona
PDF	Archivo:Presentación LC3 - Heurística UTFSM.pdf
URL	http://www.usm.cl/

Introducción

Para lograr entender cómo realizar un sitio web centrado en el usuario, se nos pide estudiar como caso, sitios web de universidades como la PUCV, la UAI, la UV, la UTFSM y el MIT.

Nosotros elegimos la Universidad Santa María, y para comenzar a establecer un acercamiento a lo que ellos quieren lograr con su sitio web, decidimos conocer su misión y visión, junto con sus objetivos, para luego definir a sus usuarios. De esta manera tendremos más conocimiento sobre los criterios con que desarrollaron el sitio. A partir de eso, entre todos desarrollamos un estudio heurístico y bajo esos parámetros, levantamos una nueva propuesta de orden al mapa de navegación a raíz del viaje de un usuario primario en el sitio.

Universidad Técnica Federico Santa María

La UTFSM es una universidad tradicional particular perteneciente al CRUCh, y se define a sí misma como “Líder en Ingeniería, Ciencia y Tecnología”

Misión y visión

Su misión es contribuir mediante la Docencia, la Investigación y la Extensión, a la creación de nuevos conocimientos, a su difusión y entrega universal, a la formación humana, científica y profesional de sus alumnos. Visión: Ser una Universidad líder en Ingeniería, Ciencia y Tecnología para Chile y reconocida internacionalmente.

Objetivos

La Santa María tiene como objetivos:

1. Posicionarse como primera opción de estudios a nivel nacional en el área de la ingeniería.
2. Facilitar el ingreso a estudiantes meritorios con una situación académica deficitaria por medio de becas y beneficios.
3. Aumentar el ingreso de estudiantes de excelencia por medio de premios de liberación del pago total o parcial de los aranceles y matrículas.

Personas y escenarios

Los personajes y la creación de escenarios son técnicas que facilitan ponerse en el lugar del usuario y diseñar la web adecuadamente para este. Según el libro About Face de Alan Cooper pueden existir hasta 6 tipos de personajes dentro de todo proyecto: primarias, secundarias, suplementarias, clientes, a las que se le da servicio (served) y negativas. Aquí hacemos uso de algunos de estos personajes para ejemplificar el uso del sitio.

Usuario Primario: Consuelo Torres

Persona:

• Nombre: Consuelo Torres
• Ocupación: estudiante (secundaria)
• Edad: 18 años.

Es alumna de IVº año medio del colegio Sagrados Corazones de Viña del Mar. Este año da la prueba PSU para poder entrar a la universidad y como primera prioridad está interesada en postular a Ingeniería Civil en la Universidad Federico Santa María.

Escenario: Consuelo para poder obtener información respecto a la carrera y a la universidad que está interesada, accede al sitio http://www.usm.cl/. En su primer encuentro y escaneo del sitio, hace click en “futuros alumnos” para poder conocer los puntajes ponderados, malla curricular, acreditación de la carrera, aranceles, etc. Al acceder a esta página dentro del sitio, se encuentra con ensayos de PSU, premios, becas y beneficios. Pero lo que ella está buscando principalmente se encuentra en la parte inferior derecha, esto le produce desconcierto al observar que los contenidos que busca estén en ese espacio, ya que considera que no se le otorga el énfasis que corresponde.Al ingresar a dicha sección no se encuentra en un primer instante con lo que ella quiere encontrarse. Ante esto decide no seguir navegando en el sitio y lo abandona.

Usuario Secundario: Marcos Rodriguéz

Persona:

• Nombre: Marcos Rodríguez
• Ocupación: estudiante de ingeniería industrial
• Edad: 25 años

Es estudiante de la universidad Federico Santa María, cursa quinto año de Ingeniera Industrial. Generalmente accede al sitio de la universidad como usuario del intranet para obtener información sobre sus horarios, cursos inscritos y notas.

Escenario: Marcos accede al sitio http://www.usm.cl/, para obtener los resultados de los exámenes finales del primer semestre del 2013, para revisar si ha aprobado y así poder pre-inscribir los ramos del segundo semestre. Él al acceder al sitio hace click directamente sobre “intranet” donde le piden el nombre de usuario y su clave. Ocurre que cada vez que él accede a intranet, primero tiene que ingresar al sitio general de la universidad y buscar en la barra lateral izquierda donde aparece una serie de contenidos bajo la misma jerarquía. Para él sería más fácil acceder a intranet si estuviera en el menú de navegación principal o de manera más destacada.

Usuario Servido: Guillermo Espinoza

Persona:

• Nombre: Guillermo Espinoza
• Ocupación: ingeniero químico
• Edad: 34 años

Guillermo estudió Ingeniería Química en la Universidad Federico Santa María. Actualmente trabaja en un laboratorio de alimentos marinos en Valparaíso, con un equipo de ingenieros en alimentos. Lleva un par de años con la idea de realizar un magíster, pero el trabajo lo ha mantenido ocupado.

Escenario: Guillermo decide que ya es tiempo de llevar a cabo su idea. Para esto accede al sitio de la universidad, ya que un profesor le recomendó el Magíster en Ciencias de la Ingeniería Química. Ingresa al sitio y va directamente al menú lateral izquierdo, donde encuentra Postgrado, el cual lo dirige Magíster. Ahí se encuentra con un listado de Magíster, según las sedes de Chile. Él hace click en el magíster recomendado que lo lleva al sitio http://www.dgip.utfsm.cl/ donde finalmente encuentra lo que quiere. Le resulta poco agradable la serie de pasos a seguir para poder encontrar lo que él está buscando, además el listado de magíster le parece poco atractiva para el usuario.

Mapa de Navegación del sitio actual

El mapa del sitio actual muestra cómo están ordenados los contenidos dentro del sitio usm.cl, sin contar los sitios internos.

Viaje de usuario primario

Para acotar la investigación, decidimos basarnos en el viaje que haría el usuario primario a través del sitio para mejorar su experiencia buscando la información que necesita. En la galería mostramos los pantallazos de su viaje a través del sitio y luego, un mapa mostrando su navegación de manera más gráfica.

• 

  Home

• 

  Carreras de Pregrado

• 

  Ingeniería Civil

• 

  Acreditación, Malla Curricular de la Carrera y Ubicación de lugar de estudios

• 

  Puntaje de Corte y Ponderaciones PSU

• 

  Derecho de Matrícula y Arancel de la carrera

• 

  Becas y Beneficios

• 

  Premios

• 

  Becas

Evaluación Heurística del Sitio

Aplicamos la siguiente Evaluación Heurística y éstos fueron los Resultados. Graficamos los resultados para así darnos cuenta de la proporción de aceptación del sitio entre nosotros.

Decidimos juntar las respuestas No sé con los No a raíz de que si alguien no sabía la respuesta a una pregunta, ésta es más cercana al no que al sí. Archivo:LC3-UTFSM-gráficados.png

Finalmente, decidimos graficar las respuestas de acuerdo a las secciones, mostrando así las falencias del sitio más claramente. Archivo:LC3-UTFSM-gráficatres.png

Profundización de los resultados

1. Generales: En términos generales no hay graves problemas de lógica o coherencia entre el sitio y la imagen de la universidad.
2. Identidad e Información: El sitio está bien informado sobre la figura corporativa y mantiene actualizaciones vigentes que ayudan a presentar a la universidad como una institución presente.
3. Lenguaje y Redacción: El principal problema en este ítem es que los textos son demasiado extensos, por lo que es muy probable que el usuario no los lea.
4. Rotulado: En el caso del rotulado, en general se cumple con estándares en el ámbito de la temática universitaria.
5. Estructura y Navegación: Este sitio estructuralmente tiende a perder el control del contenido, manejar sus largos respecto a su ancho y la redundancia de enlaces se mezclan entre los diferentes sitios. Por otro, lados las imágenes son elocuentes tituladas y no cuenta con elementos de navegación siempre elocuentes al tema en cuestión por lo que la navegación tiende a perderse.
6. Lay-Out de la Página: Se cuestiona en el sitio el uso correcto de los espacios visuales con sus jerarquías en la mayoría no se pudo definir su aprobación o negación, por lo que tiende a ser negativo.
7. Búsqueda: El sitio no contiene una busqueda avanzada y el tamaño de la caja de búsqueda no es óptimo, es muy pequeño y en una primera mirada al sitio no se alcanza a percibir su ubicación. Por último, el usuario, al no saber el nombre específico con que buscar, el sitio no ayuda a ofrecer resultados cercanos.
8. Elementos Multimedia: Las imágenes no interactúan de ninguna manera con el usuario más que representar visualmente el contenido del párrafo que se está leyendo.
9. Accesibilidad: En cuanto a la accesibilidad, no existen mayores problemas excepto por el peso de la página que a veces presenta contenidos que tardan en cargar.
10. Control y Retroalimentación: El sitio no informa acerca del lugar en el que no encontramos ni como volver a la página anterior. Lo que hace más lenta y confusa la navegación y búsqueda de los contenidos de interés.

Propuestas de mejora

Por sección de estudio

• Identidad e Información: Las publicaciones de noticias deberían mostrar quién las publica para conocer la fuente de la información.
• Lenguaje y Redacción: Se Recomienda, bajar la cantidad de extensión del contenido con el fin de que el usuario, alcance la información precisa a través de textos cortos y claros.
• Rotulado:Se presentó un caso específico en el que en la sección de la carrera hay un botón con un carácter visual importante que dice “Conoce ociv.utfsm.cl”, cuando lo más recomentable sería nombrar al Departamento de Obras Civiles y no su URL.
• Estructura y Navegación: Debe manejar sus largos respecto a su ancho y la redundancia de enlaces se mezclan entre los diferentes sitios.
• Lay-Out de la Página: Se recomienda que la extensión del contenido no sea desmedido con el fin de que su longitud no canse al lector.
• Búsqueda: El sitio debiese tener más opciones de búsqueda,y mejorar la visualización de ésta.
• Elementos Multimedia: Se recomienda eliminar las imágenes en movimiento ya que por su tamaño se vuelven un despropósito. Por otro lado se integran links a una sola imagen dentro de estas imágenes en movimiento.
• Accesibilidad: Se recomienda que este sitio sea re diseñado para ser un sitio responsive adaptable a muchos tipo de pantalla. También se recomienda que en la home se regulen las tipografías en la sección de “USM Noticias” ya que su lectura se vuelve muy pesada. Se aconseja aumentar su interlínea.
• Control y Retroalimentación: Es necesario poder situarse de alguna manera dentro del sitio a través de algún indicador, título, etiqueta, etc.

Nuevo Mapa de Navegación

Archivo:LC3-UTFSM-NuevoMapaNavegación.png Según el estudio heurístico realizado anteriormente, pudimos detectar errores dentro del mapa de recorrido e hicimos cambios dentro de este.

1. Se agregó información fundamental como: vacantes, ponderaciones, puntaje de corte y arancel, específicos de cada carrera dentro del sub sitio por carrera. De esa manera se acortaba la búsqueda de información la cual tendía a dispersarse y alejarse cada vez más del sitio de la carrera.
2. Se cambió el rotulado de un botón escrito como URL del departamento de Obras Civiles, quedando solamente en el botón el nombre "Departamento de Obras Civiles".
3. Los el enlaces a la sección de "Requisitos" y de "Aranceles" con la información de todas las carreras, son removidos del sitio por carrera, y se reubican en el sitio donde aparecen todas las carreras (debido a que no son de una carrera específica).
4. Se agrega una descripción a las subcategorías de becas que hace la universidad (Becas, Beneficios y Premios). Ya no se muestran solo una o dos de las becas que contiene cada sección sino que se presenta el listado completo para que sea visible aún cuando todavía no ingresamos a la subcategoría. De esta forma ya sabemos con lo que nos encontraremos dentro y podemos acceder de una forma más rápida y directa. Además se reordenan enlaces que estaban en una subcategoría que no les correspondía.
5. Los documentos en formato PDF como reglamentos y formularios los hemos agrupado en "Documentos" ya que se encontraban dispersos entre el contenido de la página.
6. El enlace a Becas y Créditos del gobierno ya no está dentro de la subcategoría "Becas", sino que lo ubicamos inmediatamente en la sección "Becas y Beneficios"

Diseño Participativo de Wireframes

Presentación

Nuevo Mapa de Navegación "Home"

Wireframes

• 

  Wireframe "Home" Web

• 

  Wireframe "Home" Móvil

Testeo de Wireframes

Para este siguiente paso, debemos crear wireframes navegables para que los usuarios que anteriormente nos ayudaron a crearlos para que hagan pruebas de usabilidad, y así saber si pudimos filtrar bien sus instintos en nuestro diseño.

Nuevo Usuario

Daniel Ellwanger

• Nombre: Daniel Ellwanger Walbaum
• Edad: 24 años
• Estudios: Egresado del colegio Saint Paul’s School el 2007, actualmente cursa 6º año de Ingeniería Civil UTFSM.

Daniel fue elegido como sustituto de Renzo Baldassare, debido a que Renzo no se encontraba presente. Como usuario se asemeja a Renzo en el sentido de que ya está capacitado para pensar en continuar sus estudios de carácter de Post-Grado (Magister), además, es parte de la Universidad Técnica Federico Santa María y puede conocer mejor la forma en que funciona el sitio web de su universidad.

Tareas a realizar

1. Encontrar Carrera Ingeniería Civil
2. Buscar Ubicación de la carrera
3. Encontrar el Arancel de la Carrera
4. Encontrar Magister de Activos y Mantenimiento
5. Encontrar Becas e Ingreso Especiales

Wireframes de la prueba

Para hacer estos wireframes usamos la aplicación [Wireframe.CC], la cual nos permite de manera rápida crear Wireframes interactivos disponibles aún sin conexión a internet. Se pueden revisar éstos en línea [aquí].

• 

  Home

• 

  Carreras USM

• LC3-EstudioUTFSM-WireframesPrueba-IngenieríaCivil.png

  Ingeniería Civil

• 

  Postgrados

• 

  Becas e Ingreso Especial

• 

  Magisters

• 

  Magíster en Gestión de Activos y Mantenimiento

Usuarios realizando las pruebas

Para registrar las pruebas de usabilidad, utilizamos la aplicación [Silverback]. Una herramienta que simplifica el uso de cámara, micrófono y visualización de pantalla en un solo archivo.

• 

  Cristian

• 

  Daniel

Visualización de Datos

Registro del tiempo demorado en realizar cada ejercicio en segundos.

Análisis de Datos

• De la primera tabla se puede observar que la suma de los tiempos por persona arroja que los usuarios Cristian y Daniel presentan una mayor facilidad para navegar dentro del sitio.
• El promedio de los tiempos de la tabla indican que hay un promedio de 6 segundos en total por acción pedida.
• El tiempo de búsqueda de la carrera Ingeniería Civil fue de 20s para Margarita, lo cual es mucho tiempo para un estudiante de 4º año medio.
• El tiempo de búsqueda de la ubicación de la carrera obtenido por Margarita es de 30s, por lo que es excesivamente alto para una información que está dentro del sitio de Ingeniería Civil.
• Daniel tuvo problemas para encontrar Becas e Ingreso Especial, tardando 26s.
• Según los datos Cristian tuvo problemas para encontrar el Magíster en Activos y Mantenimiento tardando (20s).

Objetivos por Cumplir en la nueva propuesta de wireframe

• El botón de Carreras debe ser más vistos, y debe ser agregando la opción “Carreras y Sedes” dentro del menú principal. Con el fin de poder acceder dentro de la barra de menú y desde el sidebar haciendo evidente el acceso en caso que se quiera.
• Darle mayor espacio a los textos del sidebar derecho (con la información de la carrera) para que se lean más claramente, de esta manera la información que es fundamental se puede leer más rápido.
• Becas y Crédito debería estar más distinguida dentro del wireframe.

Nuevos Wireframes

Wireframes Navegables

• 

  Home

• 

  Carreras

• 

  Ingeniería Civil

• 

  Becas y Admisión Especial

• 

  Postgrados

• Wireframe UTFSM p2 Magíster.png

  Magíster

• Wireframe UTFSM p2 MagísterenGestióndeActivosyMantenimiento.png

  Magíster en Gestión de Activos y Mantenimiento