Case study sur l’atelier RUX

Par Quentin Golinveau

Introduction

L’atelier pour lequel nous allons travailler s’appelle RUX (Rethinking UX = Repenser l’expérience utilisateur) c’est un travail à la fois en groupe et individuel que l’on réalise lors de notre 2e année à la Haute École Albert Jacquard. Plusieurs de nos cours sont impliqués pour sa réalisation. Notre tâche de départ est le remaniement de différentes parties du site du KIKK Festival 2019 sur mobile et sur desktop où chacun des membres du groupe va retravailler une fonctionnalité afin d’obtenir un site pratique et agréable.

Ma Team

Qui dit travail de groupe, dit plusieurs autres membres et pour ce travail je suis accompagné de Marie-Joséphine Cuvelier, Maryline Brouwer et Cédric Van Gheluwe.

Petite mise en contexte

Pour ce projet tout a commencé avant les vacances de Toussaint 2019, où nous avons reçu les infos en grandes lignes. La suite était la réalisation, par un proche, d’un test utilisateur fait sous notre tutelle que l’on a rendu après les vacances et qui a été la base de notre travail. À la rentrée nous nous sommes mis en groupe pour commencer à travailler sur, ce qui est le sujet de cet article, l’atelier RUX. Je vais maintenant rentrer un peu plus dans le vif du sujet en vous détaillant comment il s’est déroulé.

Par où commencer ?

Pour faciliter les échanges et la vie de groupe nous avons créé un groupe sur Slack. C’est là que nous avons pu donner des infos importantes à retenir ou donner des explications si quelqu’un avait besoin. On a aussi créé des fichiers Google afin de tout centraliser et que tout le monde puisse y avoir accès facilement.

Image montrant notre conversation sur le groupe Slack.
Capture d’écran de notre groupe sur Slack.

Les tops tasks

Ensuite nous avons identifié 20–30 tâches à faire sur le site du KIKK où chacun en a fait un top 5 avec de belles gommettes colorées. Individuellement nous avons choisi une tâche sur laquelle nous allons travailler le reste de l’atelier. Personnellement, ayant eu des soucis avec le programme, j’ai décidé de le repenser et donc d’en faire ma tâche.

Image montrant la liste des tâches qu’on a trouver.
La liste des tâches que l’on a trouvées.

Quelques audits

En partant de cette tâche nous l’avons détaillée et nous avons réalisé une liste des fonctionnalités possibles pour la réaliser. Une fois celles-ci terminée, nous avons réalisé un audit pour voir comment les fonctionnalités que nous avions choisies étaient déjà pensées par d’autres pour réaliser notre tâche, tant sur desktop que sur mobile.

Extranet HEAJ

Desktop: Le planning est organisé dans un tableau à double entrées (Heures \ Jour), où chaque bloc à une couleur. On peut également choisir la semaine que l'on souhaite avec des boutons numérotés. On peut également choisir la classe avec un menu déroulant.

Image du de l’onglet calendrier sur le site de l’extranet de l’HEAJ sur desktop

Mobile: Le planning est organisé en liste. On peut choisir en fonction de notre classe avec menu déroulant et la semaine avec des boutons numérotés.

Image du de l’onglet calendrier sur le site de l’extranet de l’HEAJ sur mobile

KIKK Festival 2019

Desktop: Le programme des conférences est organisé en tableau à double entrée (Lieu de la conférence \ Heures).

Image du de l’onglet programme sur le site du KIKK Festival sur desktop

Mobile: Le programme des conférences est regroupé par jour que lorsqu'on clique dessus il se déroule et offre une liste classée par lieu de conférence.

Image du de l’onglet programme sur le site du KIKK Festival sur mobile

Cinéma Espace

Desktop et mobile: La programmation est organisé en tableau à double entrée. Film \ Heures

Image du de l’onglet programme sur le site du Cinéma-Espace sur mobile et desktop

Un sujet de conversation

