Atelier RUX

Repenser l’expérience utilisateur

L’atelier RUX (Rethinking User Experience) a lieu dans le cadre de nos études en Design Web et Mobile à la Haute École Albert Jacquard. RUX a pour but de repenser un site qui propose un événement comme celui du KIKK festival. Nous allons tout le long de ce travail analyser les points forts et les points faibles du site et tenter de repenser plusieurs fonctionnalités pour obtenir un site utile et agréable pour les utilisateurs.

RUX est à la fois un travail de groupe et un travail individuel. Je suis avec Maryline Brouwer, Quentin Golinveau et Cédric Van Gheluwe.

Kikk.be quel est le problème?

Avant de repenser, nous allons d’abord évaluer les problèmes rencontrés par les utilisateurs sur le site du festival grâce au test utilisateur. Une copine sera ma testeuse, elle reçoit quelques consignes, un scénario à suivre et explore le site. Ce test me permet de tirer ces conclusions:

Capture d’écran du test utilisateur

Le site du KIKK est très beau mais n’est pas pratique à utiliser et les informations ne sont pas claires.

L’utilisatrice a dû voir le programme sous 3 formes différentes avant de trouver la bonne conférence, alors qu’elle se trouvait sur toutes les pages. Impossible par exemple de faire une simple recherche ou de trier les noms par ordre alphabétique.

Le prix de la conférence a été trouvé par déduction et non grâce à des informations claires venant des organisateurs.

J’ai senti qu’elle était souvent perdue sur le site voir agacée de devoir autant chercher. Elle a persévéré pour trouver une partie ce qui était demandé car le test était dans le cadre scolaire mais je pense que cette visite sur le site n’était pas très positive. Elle a d’ailleurs abandonné une partie du scénario à savoir chercher une éventuelle deuxième conférence.

Le Test utilisateur complet

Globalement, les tests utilisateurs de tous les élèves permettent d’arriver à une même conclusion: le site est visuellement très réussi mais manque d’organisation, de clarté et est difficile à comprendre et à utiliser.

Quelles pistes pour repenser le site?

Après avoir soulevé tous les problèmes, il temps de trouver des solutions pour repenser le site du KIKK. Quels sont les éléments nécessaires à un site de festival comme le KIKK? Quelles sont les tâches et fonctionnalités indispensables? Comment font les autres événements pour mettre en place ces fonctionnalités? Toutes ces questions nous allons nous les poser à la fois en groupe et individuellement en testant différentes méthodes.

Pour mieux travailler en groupe, nous avons une chaîne privée sur Slack, nous créons un premier document google «RUX commun» où les exercices sont regroupés. Nous créons également un dossier «RUX» pour y déposer nos photos et tous les autres documents qui seront créés lors de cet atelier. J’ai en plus un document personnel pour les parties individuelles et mes notes pour rédiger le case study.

Le groupe de discussion

Pour cette première méthode, nous discutons par groupe sur le thème «Qu’est-ce qu’un bon site d’événement?» . Il est parfois difficile pour les facilitateurs d’entrer dans leur rôle et de donner la parole à tout le monde mais nous arrivons tout de même à mettre nos idées en commun. Voici ce qu’il en est ressorti:

Pour le groupe, le site doit être composé d’un accueil clair (on doit comprendre de quoi parle le site), d’informations organisées (on doit savoir où cliquer) et d’un visuel pas trop chargé et agréable. Sur un tel site, on s’attend à trouver un menu clair et une barre de recherche. Les utilisateurs ont besoin qu’on leur propose une bonne architecture d’information. Ils doivent pouvoir facilement trouver le programme, les horaires, les tarifs, les activités proposées durant l’événement. Et aussi les «infos pratiques» telles que les moyens de transport, où se restaurer, où loger,...

Les top tasks et fonctionnalités

Les top tasks sont les tâches essentielles pour un site. En groupe, nous demandons quelles tâches doivent pouvoir être effectuées sur un site d’événement.

