Rethinking

Vector Rethinking

User
Experience

Un atelier tant attendu !

Troisième workshop de cette année si spéciale, RUX (Rethinking User Experience), était sans doute celui que j’attendais le plus ! Son but ? Repenser une fonctionnalité existante sur un site, et améliorer l’expérience utilisateur de ce dernier.

La situation sanitaire n'ayant pas tellement évoluée depuis novembre, l'atelier s'est déroulé entièrement à distance.

Une ambiance un peu spéciale... Les visages ont fait place aux avatars..

Étant donné que j'aimerais m'orienter vers le boulot d'UX designer après mes études, cet atelier fut une véritable mine d’or, afin d’acquérir de nouvelles compétences, et de découvrir tout le travail possible autour de l'expérience utilisateur.

Préparer le terrain

Si j’attendais ce nouveau projet avec tant de hâte, c’est parce que le mois de janvier avait été synonyme de repos, avec pas moins de 3 semaines sans travail. J’ai donc démarré ce nouveau projet sans attendre, en réalisant un test utilisateur – user testing, pour les plus bilingues d’entre nous – afin d’éprouver l’interface du site web sur lequel je travaillais.

Test utilisateur du site de l'iMAL Le site de l'iMAL.

You better work !

On ne badine pas avec l’UX ! Je me suis donc lancé directement dans ce projet, accompagné de Maïlys et de Jérôme, qui nous rejoindra un peu plus tard dans l'atelier, je t'expliquerai ça plus bas.

Nous avons commencé par mettre en commun les conclusions de nos analyses, et avons relevé les problèmes suivants :

  • La navigation du site comporte trop d'onglets et n'est pas assez claire;
  • Interface est monotone, il n'y a pas assez de couleurs;
  • Les informations importants ne sont pas assez mises en évidence;
  • Il n'y a presque qu'aucune hiérarchisation de l'information sur le site.

Ce fut l’occasion d’établir une situation de départ et une problématique, autour de laquelle notre travail allait s’axer.

Comprendre les besoins utilisateurs

Pour mieux y répondre ! Nous avons donc établi une liste de tous les contenus présents sur le site, afin de comprendre comment et pourquoi ces informations et fonctionnalités se trouvaient là.

Header
Navigation
Archives publications
Fab résidences
Footer
Feed réseaux
Les différents composants de la “homepage”.

Une fois le listing terminé, on peut se pencher sur toutes les actions que l'utilisateur pourrait être amené à réaliser sur celui-ci. Chaque groupe a donc proposé différentes actions réalisables sur le site, et nous en avons retenues cinq.

  • Consulter les horaires;
  • Devenir membre du Fablab;
  • Faire une recherche dans le site;
  • Louer un espace;
  • S'inscrire à un atelier.

Nous nous sommes ensuite attaqués au choix de la tâche, qui allait définir la suite de notre travail, et je fus ravi de voir que Maïlys était attirée par les mêmes propositions que moi.

Ma proposition à Maïlys. Que cette dernière accepta.

Avengers, rassemblement !

Nous avons donc commencé par définir notre tâche, en nous alliant avec le groupe d’Anaïs, Maxime, Steven, et Tanguy, étant donné que nous avions choisi la même action. Chacun apporta donc sa pierre à l'édifice, et nous arrivâmes à une première définition. Quelques commentaires plus tard, nous décidions de rester sur la formulation suivante :

La recherche permet de trouver rapidement les informations qu’on cherche sur le site, comme l'inscription, les horaires, les expositions et les services proposés.

L'arrivée de Jérôme !

Il était temps de dire au revoir à nos coéquipiers, dont tu pourras retrouver le travail sur leur espace personnel :

Nous sommes donc partis de ce que l'utilisateur cherche à faire :

“Trouver l’information qu’il cherche le plus rapidement possible et la plus précise possible.”

Et nous avons établi une liste de ce qu'il pourrait être amené à chercher ainsi que des fonctionnalités à mettre en place pour répondre à ce besoin. Entre deux fonctionnalités, je reçus un message de Jérôme me demandant s'il était possible de rejoindre notre groupe. Il intégra donc notre groupe, et mis sa personne à contribution directement.

Alors que je pensais cette étape finie, nous nous rendîmes compte que nous avions limité les potentielles questions du l’utilisateur, et que nous n’étions plus assez générique. Il fallut donc repartir de la liste des informations que l’utilisateur pourrait être amené à chercher, pour réfléchir à d'autres questions possibles.

L'arrivée de Jérôme ! Jérôme est arriiivéééééé🎵

Nos pistes de fonctionnalités

