Rethinking User Experience

RUX : quesaco?

Rethinking User eXperience, abrégé en RUX, a pour but de revoir l’expérience utilisateur d’un produit, suivant plusieurs étapes. Ici, nous nous penchions sur le site des Beaux-Arts de Mons (BAM), et le projet se composait d’une partie à réaliser en groupe, et d’une partie individuelle.

chronologie des étapes de RUX
*défilez horizontalement

Situer le problème

Le site du BAM (Beaux-Arts de Mons) propose diverses expositions temporaires et permanentes. Via celui-ci, il est possible d’obtenir des informations au sujet d’une éventuelle visite, que ce soit un groupe scolaire ou privé, ou d’une réservation de salle afin d’exposer soi-même. Son but est principalement informatif, on peut y retrouver l’historique du musée ainsi que les archives des années précédentes.

Afin de repenser l’expérience utilisateur du site de BAM, nous l’avons testé nous-mêmes puis fait tester à quelques personnes de notre entourage.

Voir les tests utilisateurs

Après une mise en commun de nos réflexions en classe, avec tous les étudiants, nous en avons conclu que le site BAM présente des problèmes majeurs dans la recherche d’informations. Il contient notamment une mauvaise hiérarchie ainsi que des problèmes de lisibilité et de contraste. Les utilisateurs rencontrent des difficultés quant à l’ergonomie du site et ses fonctionnalités, les poussant parfois à l'abandon de la tâche en cours.

Inventaire du contenu

Pour pouvoir mieux repenser le contenu du site du BAM, il fallait d’abord en faire l’inventaire, c’est-à-dire analyser la manière dont les pages du site sont connectées entre elles.

Nous avons donc créé un sitemap du site du BAM, un guide visuel indispensable pour commencer le projet.

sitemap du site BAM
Sitemap du site BAM

Analyse du contenu

Fonctionnalités des pages

Après avoir analysé la structure des pages entre elles, nous avons fait l’analyse de la structure détaillée des informations présentes sur chaque page et les fonctionnalités associées, en créant des schémas simplifiés. Cela nous permettait de comprendre quelles fonctionnalités proposait le site, et de quelles manières elles étaient présentées.

analayse d'une page du site de BAM
Analyse de la page Agenda sur le site BAM
analayse d'une page du site de BAM
Analyse de la page Présentation sur le site BAM
analayse d'une page du site de BAM
Analyse de la page Venir au Musée sur le site BAM

Top Tasks

Après avoir analysé les pages, nous avons rédigé, avec l’ensemble de la classe, un top 4 des tâches principales présentes sur le site BAM.

La Top Tasks se composait donc des tâches suivantes :

  • réserver un ticket ;
  • contacter le musée / un membre de l’équipe ;
  • découvrir un artiste / une exposition ;
  • organiser votre visite.

Par groupe, nous devions choisir une tâche que nous aimerions repenser, et nous avons décidé de nous occuper de la dernière : organiser votre visite. Nous avons ensuite réfléchi aux buts de la tâche, ce que nous imaginions offrir à l’utilisateur grâce à l’organisation de sa visite : aider l’utilisateur à planifier sa visite en lui soumettant les informations nécessaires, notamment les horaires, les dates d’expositions temporaires et permanentes, les moyens d’accès, les conditions d’entrée, et les prix.

Afin d’être plus précis dans cette tâche, nous avons listé les fonctionnalités qu’il serait possible de développer :

  • agenda interactif ;
  • plans (de l’intérieur du musée, d’accès au musée) ;
  • établissements aux alentours ;
  • tableau interactif des tickets.

Déterminer du contenu

Entretiens

Pour pouvoir déterminer ce que les utilisateurs attendraient de la tâche « Organiser votre visite », nous avons fait passer plusieurs entretiens pour récolter des informations, afin de nous guider par après pour mieux construire cette tâche.