Nos top tasks
  • Rechercher une activité;
  • changer la langue;
  • proposer des tickets à la vente;
  • consulter les horaires;
  • savoir où se passent les activités;
  • se renseigner sur le programme;
  • pouvoir faire une recherche;
  • se renseigner pour devenir sponsors;
  • se renseigner pour être bénévole;
  • se renseigner sur les événements;
  • se renseigner sur les réseaux sociaux de l’événement;
  • se renseigner sur l’adresse;
  • contacter les organisateurs;
  • se renseigner sur les différents tarifs;
  • présenter les infos pratiques (transport, repas, ...);
  • trouver le merchandising de l’évènement;
  • rechercher une fiche de présentation;
  • télécharger le programme;
  • trouver un historique des années précédentes;
  • vérifier si c’est adapté aux enfants;
  • vérifier si il y a un accès PMR.

Nous votons ensuite pour déterminer nos top tasks et chacun choisit une tâche sur laquelle il va se concentrer. Pour ma part c’est «Présenter les infos pratiques (transports, repas...)» . Les étapes suivantes consistent à détailler individuellement la tâche choisie et à voir quelles fonctionnalités peuvent être mises en place pour qu’elle soit accessible à l’utilisateur du site.

Détails de la tâche «Présenter les infos pratiques»

  • Moyens de transport:
    • ligne de bus à proximité;
    • ligne de métro à proximité;
    • station de location de vélo;
    • gare;
    • covoiturage;
    • itinéraire voiture;
    • parkings à proximité;
    • avion.
  • Adresse (du festival en général mais aussi des différents lieux où ont se déroulent les activités).
  • Lieux où dormir.
  • Lieux où se restaurer.
  • Plan de l’événement.
  • Où échanger son billet.

Liste de fonctionnalités qui rendent la tâche possible

  • Aller dans le menu, chercher la page «infos pratiques»
  • Aller dans le menu, chercher la page «infos pratiques»
  • Lien vers la page «infos pratiques» sur la page d’accueil

Comment font les autres lorsqu’ils doivent présenter des infos pratiques? Quels sont leurs points faibles, leurs points forts leur approche? Nous réalisons chacun un audit spécifique à notre tâche sur d’autres sites d’événements pour analyser tout cela.

West Web Festival

Capture d’écran du site West Web Festival

Le site de West Web Festival propose une page regroupant les infos pratiques comme: l’adresse, les moyens de transport (avec des détails comme le temps de trajet depuis plusieurs grandes villes, les correspondances depuis la gare jusqu’au festival, les lignes de bus) et l’accès au parking.

Il manque des informations sur le logement ou comment se restaurer. La page est uniquement accessible via le menu qui n’est pas fixe, il faut toujours remonter en haut du site pour y avoir accès.

Frame Festival

Capture d’écran du site Frame Festival

Sur le site du Frame festival, on trouve une barre de menu fixe (accessible à tout moment) ou se trouve l’onglet «les infos» lorsqu’on clique sur cet onglet on a un sous-menu avec notamment «les lieux» et «les bons plans.» La page «les lieux» présente les différents lieux où se déroulent les activités du festival avec un lien externe vers le site de chaque lieu. La page «Les bons plans» présente quelques adresses suggérées par le festival pour manger, dormir, ou sortir avec des liens externes vers de ces commerçants.

Il y a quelques points faibles. Il manque les adresses des différents lieux sur le site même du festival. On doit visiter tous les sites web des différentes salles pour avoir les adresses exactes. Il y a très peu d’adresses dans les bons plans. Il n’y a pas de proposition de moyen de transport pour se rendre jusqu’au festival.

KIKK Festival

Capture d’écran du site KIKK Festival

Je profite de cet audit pour passer en revue les infos pratiques du KIKK festival.

Il y a un onglet «pratique» dans la barre de menu avec un sous menu contenant «Programme et carte», «Bouger à Namur», «Manger à Namur», «Boire à Namur», «Dormir à Namur».

La page «Pratique» propose un lien vers chaque catégorie.

La page «Programme et carte» permet de situer les différents lieux où se passent les activités du festival mais ne mentionne pas la gare, les arrêts de bus, les endroits où on peut louer des vélos, les parkings, l’endroit où on doit échanger son billet,...

La page «Bouger à Namur» propose différents moyens de transport ainsi que les liens externes vers les sociétés responsables. Il manque ici ou sur la carte les arrêts à proximité, comment rejoindre la gare, où louer un vélo, où se situent les parkings,...

La page «Manger à Namur» montre les différents food trucks et quelques restos et snack avec les liens externes de tous ces points de vente. Le fait que le village de food truck est une organisation du festival et qu’il se trouve à proximité du théâtre n’est pas clair.

