RUX

Rethinking-UX

Une petite mise en contexte

Nous sommes au début du mois de février et la situation sanitaire n’a pas beaucoup bougé. On travaille toujours de chez soi avec les moyens du bord. C’est mon premier projet pour cette année 2021. Il s’agit donc de rux.

C’est quoi rux ?

Rethinking User eXperience. C’est un projet qui a pour but de repenser l’expérience utilisateur d’un site/d’une fonctionnalité. Le site qui a été utilisé pour ce projet est celui de l’iMAL, la version archive.

Seul ou en groupe ? Les deux !

Le projet s’est déroulé en deux parties:

L’iMAL ?

Pour nous, l’iMAL c’est un atelier - laboratoire situé à Bruxelles qui permet aux milieux artistiques, scientifiques, industriels et créatifs de se rencontrer. Il soutient les créateurs dans le processus de création (recherche, expérimentation, production et diffusion). Il propose des séminaires, des ateliers, des stages. Leur objectif est de soutenir les pratiques artistiques et créatives en lien avec les nouvelles technologies en proposant entre autres un grand espace d’exposition, un FabLab, des espaces pour résidents et plus.

Des tests utilisateurs

En amont du projet, nous avons réalisé un test utilisateur sur le site de l’iMAL avec un scénario donné. Nous l’avons fait faire par un tiers. Par la suite, nous avons étudié son comportement sur le site. Pour nous, une chose sort du lot :

« Le design dessert l’information »

Un inventaire de contenu

Cette conclusion terminée, nous avons réalisé un inventaire de contenu sur toutes les pages du site archive de l’iMAL.

Top 5 des tâches du site de l'iMAL
Top 5 des tâches du site de l’iMAL

Avec cet inventaire, nous avons retiré une “list tasks”, une liste des tâches, que l’on peut effectuer sur le site. Chacun a pu voter pour trois tâches qu’il trouvait intéressantes. Ensuite chaque groupe a pu choisir sur laquelle il voulait travailler. Nous avons choisi de partir sur la consultation d’horaires qui doit permettre à l’utilisateur de consulter les horaires (infos relatives aux) des différents services qui sont proposés par l’iMAL, que ce soit : les ateliers, les expositions, le Lab, les évènements ou encore le Fablab.

Des besoins d’utilisateur

Après nous être penchés sur les tests, nous nous sommes mis en mode groupe de discussion sur le thème des besoins utilisateurs. Nous avons tout d’abord établi trois profils d’utilisateurs du site de l’iMAL :

Les 3 profils imaginés du site de l'iMAL
Les 3 profils imaginés du site de l’iMAL

A partir de ces trois profils, on a discuté pour lister leurs potentiels besoins qu’ils désiraient retrouver à travers notre fonctionnalité.

Les besoins utilisateur auquels on a pensé
Les besoins utilisateur auquels on a pensé

Un tour d’horizon

Une fois la tâche choisie et expliquée en groupe, la partie individuelle pointe le bout de son nez. En effet, chacun de notre côté, nous avons réalisé un audit pour voir ce que faisaient les autres dans la consultation d’horaire en notant à la fois les points positifs et négatifs des fonctionnalités présentes.

Screenshot de la fonctionnalité agenda du KIKK
Fonctionnalité agenda du KIKK
Screenshot de l'agenda pdf du KIKK
Agenda PDF du KIKK
Screenshot de la fonctionnalité agenda de l’extranet de l'HEAJ
Fonctionnalité agenda de l’extranet de l’HEAJ
Screenshot de fonctionnalités de l’AFT
Fonctionnalité de l’AFT
Screenshot de fonctionnalités de Livescore
Fonctionnalité de Livescore

Croquis

Maintenant que je sais ce que les autres ont fait, j’ai fait 2/3 croquis de comment j’imagine ma fonctionnalité pour desktop.

Croquis général
Croquis général

Pour moi, la 1ere chose qu’il fallait y retrouver, c'était un système de tri. Qui dit tri dit différents points. Je les ai tous repris : ateliers, évènements, résidences, fabrésidences et expositions.

Ensuite, le 2eme élément à laquelle j’ai pensé, ce sont deux boutons. Un bouton qui sert à ajouter vos événements à votre propre agenda personnel. L’autre sert uniquement aux créateurs d’atelier afin de planifier un de leurs ateliers à l’agenda.

Le 3eme élément s’avère indispensable, elle consiste en la mise en forme du calendrier, sous quel format je souhaite l’afficher. Je suis parti avec le format 3 jours détaillés. Avec la flèche, on peut évidemment aller voir plus loin que les trois premiers jours affichés.

Croquis focus bouton Ajouter à l’agenda
Croquis focus bouton « Ajouter à l’agenda »

Pour aller un peu plus loin, on va détailler quelques points. Concernant le bouton « Ajouter à votre agenda », chaque événement dispose d’un petit « + » qui l’ajoute à ce bouton comme un panier lors de vos achats en ligne. Lorsque vous cliquez sur le bouton « Ajouter à Agenda », cela n’ajoute que votre sélection.