Nous avons tiré de ces entretiens plusieurs conclusions : ce qui préoccupe le plus les utilisateurs de sites d’événements est la gestion du temps et des transports. Dans le cas des musées, ils ont plus tendance à réserver leurs tickets en ligne en avance. Une bonne hiérarchie des informations et des visuels clairs sont plus attirants que des paragraphes de texte. La gratuité est un argument de poids, des expositions gratuites mises en avant pourraient encourager la venue de plus de visiteurs.

Résumé des réponses obtenues lors de nos entretiens
Résumé des réponses obtenues lors de nos entretiens

Repenser du contenu

Après toutes les analyses faites sur le site, il était temps d’entrer dans le vif du sujet : comment repenser le contenu ? Pour ce faire, il fallait encore passer par quelques étapes…

Audit

Pour avoir une idée de la manière dont on allait repenser le contenu, il fallait d’abord aller voir comment ça se passait ailleurs et donc chercher comment les autres sites web présentaient des fonctionnalités similaires à celle qui nous concernait. En allant analyser ça, on pouvait alors relever les points forts et les points faibles, pour savoir ce qui était bon à reprendre ou pas, et également avoir peut-être de nouvelles idées.

Voici quelques exemples de sites dont j’ai analysé les fonctionnalités :

Imagix Mons
Analyse de la fonctionnalité agenda interactif du site Imagix Mons
Site d'Imagix
Fonctionnalité : agenda interactif

Points forts

Il y a des pictogrammes permettant d’ajouter aux favoris ou de notifier si on a déjà vu le film, et en hover, on peut voir la vidéo bande-annonce du film ou voir les détails du film.

Point faible

Quand on clique sur le pictogramme d’informations et qu’on revient en arrière, les affiches bougent de place.

Disneyland Paris
Analyse de la fonctionnalité planifier votre visite du site Disneyland Paris
Site de Disneyland Paris
Fonctionnalité : organiser votre visite

Points forts

Il y a la possibilité de trier le contenu selon des catégories : restaurants, attractions, spectacles, etc. Lorsque l'on filtre une recherche, on voit également le nombre de résultats trouvés pour une catégorie (70 résultats pour la catégorie Restaurants, par exemple). Pour chaque résultat, en plus qu'il soit accompagné d'une photo, il y a l'indication sur la possibilité de manger sur place ou à emporter et une indication de la catégorie d’âge acceptée pour les évènements. Il y a également une barre de recherche, permettant de trouver un endroit plus rapidement, sans devoir regarder toute la liste, et le moyen de visualiser les lieux sous deux formes : liste ou plan.

Point faible

Pour avoir des informations sur les lieux, il faut changer de page.

Forest National
Analyse de la fonctionnalité planifier votre visite du site Disneyland Paris
Site de Forest National
Fonctionnalité : agenda interactif

Points forts

Il y a la présence d’une barre de recherche permettant de trouver un concert plus rapidement, sans devoir regarder toute la liste. Il y a également la possibilité de filtrer les résultats par types, par date, par expérience. Chaque concert présente une photo, et les informations importantes (titre du concert, lieu, date).

Points faibles

Le nom du bouton « acheter » ne donne pas envie de cliquer dessus si l’on cherche seulement des informations (j’aurais plutôt imaginé un bouton « + d’infos »). Et le bouton n’indique pas réellement l’endroit vers lequel il nous mène, puisque la page redirigée par ce bouton est une page d’informations.

Croquis

Une fois que l’on avait remarqué ce qui fonctionnait bien et ce qui n’allait pas, on pouvait passer à l’étape des croquis, pour mettre sur papier comment on imaginait nos fonctionnalités.

J’ai fait 3 croquis : agenda interactif, plans et organiser votre visite. Pour les trois, je me suis inspirée d'éléments que j'ai analysés sur les sites précédents.

Croquis de la fonctionnalité plan du site Croquis de la fonctionnalité agenda interactif Croquis de la fonctionnalité organiser votre visite

User Journey

Le User Journey est un parcours que l'on crée pour imaginer dans quelles situations peuvent se trouver les utilisateurs, quels problèmes ils rencontrent et quelles solutions nous avons à leur proposer.