Avec un autre groupe, on s’est réunis pour parler de qu'est ce qu'un bon site pour un événement. Et après avoir longuement discuter on en est arrivé à une conclusion. Pour nous, un bon 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 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 User Journey. Mais c’est quoi ?

Après avoir pu s’inspirer de ce qui avait déjà été fait, nous avons écrit des User Journey. Concrètement, ce sont des scénarios qui sont divisés en étapes, celles-ci nous montrent comment l’utilisateur interagit ou pourrait interagir avec notre projet. Nous en avons écrit trois différents en essayant de couvrir le plus de possibilités, de l’adolescent à la personne âgée en passant par un professionnel, en y ajoutant le plus de contraintes. Pour chacune d’entre elles qui correspondai à notre fonctionnalité nous avons réfléchi à comment la résoudre.

Image montrant notre processus pour construire nos user journey
Tableau qui nous a servi de base pour écrire nos scénarios.
IMAGES USER JOURNEY
Les trois scénarios que nous avons écrits.

Valeurs ou principes ? Les deux !

Une fois cela terminé on s’est penché sur les valeurs, les principes au KIKK. Là aussi on a fait une liste dans laquelle nous en avons ressorti un top 4 avec nos magnifiques gommettes :« Accessibilité, simplicité, créativité, dynamisme ».

Image montrant la liste des veleurs que l’on a ressortit. Dynamisme, Inspirant, Flexibilité, Tendance, Harmonie, Créativité, Simplicité, Curiosité, Rencontres, Accessibilité, Découverte, Ouvert à tous, Apprendre, Voyage, Nouvelles Technologies, Art, Digital
Liste des valeurs qu’on a ressorties du site du KIKK.

Les fameux prototypes papier

Lorsque chaque problème a eu sa solution, nous sommes passés à quelque chose de plus “concret”. Chacun de son côté, on a commencé à réaliser nos fonctionnalités sous forme de prototypes papier. Bien évidemment on a dû se consulter afin d’avoir un travail uniforme et pas quatre travaux diamétralement opposés.

Imange montrant l’ensemble de mes prototypes papier
Ensemble de tous mes prototypes papier

Version desktop première. Action !

La première version m’a demandé pas mal de temps au niveau de la réflexion et de la conception. En effet cherchant toujours midi à 14 heures je me suis lancé dans quelque chose d’assez compliqué et précis à réaliser. Paradoxalement je n’ai pas vu ce temps passer. Pour ma première version je suis resté encore assez fidèle à ce qui avait été fait en essayant d’améliorer le système de tri. Lorsque nous arrivons sur la page “Programme” nous tombons sur le programme complet du 1er jour du festival. Pour ce point il n’y a pas de changement pour ma version 2.

Image montrant à quoi ressemble la page Programme quand on s’y rend pour la première fois
Visuel de la page « Programme » quand on arrive dessus pour la première fois.

Une nouvelle navigation

Dans le menu de navigation au-dessus du programme se trouve tout un système de tri avec différents boutons pour nous aider à simplifier notre recherche. Ce système est toujours présent dans ma deuxième version avec on le verra des changements au niveau de son contenu.

Image illustrant la première version du menu de navigation de la page Programme
Première version de ma navigation pour la page « Programme ».

Un des premiers tris que l’on peut réaliser c’est au niveau du lieu des conférences/ateliers. Nous pouvons choisir de voir le programme d’un lieu spécifique où se déroule le festival. Ce tri disparaît dans la version 2.

Image montrant que l’on obtient que la liste des activités d’un lieu lorsque son bouton est activé.
Système de tris en fonction du lieu sélectionné.
Image montrant la disparition du système de tris en fonction des lieux dans ma deuxième version
Disparition du système de tris en fonction des lieux dans la deuxième version.

