Case Study de l'atelier
RUX
Rethink User Experience
RUX, Rethink User Experience, est un atelier réalisé par les élèves DWT de l’HEAJ. Le but ici est d’analyser et de repenser le site du BAM pour ensuite permettre à chaque élève d’imaginer une nouvelle interface à celui-ci afin d'offrir une meilleure expérience utilisateur à ses visiteurs.
Contenu du site
Qu'est-ce qu'il propose ?
![Screenshot de la page d'accueil du site BAM](./assets/images/screen01.jpg)
Le BAM est un musée présentant des expositions permanente ou temporaire au musée des beaux-arts de Mons. Sur le site on peut retrouver les tarifs, les heures d’ouvertures et tout type d’informations pratiques. Les expositions sont centrées autour des artistes contemporains ou d’un mouvement artistique. Le site fournit également les informations nécessaires pour pouvoir réserver son ticket.
Dans un premier temps, on réalise un test utilisateur pour détecter les potentiels problèmes dans ce que propose le site. L’utilisateur qui le réalise, de préférence, ne connaît pas encore le site et le découvre à vif. On peut alors analyser les moments de doute, de frustration, et ce qui les a déclenché.
Voir le test utilisateurSuite aux tests utilisateurs, des équipes ont été formées afin d’avoir une meilleure vue globale sur les différents problèmes.
L'Équipe
Avec cette équipe, nous avons mis en commun les problèmes qui nous semblaient les plus importants:
-
L’UX n’est pas structuré de manière intuitive.
-
Problèmes de hiérarchie typographique, tous les textes se ressemblent.
-
Pas responsive.
-
La réservation à lieu sur un site externe, ce qui résulte en une perte potentielle de clients.
-
Corps de texte trop petit (13px), manque d’accessibilité pour les personnes malvoyantes.
Que ce soit sur smartphone ou desktop, le site de BAM manque d’une navigation claire. Les informations capitales et les fonctionnalités sont dissimulées dans un contenu sans distinction ni hiérarchie.
L'objectif
Sur quoi se concentrer ?
![Screenshot de la page d'accueil du site BAM](./assets/images/uti.jpg)
Dans un premier temps, avec tous les élèves, nous avons réalisé l’inventaire de contenu du BAM afin de détecter absolument tout ce que propose le site. Une fois cette tâche accomplie, le groupe a procédé à un vote pour savoir quelles fonctionnalités sont les plus pertinentes.
5 sont mises en évidence:
-
Réserver un ticket
-
Contacter le musée/membre de l’équipe
-
Découvrir un artiste/exposition
-
Organiser votre visite
-
Consulter l’agenda
Avec notre groupe de 4, nous avons sélectionné une de ces fonctionnalités, “découvrir un artiste / une exposition”.
Le but de cette top task serait de permettre à l’utilisateur de Trouver des informations pertinentes par rapport à l’artiste ou l’exposition, lui donner envie de voir l’exposition relative au sujet, Proposer des ressources externes au sujet, ou encore de proposer une mise en contexte de l’utilisateur par rapport à l’exposition.
Les utilisateurs
Quels sont leurs besoins ?
![Screenshot de la page d'accueil du site BAM](./assets/images/peace.jpg)
Dans le but de cibler aux mieux les besoins des utilisateurs par rapport à notre top task, on a élaboré une interview qui sert à cibler les points d'intérêt d’un utilisateur choisis au hasard comme quelqu’un de notre entourage par exemple.
Ce processus nous aide à avoir une vue globale des besoins et pas seulement les besoins des personnes de notre groupe, ici le but c’est de prendre l’avis de toute sorte de personnes.
Les questions portaient sur les informations que les utilisateurs aiment connaître avant de se rendre à une exposition, s' ils veulent en connaître.
Suite à nos interviews, nous avons tiré pas mal de conclusions:
-
On remarque dans les interviews que généralement tout le monde va au musée. Le plus souvent ils vont dans des musée d’art, mais nous avons également eu comme réponse, des musées automobile, sportif et historique.
-
Le sujet de l’exposition intéresse souvent, le prix également. Généralement la réputation de l’exposition est une source de motivation pour s’y rendre. Dans presque tous les cas, ils font des recherches en avance par rapport au musée. Ce qui peut déplaire dans une exposition est la longueur et l’agencement de celle-ci mais également le nombre de personnes sur place. Une biographie de l’artiste et une preview intéressent mais doivent être concises.
-
Dans le cadre de notre top task “découvrir des artistes / des expositions”, on remarque que les utilisateurs essaient souvent de trouver des informations à l’avance ainsi qu'une bonne communication mais souvent, ils nous disent également qu’il ne faut pas que ça soit trop long ni trop détaillé pour garder l’effet de découverte.
Audit
Ce qui se fait déjà
Je me suis rendu sur des sites culturels similaires à ce que propose le BAM pour voir ce que ces sites proposaient comme fonctionnalités à leurs utilisateurs. En voici quelques unes
![Screenshot de l'audit selectionné](assets/images/audit1.png)
Le site nous présente un slideshow des différentes expositions, on peut drag&drop pour naviguer dans les différentes propositions. Lorsque l’on clique dessus, on arrive sur une page avec descriptif, preview et moyen d’acheter son ticket. Ça marche bien car c’est assez intuitif, cependant les texte sur peut-être légèrement trop long pour accrocher le visiteur.
Voir les auditsEsquisses
Premières idées
Pour concrétiser mes recherches j’ai réalisé des croquis pour 3 fonctionnalités ainsi que leur fonctionnement. Les 3 fonctionnalités sont:
-
un système de tags sur les visuels qui permet de retrouver toutes les œuvres avec des tags similaires.
-
un système de tri des œuvres.
-
une timeline affichant les œuvres en lien avec une période.
![Croquis de fonctionnalité dans le cadre du projet RUX](./assets/images/croquis01.jpg)
![Croquis de fonctionnalité dans le cadre du projet RUX](./assets/images/croquis02.jpg)
![Croquis de fonctionnalité dans le cadre du projet RUX](./assets/images/croquis03.jpg)
Suite à ces croquis, je me suis penché sur la deuxième fonctionnalité qui me semblait être la plus pertinente.
User Journey
Simulation d’utilisateurs
Dans le but d’améliorer mon esquisse pour en faire une vraie fonctionnalité, on utilise ici le principe des user journeys. On imagine une expérience réalisée par un utilisateur et on essaye de trouver les différents problèmes qu’il pourra rencontrer.
![Croquis de fonctionnalité dans le cadre du projet RUX](./assets/images/user1.png)
![Croquis de fonctionnalité dans le cadre du projet RUX](./assets/images/user2.png)
![Croquis de fonctionnalité dans le cadre du projet RUX](./assets/images/user3.png)
Suite à ces simulations, j’en conclu que la fonctionnalité a son utilité pour des personnes cherchant des informations pointue comme pour celles voulant juste avoir un aperçu des expositions.
Lors de l’élaboration des user journey je me suis aperçu de plusieurs soucis possibles.
Au niveau des catégories de tri, les plus pertinentes sont selon moi “Artiste”, “Courant Artistique", et “Période”. Au niveau de l’interface, je pense qu’il est intéressant d’ajouter le titre de l'œuvre avec sa vignette. Peut-être même un formulaire de recherche par titre.
Le nom de l’exposition dans laquelle se trouve l'œuvre peut également être pertinent dans pas mal de situations. Au niveau du nom du bouton de validation, il est préférable d’avoir un nom clair du type “appliquer les filtres” ou “appliquer” pour que l’activation de ceux-ci soient bien clairs.
Prototype
visuels concrets sur papier
![Screenshot de la page d'accueil du site BAM](./assets/images/hands.jpg)
Pour le prototype, j’ai appliqué toute les modifications que j’ai recensé dans mes user journeys. Le tout en utilisant de plus petits éléments pour simuler la façon dont la fonctionnalité interagit avec l’utilisateur.
![Test utilisateur du prototype](./assets/images/test.jpg)
À l’aide de mon groupe, nous avons réalisé des tests utilisateurs afin de déterminer ce qui pourrait causer problème et être améliorable dans ma première maquette. Lors de ces tests, j’ai recensé plusieurs problèmes, notamment pour la version mobile:
-
Il manquait un bouton “retour” sur la page de l'œuvre permettant de revenir aux catégories tout en conservant les paramètres indiqués auparavant.
-
Il manquait un affichage des tags de l'œuvre affichée permettant de faciliter la navigation.
-
Les filtres pourraient être plus détaillés.
![Prototype de fonctionnalité dans le cadre du projet RUX](./assets/images/proto01.jpg)
![Prototype de fonctionnalité dans le cadre du projet RUX](./assets/images/proto02.jpg)
![Prototype de fonctionnalité dans le cadre du projet RUX](./assets/images/proto03.jpg)
![Prototype de fonctionnalité dans le cadre du projet RUX](./assets/images/proto04.jpg)
![Prototype de fonctionnalité dans le cadre du projet RUX](./assets/images/proto05.jpg)
![Prototype de fonctionnalité dans le cadre du projet RUX](./assets/images/proto06.jpg)
![Prototype de fonctionnalité dans le cadre du projet RUX](./assets/images/proto07.jpg)
Conclusion
RUX est un atelier qui m’a été très utile pour comprendre la différence en UX et UI, c’est un concept qui n’était pas très clair pour moi, j’avais beaucoup de mal à comprendre la différence entre agencement de contenu et fonctionnalité.
Cet atelier m’a également permis de comprendre comment cibler les besoins des utilisateurs et comment rendre une fonctionnalité ergonomique pour le plus grand nombre. C’est un atelier qui nous apprend à remettre en question nos premiers choix en prenant des points de vue extérieurs. Cette expérience m’a été utile et j’espère qu’elle l’a été tout autant pour mon groupe.