Rethinking User Experience est un atelier dans lequel nous sommes amenés à analyser un site, le comprendre et repenser certaines de ces fonctionnalités pour améliorer l’expérience utilisateur.
Lors de cet atelier on s’est penché sur l’ancien site de l’iMAL.
Expérience Utilisateur
La première étape a été de réaliser un test utilisateur du site. L’idée est très simple, un sujet qui n’a aucun avec le site, se voit assigné une tâche à exécuter sur le site, l’écran et le sujet ont été filmés pour permettre une analyse.
J’ai fait appel à un homme de 50 ans, il lui a été assigné la tâche de trouver les informations nécessaires pour se rendre à l’Imal et imprimer un modèle 3D. Voir la vidéo.
Il n’a pas réussi à accomplir la tâche qui lui a été attribuée, bien qu’il ait fait preuve de beaucoup de patience.
Cette expérience a mis en évidence certains problèmes dans l’expérience utilisateur de l’Imal, les 3 points majeurs retenus sont;
- Le changement de langue du site
- Il y avait beaucoup trop d’informations sur les pages
- Le navigation entre les pages du site laisse à désirer
Le recensement
Avec la classe nous avons ensuite collectivement réalisé un inventaire complet du site dans un document, pour avoir une meilleure vue d’ensemble.
Sur base de cet inventaire, nous avons listé toutes les tâches possibles réalisables sur le site de l’Imal. Nous les avons triés sur base de leur pertinence en votant.
En équipe 🗿🗿
Nous avons formé des groupes pour la suite du travail. Nous devions choisir une top task parmis les tâches les plus populaires du vote.
Le choix de notre groupe c’est porté sur la top task ‘ Faire une recherche dans le site ‘
Nous avons posé une définition de ce qu’est pour nous une recherche sur le site.
“ La recherche permet au visiteur de trouver rapidement les informations qu’il cherche sur le site comme l'inscription, les horaires, les expositions et les services de la Fablab (voir groupe louer un espace). “
Ensuite nous avons réfléchi aux besoins des utilisateurs en rapport avec notre top task.
Cependant, nous avions mal interprété la demande du professeur et nous nous sommes concentré sur la barre de recherche, et non la recherche en elle-même.
Après avoir reçu du feedback sur notre liste des besoins utilisateurs, nous avons rectifié notre erreur et avons listé différentes méthodes et fonctionnalités de recherche.
Recherches
Pour affiner nos connaissances sur notre sujet, nous avons réalisé individuellement des ‘ audit ‘, dans lesquels nous avons listés différents types de recherches que nous avons trouvés.
A vos crayons
Nous avons ensuite imaginé sur papier 3 de nos fonctionnalités, pour ensuite en sélectionner une seule et faire 3 user journey sur base de celle-ci par rapport au contenu de l’Imal.
User experience
J’ai choisi de continuer avec la fonctionnalité, “afficher des résultats de recherche populaire s' il n’y a pas de résultat pour ce que l’utilisateur a cherché“.
Mes 3 scénarios testés étaient ;
- Une personne passe devant les locaux de l’Imal, il est intrigué de ce que peut être l’Imal, il va sur le site sur son mobile en espérant en savoir plus
- Un étudiant souhaite imprimer des modèles 3D
- Un nouvel inscrit du fablab souhaite se renseigner sur les évènements à venir, mais une erreur côté serveur rend obsolète la barre de recherche
Je n’étais absolument pas satisfait des scénarios que j’imaginais. J’ai le sentiment d’avoir tordu la réalité dans mes questionnements pour pouvoir arriver à un point ou la fonctionnalité d’afficher des résultats de recherche même si rien n’a été trouvé est utilisée.
Bien que l’idée semblait pertinente quand nous l'avions formulée sur papier, je devais voir la vérité en face. Si je devais me mentir à moi-même pour me donner l’impression d’être un minimum utile, c’est que la fonction est inutile, si pas contre-productive.
Avec le recul, je suis forcé d’admettre qu’il y aurais pu avoir des situations pertinentes, par exemple prendre en compte la dyslexie.
Cependant, au moment où j'écris ce case study, il est trop tard pour revenir en arrière, et je pense que je serais malgré tout arrivé à la conclusion suivante. La fonctionnalité n’améliore en rien la navigation.
Changement de direction
J’ai donc dû me réorienter dans une autre direction et mon idée était de suggérer des recherches populaires, mais de le faire avant / en même temps que la recherche est effectuée. En cas de recherche non-concluante, il y aurait une boîte de dialogue dans laquelle la personne était invitée à renseigner son adresse Email et laisser un message à un administrateur du site, en attente d’une réponse par mail.
Prototypes papier
Premier jet
J’ai donc dessiné mon premier prototype en accord avec le changement dans la fonctionnalité.
Cependant à cause d’un malentendu dont je suis responsable, je pensais qu’on ne travaillait plus avec le contenu de l’Imal, qu’il fallait faire un prototype “neutre” qui pourrait s’adapter à n’importe quel site. Mais à cause de cela, mon prototype était très pauvre, seulement 4 écrans qui tenaient sur une seule feuille A4, j’avais le pressentiment de rater quelque chose. Je ne me voyais pas faire un test entier de navigation avec si peu de contenu.
Je me suis donc rendu au suivi proposé le jeudi 18 pendant le congé détente et cela s'est révélé extrêmement utile. J’ai été remis sur les bons rails grâce au suivi.
Une liste s’il vous plaît
Pour ma V2, je suis retourné dans les travaux réalisés précédemment en groupe pour repartir sur une base plus solide.
J’ai réalisé une liste complète structurée sur papier. Avec une amie, nous avons fait un tri par cartes des contenus, du plus pertinent, au plus inutile. Nous avons ensuite trié les contenus dans des catégories plus vastes. Ceux-ci serviront de propositions de recherche les plus pertinentes qui seraient suggérées en dessous de la saisie de la barre de recherche.
Pour les recherches concrètes j’ai repris une des idées que j’avais utilisée dans la V1. Trier les résultats par catégories et le mettre en évidence.
J’ai repensé à la façon dont les éléments étaient triés et marqués en fonction du retour que j’ai eu lors du suivi pendant le congé. Dans la V1, il n’était pas mis en évidence qu’il y avait un tri, et l’ordre d’apparition n'avait pas été réfléchi.
Pour cette V2, j’ai joué avec la Gestalt pour marquer le tri des éléments dans les trois catégories majeures ( Fablab, évènement, Imal ). Dans ces trois catégories, il y a les sous catégories ( listée et classée selon le tri par carte ). Selon moi, ce tri permettrait d’éviter une partie importante de la frustration observée pendant les tests utilisateurs.
J’ai pensé à un système de cellule, une cellule par résultat. Chacune est placée dans la sous catégorie correspondante.
A ce stade-ci, j’avais déjà beaucoup progressé par rapport à ma V1, mais je sentais quand même qu’il y avait quelque chose qui n’allait toujours pas dans ce que j’avais fait.
En prenant du recul j’ai réalisé que j’avais accidentellement repensé la barre de navigation dans un burger menu, bien que ce ne soit pas une mauvaise chose. Je m’étais trop éloigné du fil conducteur de cet atelier. J’ai repensé la façon dont les résultats étaient affichés et c’était déjà un pas en avant, je n’étais toujours pas satisfait de la direction que je prenais.
Jamais deux sans trois
J’ai recommencé une 3ème fois mes prototypes papier. Cette fois-ci je ne voulais pas assomer l’utilisateur avec une navbar beaucoup trop chargée, d’autant plus que ce n’est pas mon travail.
J’ai donc cherché un moyen pour guider les utilisateurs vers tous les résultats populaires sans pour autant recréer une navbar blindée.
C’est alors que m’est venue l’idée d’employer un formulaire pour trier en amont les utilisateurs selon leurs besoins.
J’ai remplacé les 3 catégories et leurs 10 sous catégories par une question avec 4 choix possibles.
Cela prend la forme ci-dessous;
Que cherchez-vous ?
Cet écran est le résultat le plus ergonomique d’un point de vue expérience utilisateur que j’ai pu produire pour cet atelier.
Essayons de comprendre pourquoi.
- La barre de recherche est toujours présente en partie supérieure de l’écran. Elle peut être saisie à tout moment et les résultats qui en découlent resteraient triés exactement comme dans la V2
- Si l’utilisateur saisi la réponse : accéder au fablab, un sous écran apparait avec toutes les sous catégories qui dirigent vers une page du fablab. Il en est de même avec les pages de l’Imal
- Si l’utilisateur saisi la réponse : consulter le wikimal, celui-ci est directement amené sur la page wikimal qui a sa propre barre de recherche. Ce n’est pas la même que la barre de recherche du burger menu
- L’utilisateur peut alors consulter les articles récents du wikimal en scrollant vers le bas, ce qui est surement très utile pour les habitués de l’Imal. Mais il peut surtout effectuer une recherche propre au wikimal et il y a la possibilité de filtrer les résultats par type, et / ou pas date à l’aide de pastilles. Pour ne pas faire trop de pastille, je suis arrivé à la conclusion que la meilleure combinaison de possibilité était ( cette semaine, cette année et il y a plus d’un an). Selon moi cela permet de couvrir le plus de possibilités, bien que ça reste difficile à tester sur papier
- Le même système est utilisé si l’utilisateur clique sur : consulter les archives, il est redirigé vers une page qui a sa propre barre de recherche avec possibilité de filtrer les résultats par tags et date
- Le fait d’avoir plusieures barres de recherches différentes permet de ne pas mélanger les résultats dit de navigation ( ex : agenda d’une machine, horaire d’ouverture, etc ) avec des articles du wikimal et des archives
- Cependant, en testant les limites de ce système sur la version mobile, il s'est avéré que les pastilles sur un si petit format pouvaient être plus embêtantes que pratiques
- Sur la version desktop, je me suis rendu compte que l’écran de navigation de la V2, rentrait avec aisance dans une sidebar verticale
- L’écran n’est pas assez large que pour contenir assez de pastille, surtout pas dans l’écran des archives, alors sur mobile j’ai décidé de le remplacer par un menu dropdown, pas très sexy, mais très pratique même si cela ne permet de sélectionner qu’un seul tag de recherche à la fois
Un dernier check up
La dernière étape était de faire tester les écrans papier. J’ai fait appel à une connaissance qui n’était pas familière avec ce travail. Je lui ai donné un par un, les trois scénarios prévus au préalable.
Ceux ci étant ;
- Tu viens de finir ton inscription à l’Imal, tu souhaites au plus vite consulter l'horaire de l’imprimante 3D depuis chez toi
- Un de tes amis a partagé sur les réseaux sociaux qu’il avait participé à un atelier à l’Imal ‘ Chicken feet ‘. Tu cherches à en savoir plus, tu es néerlandophone et tu n’as pas d’ordinateur
- Tu as une idée de projet avec un ami, tu souhaites contacter l’Imal pour en discuter et potentiellement prendre une résidence
Vous pouvez consulter une version digitale des protoypes mobile et desktop.
Je suis resté à côté pendant les test pour guider le sujet parmis des feuilles d’écrans et pour y disposer les modules appropriés. J’ai également pris note des actions, réactions et réflexions du sujet.
Déroulements des test
Le premier test était : Tu viens de finir ton inscription à l’Imal, tu souhaites au plus vite consulter l'horaire de l’imprimante 3D depuis chez toi.
Voici la retranscription
- Le sujet a eu le choix de l’appareil sur lequel il souhaite naviguer et a choisi de poursuivre avec l’ordinateur
- Le sujet s’est orienté instinctivement dans la rubrique fablab et à poursuivi avec la sous-catégorie horaire
- Il se retrouve face aux horaires d’ouverture du fablab, pas ce qu’il recherche
- Il tente sa chance dans la sous catégorie ateliers, toujours dans fablab
- Les informations affichées concernent des ateliers organisés au fablab, pas ce qu’il recherche
- L’utilisateur effectue une recherche dans la barre de recherche, et trouve parmis les résultats du fablab, un lien vers les horaires de la machine d’impression 3D
- L’utilisateur consulte les horaires de disponibilité de l’imprimante
Le second test : Un de tes amis a partagé sur les réseaux sociaux qu’il avait participé à un atelier à l’Imal ‘ Chicken feet ‘ il y a longtemps. Tu cherches à en savoir plus, tu es néerlandophone et tu n’as pas d’ordinateur.
Voici la retranscription
- Le sujet change immédiatement la langue du site en néerlandais
- Le sujet s’oriente dans le wikimal
- Le sujet voit une rubrique “ articles récents “ et est convaincu d’être sur la bonne voie
- Cependant, comme l’atelier a eu lieu il y a longtemps, le sujet se résume à utiliser la barre de recherche
- La recherche n’est pas concluante, il n’y a pas de résultats pertinents
- Le sujet a souhaité abandonner
Après avoir débriefé de ce test avec le sujet, je lui ai révélé que l’article qu’il cherchait se trouvait dans les archives, et non le wikimal. Celui-ci s'est exprimé sur le sujet, il pense que le terme ‘ archive ‘ n’est pas assez intuitif, ne décrit pas quel contenu se cache derrière.
Le premier test était : Tu as une idée de projet avec un ami, tu souhaites contacter l’Imal pour en discuter et potentiellement prendre une résidence.
Voici la retranscription
- Le sujet se dirige directement dans la rubrique Imal, dans la sous catégorie ‘ contacter’
- Le sujet a trouvé les informations dont il a besoin
- Il souhaite envoyer un mail, plutôt que de contacter l’établissement sur ces réseaux sociaux, pour faire plus sérieux
Résultats des test
Sur les trois tests finaux, un s'est déroulé impeccablement, un a été concluant avec difficulté, et un a fini sur un abandon. Je suis forcé d’admettre qu’il est sûrement possible de pousser la démarche encore plus loin pour améliorer l'expérience utilisateur.
Je suis maintenant contraint par le temps de m’arrêter ici dans les recherches. Je suis malgré tout satisfait de la progression réalisée par rapport au point de départ, il y a une amélioration non négligeable de la recherche d’informations sur le site de l’imal.
J'aurai apprécié pouvoir réitérer le premier test utilisateur avec mon sujet initial sur le prototype papier, malheureusement cela n’a pas été possible.
Finalement
J’ai fini mon travail en râlant d’avoir choisi de travailler sur la fonction de recherche dans le site.
RUX a été un atelier plus compliqué que je ne l’avais anticipé, étant naturellement plus à l’aise avec le code qu’avec l’UI / UX, j’ai été obligé de changer ma méthode de travail habituelle et aborder les choses différemment.
L’enseignement que je tire de cet atelier m’a permis d’approfondir mes connaissances en UX par la pratique. Mais également que je ne souhaite pas faire du design à plein temps.