La page «Boire à Namur» présente différent bar de la ville avec les liens externes vers leurs sites.

La page «Dormir à Namur» propose une carte assez pratique permettant de trouver un logement selon l’emplacement et le prix de la chambre via des filtres. Et aussi des liens vers différents hébergements.

En dessous de chacune de ces pages, il y a toujours un lien vers la page «Pratique» et deux autres pages de la catégorie. À part ces liens le menu, il n’y a pas d’autre de trouver les infos pratiques.

Les valeurs et principes

En groupe, nous déterminons les valeurs du KIKK et votons pour nos préférées, ces valeurs devront être prise en compte dans notre travail.

Liste des valeurs
  • Dynamisme;
  • inspirant;
  • flexibilité;
  • tendance;
  • harmonie;
  • créativité;
  • simplicité;
  • curiosité;
  • rencontres;
  • accessibilité;
  • découvertes;
  • ouvert à tous;
  • apprendre;
  • voyage;
  • nouvelles technologies;
  • art;
  • digital.

Le user Journey

L’user journey est un scénario qui cherche à définir le parcours d’un utilisateur sur un site web. En groupe, sur un nouveau document commun, nous créons 3 scénarios avec différents profils d’utilisateurs et donc différentes difficultés. Ceci me permet donne de nouvelles pistes plus précises pour repenser ma tâche.

Testons nos idées

Le test utilisateur et l’audit du site KIKK ont mis en lumière toute une série de problèmes rencontrés par les utilisateurs, la suite du travail nous a permis de trouver quelques pistes pour repenser le site. Il est temps maintenant de les tester grâce aux prototypes papier avec lesquels nous effectuerons des tests utilisateur.

Les prototypes papiers

Cette méthode aide à avoir assez rapidement un feedback sur ses idées tout en étant assez simple à réaliser. Trois phases de prototypage montrent de généralement une grande majorité des problèmes.

Nous travaillons à la fois en groupe et individuellement. Chacun dessine les pages associées à sa tâche et ajoute aussi quelques fonctionnalités sur des pages dessinées par d’autres membres du groupe. À nouveau nous tentons de nous organiser via un document commun et nous mettons les photos de nos prototypes papier dans le dossier «Rux.» Le document n’a pas été utilisé comme prévu mais il m’a quand même aidé à clarifier mes idées pour les fonctionnalités de ma tâche.

Organisation prototype papier

Première version du prototype papier

  • Prototype papier page infos pratiques
    Page «infos pratiques.»
  • Prototype papier page infos pratiques ajout d’un lien
    Page «infos pratiques»: ajout d’un lien vers la carte.
  • Prototype papier accueil de la page carte
    Page «Carte»: ajout de lieux sur la carte et dans les catégories: point échange ticket, restos, bars, transports en commun, parkings et hôtels.
  • Prototype papier menu déroulant de la page carte
    Page carte: menu déroulant.
  • Prototype papier exemple d’une catégorie
    Lorsqu’on sélectionne une des catégories: affichage des lieux correspondants sur la carte avec pictogrammes.
  • Prototype papier la page bouger
    Page «Bouger.»
  • Prototype papier la page bouger, lien vers la page carte
    Page «Bouger»: ajout lien vers la page carte pour situer arrêts de bus, gare, station location vélo, parkings…
  • Prototype papier ajout de liens vers la page carte et infos pratique
    Sur les pages «bouger, manger, boire»: ajout d’un lien en fin de page vers les pages «infos pratiques» et «carte du festival».
  • Prototype papier page manger
    Page «Manger».
  • Prototype papier page manger
    Page «Manger»: repenser les titres pour qu’on comprenne que de le food truck village est sur le site du festival.
  • Prototype papier page manger
    Page «Manger»: repenser les titres pour qu’on comprenne que de le food truck village est sur le site du festival.
  • Prototype papier page boire
    Page «Boire": test avec photos plus petites pour éviter un long scroll.

Fonctionnalités sur d’autres pages

  • Page «Conférences»: Lorsqu’on clique sur le nom de la salle, un lien redirige vers la page «carte» pour pouvoir situer la conférence.
  • Page «KIKK in town»: ajouter un lien vers la page «carte» pour pouvoir situer les lieux d’expositions.
  • Page «KIKK Market»: ajouter un lien vers la page «carte» pour pouvoir situer le KIKK market.
  • PDF: améliorer la carte, la rendre plus lisible.
  • Footer: ajouter un lien vers la page «infos pratiques».

