RUX, étude de cas.

RUX, Repenser l’UX, repenser l’expérience utilisateur. Dans le cadre de ma deuxième année à la Haute École Albert Jacquard, les professeurs de l’option Design Web et Mobile nous ont demandé de repenser, par groupes de quatre, une fonctionnalité au choix du site du KIKK festival 2019.

Premiers pas.

J’ai donc commencé cet atelier en fouillant le site, je prends note des défauts qui me sautent aux yeux. Mieux vaut deux avis qu’un seul, je demandant alors à une amie de jouer le cobaye pour un test utilisateur qui me permettrait de juger les fonctionnalités présentent sur le site et de me demander lesquelles seraient utiles de rajouter. Voir une autre personne tester le site me permettra de percevoir des défauts auxquels je n’avais pas fait attention lors de mon essai. Pour ce test, tous les élèves ont reçu le même scénario :  « Vous souhaitez vous rendre au KIKK — festival web — voir la conférence de Base Design et enchaîner avec une autre conférence. Vous devez organiser votre journée et trouver les renseignements nécessaires, où se rendre, à quelle heure, à quel prix. » , les résultats sont impartiaux pour nous tous lors de la mise en commun : le site est visuellement très réussi mais manque d’organisation, de clarté et est difficile à utiliser. On notera principalement l’absence d’un champ de recherche, l'incompréhension face à la page du calendrier ainsi que celle des tickets, et bien d’autres.

Nous gardons les résultats du test en tête et je rejoins septs autres élèves autour d’une table pour effectuer un groupe de discussion dans le but d’argumenter ensemble sur notre vision d’un site web événementiel. Dans ce cadre, je joue le rôle de facilitateur, je suis donc en charge de poser des questions au groupe, de faire en sorte que chacun puisse donner son avis, de calmer les éventuels conflits. Au bout de quelques minutes, nous en arrivons à cette conclusion : le site doit être composé d’un accueil clair (on doit comprendre de quoi parle le site), d’informations organisées (on doit savoir où cliquer), d’un visuel pas trop chargé et agréable. Sur un site, on s’attend à trouver un menu clair et une barre de recherche. Les utilisateurs ont besoin qu’on leur propose une bonne architecture d’information. Ils doivent pouvoir facilement trouver le programme, les horaires, les tarifs, les activités proposées durant l'événement. Et aussi les "infos pratiques" telles que les moyens de transport, où se restaurer, où loger, ...

Choix des tâches et premières recherches.

Nous nous sommes ensuite attelé à lister les différentes tâches (actions) qu’un utilisateur peut effectuer sur un site tel que le KIKK. Nous avons ensuite fait un vote à l’aide de pastilles colorées afin de définir les différentes actions à effectuer par les utilisateurs les plus importantes à nos yeux.

Nous allons donc travailler sur :

liste de différentes tâches sur une feuille quadrillée.

Chaque membre du groupe travaillera sur une fonctionnalité différente, ce qui nous permettrait de repenser le site sous un plus grand angle. Pour ma part, je choisis de repenser la recherche, ou plutôt, penser la recherche, car il n’y a pas moyen d’effectuer de recherche précise sur le site actuel. N’ayant pas de point de départ, je démarre un audit afin de comprendre comment ont été pensés les autres sites.

L’audit me permet de trouver différentes mises en forme, que ce soit à la manière d’Amazon, de Pinterest, ou même Netflix (et j’en passe), ils se présentent tous différemment. Un système de catégorisations, de filtre, dedans ou hors de la fenêtre de recherche, je me rends compte que chaque site fait comme il leur convient le mieux.

Mon audit plus détaillé.

Le User Journey.

Nos premières recherches finies, il nous fallait définir un User Journey, un scénario qui retrace le parcours, les actions positives comme négatives qu’un utilisateur serait amené à rencontrer. Le but est de trouver d’autres problèmes d’utilisation liés à une situation donnée afin de mieux améliorer nos tâches par la suite.

Pour cette étape, trois scénarios en parallèle sont établis, le premier pour un professionnel et ses collègues travaillant dans le domaine du web et effectuant ses recherches depuis son bureau, le deuxième pour un étudiant effectuant ses recherches depuis son smartphone dans le train, et le troisième pour une personne âgée voulant passer une journée avec son petit-fils.

Cette méthode nous permet de cibler des personnes provenant de milieux différents et ainsi mieux se diriger par la suite.

On s’est ensuite séparé le travail pour que chacun étoffe un peu plus en détail chaque User Journey, en mettant les points positifs, négatifs ou neutres de chaque étape et en détaillant l’amélioration qui pourrait être apportée pour pallier à la problématique rencontrée.

Notre User Journey.

Les prototypes papier.

Le moment est venu d’apporter des modifications concrètes grâce à des prototypes papier. Ça me sera utile, car je sais que je vais devoir recommencer plusieurs fois, on peut toujours modifier et améliorer, ce quel que soit le projet. On se sert de nos scénarios afin de se répartir les différentes pages utiles du site. Je me charge donc du header (l’entête) où se trouvera la barre de recherche, de la page regroupant la liste des conférences ainsi que la page de chaque conférence.

Nous nous concentrons en premier lieu sur la version desktop (ordinateur de bureau) du site. Cela nous permettra de ne pas avoir à modifier la version desktop et la version mobile (smartphone) à chaque remise en question du prototype.

Première version sur desktop.

Pour ma première version, je n’ai pas voulu placer de barre de recherche dans le header car je partais du principe que l’utilisateur ne voudrait chercher que ce qui se trouve dans la page des conférences (je me suis rendu compte du contraire par la suite). C’était donc dans cette dernière que je tente plusieurs approches que je fais tester au fur et à mesure par des amis en leur demandant d’être le plus sincère possible.

