Usability case study — Universidad de Virginia

He llegado al último ejercicio del Prework :D (Antes del bloque de programación… se acabó el confeti).

Este ejercicio consistía en elegir una universidad estadounidense de un listado previo y hacer un pequeño análisis con un usuario para luego según las conclusiones hacer un rediseño.

Yo elegí la Universidad de Virginia, aquí tenéis un poco sobre ella:

“La Universidad de Virginia (en inglés University of Virginia), también conocida como U.Va., UVA, Universidad del Sr. Jefferson, o La Universidad, es una universidad pública situada en Charlottesville, Virginia, fundada por Thomas Jefferson. Es la única universidad estadounidense señalada como Patrimonio de la Humanidad. Concebida antes de 1800, y establecida en 1819, es notable en la historia de Estados Unidos por ser la primera en ofrecer títulos en materias como arquitectura, astronomía, y filosofía. Su Escuela de Ingeniería y Ciencias Aplicadas fue la primera escuela de ingeniería en los Estados Unidos asociada a una universidad.”

Esto lo he sacado tal cual de la Wikipedia y añado también algo que me pareció curioso y muy bonito y es que tienen un código de honor por el cual puedes, por ejemplo, llevarte exámenes o trabajos a casa porque según el código no vas a consultar ni a copiar; puedes comprar en una tienda y no pagar al momento porque respetas el código y pagarás otro día.


Ahora que sabemos un poco más de la UVA, os cuento en qué consistía el test :)

Como siempre elegí a una víctima; chico de 36 años acostumbrando al entorno online. Así fue como me ayudó:

1. Primera impresión y test

Tras una primera toma de contacto con la web -3minutos aproximadamente- tenía que decirme cuál ha sido su primera impresión de manera muy resumida. Concluye que:

“le parece un buen sitio, que las secciones están bien definidas, tiene formulario de contacto al que acceder fácilmente y acceso a redes sociales. Parece sencilla de utilizar, lo único que no le gusta es que algunos enlaces se abren en una pestaña nueva”.

2. El test

Fueron 3 las pruebas que tenía que completar sin usar buscador de la web.

  • Encuentra la mascota de la universidad

Tardó unos minutos navegando por el menú principal centrándose en la sección “About us” y en las que parecen hacer referencia al deporte en la Universidad, al no encontrar nada ha buscado entre artículos del blog y tampoco ha tenido suerte. Pregunta si puede usar el buscador (la respuesta es no) y al final la encuentra a través del link que le lleva a Instagram.

Aún así sigue pensando que la experiencia es buena, no considera haber perdido mucho tiempo con la búsqueda y no le supone ningún inconveniente haberla encontrado en la red social.

  • Averigua si la universidad imparte clases en árabe

No ha tardado mucho, ha navegado pocos minutos sin encontrarlo y ha preguntado por el buscador (de nuevo la respuesta es no). Después de navegar un poco más deduce que sí las hay porque hacen cursos en el extranjero, unos segundos después lo confirma, hay un programa de la Universidad en Marruecos.

  • Busca el aeropuerto más cercano a la ciudad

Es lo que menos tiempo le ha llevado. Ha tardado unos segundos, de primeras no lo encontraba pero no lo había intentado buscar, se ha limitado a la Home. Después lo ha encontrado enseguida en “About us” y ha pensado que estaría ahí por lógica.


A pesar de no haber encontrado a la mascota en la propia web y de haber tardado unos minutos en averiguar si se imparten clases de árabe, sigue pensando que la web es bastante fácil de usar, las secciones están claras y tienen lógica.

3. Análisis

Hemos podido detectar algunas mejoras para la web:

Menús

  • Hay 3 barras de menú, 2 de ellas tienen a su vez submenús y cada uno se comporta de una manera. Hay opciones que abren el contenido en una nueva pestaña y otras que te llevan desde el mismo sitio.
Barra de menú con 3 opciones que se comportan de manera diferente
  • Las páginas que se abren en una pestaña aparte tienen colores distintos a los corporativos que son los de la Home y una estructura distinta.
  • Por otra parte en algunas de las páginas que muestran los contenidos en la misma página no te dan la opción de volver a la Home si no es mediante el botón “atrás” o el logotipo, en otras sin embargo sí se puede; incluyen en el menú el botón Home.
Sección desde la que puedes volver a la Home
En esta sección solo puedes volver a la Home desde el Logo o el botón “atrás”

Idiomas

No hay ninguna opción para seleccionar el idioma, aunque no es un gran problema porque la web está inglés que es el idioma oficial de la universidad, ya que se imparten clases en otros idiomas y hay convenios con universidades extranjeras, sería un guiño estupendo tener la opción de cambiar a estos idiomas.

Información

La mascota acompañada

Aunque es una universidad con mucha historia, fue fundada por Thomas Jefferson y es la única de Estados Unidos que es patrimonio de la humanidad, esta información no aparece ni se destaca por ningún sitio. Tienes que rebuscar al igual que con el código de honor.

