RETHINKING USER EXPERIENCE

Illustration Case-Study

Ligne de départ

Dans le cadre de nos études à la haute école Albert Jacquard, un nouvel atelier nous fut introduit, RUX, un travail semi-individuel nous permettant d’élargir et d’assimiler des méthodes quant à la conception d’une interface. Pour cela il nous sera demandé d’analyser un site web, le site d’un musée, le BAM. Un site web rempli d'erreurs d'ergonomie constatables grâce à un test utilisateur. Une fois ces lacunes identifiées, nôtre projet sera d’améliorer une des nombreuses failles du site, en créant une fonctionnalité ou en en améliorant une déjà existante. En voici le Case-study.

Mais avant toutes choses, qu’est-ce que le BAM ?

Capture d'écran de la page agenda du site du BAM

Le site du BAM (Beaux-Arts de Mons) propose diverses expositions temporaires et permanentes. Via celui-ci, il est possible d’obtenir des informations au sujet d’une éventuelle visite, que ce soit un groupe scolaire ou privé, ou d’une réservation de salle afin d’exposer soi-même. Son but est principalement informatif, on peut y retrouver l’historique du musée ainsi que les archives des années précédentes.

Un test utilisateur ?

Vous l’aurez compris, afin d’identifier les aspects du site les plus problématiques il était nécessaire d’accomplir un/des test(s) utilisateur(s). Vivant en colocation j’ai utilisé cette avantage en demandant à l’un de mes amis et colocataire de visiter le site du BAM, et de se mettre en situation d’achat. Comme on peut le constater sur cette vidéo, le site ne manque pas de problèmes.

Illustration d'un test utilisateur

Analysons ces données

Vous pouvez retrouver l’article que j’avais écrit à la suite de ce test ici. En résumé les points à revoir étaient ceux-ci :

Un groupe vous dites ?

Lors de la formation du groupe de travail, un groupe de 4, j’ai eu la chance de retrouver presque l'entièreté du groupe du TPAP réalisé peu avant. Le TPAP étant une semaine de travail consistant en la création d’un projet semi-entrepreneurial, cette semaine fut réellement agréable et créa une certaine cohésion dans nôtre groupe.

Vous pouvez retrouver ce groupe, ainsi qu'un accés à leurs sites ici :

Éleves ensemble, forts 🦍

Une fois le groupe réunis, nous avons mit en commun l'entièreté de nos tests utilisateurs, en voici la conclusion :

Le site BAM présente des problèmes majeurs dans la recherche d’informations et la navigation. La hiérarchie d’informations est mauvaise ainsi que des problèmes de lisibilité et de contraste. Les utilisateurs rencontrent des difficultés quant à l’ergonomie du site et ses fonctionnalités, les poussant parfois à l'abandon de la tâche en cours.

Illustration du mécontentement

L'heure de l'inventaire

La prochaine étape du travail était de réaliser un inventaire de contenu, l’ensemble des pages du BAM furent regroupés dans une carte heuristique avec la navigation correspondante, malheureusement comme l'entièreté de la classe avait l’opportunité d’éditer la carte en temps réel un certain chaos se mit en place, ce qui retarda le travail. Une fois cela fait, chaque élève pouvait choisir la page sur laquelle il voulait travailler. J’ai hérité de la page d’accueil. J’en ai donc réalisé un schéma reprenant toutes les sections et infos présentes sur la page.

La carte heuristique
Cliquer ici pour voir cette image en grand

L'ordre d'importance, c'est essentiel

Afin de définir les fonctionnalités les plus importantes du site, et donc celles sur lesquelles nous allions devoir travailler, un système de vote fut mis en place. Chaque élève avait 3 votes, les 5 fonctionnalités ayant récolté le plus de voies seraient celles choisies. Celles-ci sont :

Après consultation avec mon groupe, l’aspect du site qui nous attirait le plus était l'organisation de la visite. C’est donc dans cette optique de travail que nous avons effectué le reste des tâches.

Le but de cette tâche ?

