Rethinking-UX

Rédigé par Potemberg Marie Manuela

Situation de départ

L’UX est l’expérience utilisateur. Quand celle-ci n’est pas bonne, il faut la repenser, la retravailler et la tester jusqu’à ce que l’UX soit meilleur, jusqu’à ce que l’utilisateur soit content de son expérience.

En tant qu’étudiante en Design Web & Mobile, l’UX est e des piliers principaux que je dois respecter. Il intervient dans la conception d’un site web, un UX bien pensé fait partie d’un site fluide et accessible à tout le monde.

Image illustrant plusieurs personnes avec des devices différents. Photo by Marvin Meyer on Unsplash.

Plusieurs devices, plusieurs personnes. L'objectif, être accessible à tous ! Photo by Marvin Meyer on Unsplash.

Comment pouvons-nous apprendre à construire un bon UX ? Quelle est la marche à suivre pour tester et approuver ou désapprouver notre conception d’un site web ?

Atelier numéro 3 : RUX

RUX, ou Rethinking UX, est un atelier réalisé en groupe de 4 étudiants et ayant pour but de chercher les erreurs d’UX dans un site web donné. Ensuite, il faut proposer plusieurs solutions pour pallier aux erreurs présentes dans le site ou trouver des améliorations. Enfin, il faut tester les nouvelles fonctionnalités et les améliorations imaginées.

Cette année, nos professeurs ont décidé de nous faire travailler sur le site du KIKK Festival, ce festival regroupe plusieurs conférenciers et ateliers traitent de divers sujets à propos de la culture digitale. Pourquoi ce site-là ? Le festival se déroule dans la même ville où se situe notre Haute Ecole et parle de sujets qui nous intéressent tout particulièrement, nous, étudiant de Design Web & Mobile.

Screenshot de la page d'accueil du site KIKK-Festival.

Screenshot de la page d'accueil du site "KIKK Festival", festival regroupant plusieurs conférenciers expliquant le monde du Web et des nouvelles technologies.

Test utilisateur

Avant même de commencer l’atelier, chaque étudiant a dû réaliser un test utilisateur, filmé et commenté par le participant, à remettre à un de nos professeurs. Un test utilisateur est une méthode permettant d’évaluer un produit en le faisant tester par des utilisateurs. Ici, le test permettait de connaître les facilités et les difficultés du site KIKK Festival que rencontrait un utilisateur devant faire une action donnée. Ce qui était demandé à l’utilisateur était de chercher et trouver une conférence donnée avec toutes les indications nécessaires pour s’y rendre et, enfin, acheter le ticket adéquat pour y participer.

Mon test utilisateur était fastidieux. En plus de faire participer une personne n'ayant pas toujours facile de naviguer sur internet, cette même personne avait du mal à appliquer les règles d'un test utilisateur - Ne pas poser de questions à celui qui fait passer le test ou s'adresser directement à lui, suivre tout simplement le scénario - ce qui n'est pas étonnant vu que c'était nouveau pour elle et pour moi. Néanmoins, nous étions d'accord sur un point: le site n'est pas du tout instinctif et brouillon.

Création du groupe

Durant cet atelier, nous avons formé des groupes composés de 4 étudiants. Au commencement, j'étais accompagnée de mon binôme habituel, Sylvian, et nous avons espéré ne pas retombé sur des collaborateurs simillaires à ceux du précédent atelier. La dernière fois, le groupe avait cruellement manqué de communication et de cohésion. Sylvian et moi avions pratiquement fait tout le travail tout seul et les autres membres n'avaient fait que le strict minimum sans prendre part aux décisions ou aux discutions du groupe. C'est alors que Tom est arrivé, seul, et il nous a gentillement demandé si notre groupe était disposé à l'accepter et nous l'avons fait avec beaucoup de plaisir ! Nous ne nous connaissions pas mais cela n'a pas réellement posé de problème. Finalement, Guillaume a demandé de rejoindre l'équipage et vu que j'avais déjà travaillé avec lui lors de notre premier atelier et je savais qu'il était quelqu'un de confiance et nous l'avons accueilli à bras ouvert. A ce moment-là, nous ne savions pas que ce simple projet allait créer une véritable amitié.

Tests et méthodes