Croquis focus système de tri
Croquis focus système de tri

Concernant le tri des différents services proposés par l’iMAL, les éléments qui sont pourvus de sous menus sont déroulables afin d’améliorer la précision de la recherche.

Les User Journey

Tout d’abord, une brève explication de ce que sont les “User Journey”. Ce sont des scénarios mis en place pour essayer de couvrir le plus de cas possibles, des situations potentielles rencontrées par les utilisateurs lors de leur passage sur notre fonctionnalité.

Mes User Journey
Mes User Journey

Chaque scénario est influencé par quatre contextes : social, spatial, économique, physique. Qui rendent la tâche plus compliquée à l’utilisateur.

Les prototypes papiers

Comme pour ton bon projet, on passe par des prototypes papiers pour l’imaginer. Ils nous servent aussi à faire des tests utilisateur car c’est beaucoup plus simple si changement. C’est facilement modifiable en un coup de gomme plutôt que de devoir se replonger dans un logiciel pour un mini changement. Lorsque j’imagine le design d’un projet, je commence toujours par celui pour le mobile.

Une planche de mes prototypes papiers
Une planche de mes prototypes papiers

Page Accueil

Prototype papier de la page Accueil
Prototype papier de la page Accueil

Il faut bien commencer par quelque chose, démarrons avec l’accueil. J’en ai profité pour refaire la barre de navigation ainsi qu’ajouter une des micro fonctionnalités, le système de connexion pour les créateurs d’ateliers.

Prototype papier du système de connection
Prototype papier du système de connection

En ce qui concerne la barre de navigation, rien de spécial, j’ai conservé celle présente sur le site avec un scroll horizontal.

Pour le système de connexion, il est nécessaire pour tous les créateurs d’ateliers. Cela pour résoudre le problème que sans autorisation pour certains utilisateurs, tout le monde allait pouvoir modifier l’horaire. Pour se connecter, le créateur a besoin de l’ID et du mot de passe que lui fournit l’iMAL lorsqu’il est reconnu comme organisateur d’ateliers.

Page Événement

Prototype papier d'une page événement
Prototype papier d'une page événement

J’ai repris les infos d’une page au hasard en intégrant une micro fonctionnalité dans le contenu. J’ai mis un lien direct vers la page agenda pour retrouver l’événement mis à l’horaire.

Page Agenda

C’est la page la plus complexe. C’est une fonctionnalité qui est composée de beaucoup de micro fonctionnalités. Le 1er problème auquel je me suis confronté est l’affichage du calendrier quand on arrivait sur la page. Au début, j'étais parti dans l’idée de ne rien afficher dans le calendrier et qu’il allait se remplir par les choix de l’utilisateur.

Prototype papier de l'agenda vide
Prototype papier de l’agenda vide

Mais après discussion avec un professionnel, je suis parti vers un tout autre affichage du calendrier. J’ai décidé de tout lister par jour.

Prototype papier de l'agenda journalier
Prototype papier de l’agenda journalier

Pour affiner sa recherche, il y a un menu contenant tous les points de navigation du site, les préférences d’affichage et une barre de recherche.

Prototype papier du menu de l’agenda
Prototype papier du menu de l’agenda

Dans ma première version tous les points étaient déroulables mais après discussions seulement certains points méritaient de l’être pour laisser apparaître les différents sous points pour une plus grande précision dans la recherche.

Prototype papier du développement du menu
Prototype papier du développement du menu

Selon la préférence ou le besoin de l'utilisateur, on peut afficher le calendrier sous différents formats : par 2 jours, par semaine, par mois. Si les 3 sont décochés alors on reste avec le format liste comme à l’origine.

Quand l’on tape sur un événement, un pop-up apparaît avec les infos de pratiques :

Prototype papier des infos pratiques
Prototype papier des infos pratiques

Sur ce pop-up se trouve aussi un bouton qui l’ajoute à « Ajouter à votre agenda » représenté par le bouton « + ».

Prototype papier des boutons
Prototype papier des boutons

Enfin, la barre de recherche est là si l’utilisateur sait ce qu’il cherche et qu’il veut afficher au calendrier.

Prototype papier de la recherche dans le menu
Prototype papier de la recherche dans le menu

Ma conclusion

Ce projet s’est bien déroulé. Certains éléments ont évolué au fur et à mesure des discussions et de l’avancement du projet mais sont restés dans la même lignée dans leur ensemble. Avoir un calendrier qui regroupe tout est plus pratique pour les utilisateurs. Tout est rassemblé en un seul point qui facilite la recherche. Le menu leur permet de préciser au mieux leur recherche et selon leurs préférences ou besoins.

Je tiens à remercier les membres de mon groupe, Keyssi Wone, Julien Ma et Raphaël Mauclet, pour la bonne entente et ambiance lors de nos séances de travail.