Caso Estudio Universidad de Valparaíso

De Casiopea



TítuloCaso Estudio Sitio Universidad de Valparaíso
Tipo de ProyectoProyecto de Curso
Palabras Clavesitio, wireframe, card sorting
Período2013-2013
AsignaturaLC3 2013
Del CursoLC3 2013
CarrerasDiseño Gráfico
Alumno(s)Nathaly Sepúlveda, María Ignacia Falcone, Francisca Wevar, Celeste Mardones, Karla Vargas, Gabriela Pérez
ProfesorJorge Barahona


Tabla de Contenidos

Grupo Universidad de Valparaíso

Evaluación Heurística

Caso de Estudio

Usuario tipo: joven estudiante

Rango de edad: entre 17 a 18 años

Experiencia de uso del sitio: Un joven estudiante pretende postular a la Universidad de Valparaíso el próximo año. Con este fin, ingresa al sitio de la universidad para informarse en el área de la carrera de Ingeniería específicamente. Al acceder al sitio su interés se centra en en la búsqueda de la siguiente información:

  • Ingresar al sitio de carrera de interés
  • Revisar los aranceles por carrera
  • Revisar puntajes de corte
  • Beneficios y becas
  • Ponderaciones
  • Matrícula
  • Recibir información
  • Infraestructura
  • Medios de contacto con la universidad (teléfonos,mail,redes sociales)
  • Malla curricular
  • Perfil de egreso
  • Requisitos adicionales (vías de ingreso, pruebas específicas antes

de ingresar,etc)

Heurística 1: Visibilidad del estado del sistema

Preguntas presentadas:

  1. ¿Tienen los elementos del sitio una ubicación coherente?
  2. ¿Tienen los elementos del sitio un tamaño coherente?
  3. ¿Existe en el encabezado un título que describa el contenido de cada pantalla?
  4. ¿El menú está presente en todo el sitio?
  5. ¿Aparece la navegación en un lugar prominente, donde sea vea fácilmente?
  6. ¿Utiliza el sistema etiquetas de contexto, mapas de menús o breadcrumbs, como ayudas navegacionales?
  7. ¿Existe un tipo/estilo consistente de íconos?
  8. ¿Un ícono es claramente destacado del resto cuando está seleccionado?
  9. ¿Usan los textos colores visibles?
  10. ¿Son los estilos de párrafo coherentes con el tipo de información o contenido que muestra?
  11. ¿Los vínculos o botones están etiquetados claramente?
  12. ¿Todos los enlaces funcionan correctamente?
  13. ¿El diseño del sitio no abusa de recursos o elementos animados?
  14. ¿Tengo feedback visual con los objetos que son seleccionados o movidos?
  15. ¿Al rellenar un formulario, hay un feedback visual cuando la tecla ‘bloq mayús’ está activada?
  16. ¿Son razonables los tiempos de espera?
Gráfico resultados Heurística 1
Heurística 2: Competencia entre el sistema y el mundo real

Preguntas Presentadas

  1. ¿La terminología utilizada es familiar y está orientada a cualquier tipo de usuario?
  2. ¿En formularios de entrada de datos, ¿existen ejemplos asociados para llenar campos complejos?
  3. ¿Los íconos, son concretos y familiares? (formas reconocibles)
  4. ¿La iconografía sigue las convenciones del uso de internet?
Gráfico resultados Heurística 2
Heurística 3: Libertad y control del usuario