Pour parvenir à remanier l'UX du site, il était impératif que nous testions nos solutions sur le terrain. Grâce à certaines méthodes et à une répartition du travail, c'était tout à fait faisable. Nous avons mis en place notre méthode de travail et nos objectifs avant même de commencer et nous avons mis un point d'honneur à connaitre quels étaient les points importants à repenser. Nous avons aussi décréter que la mise en commun de tout les prototypes était vitale au bon fonctionnement du projet.

Top tasks

Afin de travailler correctement sur l'UX du site, nous avons dressé une liste des fonctionnalités disponibles sur le site, une liste la plus précise et exhaustive possible, pour déterminer les 3 "Top tasks" du site. Pour départager les fonctionnalités et choisir les 3 tâches principales, nous avons chacun voté pour 3 fonctionnalités listées et ensuite nous avons pris les 3 tâches avec le plus de vote pour les définir en tant que "Top tasks". Grâce à cette manière de procéder, nous avons pû déterminer que les "Top tasks" sont :

Nous les avons départagées entre nous afin de pouvoir travailler efficacement sur l'UX de chaque fonctionnalité. C'est ainsi que Guillaume a hérité de la consultation du calendrier et de l'horaire, Tom de l'achat des tickets et Sylvian et moi de la consultation des conférences.

User Journey

Un "User Journey" est une méthode pour tester un site et déceler les problèmes d'UX liés à celui-ci. Cette méthode consiste à imaginer la journée d'un utilisateur en commençant dès son réveil jusqu'à l'accomplissement de sa tâche. Ici, la tâche se termine quand l'utilisateur quitte l'emplacement du KIKK Festival, si il arrive jusque là. C'est-à-dire que nous imaginons une journée où l'utilisateur entend parler du festival, se rend sur le site, choisis une ou plusieurs conférences, achète son ticket et enfin se rend au festival, participe aux conférences et enfin rentre chez lui.

Exemple de User Journey montrant les humeurs par lesquelles les
            utilisateur passent durant leur navigation sur le site du KIKK Festival

Exemples de "User Journey" effectués en groupe avec un système à 3 humeurs.

Pour éviter d'omettre certains problèmes, nous avons imaginés plusieurs "User Journey" avec des personnages fictifs de sexes d'écran, âges et utilisation d'internet différents. Nous avons aussi imaginés des personnes ayant des handicaps et un entourage variés. Voici quelques exemples :

Cette liste n'est pas exhaustive, nous avons traité les problèmes liés aux malentendants, aux personnes à mobilité réduite, ect... Grâce à cette multitude de "User Journey", nous avons décelé la plupart des problèmes liés à l'UX du site et chacun a pris soigneusement des notes à propos des problèmes de sa fonctionnalité rencontrés par chacun des personnages fictifs afin de pouvoir réfléchir à des solutions adaptées à chacun des problèmes et les recouper afin d'optimiser sa tâche.

Prototypage

Pour exprimer nos idées et tester en temps réel nos solutions, nous avons appris et nous avons créé des prototypes papiers de nos fonctionnalités. Ces prototypes permettent de visualiser et créer plusieurs solutions aux problèmes rencontrés, ensuite nous passons aux test utilisateurs, chaque membre du groupe testait les prototypes des autres, cela permettait d'avoir au minimum 3 tests utilisateurs par solutions proposées et parfois les professeurs ou d'autre élèves de la classe testaient nos prototypes. C'était important pour nous d'avoir des avis extérieur au projet pour avancer.

Pour mon premier prototype, j'ai pensé à intégrer une barre de recherche avant toute chose. Le plus gros problème que nous avons remarqué était qu'il n'y avait aucun moyen de faire des recherches avec le nom du conférencier ou de la conférence, cela revenait sans cesse dans les tests utilisateurs et dans les "User Journey". Je me suis demandée ou la placer et si je devais créer un boutton pour choisir si l'utilisateur devait chercher le conférencier ou la conférence. Finalement, je me posais aussi la question de la disposition des conférences et des informations à mettre en avant. J'ai vite compris qu'il fallait impérativement mettre au minimum 4 conférences sur une seule page et au moins l'heure, la date et le lieu de la conférence.

Premier prototype pensé afin d'améliorer la consultation des conférences

Mon premier prototype de l'interface de consultation des conférences avec une barre de rechercher simple et la possibilité de voir 2 conférences sur une page.