Une fois le listing des futures fonctionnalités fait, on débriefe. Nous avions retenu les trois pistes suivantes :

  • Un icône cliquable qui ouvre un champ de texte. Une fois ce champ de texte rempli, plusieurs propositions s'affichent à l'écran et l'utilisateur clique sur une d'elle, il sera ensuite redirigé vers l'onglet approprié.
  • Une FAQ avec les questions les plus souvent posées. L'utilisateur clique sur une question et la réponse s'affiche à l'écran.
  • Un onglet "Infos pratiques" regroupant toutes les infos à savoir. Si ça ne suffit pas, un bouton "Besoin d'aide ?" sur lequel l'utilisateur peut cliquer pour envoyer un mail est également présent.
  • Un chat en ligne implanté sur le site permet à l'utilisateur de contacter l'entreprise en temps réel.

J'ai finalement choisi de m'orienter vers la fonctionnalité de la foire aux questions, et me suis lancé dans l'audit.

Un premier audit

Pour imaginer la forme que prendrait ma F.A.Q, j’ai analysé différents sites pour voir les bonnes pratiques et les conventions en matière de recherche sur d'informations. Tu peux retrouver mon audit sur Medium. Ce fut également l’occasion de découvrir une fonctionnalité à laquelle je n'avais pas du tout pensé, la site map.

La site map du site d'Apple. Une site map, ici, chez la marque à la Pomme.

Bien que cette fonctionnalité relève plutôt de la navigation que de la recherche d’information, j’y voyais là une manière assez graphique de présenter des informations.
L’idée fut cependant rapidement abandonnée, celle-ci étant vraiment trop fraîche dans mon esprit que pour être réalisée correctement.

On passe aux croquis !

L'audit terminé, je me suis penché sur un premier croquis de F.A.Q, afin de réfléchir à une première façon de présenter l'information au visiteur.

L'utilisateur arrive donc sur cet écran, en navigant via les différents onglets du site. Une fois sur cette page, les différentes informations sont regroupées en rubriques, elles-mêmes composées de questions diverses. Au clic, un champ de texte apparait sous la question, et présente une réponse à l'utilisateur.

Afin d'organiser les différentes informations, j'ai utilisé une méthode que je t'avais déjà présentée pour mon projet précédent : le tri par carte.

La méthode du tri par carte. Organiser l'information grâce au tri par carte.

COVID oblige, j'ai dû répenser le tri par carte. J'ai donc créé un Google Forms pour comprendre comment organiser les informations entre-elles.

Le parcours d'un utilisateur

Je savais donc comment l'utilisateur organise différentes informations entre elles, cependant, il me manquait un dernier élément.

Pour pouvoir créer un prototype cohérent, il fallait que je m'imagine à la place d'une personne qui se rend sur le site, afin de lister les problèmes potentiels, et ainsi les résoudre au travers de mon prototype. J'ai donc réalisé un User Journey, consultable sur Google Docs, afin de prendre conscience des différents éléments pouvant interférer avec une bonne expérience utilisateur, pour une F.A.Q, dans mon cas. Mon User Journey. Le procédé d'User Journey.

Vers la fin de l'atelier

Dernier point mais pas des moindres, proposer un ou plusieurs prototype(s) pour répondre aux besoins utilisateurs. Car c'est ça l'UI/UX design, on ne propose pas LA solution, mais bien une solution jugée la plus adaptée, sur base des enseignements tirés de la réflexion en amont.

Je te laisse sur un petit carousel de quatre étapes présentant l'évolution de ma réflexion de la mise en forme de ma F.A.Q. Tu peux également tester par toi-même le prototype Figma ! On se revoit juste en-dessous pour une petite conclusion !

1 / 4 Une ébauche de sitemap pour le site. Une ébauche de site map pour l'iMAL.
2 / 4 Un croquis de F.A.Q. Un croquis de F.A.Q.
3 / 4 L'écran à propos, de la F.A.Q. L'écran à propos, de la F.A.Q.
4 / 4 Le prototype version mobile. Le prototype version mobile.

Ce qu'il faut retenir

Pour conclure, je retire énormément d'enseignements de cet atelier.

  • Tout d'abord, le design d'expériences utilisateur est une discipline éprouvante et qui requiert beaucoup de temps. Mon erreur a été de ne pas être assez constant dans mon travail;
  • J'ai aussi pu acquérir en méthodologie et découvrir toutes les facettes du travail d'UX designer, en réalisant toutes les étapes, du début à la fin;
  • Rien n'est jamais acquis, surtout en UX, il faut toujours être prêt à remettre son travail en question.