Dernier exercice du Prework pour le bootcamp d’UX/UI Design d’Ironhack. Cet exercice est l’essence même du job d’UX puisqu’il nous demande de nous pencher sur un cas concret et d’en proposer une réponse pour améliorer la navigation.

Parmi les choix proposés, j’ai choisi de travailler sur l’Université de Boston et d’embarquer ma soeur de 20 ans pour constituer mon panel test.

Premières impressions sur le site de la Boston University

L’apparence

“ Le site est très classique, on dirait un template wordpress”
“ La page d’accueil me fait penser à un site d’actualités”
“ La vidéo rend le site dynamique et plus moderne”

La navigation

A première vue, le site semble clair. Un menu logique composé de mots-clés :
> Admissions
> Academics
> Campus Life
> Research
> Global (menu un peu fourre-tout tout de même)
> About
Ces pages sont elles-mêmes composées de sous-menus. Le menu semble très complet car de nombreuses entrées sont possibles.

Cependant, ma soeur s’est vite rendu compte en cherchant que la classification n’était pas logique et surtout, que le site de Boston University est en fait un agglomérat de sites externes par lesquels on accède via des liens. Chaque nouveau site a sa propre charte graphique, sa propre logique, son propre menu, etc. ce qui n’aide pas à s’y retrouver.

Le challenge

1. Trouver la mascotte de l’école

3 min
Le menu est confus. Elle est allée logiquement dans l’onglet “Campus life” puis “Athletics” mais n’y a rien trouvé. Elle a parcouru de nombreux menus, cliqué sur plusieurs liens mais rien. Finalement, c’est en retournant dans l’onglet “Campus life” et en lisant le chapô de la page qu’elle a trouvé un lien mentionnant le “Terrier Hockey” ce qui ressemble à un nom d’équipe. Ce lien nous a envoyé sur un autre site, celui de la BU Athletics, sur lequel on trouvait enfin la mascotte.

2. L’école offre-t-elle des cours d’arabe ?

Moins d’une minute
Dans l’onglet “Academics”, plusieurs parcours d’études sont proposés, mais pas de programme en arabe. C’est en retournant dans le menus Academics > Degree Programm, qu’elle est arrivée sur une liste exhaustive, classée par ordre alphabétique, où elle a pu rapidement trouver les cours en arabe.

3. Où se situe l’aéroport le plus proche ?

Après 5 min de recherche, j’ai arrêté le massacre. Moi-même, je ne savais pas où regarder, ce n’était pas dans l’onglet “Visit us”, ni “Contact”, ni “About us”… Bref, l’info ne semble pas être trouvable, ou difficilement en tout cas.

Le problème

A priori, des problèmes, il y en a plusieurs ! J’en identifie deux principaux :

1. La multiplication des sites externes, d’apparences différentes qui plus est, semble pour moi le principal problème. Mais il s’agit d’un autre type de problème à résoudre, que ne pourrais poursuivre pour cet exercice.
2. L’apparence des menus change selon les pages. C’est tout à fait improbable mais le menu est parfois centré sous le header, parfois en haut à droite (à la place d’un autre menu), parfois en gris, parfois en blanc. C’est très perturbant.

Le menu sur la page d’accueil, en noir. Un menu annexe se situe en haut à droite.

En passant la souris sur le menu, une liste déroulante de sous-menus apparaît.

Le menu “Admissions” sélectionné apparaît en vert.

Lorsqu’on clique sur “Academics”, le menu passe en blanc et en haut à droite (remplaçant par la même occasion le menu annexe). En gris, le sous-menu d’”Academics” vient remplacer le menu principal. Par ailleurs, ce sous-menu en gris n’est pas cohérent avec celui qui était proposé dans la liste déroulante de la page d’accueil…

Pour l’exercice, je vais m’arrêter là mais sachez que lorsqu’on clique sur “Research”, la 3ème entrée du menu principal, nous sommes redirigé vers un site externe sans possibilité de revenir facilement au site de la Boston University.

La solution proposée

L’axe

Pour remédier à ce problème de menu aléatoire, je propose de garder les entrées du menu principal mais de le simplifier au maximum.

J’ajuste le nom du menu “Global” en “University” et le place en première proposition (infos en entonnoir).

Et, il en va de soit, de garder une cohérence graphique.

Le prototype

• Les menus sélectionnés apparaissent en rouge : c’est visuel et ça reste dans la charte graphique de l’Université.
• Seul le sous-menu en question apparaît lorsqu’on passe la souris.
• Suppression du sous-menu “Overview” qui correspond en fait à une page de présentation des sous-menus. De plus, on y accède en cliquant sur l’entrée du menu.
• Toutes les pages sont construites de la même façon : menu en haut, sous-menu déroulant.