Preguntas presentadas

  1. ¿Sabe el usuario en todo momento dónde está y hacia dónde puede ir?
  2. ¿es sencillo ir y volver?
  3. ¿El sistema tiene guías ‘atrás’ ‘adelante’ para desplazarse?
  4. ¿es fácil volver al home?
  5. ¿existe mapa del sitio?
  6. ¿Se pueden cancelar acciones en curso antes de que estas terminen?
  7. ¿Existen opciones de deshacer o rehacer?
  8. ¿Existe la posibilidad de que el usuario se contacte para hacer sugerencias y comentarios?
  9. En los campos a rellenar, ¿existe información acerca de los requisitos que son obligatorios?
  10. Al inscribirse al “newsletter” ¿Existe la posibilidad de filtrar los contenidos a recibir?
  11. ¿Existe la posibilidad de limpiar o partir otra vez en el llenado de formularios sin necesidad de actualizar la página?
  12. ¿Se sabe para qué es la información entregada, quien la recibe y qué se va a hacer con ella?
  13. ¿Tienen las imágenes atributo ‘alt’ que describa el contenido de estas?
  14. ¿El usuario necesita descargar aplicaciones externas para visualizar el contenido?
  15. ¿El usuario puede navegar por el sitio sin interrupciones, tales como ventanas emergentes?
Gráfico resultados Heurística 3
Heurística 4: Estándares y consistencia

Preguntas presentadas

  1. ¿Los títulos reflejan precisamente los contenidos que hay en ellos?
  2. ¿Los íconos poseen etiquetas?
  3. ¿la tipografía es clara y evita el uso de más de 3 fuentes distintas?
  4. ¿Están los contenidos en un orden lógico?
  5. ¿Se evita el uso de scroll innecesario?
  6. ¿son los comandos de igual manera en todo el sistema y significan los mismo?
Gráfico resultados Heurística 4
Heurística 5: Prevención de errores

Preguntas presentadas

  1. ¿Los mensajes de error se entienden como tales?
  2. ¿Las pantallas de alerta o error evitan ser confusas o crípticas?
  3. ¿Los mensajes de error evitan el uso de signos de exclamación y de palabras hostiles?
  4. ¿Se utiliza alguna señal del tamaño máximo de los campos a rellenar? (número de caracteres)
  5. ¿El sitio se anticipa a eventuales errores?
Gráfico resultados Heurística 5
Heurística 6: Memoria del sistema

Preguntas presentadas

  1. ¿Permite el sitio cargar rápidamente lugares visitados anteriormente?
  2. ¿Existe distinción que marque los links ya visitados?
  3. En términos generales ¿Permite el sitio reducir la carga de trabajo y de memoria el usuarios? (campos que se autocompletan o guardar preferencias)
Gráfico resultados Heurística 6
Heurística 7: Flexibilidad y eficiencia

Preguntas presentadas

  1. ¿El sistema evita el scroll innecesario en páginas, imágenes, esquemas etc. que interrumpa la comprensión y eventual recordación en el diseño?
  2. ¿Cumplen las imágenes, íconos, botones etc.,un propósito determinado, sin llenar el sitio de señales y signos equívocos o irrelevantes? (son pertinentes)
  3. ¿Es adecuada la velocidad de despliegue de las páginas e imágenes?
  4. ¿Cuenta el sitio con una versión para teléfonos móviles y tablets
  5. ¿Se despliega correctamente en todos los navegadores?
  6. ¿Las imágenes tienen la resolucion correcta? (72 dpi)
Gráfico resultados Heurística 7
Heurística 8: Diseño estético y minimalista

Preguntas presentadas

  1. La imagen del sitio muestra con claridad la identidad del negocio?
  2. ¿Existe un estilo gráfico que permita identificar los sub sitios como parte del home?
  3. ¿Tienen los colores relación con el tema de la página?
  4. ¿Está el diseño al servicio de entregar los contenidos?
Gráfico resultados Heurística 8
Heurística 9: Reconocimiento de ayudas, diagnóstico y recuperarse de los errores

Preguntas presentadas

  1. ¿Posee un espacio con preguntas frecuentes?
  2. ¿Los mensajes entregan el control al usuario?
  3. ¿Sugiere una solución amigable y constructiva?
  4. ¿Existen avisos de confirmación antes de realizar determinados actos?
  5. Al utilizar recursos técnicos que requieran de descarga ¿Se le avisa al usuario de la situación y cómo llevarla a cabo?