Avec ce premier prototype, l'UX du site du KIKK Festival était déjà meilleur. Les retours étaient plutôt positifs et tout le monde appréciait l'ajout de la barre de recherche et du système de filtre, les boutons mis en place pour pouvoir créer une liste de souhait, allant de paire avec la foncitonnalité de Tom, n'était pas les plus sollicités cependant. Les informations importantes tel que le lieu, la date et l'heure avec un système d'icône pour avoir des informations sur l'accessibilité pour les personnes à mobilité réduite, les malentendants, ... Plaisait autant que l'ajout de la barre de recherche. Cependant, je n'avais pas agencé correctement les conférences et elles n'étaient visibles que deux par deux, ce qui ne collait pas avec la volonté de percevoir plusieurs conférences en même temps pour limiter le scroll.

Itérations

Plusieurs tests, plusieurs prototypes, plusieures remises en question ont été nécessaire. Après mon premier prototype, mes camarades ont testé ma fonctionnalité et m'ont donné des conseils et des retours variés pour améliorer ma fonctionnalité. Avec Sylvian, nous avons échangé des idées afin d'améliorer la consultation des conférences. Après mon premier prototype, j'en ai réalisé 4 autres avant de finalisé ma fonctionnalité.

Ma barre de recherche était toujours là mais a beaucoup varié, je suis passée par une double barre pour choisir ce qu'on cherchait, la conférence ou le conférencier, ensuite par une barre unique avec un bouton pour choisir ce que l'on cherche et enfin par une barre avec 2 boutons pour choisir notre recherche. Finalement, seul la barre de recherche du premier et deuxième prototype était correcte.

Les conférences étaient visibles par 2 au tout début et j'ai augmenter le nombre au fur et à mesure, passant de 2 à 4 puis de 3 avec des images illustrant les conférences. J'ai attendu le dernier prototype pour les afficher correctement.

Finalement, les informations de date, lieu et heure sont restés plus ou moins les mêmes. Elles ont juste évolué en boutons afin de se rendre sur la carte, l'horaire ou le calendrier, mais ces informations étaient toujours présentes ainsi que mon système d'icône d'accessibilité. Le nom de la conférence, du conférencier, un petit résumé étaient présent aussi depuis le premier prototype et, mis à part la dispositions, ces informations n'ont pas changé.

Prototype final

Pour le prototype final, j'ai passé le nombre de conférence visible à 6 sans omettre aucune information. La barre de recherche est centrée et simple, l'utilisateur peut rechercher ce qu'il veut et le système de filtre est présent en cas de besoin. La langue de la conférence est mise en évidence au même titre que le lieu, la date et l'heure avec les icônes d'accessibilité. Le résumé de la conférence n'existe plus, il faut cliquer sur la photo du conférencier pour avoir plus d'information, dont le résumé de la conférence. Finalement, pour mettre de côté des conférences afin de faire un choix plus tard, il y a un petit bouton à côté de la conférence pour la mettre dans la liste à souhait, directement en lien avec les fonctionnalités de Tom et Guillaume.

Dernier prototype permettant d'avoir une utilisation accessible et facilité du site

Mon dernier prototype avec une barre simple, 6 conférences visibles, les informations principales et un système de filtre.

Conclusion

Afin de créer un site web fluide et agréable d'utilisation, il ne faut pas lésiner sur les tests utilisateurs et les "User Journey". Cela donne un feedback très interessant et complet de l'UX de notre site. Il ne faut pas non plus se dire que nous avons raté quelque chose, juste savoir que rien n'est parfait et que tout est améliorable. Ce projet nous a permis, je pense, à comprendre que les critiques que nous recevons ne sont pas de mauvaises choses et que, quoi qu'il arrive, nous aurons toujours quelque chose à changer.

Le groupe de travail était très agréable malgré un cinquième membre ajouté à la volée en deuxième jour et absent le reste du temps. Mes camarades, Tom, Guillaume et Sylvian, savaient rester concentrés et fiables, chacun travaillait à son rythme mais ne trainait pas. Nous avons réussis à partager des idées et à faire des commentaires constructifs pour faire avancer le projet tous ensemble et c'était très productif. Une véritable amitié est née durant ce projet, un véritable lien de confiance et je n'hésiterai pas à retravailler avec eux. Ensemble, nous avons tout gagné. Un projet réussis, une amitié naissante et beaucoup de rire !