Il y a deux autres tris possibles avec le bouton “Pour les enfants”, présent dans les deux versions, qui permet d’afficher les activités organisées pour eux et avec celui “Mon programme”, qui changera d’intitulé dans la version 2 pour devenir “Ma sélection”, qui vous affiche toutes les conférences et ateliers que nous avons sélectionnés avec le petit bouton “+” présent sur les conférences/ateliers. Si par mégarde deux activités auraient lieu au même moment ou auraient des heures qui se chevauchent, l’heure de fin de la première activité et l’heure de début de la deuxième sont mis en évidence par un encadré rouge. En cas d’erreur ou de problème de timing nous avons le choix de supprimer un ou plusieurs élément(s) avec la “x” rouge présente pour chaque élément.

Image montrant que l’on obtient que la liste des activités pour enfants lorsque le bouton Pour les enfants est activé.
Lorsque le bouton « Pour les enfants » est activé il y a que les activités qui leur sont dédiées qui s’affichent.
Image montrant que l’on obtient que juste notre sélection lorsque le bouton Mon programme ou Ma sélection est activé.
Avec les boutons « Mon programme » (Version 1) et « Ma sélection » (Version 2) activés, on peut afficher juste ce qu’on a choisi.

Nous avons aussi la possibilité dans ma première et ma deuxième version d’ajouter notre sélection à notre agenda personnel. En plus et/ou à la place de l’ajouter à notre agenda dans ma première version nous avons l’opportunité de télécharger le programme complet du festival alors que dans ma deuxième version nous pouvons télécharger notre sélection directement.

Image montrant les boutons télécharger le programme complet et ajouter à votre agenda
Boutons servant à avoir notre programme ailleurs que sur le site.

Version desktop deuxième. Action !

Ma deuxième version de cette page programme reçoit quelques modifications supplémentaires à celles déjà mentionnées plus haut. Comme dit précédemment le contenu de la navigation du menu change quelque peu. On y retrouve trois nouveaux boutons de tri : “Programme complet”, “Conférence” et ”Atelier”. Ils nous permettent tous trois de changer le visuel du programme. Le premier nous l’affiche en entier sans tri alors que les deux autres nous permettent d’afficher soit seulement les conférences soit seulement les ateliers. Pour le reste du contenu il est décrit ci-dessus.

Image montrant que tout le programme s’affiche quand le bouton Programme complet est activé
Lorsque le bouton « Programme complet » est activé, tout le programme est affiché.
Image montrant que juste les conférences s’affichent quand le bouton Conférence est activé
Lorsque le bouton « Conférences » est activé seule la liste des conférences apparaît.
Image montrant que l’on obtient que la liste des ateliers lorsque le bouton Ateliers est activé.
Lorsque le bouton « Ateliers » est activé seuls les ateliers apparaissent.

Lorsque vous naviguez dans le programme les conférences/ateliers qui sont déjà présents dans notre sélection sont mis en évidence par un encadré bleu.

Image illustrant la manière dont les éléments présent dans votre sélection sont mis en évidence.
Un encadré bleu comme celui-ci est présent autour des éléments qui sont dans votre sélection.

Les à côtés

En ce qui concerne la page programme proprement dit c’est tout mais à d’autres endroits du site se trouvent des éléments que j’ai placés afin de pouvoir retrouver son programme sans devoir spécialement besoin de se rendre sur la page “Programme”. Commençons par le bouton “Ma sélection” qui se retrouve partout dans l’en-tête du site où l’on peut y consulter sa sélection à tout moment sans avoir besoin de retourner sur la page “Programme”. On peut y retourner par là avec le bouton « voir calendrier ».

Image du bouton Ma sélection avec le résultat de son interaction
Méthode pour consulter sa sélection sans se rendre sur la page « Programme ». Si besoin il y a le bouton « voir calendrier » qui est présent.

Un autre dispositif mis en place est celui d’avoir notre sélection qui s’affiche sur la page d’accueil sous forme de ligne du temps seulement pendant le festival et si nous sommes connectés sur le site.

