Case Study | Rethinking UX | Aude Schaff

1

Démarrage du projet

Avoir une bonne réflexion sur la conception de son site web est fondamental, et qu'elle représente une phase aussi importante que peut être la phase de design. Il faut pouvoir se poser les bonnes questions, pour répondre au mieux aux besoins du client et surtout des utilisateurs, quel que soit le type.

L’année 2021 débutée, ce nouveau projet DWM se focalise essentiellement sur l’expérience utilisateur et les méthodes à mettre en place pour qu’un site puisse être intuitif, accessible et inclusif.

Pour cela, je démarre avec un état des lieux du site d’iMAL, en faisant passer un test utilisateur suivi d’une analyse, publiée sur Medium. Cette méthode permettra alors, grâce à un scénario, de dégager les éventuels problèmes liés à la conception du site, pour ensuite réfléchir à des solutions en lien avec les besoins et le comportement des utilisateurs.

Lire l'article sur Medium

Visualisation de différentes pages du site iMAL

2

Présentation & questionnements

Le 1er février, sont publiées les différentes étapes et attentes du Rethinking User Experience, ce qui amène à me poser plusieurs questions.

Ayant seulement une idée floue de ce qu’est RUX, je décide de répondre à ces questions une fois le projet bien entamé. De cette façon, je pourrai mieux développer les phases de réflexion par lesquelles je suis passée.

Pourquoi et comment cette approche peut-être bénéfique lors de la création d’un site web ?

Qu’est-ce que ce projet apporterait à ma méthode de travail et à ma formation ?

De retour devant les écrans, je cherche à former un groupe de travail. Puisque j’étais satisfaite du travail accompli lors du projet précédent, je propose à Hannah, Antoine et Robin de collaborer à nouveau ensemble. Bonne nouvelle, ils sont du même avis et tous partants !

Découvrez le travail de mes coéquipiers

3

Analyse

Le travail d’équipe demande d’être sur une même longueur d’onde, et pour cela, il est important de bien connaître son sujet. Sans traîner, nous rédigeons un résumé collectif de nos analyses de tests utilisateurs, pour dégager les problèmes principaux :

01

Problème de navigation

Trop de profondeur dans le site, l’utilisateur ne sait pas où se rendre et doit mémoriser le chemin vers l’information qu’il recherche plutôt que de le reconnaître.

02

Mauvaise architecture d’information

Le site comporte aussi des problèmes de redondance dans les informations. La navigation n’est pas intuitive, l’expérience utilisateur est mauvaise

03

Hiérarchisation et présentation à revoir

Les éléments ne sont pas agencés selon des principes comme ceux de la Gestalt, rendant le contenu illisible et mal regroupé.

04

Problème dans l’utilisation des mots

Les onglets de navigation ne sont soit pas clairs, soit renvoient vers du contenu ne correspondant pas au libellé

4

Contenu

Bien que les faiblesses du site soient bien définies, nous voulons comprendre ce que propose l’iMAL de manière générale pour pouvoir mieux réfléchir aux solutions que nous pourrions apporter par la suite.

J’explore alors de nouvelles notions comme « Inventaire de contenu », « List Task » et « Top Tasks », qui m’ont permis de mieux visualiser le contenu et les fonctionnalités essentielles d’un projet.

iMAL met à disposition des espaces, des outils de création et des matériaux, pour aider à la réalisation de projets. L’organisme propose également des activités (workshops et masterclass), séminaires et rencontres avec des professionnels multidisciplinaires. Parmi les services disponibles, l’iMAL organise des expositions, conférences, concerts, performances ainsi que des résidences.

Pitch de l'iMAL

Inventaire de contenu

Cette fois-ci encore, nous mettons en commun nos réflexions autour du contenu de chaque page, sur base d’un sitemap ( thanks Chrysanthe ! ). Je décide, après concertation, de me concentrer sur la page Résidence Fablab.

Architecture d'information du site d'iMAL

Sitemap d'iMAL

Croquis de Fabrésidence

J’y apporte mon analyse, en distinguant les différents éléments (liens, fonctionnalités, interactions possibles, etc.) pour pouvoir cibler ce qui relève de l’importance, tout comme le croquis permet de mieux visualiser la hiérarchie de contenu et de voir ce qui fonctionne à l’état actuel.

List Tasks & Top Tasks

Ayant chacun apporté notre contribution en nous focalisant sur une page, nous avons pu gagner du temps pour l’étape suivante du processus: établir une liste d’actions possibles depuis le site d’iMAL pour lesquels l’utilisateur a le contrôle, et ensuite se mettre d’accord sur 5 tâches principales pour ensuite développer des pistes de réflexion autour d’une seule tâche: la Top Task.