Gráfico resultados Heurística 9
Heurística 10: Ayuda y documentación

Preguntas presentadas

  1. ¿La información explica de manera adecuada el propósito del sitio?
  2. ¿Se entiende lo que el sitio ofrece?
  3. ¿Se expresa con claridad y simpleza la actividad que desarrolla la entidad?
  4. ¿Es el sitio constantemente actualizado en las secciones correspondientes?
  5. ¿La información es congruente con lo que la página ofrece?
  6. ¿Hay información accesoria o irrelevante?
  7. ¿La redacción es precisa?
  8. ¿Existen faltas de ortografía?
  9. ¿Existen referencias cruzadas entre los distintos contenidos? (nodos)
  10. ¿Existe un ícono de ayuda?
  11. ¿Está la función ayuda visible y presente en todo momento?
  12. ¿Están explícitos los términos de uso y las políticas de privacidad?
Gráfico resultados Heurística 10
Resumen Evaluación Heurística
Gráfico resultados todas las Heurísticas
Frecuencia de Problemas por Heúristica
Archivo:Universidaddevalparaíso-17.png
Gráfico de Frecuencia de problemas por Heurística

Personas y Escenarios

Pablo Arenas

  • 17 años
  • Estudiante cuarto medio del Liceo Eduardo de la Barra (Valparaíso)
  • Promedio de notas en Enseñanza Media: 6.5
  • Es la primera persona de su familia en ir a la universidad
  • No posee computador en casa
  • Nunca había ingresado al sitio web de la Universidad de Valparaíso
Pablo Arenas

Pablo ha escuchado que la Universidad de Valparaíso es una buena institución académica pero aún no tiene claro que quiere estudiar. Sin embargo, cree que le interesaría una carrera de las áreas matemáticas. Dada su situación piensa apropiado averiguar en el mismo sitio web de la universidad. Para acceder a este debe ir hasta el cyber de su sector, el que cuenta con un número limitado de computadores, cuyo software y hardware no están en muy buen estado. Ingresa al sitio web y hace click en la sección Estudia en la UV. Revisa las carreras del área disponibles en el menú superior, y decide revisar las distintas ramas de la carrera de ingeniería. Una vez en la página de cada carrera anota los datos de su interés como puntajes de corte, ponderaciones, aranceles. Pero al intentar revisar la malla curricular el computador presenta dificultades desplegándola, por lo cual Pablo desiste. Pablo busca la información sobre becas y beneficios en la misma página de la carrera pero no la encuentra, por lo que regresa a Estudia en la UV. Una vez ahí, a su derecha ve el menú créditos+ becas y clíquea en Becas de Arancel Primer Ano. El link lo redirecciona a una nueva ventana y le dice que el objeto no ha sido encontrado (Not found). Luego, ve el menú Beneficios -abajo a la izquierda- y clíquea en Préstamos pensando que encontrará información sobre los créditos universitarios pero no aparece ningún dato relevante. Entonces, vuelve a HOME y luego de observar el menú, clíquea en Fondo de Crédito, pero se da cuenta que la información se dirige a alumnos de pregrado de cursos superiores que ya han obtenido el crédito y desean renovarlo. Finalmente, Pablo abandona el sitio y deja su búsqueda sobre las becas y créditos para otra ocasión pues ya no tiene más dinero.

Lorena Barrientos

  • 21 años
  • Estudiante de tercer año de la carrera de Sociología en la U. de Valparaíso
  • Depende de los créditos universitarios CAE y FSCU para el financiamiento de su carrera
Lorena Barrientos

