Analyse d’une expérience utilisateur
En tant qu’animatrice de cet exercice, je devais analyser une expérience utilisateur du site https://legacy.imal.org/fr.
Une personne doit être filmée (ainsi que son écran) en train de chercher après des informations plus ou moins vagues sur le site de l’iMal. Voici le scénario inventé :
Les informations a rechercher sont donc le lieu du FabLab, l’heure ainsi que le prix.
Analyse
Tout d’abord, l’utilisatrice cherche dans les différents onglets de la navigation. On remarque qu’elle a du mal à cliquer sur les onglets (du menu-déroulant) souhaités car celui-ci disparait lorsqu’on le survole !
On peut voir que le site en lui-même ne comporte que très peu de couleurs. Sur la page principale, il y a des photos qui sont sensée illustrer et cela parait fade, sans vie. Les couleurs n’apparaissent que lorsqu’on survole. Sur cette même page, j’ai remarqué aussi que lorsqu’on actualisait la page, ces différentes images sont colorées et la couleur disparait après quelques secondes. Je ne pense pas que cela soit très utile de faire disparaitre le peu de vie,gaité qu’il y a sur cette page.
En haut de chaque page, ils ont mis à chaque fois un message qui précise qu’il s’agit d’une archive et non du site actuel. Cela est bien car ils l’ont placé en haut de page et donc on le voit directement quand on arrive sur la page, de plus, ils ont surligné ce texte en jaune pétant pour que cela attire le regard. Malheureusement, cela attire trop le regard, le contenu est invisible à côté de ces deux lignes jaunes. Il est vrai qu’il s’agit d’une information importante et interessante pour l’utilisateur (cela permet de l’orienter) mais un encadrement/fond en rouge ou une alert box aurait suffit (et peut-être pas sur chaque page) à alerter l’utilisateur. Il faut attirer son attention dessus mais pas TOUTE son attention car ce n’est pas le contenu principal du site ! Même quand on regarde une autre information plus bas, on voit indirectement ce jaune, limite, on doit presque se forcer pour ne pas le voir et cela devient compliqué de se concentrer sur le contenu recherché.
Par après, elle remarque qu’il y a un onglet “Fablab” et y jette un coup d’oeil. Dans ce menu-déroulant, elle y voit “INSCRIPTION” et clique dessus. Arrivée sur la page, pensant qu’il y aurait un formulaire à remplir avec peut-être le prix ou une autre information nécessaire, cette page affiche ceci :
On peut donc remarquer dans un premier temps qu’il s’agit d’un texte en anglais et donc pas accessible pour tout le monde. Il n’est pas normal d’avoir de l’anglais sur une page qui est sensée être en Français ! L’utilisatrice commence à perdre espoir et patience alors que cela ne fait que 45 secondes qu’elle est sur le site… On peut voir sur son visage qu’elle se sent perdue et décide de retourner sur ses pas.
En ce qui concerne ce menu, je trouve que la taille de la fonte est très perturbante car celle-ci à quasiment la même taille que le contenu (“LES ATELIERS”, par exemple) et la fonte est la même aussi. Pour distinguer le menu du contenu, il aurait fallu changer de famille de fontes et l’agrandir.
Ensuite, elle décide d’aller sur une page de “CONTACT” et gagne de l’espoir en voyant les informations (adresse, etc.) sauf qu’elle n’est pas sûre que cela soit l’adresse recherchée. Elle remarque des heures d’ouverture et décide de cliquer sur l’agenda afin de trouver peut-être l’heure d’ouverture du Fablab.
Après avoir cliqué, SURPRISE : Aucun agenda n’est affiché mais c’est bien la page d’accueil que l’on voit à nouveau ! Elle commence à s’enerver et à perdre de plus en plus d’espoir.
On peut remarquer aussi que sur le côté dans la section “ACTUALITES”, le contenu de cette section se mélange avec le contenu de la page (ici, la page d’accueil de l’iMal). Cela aurait été pratique de marquer la section par une ligne horizontale (cf. principe de clôture, voir “Principes de la Gestalt”) ou d’agrandir la taille du contenu principal de la page pour que le contenu soit supérieur visuellement à la section “ACTUALITES”. De plus, la taille de “ACTUALITES” est semblable à “ACTIVITES PRECEDENTES” et “PRECEDENTES EXPOSITIONS”, cela aurait été mieux de distinguer les deux, soit par des couleurs différentes, soit par des tailles différentes. Sans ces changements, on peut limite penser que l’actualité sur le côté fait partie du contenu principal de la page, alors que ce n’est pas le cas. La section “ACTUALITES” est présente sur chaque page.
Par après, l’utilisatrice a recliqué sur la même page que tout à l’heure (dans “inscription”) et avait oublié qu’elle avait déjà visité la page. Cela aurait été interessant d’indiquer (par un changement de couleurs ou autre) qu’elle avait déjà visité cette page-là. Cela lui aurait fait gagner du temps et cela aurait permis de filtrer le contenu interessant du contenu pas interessant dans sa recherche.
L’utilisatrice décide de voir un peu les icônes de contact par curiosité… Sur ces icônes aussi, la couleur apparait que lorqu’on survole celles-ci. De plus, la taille des icônes est assez petite, heureusement qu’il y a une bulle avec la description du réseau. Le petit point positif, c’est qu’ils ont pensé à décrire le nom du réseau en mode hover. Mais la taille reste trop petite, on peut voir sur l’icône de Youtube (le 4ème) que le YouTube est à peine lisible. Une personne ayant une vue réduite (personne agée, par exemple) ne pourrait lire ça !
En relisant les onglets, elle remarque vite une page appelée “LIEU” et se dit qu’elle trouvera surement l’adresse précise là ! L’utilisatrice pense avoir trouvé jusqu’à ce qu’elle se rende compte qu’il s’agit seulement d’images des locaux de l’iMal.
L’utilisatrice commence à soupirer et commence à en avoir marre de chercher… cela fait déjà plusieurs minutes qu’elle cherche 3 petites informations qui pourraient être clairement indiquées quelque part. Elle clique un peu sur tout sans trop savoir ce qu’il se passe.
Elle continue de chercher dans les différents onglets mais ne trouve rien de spécial ou en tous cas, elle n’est pas sûre d’avoir vu ce qu’elle cherche réellement ! On remarque également des gestes non-verbaux qui expriment probablement de l’épuisement (tête reposée sur la main et soupirements).
Finalement, après environ 4 minutes 30, l’utilisatrice finit par laisser tomber et décide de sortir de ce site.
Pour résumer, tout au long de l’expérience, la personne répète “Je ne sais pas” et soupire, on peut donc en conclure que ce site est très mauvais au niveau de l’expérience utilisateur. De manière générale, le menu devrait être agrandir et avoir une autre typographie. Il devrait aussi regrouper différentes pages car je trouve qu’il y a tellement de pages et d’informations, qu’on ne sait plus sur quoi on a cliqué (ou pas). Il aurait fallu aussi utilisé des couleurs pour distinguer les pages visitées, des pages non-visitées car il y en a beaucoup trop.
Dans cette partie du menu, on aurait pu regrouper les contenus visuels par exemple et ainsi regrouper la page “PHOTOS” et “VIDEOS”.
Il faudrait repenser tout le design du site (taille des titres, taille de la navigation, couleurs, le code, etc.) !