Avec le groupe et avec les professeurs nous remettons en question nos prototypes, chacun donne son avis et des conseils. Nous nous sommes trop basés sur le site original du KIKK pour nos réalisations et nous n’avons pas assez repensé nos réalisations. Nous avons aussi omis de travailler une version mobile. Je n’ai pas réfléchi à ce qu’il se passe lorsqu’on clique sur un pictogramme sur la carte, la liste des catégories devrait avoir un ordre plus logique, des éléments doivent avoir une catégorie propre, il serait intéressant d’avoir une légende de tous ces pictogrammes,... Beaucoup d’éléments à retravailler avant de pouvoir faire un test utilisateur.

Deuxième version du prototype papier

  • Prototype papier accueil de la page carte
    Accueil de la page carte.
  • Prototype papier page carte, détails des filtres
    Détails des filtres par catégories.
  • Prototype papier exemple catégorie KIKK
    Si on sélectionne la catégorie «KIKK festival», les lieux de conférences et le market s’affichent. Lorsqu’on clique sur l’un des pictogrammes, on obtient l’adresse, l’horaire et le programme du lieu.
  • Prototype papier exemple catégorie expo
    Si on sélectionne la catégorie «Expositions», les lieux d’expositions s’affichent. Lorsqu’on clique sur l’un des pictogrammes, on obtient l’adresse, l’horaire et le nom de l’artiste.

J’ai surtout repensé la carte lors de cette étape, elle est déjà plus pratique même si elle doit encore être améliorée. J’ai gardé les autres pages telles qu’elles étaient dans la première version. Le groupe me fait part des choses qui posent encore problème: les pages infos pratiques avec les bulles ont de trop longs scrolls et c’est lassant de devoir changer souvent de page pour pouvoir consulter l’ensemble des infos pratiques… Pourquoi ne pas regrouper toutes ces infos sur une seule page? Sous forme de carte avec des filtres.

Troisième version du prototype papier

  • Prototype papier page infos pratique version finale
    Accueil de la page «infos pratiques»: toutes les catégories sont affichées sur la carte sous forme de pictogrammes. Des boutons en dessous permettent de filtrer les catégories.
  • Prototype papier catégorie KIKK festival
    Lorsqu’on clique sur le filtre «KIKK festival» il n’y a plus que les pictogrammes relatifs à la catégorie sur la carte. Les infos pratiques relatives aux lieux s’affichent en bas de la carte.
  • Prototype papier catégorie KIKK festival
    Les infos pratiques relatives aux lieux s’affichent en bas de la carte.
  • Prototype papier catégorie KIKK festival
    Lorsqu’on clique sur le pictogramme, les infos pratiques relatives au lieu s’affichent dans une fenêtre sur la carte.
  • Prototype papier catégorie food truck village
    Lorsqu’on clique sur le filtre «Food truck village» il n’y a plus que ce pictogramme sur la carte. Les infos pratiques s’affichent en bas de la carte.
  • Prototype papier catégorie food truc village
    Lorsqu’on clique sur le pictogramme, les infos pratiques s’affichent dans une fenêtre sur la carte.
  • Prototype papier version mobile page infos pratiques version mobile
    Accueil de la page «infos pratiques» version mobile: toutes les catégories sont affichées sur la carte sous forme de pictogrammes.
  • Prototype papier version mobile menu
    Lorsqu’on clique sur filtrer, le menu s’affiche et permet de sélectionner une catégorie.
  • Prototype papier version mobile catégorie kikk festival
    Lorsqu’on sélectionne «KIKK festival», les pictos situant les conférences se placent sur la carte et les infos pratiques s’affichent sous la carte.
  • Prototype papier version mobile explication des liens
    Le survol du nom du lieu met en évidence le picto sur la carte. L’adresse est un lien vers maps avec l’adresse pré-encodée pour l’itinéraire. Un lien souligné une fois est un lien externe vers le site de l’entreprise (resto, sncb,bar,...). Un lien souligné 2 fois est un lien vers une autre page du KIKK ( artiste, atelier, conférence,...).
  • Prototype papier version mobile catégorie kikk market
    Lorsqu’on clique sur le pictogramme, les infos pratiques relatives au lieu s’affichent dans une fenêtre sur la carte.
  • Prototype papier version mobile variantes carte
    Variantes des cartes selon les différentes catégories.
  • Prototype papier version mobile variantes fenêtre
    Variantes des fenêtres s’affichant sur la carte selon les différentes catégories.
  • Prototype papier version mobile variantes infos pratiques
    Variantes des infos pratiques s’affichant sous la carte selon les différentes catégories.