Lorena desea inscribir un ramo a través de la intranet de su universidad pero al intentarlo, no puede pues su matrícula no está vigente. Llama a la secretaría de su facultad y pregunta por qué aparece bajo esta situación. Le contestan que se debe a que no ha cancelado los aranceles del primer semestre. Ella explica que su carrera es financiada totalmente por los créditos universitarios por lo que no debe cancelar ningún monto. La secretaria ingresa a la intranet de la universidad y encuentra que no han actualizado la información sobre sus créditos y por consecuencia, aparece como si no se los hubieran renovado para el nuevo semestre. La secretaria le aconseja que se contacte con las autoridades correspondientes, pero es la primera vez que le sucede este problema y desconoce a quien contactar, por lo que decide ir hasta el sitio web de la universidad para conseguir información. Ingresa al sitio web de la Universidad de Valparaíso a buscar los datos para contactar por mail y teléfono a quien corresponda para ver si pueden darle información sobre su situación y solucionar su problema. Ingresa al sitio, revisa las posibilidades que tiene en las barras de navegación del HOME. Hace click en Fondo de Crédito, adentro cliquea Preguntas Frecuentes pero su duda no está ahí planteada. Después, cliquea Contacto y solo aparecen los datos para contactar a ejecutivos de crédito. Vuelve a HOME y cliquea Aranceles en una de las barras horizontales. Ahí, elige distintas secciones buscando los datos. Luego, al final de la página ve el menú Contactos Unidad de Aranceles pero al acceder a la información se encuentra con un formulario, el que dejo sin rellenar pues no era lo que ella necesitaba. Cierra todas las ventanas -que se abrían cada vez que clíqueaba algún contenido de Aranceles- y vuelve al HOME. Finalmente, al no ver más opciones decide cliquear en Estudia en la UV. Encuentra el menú info + contacto, en el que están los datos que buscaba. Copia los números que cree le pueden servir y teniendo la información cierra el sitio web.

Matías Herrera

  • 28 años
  • Titulado de Odontología en la Universidad Andrés Bello (Viña del Mar)
  • 2 años trabajando y un año trabajando en clínica privada
  • Desea perfeccionarse realizando una especialidad en Odontopedatría
Matías Herrera

Matías lleva dos años trabajando y recién hace un año está atendiendo en una clínica privada donde principalmente atiende a adultos, pero desea abrir su propia consulta dirigida hacia pacientes infantiles, pues durante los años de internado clínico y su primeros años laborales en hospitales públicos, atendió a niños de escasos recursos, lo que fue una experiencia de vida. Matías es consciente de que la Universidad de Valparaíso es una buena institución académica de la cual salen buenos odontólogos. No obstante su decisión dependerá de si los horarios son compatibles con el de su trabajo. Matías entra al sitio web de la Universidad de Valparaíso, y cliquea en Postgrado. En el menú Programas por Facultad selecciona Odontología. La información se despliega dentro de la misma página contenida por una caja central con scroll. Baja hasta encontrar Programas de Especialidad y hace click en Especialidad en Odontopediatría. Lee la información entregada como objetivos, perfil del postulante, requisitos, ficha del programa y contactos. Anota lo que le es relevante pero al no encontrar los horarios de dicho programa comienza a buscar y hace click en el vínculo sitio web que despliega una nueva pestaña titulada Escuela de graduados, Facultad de odontología, en el cual está el menú Especialidad. Hace click en Odontopediatría y se haya con el mismo contenido de la página visitada anteriormente. Cierra la pestaña desplegada Escuela de graduados, Facultad de odontología y decide llamar al número de teléfono que se encuentra en contacto en la página Especialidad en Odontopediatría. Finalmente, cierra el navegador web.

Mapas de Navegación

Mapa de navegación Actual

Sección Principal
Menú secundario

Mapa de navegación Propuesta 1

Propuestamapa1.png

Presentación PDF Arquetipos y Mapas de Navegación

Card Sorting

Introducción

