Ui-kit

Atelier RUX — DWM

Case-study rédigé par Sylvian Bergiers

Un atelier dès la rentrée

En février, c’est le retour en 2ème pour ma part et quoi de mieux qu’un atelier pour ce remettre dans le bain ? C’est en effet le workshop RUX (Rethinking User Experience) qui me tombe dessus, il n’est pas obligatoire, puisque déjà réalisé l’année passée, mais vivement conseillé pour se rafraîchir la mémoire !

En quoi consiste-t-il ? Repenser des fonctionnalités d’un site pour booster l’expérience que l’utilisateur aura dessus. Cet atelier apprend beaucoup sur le domaine des designers, c’est un très bon exemple du monde qui nous attend dans notre futur métier.

Illustration d'un smartphone avec Ux d'un côté et Ui de l'autre

Première étape

Comme l’objectif est d’améliorer les fonctionnalités d’un site, il faut au préalable le tester ! Naviguer dessus et tâter les fonctionnalités et les démarches à suivre lorsque l’on souhaite faire X ou Y actions sur le site.

Ce processus est appelé User testing, test d’utilisateur. C’est grâce à des mises en scènes que des personnes tiers, ou sois même, naviguent sur le site en question pour y constater les points positifs et négatifs.

Mise en route

Il est toujours bon de travailler à plusieurs pour maximiser les chances de couvrir l'entièreté des problèmes au sein du site. C’est ainsi qu’entouré de trois compères, nous avons mis en commun nos analyses et établi un résumé de nos tests utilisateurs.

Gros plan d'une personne qui écrit dans un cahier
Le test utilisateur se termine toujours par un résumé de tout ce qui a pu être dit

Le débrief a rapporté pas mal de choses, les problèmes sur le site n’étaient pas en reste, en voici quelques-uns:

  • hiérarchie typographique mal utilisée;
  • un contraste presque absent;
  • une surcharge d’information;
  • une utilisation limitée des lois de la Gestalt;
  • un multilanguage mal approprié.

Pointez du doigt les problèmes est une chose, mais savoir les expliquer en est une autre. Pour comprendre au mieux le pourquoi du comment ces fonctionnalités et les informations ont été faites de la sorte, un inventaire de contenu est la meilleure solution.

Il consiste à regrouper les informations similaires entre chaque page et de lister tous les contenus présents sur le site.

L’inventaire de contenu
L’inventaire de contenu effectué sur les pages des archives

Besoins utilisateurs et définir sa tâche

Dans un document, chaque étudiant rajoute une ou plusieurs tâches que le site pourrait contenir. Une fois cela fait, la liste est triée et on en prélève les plus pertinentes. Cinq, c’est le nombre de tâches qu’y ont été gardées. Notre groupe s’est penché sur les locations. En effet, le centre prévoit plusieurs salles permettant d’accueillir du monde pour des concerts, réceptions, laboratoires etc.

Qui dit location, dit besoins particuliers. C’est donc une recherche minutieuse qui est lancée avec l’aide d’un autre groupe intéressé par le sujet. Rapidement, plusieurs besoins sont mis en évidence:

  • obtenir des renseignements à propos des locaux;
  • réserver une salle;
  • contacter un responsable.

Une fois les besoins ciblés, il faut réfléchir à des fonctionnalités qui permettront d’y répondre au mieux. Une liste est donc dressée et de nouveau triée pour y laisser les plus pertinentes.

Liste des fonctionnalités

Pour vérifier la solidité de nos fonctionnalités, il faut maintenant se poser un maximum de questions que l’utilisateur pourrait avoir en tête en se trouvant sur la page des locations. C’est un travail sur papier très simple mais qui nécessite tout de même de se creuser un maximum les méninges. Une douzaine de questions en est ressortie et des réponses appropriées ont pu être données. Les fonctionnalités sont solides et pragmatique

Point d'interrogation dessiné sur un tableau
Les questions sont une part importante du processus

Un audit

L’étape suivante est un audit. Il consiste à analyser différents sites ayant des fonctionnalités similaires à ce que nous avons imaginé. A travers ces recherches, il est possible de découvrir de nouvelles idées comme de concrétiser celle déjà mise en place ou bien évidemment les améliorer.

Le plein de croquis et de tests

Une fois que la théorie est complète, qu’on pense avoir fait le tour des modifications qu’on apporterait à la location de salles, il faut faire du concret. On prend du papier, un crayon, une gomme et c’est parti ! Il est temps de faire des croquis de l’image qu’on se fait de cette page, comment représentons-nous tous ce qui a pu être théorisé juste avant.

Image de croquis, wireframe
Les croquis réalisé sur Mockflow

Vient ensuite les prototypes papiers, qui sont dans la continuité des croquis. c’est pour ainsi dire, une version plus aboutie des croquis et un minimum interactif pour voyager comme si nous étions sur le site.

Prototype papier des locations du sites
Les prototypes papier de la page des locations

La fin d’une expérience

C’est avec l’élaboration des prototypes papiers que touche à sa fin l’expérience. En partant d’une analyse de site, nous nous retrouvons avec une réelle prise de conscience de ce que représente l’UX dans ce milieu. Tout ce que nous pouvons ajouter sur une page doit être un minimum réfléchi et non pas placé quelque part par simple hasard. C’est un réel travail d’analyse et de recherche pour permettre une expérience utilisateur la plus agréable possible.