différents croquis dessinés sur une page. Évidemment, mes premiers essais n’étaient pas concluants, mais plus je repensais la disposition, plus les avis devenaient positifs, j’étais sur la bonne voie. J’avais donc placé une icône de loupe qui s’allonge lorsqu’on clique dessus pour laisser apparaître la zone de recherche, ainsi que des boutons servants à filtrer les conférences par catégorie. Je regarde aussi avec le membre du groupe travaillant sur la tâche « se renseigner sur le programme » car il aimerait insérer, dans le header, un bouton déroulant une liste personnalisée du programme.

Bon, avouons-le, les éléments sont là, mais ce n’est pas ce qu’il y a de plus agréable à utiliser, et puis c’est à ce moment-ci que je me rends compte que l’utilisateur pourrait effectuer des recherches sur autre chose que les conférences.

Deuxième version sur desktop.

Nous arrivons à la deuxième version où je me demande comment insérer la barre de recherche dans le header. Je me dirige d’abord vers l’insertion d’une icône de loupe, ce qui me permet de la disposer plus facilement dans le header puisque ça ne prendra pas trop de place. Un rapide test me permet de comprendre que le logo d’une loupe est un peu trop discret pour la version desktop. Je mets alors ma dernière carte en jeu pour simplement placer une barre de recherche bien visible au milieu du header. Je voulais éviter cette option car elle prend pas mal de place dans le header, mais de toute évidence, c’est la version la mieux comprise lors de mes différents tests.

moi et ma collègue en train de travailler sur mes croquis

La page des conférences ainsi que le header se présentent donc comme suit :

J’ai repris le format de base du header avec son logo, le bouton pour changer la langue du site, les menus déroulant, le nom de compte à droite, la barre de recherche étendue sur la longueur, et enfin le bouton pour la liste des sélections. On notera aussi la présence du bouton des tickets qui lui est fixe sur l’écran et reste visible lorsqu’on scroll la page vers le bas.

La page des conférences est bien différente. On retrouve le titre, ainsi que les images rondes et les quelques informations qui leur sont propres que j’ai rétréci replacé dans trois colonnes, ce qui a pour but d’améliorer la visualisation des différentes conférences. J’ai repensé le système de filtre, que j’ai placé au centre de l’écran, on distingue les catégories, la langue de la conférence et un bouton de tri par ordre alphabétique ou non (cet élément m’est venu comme un flash et a été validé par les membres de mon groupe).

Pour compléter le système de catégorisation, j’ai ajouté une case avec le nom de la catégorie au-dessus à droite de chaque image. Elles permettent de connaître le thème de chaque conférence sans avoir à aller lire les textes de présentations.

J’ai aussi ajouté un petit bouton + qui s'agrandit lorsqu’on passe par-dessus et permet d’ajouter la conférence à la liste personnalisée.

Version sur Mobile.

Maintenant que la version desktop est sur de bonnes voies, je m’attaque à la version mobile. Pour cette dernière, je décide de faire plusieurs croquis rapides, testant un maximum de versions plus ou moins différentes.

trois feuilles regroupant tous les croquis de mes recherches pour la version sur mobile.

En ce qui concerne la barre de recherche, je choisis en premier lieu de la placer dans le burger menu, d’après mes recherches, plusieurs sites utilisent cette méthode. Malheureusement, j’ai fait tester cette version (encore merci à mon amie qui joue le cobaye) et elle n’avait pas le réflexe d’ouvrir le burger menu pour y trouver la barre de recherche. Je décide alors de la placer directement dans le header sous forme d’icône de loupe, ça me paraît simple mais c’est ce qui fonctionne le mieux. Voici donc à quoi mon header et le menu ouvert ressemble. J’ai opté pour une approche symétrique.

croquis du header et du burger menu ouvert.

Tests utilisateur.

Le moment est venu pour mon équipe d'effectuer des tests utilisateurs, autre que les petits tests que j’ai fait de mon côté.

Nous commençons par reprendre les trois scénarios de nos User Journey et demandons donc à trois personnes de venir tester nos versions desktop comme mobile.

nous faisons tester notre version desktop. nous faisons tester notre version mobile.

Je dois dire que cette partie était assez amusante, et puis voir quelqu’un utiliser ce sur quoi on travaille depuis un moment est satisfaisant. Bien qu’on s’amusait, je ne devais pas oublier l’objectif qui est de vérifier si tout est compréhensible, visible, fonctionnel et facilement utilisable. Pour ça, il faut savoir se remettre en question lorsqu’une fonctionnalité n’est pas comprise ou invisible aux yeux de l’utilisateur (exemple de la barre de recherche dans le burger menu cité précédemment).

Dans mon cas, je n’avais pas grand chose à modifier car j’avais déjà effectué des tests qui m’ont permis d’améliorer mon travail durant la création. Le principal changement était la mise en place d’une fenêtre, qui s’ouvrirait lorsque l’utilisateur arrive sur la page des conférences, expliquant le fonctionnement de la liste personnalisée et des boutons d’ajout à cette liste (j’ai d’ailleurs eu à changer ces derniers car ils n’étaient pas compris par les testeurs).

L’atelier RUX touche à sa fin. Et oui, il faut bien que ça se termine un jour. J’aimerais remercier Marie-Joséphine Cuvelier, Maryline Brouwer et Quentin Golinveau avec qui j’ai formé le groupe de cet atelier, ainsi que les professeurs qui nous ont suivis et donné de précieux conseils et points de vue tout au long du travail, et Manon Cattin qui a bien voulu tester toutes les versions de mon atelier.