Il permet d'anticiper un maximum de types de parcours pour que chaque besoin des utilisaturs soit pris en compte lorsqu'ils utiliseront la fonctionnalité « Organiser votre visite ».

chronologie des étapes de RUX
*défilez horizontalement

Après avoir réalisé mon User Journey, et m'être mise dans la peau de personnes qui voudraient réellement organiser leur journée par rapport à leur sortie au musée, j'ai constaté que je n'avais pas du tout imaginé toutes les informations qu'il était utile de placer dans ma fonctionnalité.

J'ai trouvé plusieurs choses qu'il manquait par rapport aux restaurations :

  • présence de terrasse ;
  • possibilité d'emporter son repas ;
  • indications par rapport aux régimes alimentaires (végé, vegan).

Mais il manquait également, pour les établissements en général, des indications par rapport :

  • à la présence de wi-fi ;
  • à la présence de parking ;
  • à l'accessiblité aux PMR (personnes à mobilité réduite) ;
  • aux moyens de paiement ;
  • aux détails concernant les catégories d'âge (des activités pour les enfants, des tarifs étudiants et séniors).

J'avais également pensé à développer une interaction autour d'un bouton « Créer mon planning » et le User Journey m'a permis de l'imaginer plus clairement : cette fonctionnalité servirait à faire une timeline des activités et des expositions choisies pour pouvoir l'exporter en PDF. Cela permettrait à l'utilisateur d'avoir son planning sur lui lors de sa journée, avec les informations importantes par rapport aux endroits qu'il veut visiter, sans devoir rechercher toutes ces informtions sur Internet à nouveau.

Prototypes papiers

Lors de la création de mes prototypes papiers, je suis partie sur l'idée de faire, dans un premier temps, un système de filtres (accessibles depuis une fenêtre) et, dans un second temps, la possibilité de créer son planning, avec un système de cases à cocher et la possibilité d'exporter son planning pour l'avoir sur soi.

Prototypes papiers version 1
Première version des prototypes papiers

Après avoir fait tester plusieurs fois mes prototypes, je me suis rendue compte qu'ils présentaient quelques soucis :

  • il y a trop de filtres possibles ;
  • il manque des catégories de filtres ;
  • il y a trop d'explications par rapport aux étapes de la création du planning ;
  • le bouton « Créer mon planning » est tout en bas de la liste et c'est embêtant parce que ça nous oblige à scroller jusqu'à lui ;
  • l'étape de réorganisation des lieux à visiter dans la création du planning est trop long et les images ne sont pas nécessaires 
  • toujours dans la même étape, celle-ci est visuellement différente du résultat obtenu en téléchargeant le planning.

Suite à ces constats, j'ai fait une seconde version :

Prototypes papiers version 1
Seconde version des prototypes papiers

Afin de trouver quels filtres j'allais garder et combien, j'ai fait un tour auprès de tous les étudiants de la classe. Je leur ai demandé, à chacun, quels étaient les 3 lieux qu'ils aimaient visiter lorsqu'ils découvraient une nouvelle ville. Grâce à la trentaine de réponses obtenues, j'ai regroupé les réponses similaires par catégories, et j'ai ainsi pas mal réduit ma liste de départ. La réduction du nombre m'a également permis de créer des filtres hors d'une fenêtre spécifique.

Prototypes papiers - un exemple de page
Aperçu d'une page de la seconde version de mes prototypes papiers
Prototypes papiers - un exemple de page
Aperçu d'une partie de mes prototypes papiers (également de la seconde version)

Conclusion

J'ai beaucoup aimé cet atelier, car il met au centre l'utilisateur, et nous demande de nous concentrer sur ses besoins. RUX m'a ainsi permis de me remettre en question à plusieurs reprises, et c'est ce qui était enrichissant dans cet atelier.

Les travaux de mes camarades

sitemap du site BAM
Notre groupe de travail (de gauche à droite) : moi, Julie, Nell et Nicolas