Rethinking-UX : l'IMAL

Alors que je reprenais les cours au début du mois de février, j’arrive en plein milieu d’un atelier lancé plus tôt dans l’année, le R-UX ou Rethinking User eXperience. Il consiste à repenser l’interface, les fonctionnalités et le design d’un site choisi. Cette fois-ci il s’agit du site de l’IMAL. L’IMAL est une association bruxelloise, un centre d’art dédié aux cultures et technologies numériques. Cet espace permet la réalisation de divers projets en mettant à disposition des matériaux et machines. Des workshop, des masterclasses et des expositions s’y donnent régulièrement, de plus des professionnels y donnent des conférences et séminaires. L’association vise à émanciper tous les publics et à permettre de lancer les jeunes générations dans les cultures numériques.

On est partis !

Avec d’autres élèves dans le même cas que moi, nous formons un groupe et découvrons rapidement le site dont nous relevons de suite les nombreux défauts :

screen de l'interface de l'IMAL avec un effet hover
Screenshot du site de l'IMAL — l'image supérieure est en hover, la différence avec celle du dessous est quasi inexistante.

Après ce relevé, nous nous lançons dans un inventaire de contenu de tout le site afin d’en décortiquer la structure globale. Nous en discutons et partons de cela pour en relever les différentes Top Tasks que nous mettons alors en commun. Nous finissons avec cette liste :

Nous procédons alors à un vote afin de dégager les 3 Top Tasks que nous considérons les plus importantes. Nous arrivons alors au choix final de garder les suivantes :

Choix final

Après concertation avec mon groupe, nous choisissons de nous concentrer sur la 2e à savoir la location d’un espace.

Nous repartons analyser la page puis faisons un brainstorming de ce qu’il serait intéressant d’ajouter et de mettre en place afin d’améliorer cette partie du site. Nous en venons à monter une liste de besoins avec des solutions éventuelles :

Fonctionnalités :

En mode Solo

Après cela, nous partons individuellement à la recherche de fonctionnalités différentes semblables aux nôtres sur d’autres sites.

screen de la fonctionnalité de sélection de dates sur le site de AirBNB
Airbnb - calendrier

Ce système permet de directement regarder quels lieux sont disponibles pour la période voulue tout en mettant en évidence les jours calendaires. Cela permet de mieux visualiser les dispositions des dates sur la semaine. De plus, le service a déjà gardé en mémoire la localisation de mon choix. Cependant, malgré le fait que le site soit en français et que je sois sur le site belge, le calendrier est en anglais et avec la disposition américaine faisant commencer la semaine par le dimanche. Cela pourrait poser problème auprès d’un utilisateur pressé ou peu attentif à ce point, ou même à un potentiel client non-bilingue.

screen des infos d'une salle sur le site de Salles.be
Salles.be - infos sur un lieu (local)

Les images permettent une compréhension rapide et libère de l’espace de texte plus lourd à assimiler. Il faut cependant 2 secondes pour comprendre qu’ils font la différence entre place assises et place debout.

screen de la fonctionnalité de contact d'une salle sur le site de Salles.be
Salles.be - demande d’informations supplémentaires pour un local

Ce formulaire permet de se renseigner et d’aboutir à une discussion de vive voix à propos d’une salle sans nécessairement s’engager à quoique ce soit auprès du loueur. Le calendrier est un plus mais ne permet pas de réserver sur plusieurs jours. Par contre, il n’est nulle part précisé quelles sont les différences entre les demandes de visite et de rendez-vous.

screen de la page du formulaire de réservation d'une salle sur le site de UponUp
UponUp - formulaire de réservation

Ce formulaire permet d’entrer directement plusieurs informations importantes et de manière rapide. De plus, il offre un résumé des données encodées ainsi qu’un aperçu du coût final. Un curseur pour un nombre de personne n’était peut-être pas la meilleure idée. L’utilisateur devra perdre du temps et faire un effort juste pour mettre le curseur pile sur le nombre adéquat. Un simple champs de texte numérique aurait été moins contraignant pour l’utilisateur.

screen de la page du listing de matériel d'une salle sur le site de UponUp
UponUp - équipement disponible

Une disposition claire des éléments mis à disposition et à part du reste des informations de base permet un survol rapide. Il aurait été encore mieux de rajouter les quantités des objets/installations, une simple mise au pluriel reste fort évasive.

screen de la pop-up de conseils d'un pro du site de Storefront
Storefront - proposition d’aide au choix d’une salle

Dans le cas de personnes manquant d’expérience ou bien pour quelqu’un ne sachant pas trop ce dont il a besoin comme salle, une aide et un conseil sont toujours appréciés. À voir cependant ce que le service proposera une fois que l’utilisateur cliquera sur le bouton, va-t-il recevoir simplement une liste basée sur des données qu' il aura enregistré et face à laquelle il sera à nouveau laissé seul ou bien aura-t-il droit à un échange réel avec un des spécialistes ?

screen de la page de réservation d'une salle sur le site Storefront screen de la page de réservation d'une salle sur le site Storefront, focus sur la fonctionnalité des dates screen de la page de réservation d'une salle sur le site Storefront, focus sur la fonctionnalité des prix
Storefront - page descriptive du lieu/local + formulaire de réservation

La page offre plusieurs informations importantes (quasi) directement. Les plans du lieu peuvent être téléchargés si l’utilisateur en a besoin et des informations de base sont mises en avant clairement. Sur la droite, il est possible de rentrer la durée concrète désirée et les détails de prix sont affichés, ceux-ci s’adaptent en fonction de la période sélectionnée. Je m’attarde particulièrement sur le dernier exemple que j’ai trouvé, le calendrier de “The Store Front” car j’aime beaucoup le principe du calendrier donc les jours sélectionnés sont mis en avant mais aussi le récapitaltif du prix calculé en fonction des différents éléments.

Premiers aperçus

Sur base de ces recherches, je dessine mes premiers croquis de wireframe.

wireframe de la V1 de la page d'accueil wireframe de la V1 de la page de contact wireframe de la V1 de la page de paiement

J’en relève déjà plusieurs problèmes, tels le fait qu’un utilisateur qui voudrait réserver plusieurs salles ne saurait le faire qu’à la «caisse» et que rien ne l’indique ni l’aiguille sur ce fait. Cela devient le principal défaut de mon wireframe dans son état actuel.

User journey d'untuilisateur du site

Pour pousser ma réflexion, je réalise plusieurs User Journey afin d’envisager plusieurs aspects et points de vue.

Dans leur création, l’un d’entre eux soulève un problème. Dans mes wireframes en l’état, lors de la réservation, l'utilisateur peut ajouter des salles mais il ne sait pas ce qu’il prend concrètement comme salles. J’en discute autour de moi et je décide de mettre en place un nouveau système.

Ça se finalise

Je recrée une nouvelle série de wireframes, plus longue, et avec un chemin démarrant de la page d’accueil. Je mets également en place un système d’onglet en bas de l’écran, qui se ferme ou s’ouvre au clic, et qui reprend les salles que l’utilisateur souhaiterait réserver.

Je fais quelques test utilisateurs et remodifie quelques détails. Je renomme certaines sections, rajoute certains détails (pop-up de confirmation,...), en retire d'autres (la demande de genre dans le formulaire de réservation) et enfin je finalise mon wireframe interactif.

C’est ainsi que se clôture ce rethinking-UX sur le site de l’IMAL, alors que je tape les dernières lignes de ce case-study. Je vous invite à aller tester ma vision de ce qu’aurait pu être l’interface originale et le site officiel.