Pour cette dernière variante, la tâche «présenter les infos pratiques» a bien changé. Une seule page au lieu de 5 précédemment, beaucoup moins de scroll. Une carte avec toutes les infos disponibles en filtrant les catégories ou en cliquant directement sur un pictogramme sur la carte. Et il y a maintenant une version mobile.

Test utilisateur

Nos prototypes nous semblent maintenant assez aboutis pour un test utilisateur. Nous créons plusieurs scénarios, prenons chaque fois un testeur différent et chaque test nous permet de retravailler quelques détails sur nos prototypes pour le scénario suivant.

Scénario 1: «Vous vous rendez au KIKK, comme chaque année, avec vos collègues. Vous cherchez le conférencier que vous avez apprécié l’an passé. Vous regardez pour organiser votre journée et aller dîner avec vos collègues. Vous achetez des tickets pour vous et vos collègues.» (mobile)

Test utilisateur du prototype papier

Avec ce scénario, je n’ai pas la possibilité de tester ma tâche ni aucune des fonctionnalités liées. Le test montre quelques problèmes pour les autres tâches du groupe, quelques modifications doivent être apportées à certains prototypes. Pour le test suivant, nous ajoutons une recherche sur les transports.

Scénario 2: «Votre ami vous propose d’aller voir la conférence de Marie-des-Neiges Ruffo de Calabre et de participer à une des soirées au KIKK. Pour rentabiliser l’achat du ticket, vous cherchez d’autres conférences. Vous vous renseignez sur le moyen de vous y rendre.» (mobile)

Test utilisateur du prototype papier

L’utilisatrice a décidé de se rendre au KIKK en train et a trouvé l’emplacement de la gare et le lien vers le site de la Sncb. De nouveau quelques modifications doivent être apportées à certains prototypes. Et pour le test suivant, nous ajoutons en plus du transport, une recherche pour manger.

Scénario 3: «Tu es intéressé par tout ce qui touche à la technologie. Tu décides d’aller au KIKK mais tu dois organiser ta journée. Tu choisis d’aller voir plusieurs conférences parlant de “design” et de participer à un atelier. Comme ta voiture est au garage, tu dois utiliser les moyens de transport en commun. N’oublie pas de rechercher un endroit où manger. Tu télécharges ta sélection.» (desktop)

Test utilisateur du prototype papier

L’utilisateur a trouvé son moyen de transport et son restaurant grâce aux filtres et a pu faire son choix. Les autres tâches du groupe n’ont plus nécessité de modification, nous arrêtons là les tests utilisateurs.

RUX, le bilan

Au final la tâche «présenter les infos pratiques» a bien évolué. Sur le site du KIKK elle comprenait 6 pages avec de longs scrolls, il fallait sans cesse passer d’une page à l’autre pour avoir les différentes informations. Il manquait aussi quelques fonctionnalités comme le fait de pouvoir avoir un lien vers la carte sur le nom d’un lieu dans le programme. Les différentes méthodes d’analyse et de réflexion m’ont apporté beaucoup d’éléments pour pouvoir repenser la tâche choisie. Plusieurs versions ont été nécessaires pour arriver à la page finale. Lors des tests, les utilisateurs n’ont pas été bloqués dans leur parcours, la nouvelle page semble compréhensible et utilisable même s’il reste peut-être des détails à modifier. Il faudrait par exemple que le cadre d’information qui vient s’afficher sur la carte ait une flèche qui pointe vers le lieu associé.

L’atelier RUX était très intéressant, grâce à lui nous avons découvert de nouvelles méthodes pour se poser les bonnes question afin de réaliser des sites pratiques et agréables pour les utilisateurs. Travailler en groupe a été bénéfique, chacun a pu donner et recevoir des idées pour progresser. Merci Maryline, Quentin et Cédric pour votre aide précieuse.