Tras el análisis de casos de arquetipos y escenarios, con el fin de analizarlos bajo su contexto de vida y requerimientos personales dentro del estudio realizado al sitio web de la Universidad de Valparaíso, resulta necesario ahondar en los contenidos que el sitio entrega y la manera en que están catalogados o categorizados para el entendimiento de quien ingresa a él. De este modo, lo que se expone a continuación, viene a ser un avance en la materia, para lograr establecer una nueva o mejor arquitectura de información del mapa del sitio a través de la técnica del Card Sorting.

Testeo de contenidos mapa del sitio

Para realizar una organización de las categorías presentes en el mapa de navegación del sitio del la U. de Valparaíso, se presentan técnicas de ayuda para la toma de decisiones, como es la técnica abarcada en este caso : un ‘card sorting’ u ordenación de tarjetas. Un Card Sorting se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas que contienen etiquetación o nombres de las diferentes categorías temáticas del sitio web, en este caso el menú de navegación del sitio de la universidad. De esta forma, se eligen personas que representen los arquetipos antes formulados:

  1. Un alumno de enseñanza media (3ero o 4to medio) que desee ingresar a la universidad.
  2. Un alumno actual universitario
  3. Una persona egresada de la universidad que requiera realizar algún estudio o quiera optar por algún programa de postgrado.

Partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a los modelos mentales o dibujos definidos por los arquetipos puestos a prueba en esta técnica.

Forma de evaluación

Inicialmente se trabaja en la creación de distintas tarjetas o post-it l donde se escriben as categorías que se creen necesarias de exponer, de lo que es el mapa de navegación de la U. Valparaíso. Las palabras elegidas se desprenden de un desglose del mapa de navegación propuesto por el grupo, de las cuales quedan 30 palabras que vienen a ser las principales en materia de contenidos. El testeo se realizará a 3 personas que encajan con los arquetipos antes planteados. A partir de esto, cuando se reúne el evaluador del grupo con el arquetipo, las instrucciones presentadas son las siguientes

  1. Pedirle al entrevistado que explique con sus palabras lo que cree que significa cada etiqueta, y los contenidos que esperaría encontrar bajo ese nombre.
  2. El entrevistado debe ordenar las etiquetas en grupos (de manera instintiva, sin pensarlo demasiado) y asignarle un nombre a cada grupo (puede ser una palabra, una frase, etc).
  3. El entrevistado debe imaginar que visita el sitio web, y ordenar las etiquetas según la primera que visitarían (la que contiene la información que ellos consideran más importante/interesante) a la última que visitarían.
  4. Pedirle a la persona entrevistada que dibuje como se imagina que debería ser la home del sitio, utilizando como base una simbología tipo wireframe. Se deben explicar los elementos de la simbología, pero la persona tiene que tener claro que no necesario que los utilice todos. Tampoco es necesario que ubique toda la información presente en las tarjetas en el home, hay que asegurarle que en el wireframe debe estar solo la información que él considera que debe ir en el home. Puede utilizar los nombres de las categorías que definió en el paso 2.
Palabras que contienen las etiquetas
  • Historia de la institución
  • Autoridades
  • Misión y visión
  • Reglamento
  • Dirección administrativa
  • Infraestructura
  • Normas gráficas
  • Facultades y carreras
  • Postgrados y postítulos
  • Ingreso PSU
  • Ingreso especial
  • Matrículas
  • Becas y créditos
  • Acreditación
  • Calendario de admisión
  • Proceso de renovación
  • Aranceles
  • Convenios con servicios y empresas
  • Investigación
  • Estudiantes UV extranjero
  • Estudiantes internacionales
  • Convenios de intercambio
  • Noticias
  • Calendario de eventos
  • Calendario académico
  • Biblioteca
  • Extensión
  • Servicios académicos
  • Contacto
  • Navegador académico
Aplicación del Card Sorting a Arqutipos

Registro de imágenes

Csfoto1.png Csfoto2.png Csfoto3.png Csfoto4.png

Resultados y Conclusiones
Resultados Estudio