Location d’un espace au sein de l’iMAL
Consulter la liste / s’inscrire à un atelier
Développer un projet avec l’iMAL / au FabLab / Résidence
Informer l’utilisateur sur les prochains ateliers / Activités / expo / …
Voir les tutoriels

5

Besoins utilisateur

En équipe, nous faisons le choix de développer «Consulter la liste / s’inscrire à un atelier» en réfléchissant aux besoins qu’auraient les utilisateurs pour effectuer cette tâche. Nous échangeons des pistes, commentaires et des hypothèses autour de fonctionnalités possibles à travers des questions que nous nous posons en tant qu’utilisateurs. Ainsi, nous avons pu dresser une première liste de fonctionnalités répondant aux besoins, nous permettant de visualiser vers où nous diriger.

Je comprends alors que beaucoup de facteurs sont à prendre en compte lors de la réalisation d’une tâche, et qu’elle doit pouvoir répondre à de nombreuses questions que pourrait se poser l’utilisateur.

Avoir une liste des derniers ateliers qu’iMAL propose avec une description des ateliers, leurs dates, leurs prix. L’utilisateur peut choisir de s’inscrire à l’atelier qui l’intéresse

Fonctionnalités

afficher si l’atelier est sold-out ou non
outil de filtrage sous forme de label (date, type d’ateliers, tout public ou non) à côté du titre de l’atelier + système de filtre dans la recherche pour cibler que les labels qui intéresse le visiteur
sélection de l'atelier, grâce à un bouton renvoyant à un formulaire d’inscription, à travers une liste
- formulaire d’inscription avec input
- demande d’identification de l’utilisateur (nom, prénom, email pour recevoir une confirmation)
- sélection du jour / de l’horaire à travers des menus déroulants et mini-calendrier
- redirection vers la page de paiement
- page de confirmation de paiement (possibilité de synchroniser à son calendrier personnel et avec option de retour à l’accueil)

6

Audit

Lorsque l’on conçoit un site web, il est toujours bon de prendre connaissance des bonnes pratiques, surtout quand il s’agit de fonctionnalités. J’apprécie d’ailleurs cette remarque qu’à eu Karim Maaloul à propos du processus créatif :

«Rappelle-toi encore, on n'invente rien tout seul.» K.Maaloul

En réalisant un audit sur plusieurs sites/plateformes proposant une tâche similaire à la mienne, je pourrai compléter mes recherches sur quelles fonctionnalités et micro-fonctionnalités utiliser et voir quelles sont leurs forces et faiblesses.

Lire l'audit sur Medium

7

Croquis

Pour mieux visualiser les réflexions établies et mettre en commun les recherches liées à l’audit, je passe par l’étape des croquis. Elle me permet de comprendre ce qui est nécessaire pour pouvoir consulter et s’inscrire à un atelier, mais aussi d’apporter des améliorations par rapport à la liste établie en équipe.

1. Rechercher un atelier

Lorsque l’utilisateur se rend sur la page pour consulter les ateliers, le site lui donne la possibilité de filtrer ses recherches grâce à des labels par thème, une date/période ou encore par ordre d’affichage.

Le résultat de recherche se présente sous forme de sections, selon le type d’ateliers. Concernant les ateliers même, ils sont présentés par cartes, reprenant toutes les informations pratiques (date, lieu, label issu des filtres, un bouton pour plus d’informations, un bouton pour acheter directement son billet).

L’utilisateur peut également rechercher directement un atelier à partir de la barre de recherche.

2. Description d'un atelier

Si le visiteur souhaite en savoir plus, il peut consulter la page détaillée de l’atelier où il retrouvera une description complète, les pré-requis et matériel utilisé, une galerie «Aperçu» et des notes quand aux risques possibles s’il s’agit de machine demandant certaines mesures de sécurité.

Il trouvera également toutes les informations pratiques dans une même section (type d’événement, lieu, organisateurs, date). Le prix est affiché, avec une invitation à acheter son billet ou contacter l’iMAL si besoin.

3. Inscription à un atelier

Enfin, si l’utilisateur veut acheter son billet, il sera invité à compléter les coordonnées qui lui permettront d’être identifiable le jour de l’atelier. Selon le type de visiteur (étudiant, particulier, entreprise ou en groupe), d’autres informations pratiques * sont demandées. Les informations concernant le paiement suivent le formulaire, et pour finir, une section “question”.

Le résumé de commande avec le nombre de tickets et les possibles réductions se mettent automatiquement à jour.