Aider l’utilisateur à planifier sa visite en lui soumettant les informations nécessaires, notamment les horaires, les dates d’expositions temporaires et permanentes, les moyens d’accès, les conditions d’entrée, et les prix.

Illustration d'une planification

Louder, queen

Pour définir notre méthode d’approche il fallait d’abord connaître les envies et habitudes du public, pour cela nous avons dû rédiger et performer des interviews. L’interviews fut rédigée en groupe, suite à cela chaque personne du groupe dû interviewer ses proches et/ou les autres camarades de classe.

Vous pouvez retrouver l’interview ainsi que sa conclusion ici, en cliquant sur ce qui vous intéresse.

Photo prise lors de l'interview des élèves

En résumé : Ce qui préoccupe le plus les utilisateurs de sites d’événements est la gestion du temps et des transports. Dans le cas des musées, ils ont plus tendance à réserver leurs tickets en ligne en avance. Une bonne hiérarchie des informations et des visuels clairs sont plus attirants que des paragraphes de texte. La gratuité est un argument de poids, des expositions gratuites mises en avant pourraient encourager la venue de plus de visiteurs.

Un Audit a3?

Suite à cela il fallut réaliser, de manière individuelle, un audit. Un Audit consiste en l’épluchage de divers sites web, liés de près ou de loin à celui que l’on vise. Un ensemble de 6 sites fut choisi, une fois cela fait j’ai cherché les fonctionnalités de ces sites que je trouvais intéressantes pour notre top-task, l’organisation. Mon audit est trouvable ici.

En résumé, les fonctionnalités les plus intéressantes pour moi sont celles qui sont graphiques. Qui prennent de l’espace mais permettent de rassembler l’ensemble des informations, des critères, en un seul et même endroit. Des fonctionnalités multi-tâches.

Celle qui sort le plus du lot selon moi était une fonctionnalité présente sur le site de DisneyLand Paris. Un menu présent sur la page d'accueil permettant de remplir tous ses critères en une fois, et limitant donc l’affichage des hôtels et dates à celles les respectant.

«La simplicité se démarque, alors que la complexité va se perdre inexorablement dans la foule.» Kevin Barnett – Développeur back-end.

Segment de mon Audit Fonctionnalité du site de DisneyLand

Le voyage des utilisateurs

Après l’Audit j’avais en tête la fonctionnalité sur laquelle je voulais travailler, un menu présent sur l'ensemble des pages permettant, en fonction des dates et du nombres de personnes ainsi que leur statut (étudiant, âgé, enfants) de trier les expositions et activités par genres et tranche de prix. Une fois l'ensemble des critères choisis, les expos du genre préféré avec de la place le jour choisi s'affichent, il est ensuite possible de réserver. En dessous du menu un message/lien indiquant "Une question ? Visitez notre FAQ” est visible.

Mais pour voir si celle-ci était adaptée à notre task il me fallait réaliser un User journey, trouvable par ici.

Celui-ci consiste en la mise en situation d'utilisation imaginaire, chacun rencontrant ses problèmes propres et ayant ses attentes concernant le site. Il fallait que la fonctionnalité puisse répondre aux attentes de différentes personnes aux situations et caractères propres. En vue d’améliorer notre idée.

L'heure des prototypes

Maintenant que ma fonctionnalité peut répondre aux attentes de différentes classes de personnes, il était temps de l’imaginer de façon concrète. Des croquis papiers étaient donc la réponse la plus adaptée.

Premier Jets

Premier prototype

Problémes rencontrés :

Prototype papier 1

Prototypes améliorer après correction (les fléches rouges indiquent les élements résultats du clique).

Mais toujours approximatif dû à la propreté de la feuille, et donne une impression de surcharge.

Prototype papier 2

Prototype de la page résultats

Prototype papier 2

Prototype remis au propre

Ligne d'arrivée 🏁

Et voilà, après près d'un mois et demi de travail, d'acharnement et de maladie pour ma part, il est temps de rendre ce travail. J'ai réellement apprécié travailler dans une optique d'amélioration d'un site prè-existant, cette méthode de travail pousse à la réflexion et amène à une amélioration de son propre travail. Merci pour votre lecture.