El siguiente gráfico muestra los resultados del tercer ejercicio del card sorting.

Gráfico que muestra el orden de las palabras elegidas por los 3 arquetipos
Wireframes arquetipos
Arquetipo de Pregrado
Mapa organización arquetipo de Pregrado


Arquetipo de Posgrado
Mapa organización arquetipo de Posgrado
Arquetipo de Alumno de Cuarto medio
Mapa organización arquetipo de Cuarto Medio

Propuesta Wireframe

Tras la aplicación del card sorting a los 3 arquetipos y las propuestas de wireframes realizadas por cada uno de ellos construimos nuestra propuesta de wireframe.

Propuesta wireframe desktop
Propuesta wireframe tablet
Propuesta wireframe smartphone

Testeo de Navegación y Usabilidad con Wireframes Interactivos

Modo del testeo aplicado

A través del uso de wireframes interactivos y un programa que permite grabar el rostro y la voz del usuario mientras habla e interactua con los wireframes.

  • Se plantean 5 tareas a los 3 usuarios ya dados por los arquetipos y personas.
    • El entrevistado realiza 5 acciones y/o ejercicios independientes uno del otro.
    • El entrevistado puede expresar en voz alta sus reacciones y apreciaciones mientras realiza el ejercicio.
    • Durante cada ejercicio se toma el tiempo que demora cada participante en realizar cada uno de los ejercicios.

Aunque los usuarios poseen perfiles distintos todos deben realizar las mismas tareas.

  • Consideraciones al momento de testear
    • Tiempo
    • Cantidad de clicks esperados
    • Cantidad de clicks
    • Rutas esperadas para llegar a los contenidos

Al momento del testeo, no se le daban instrucciones a los participantes pero se les pregunta de vez en cuando que están haciendo, no obstante, son libres de comentar en voz alta lo que deseen mientras navegan. Esto es de vital importancia sobre todo si manifiestan confusión.

  • Posibles errores a considerar
    • “Desvios” en la ruta de los contenidos.
    • Cantidad de clicks erroneos, es decir, una tarea ejecutable en 3 se realiza con 6 cliqueos.

Tareas a Testear

  1. Encontrar los puntajes de corte, malla curricular y precio del arancel de la carrera de derecho.
  2. Encontrar información sobre becas y créditos para quien desea entrar a la universidad.
  3. Encontrar información sobre el diploma de postítulo en estrategias y tácticas para la formación en red.
  4. Encontrar el número de teléfono y el mail de la Dirección de asuntos estudiantiles (DAE)
  5. Encontrar información sobre el estado de acreditación de la universidad.


Wireframes testeados


Videos del testeo

Video del ejercicio uno, realizado por el tercer arquetipo

Video del ejecicio uno, realizado por el segundo arquetipo

Video del ejercicio dos, realizado por el primer arquetipo


Video del ejercicio tres, realizado por el primer arquetipo

Análisis de resultados

Rutas de Tareas Ejecutadas

Esto consiste en la "Ruta Esperada" que el usuario realice al momento de navegar y luego esto se contrasta con las rutas reales realizadas por cada uno.

Tiempo de Ejecución de Tareas

El tiempo que toma cada usuario en ejecutar cada una de las tareas.

Archivo:Gráfico de tiempo por ejercicio.png
Gráfico de segundos por click
Segundos por Click

El tiempo -medido segundos- que toma cada usuario para realizar un click mientras navega, busca y selecciona cierta información en el sitio.

Archivo:Gráfico de segundos por click.png
Gráfico de segundos por click

Conclusiones

  • Se puede inducir que los desvios en las rutas de los usuarios puede darse por dos causas:
    • El mal etiquetado como "Contacto" y/o su poca visibilidad de cierto botones.
    • Contenido que poseen de clasificación ambivalente, es decir, que se encuentran bien agrupados pero que a su vez también podrían encontrarse dentro de otros.
Presentación