Image montrant la page accueil avec la ligne du temps de notre sélection
Ligne du temps de votre sélection seulement disponible si nous sommes connectés sur le site et pendant le festival.

Version mobile. Action !

En plus d’avoir repensé nos fonctionnalités sur PC nous l’avons aussi fait sur mobile. De même que pour la version sur PC je suis reparti de ce qui avait déjà été fait en y ajoutant des éléments pour l’améliorer. J’ai gardé le système de box qui se développe pour laisser apparaître le programme du jour. En ajoutant au-dessus un menu avec différents boutons de tri. Ils sont quasiment identiques à la version PC par conséquent ils ont la même fonction. On y retrouve les boutons: « Ma sélection », « Télécharger le programme », « Pour les enfants », « Conférences » et « Ateliers » quand nous sommes sur la page « Programme ».

Image montrant la page Programme avec son nouveau menu sur mobile
Visuel de la page « Programme » avec son nouveau menu.

Une navigation plus complète

Lorsque nous cliquons sur le bouton « Ma sélection » le bouton « Télécharger le programme » devient « Télécharger ma sélection » et le bouton « Ma sélection » devient lui « Voir programme complet ».

Image illustrant les changements d’intitulé des deux boutons
Visuel de la page « Programme » lorsqu’on a cliqué sur le bouton « Ma sélection ».

Le truc en plus

C’est ce qui concernait la page “Programme”, maintenant sur le site pour mobile il y a aussi des boutons qui nous permettent de consulter notre programme sans se rendre sur la page “Programme”. Nous avons dans l’en-tête de la page le bouton “Ma sélection” qui est toujours présent. Il nous permet de la consulter et/ou de la modifier et d’avoir accès au programme avec le bouton “Voir calendrier” qui se trouve dans le bas.

Image illustrant la fonction du bouton Ma sélection
Méthode pour consulter sa sélection sans se rendre sur la page « Programme ». Si besoin il y a le bouton « voir calendrier » qui est présent.

Des tests utilisateur

Bien évidemment les différents changements effectués entre les versions ne sont pas tombé du ciel. Ils sont le fruit de discussions entre nous vu qu’on s’est beaucoup consulté pour la réalisation de nos projets pour connaître un peu nos avis. C’est aussi grâce aux professeurs et à nos camarades cobayes lors des tests utilisateurs qu’on leur a demandé de réaliser sur nos travaux. Et pour ça je les remerice tous car c’est en partie grâce à eux que le travail a pu être fait. Ma conclusion des tests utilisateur est un peu mauvaise car avec chacun des scénarios proposés quasiment aucun utilisateur ne s’est rendu sur la page “Programme”.

Image des tests utilisateur
Image d’un test utilisateur sur la version PC.
Image Test Utilisateur
Image d’un test utilisateur sur la version mobile.

Faisons un peu le bilan

Je penses qu’au final la page « Programme » et ses à-côtés ont bien évolué par rapport à ce qui avait déjà été fait auparavant. On a dorénavant quelque chose de plus intuitif. Où l’on peut se simplifier les choses avec des boutons de tri beaucoup plus ciblés. On a un outil un peu plus personnalisé avec cette possibilité d’avoir une sélection qui est gardée en mémoire que l’on peut consulter et modifier à sa guise. Tout ça étant possible aussi bien sur PC que sur mobile. Je suis bien conscient que ce que j’ai produit n’est pas parfait mais en poussant la réflexion plus loin il y aurait sûrement moyen d’améliorer certaines choses.

Maintenant en ce qui concerne l’atelier, les différentes méthodes que l’on a reçues m’ont permis d’avoir une nouvelle vision de comment je pourrai faire à l’avenir. Le travail en groupe était vraiment très agréable car nous avons tous pu donner nos avis et recevoir l’avis de chacun sur le travail à faire. On a vraiment pu aller de l’avant et améliorer notre travail. Je voudrais encore remercier Marie-Jo, Maryline et Cédric pour l’entente dans le groupe et pour votre aide si précieuse.