En cuanto a la mascota ocurre algo parecido, no tiene un sitio destacado en el apartado de deportes ni en “About us” aunque sea algo distintivo de la universidad.

Contenido

  • Hay bastante contenido en la Home pero sin estructurar; en el slider de cabecera se pueden ver las principales noticias, más abajo hay un bloque con más contenido que mezcla noticias con eventos, con contenido de RRSS, artículos y el periódico online de la universidad. Cada noticia se comporta de una forma cuando clicas para acceder y no queda muy clara la jerarquía.
  • El periódico online Uva today está en el menú “Info for +” en un apartado que se titula Alumni & Friends, este contenido no debería estar tan sesgado, debería tener un sitio destacado y accesible para cualquier usuario que entre a la web.
  • Si se continúa haciendo scroll de nuevo hay más noticias acerca de la universidad, esta vez agrupadas en dos columnas. En la columna de la izquierda hay información sobre ciencia y cultura y arte entre otros, aunque sigue sin haber ningún contenido que destaque sobre otro, parece que todo sea referente a Uva today aunque no se muestra de forma clara. En la columna de la derecha ocurre lo mismo pero con contenido de RRSS y un calendario de eventos.
  • Finalmente el footer parece muy limpio pero tiene algunos errores de diseño como ahora veremos.

Diseño

  • Empezamos por la cabecera, el botón de buscar es demasiado grande, tiene más prioridad a nivel visual que el propio menú principal. Es cierto que es necesario tal y como están estructurados lo menús pero la solución es mejorar los menús no dar toda la importancia a este botón.
  • Ocurre igual con el menú “Info for”, que está contenido por un recuadro que solo aporta ruido a la web.
  • Siguiendo hacia abajo, el slider es demasiado grande dando la sensación de ser una web muy densa y el filtro de las fotografías no ayuda, es demasiado oscuro; los alumnos de universidad son en su mayoría jóvenes que además de estudiar quieren pasar una época alegre e inolvidable y ver esas fotos enormes tan lúgubres invitan a pensar lo contrario.
Fotografía del slider con un filtro que oscurece la imagen
  • Seguimos y ocurre exactamente igual, fotos muy oscuras y un uso del color que no permite distinguir secciones con facilidad. Hay un vídeo pero está tan escondido que no invita a darle a play. Y las letras blancas sobre las fotografías no se pueden leer con claridad.
  • De fondo empieza a aparecer un motivo que simula unas ¿olas? aunque en la web no se hace referencia en ningún momento a la zona costera de la ciudad.
¿Serán olas?
  • Y siguiendo hacia abajo de nuevo, en el último bloque de contenidos a la izquierda no hay diferencia entre las diferentes noticias, todas son del mismo color y tamaño aunque pertenezcan a secciones distintas. A la derecha el diseño del calendario tampoco llama la atención aún siendo muy grande y se podría dar más juego al uso del color, tamaño y espacio.
  • En la parte que sigue al calendario que hace referencia a las RRSS, se han utilizado iconos demasiado grandes y el de IG en concreto no es muy reconocible a simple vista.
  • Para acabar con la Home en el footer también se podría mejorar el diseño jugando con los espacios y justificando el menú hacia el centro.
Footer

En el resto de secciones

  • En todas las páginas los espacios entre contenidos, son demasiado grandes igual que los márgenes, lo que te lleva a hacer scroll constantemente.
  • Las fotos de cabecera también son enormes y tienen una rejilla que no parece seguir ningún criterio en cuanto a colores y que no aparece en todas las secciones por igual.
  • En algunas páginas no se ha respetado la paleta de colores, no se utiliza el naranja y el azul es diferente; por ejemplo ocurre esto en la página de Health System. O se incluye un color nuevo como ocurre en la de Education abroad.
  • También se añaden elementos antes del footer que tienen un estilo que no se corresponde con el resto de la página.
  • En general no se mantiene la coherencia en la composición de las secciones.

Teniendo en cuenta este análisis hice un rediseño para la Home que resultó ser más usable que el anterior en la prueba que realicé al mismo usuario.

Prototipo
  • Se han reordenado los menús en la barra principal.
  • Se ha añadido la opción de cambiar de idioma
  • El botón Search se ve bien pero ya no llama la atención sobre el resto de elementos.
  • Las imágenes del slider son más estrechas y sin filtro.
  • En la primera sección de noticias se ha dejado la mitad y se ha priorizado el vídeo que contiene información relevante sobre la universidad.
  • Se ha rediseñado la sección de UVA Today y el calendario para hacer un diseño más práctico realzando la jerarquía de noticias y eventos.
  • Las secciones Student Information System, Collab y Jobs ahora tienen un apartado más claro y organizado, independiente a otras secciones.
  • Las redes sociales también tienen un espacio aparte al final de la página donde se destacarían las últimas publicaciones.
  • El Footer sigue igual de limpio pero ocupa menos espacio.

Hasta aquí, ahora ¡a programar!