TFA 2021–2022 : Efficac’éco — Tests utilisateur

Dans le cadre de mon travail de fin d’année 2021–2022 à l’HEAJ infographie 2ème année en option DWT, j’ai réalisé quelques tests utilisateurs afin d’avoir des retours de ces derniers vis-à-vis de mon projet et de voir les améliorations à effectuer.

Mon projet de TFA 2021–2022 est un site web nommé “Efficac’éco”.

Accueil - Efficac'éco

Il propose un service atypique : pouvoir permettre à l’utilisateur de calculer le prix annuel que lui coûte ses produits ménagers industriels et lui proposer des recettes écologiques moins chères qu’il pourrait réaliser pour remplacer lesdits produits. Ainsi, l’utilisateur obtiendrait un gain d’argent annuel conséquent tout en ayant une attitude écologique.

Cet atelier est le résultat d’un long cheminement que vous pouvez retrouver sur sa page de présentation :

Case-Study - Efficac'éco

Après de multiples recherches, analyses, échecs, réussites, de retours, … le prototype d’Efficac’éco s’est affiné. Il était donc l’heure d’avoir un avis utilisateur sur la toute dernière version du site web.

Pour cela, j’ai fait testé 3 personnes aux profils variés : une jeune utilisant son GSM et Internet avec brio, une dame ayant de grandes difficultés à faire de même et un homme se trouvant entre les deux.

1. Un test rapide, facile et concluant.

Le premier test réalisé est celui de l’adolescente. Il lui a été demandé de faire son propre calcul de consommation, de savoir les détails de ce dernier puis de rechercher une recette de produits multi-usages/multi-tâches.

Prenant le temps de tout lire à voix haute, elle réalise son calcul sans aucun souci. Une fois celui-ci fini, elle est impressionnée du résultat obtenu. Il parvient à trouver aisément les détails du calcul et comprend la différence entre chaque tableau. Elle réussit à aller sur la page des recettes ainsi que sur celle de produit multi-usages. Elle analyse le découpage de cette dernière et rigole en lisant la remarque de l’espace commentaires.

Ses retours :

• L’interface de calcul est très claire, ainsi que pour rechercher les détails, les recettes, etc.
• Elle a tout de suite su trouver les infos qu’il lui fallait.
• (Il n’y a pas toutes les recettes et Figma prend du temps à charger. Mais c’est parce que le service n’est encore qu’un prototype).

Son expérience a donc été concluante.

2. Des difficultés qui amènent à un progrès.

La 2ème testeuse est une dame n’ayant pas facile avec Internet et son GSM. Elle a pris son temps pour visiter le site calmement afin de pouvoir donner le plus de retours.

Après être arrivée sur la page de calcul et avoir sélectionné la lessive, elle clique directement sur le bouton “suite” car elle ne voit pas les flèches présentes de part et d’autre des produits du slider. De ce fait, elle ne sait réaliser que le calcul d’un produit, ce qui la rend perplexe intérieurement tout au long du test utilisateur.

Améliorations :

Faire en sorte que l’utilisateur sélectionne bien les flèches pour choisir ses produits avant de passer à la suite.

Une fois la page des résultats atteinte, elle prend son temps pour s’informer sur “comment sont calculés les prix” et s’intéresse également aux bases de données. Elle poursuit sur les pages de détails et de recettes qu’elle parcoure attentivement. Elle découvre les filtres de la page recettes. Etant revenue sur la page de résultats et ayant fini d’explorer le site, je la fait revenir au calcul afin de lui montrer l’existence des flèches qu’elle n’a pas su voir. Elle explique qu’elle se demandait intérieurement comment changer de produit (ne pas forcément choisir la lessive) et que cliquer sur “suite” semblait plus naturel. Nous avons donc échangé pour savoir quelle serait le meilleur agencement qui amènerait l’utilisateur a réalisé son expérience de manière concluante. Alors que je propose de rapprocher les flèches par rapport aux images pour correspondre à la loi de la Gestalt, elle a une idée plus adéquate : utiliser un slider montrant plus d’un produit pour qu’on sache qu’il y en a plus d’un qu’on puisse sélectionner.

Améliorations :

Coder un slider montrant plusieurs produits directement pour que l’expérience utilisateur se passe mieux.

Après avoir sélectionné plusieurs produits dans l’armoire, elle est amusée par les petits jeux proposés pour réalisé le calcul. En retournant en arrière sur la section avec l’armoire, elle se rend compte que le titre de cette dernière mentionnait clairement de sélectionner “plusieurs” produits et devait donc facilité le repérage des flèches. Malgré cela, elle conseille d’avoir tout de même une aide visuelle (d’améliorer le slider par exemple). Ayant analysé chaque page d’Efficac’éco, elle refait un dernier tour pour s’assurer d’avoir bien tout compris. Une dernière petite correction à effectuer selon elle est l’étiquette du 4ème lien pratique de la page des résultats. Pour elle, “Recommencer le calcul” signifierait plus “recommencer le calcul de données comme si celui-ci s’était mal effectué ou avait changé d’équation”. J’ai donc réfléchi ultérieurement pour une meilleure appellation.

Améliorations :

Changer le contenu de l’étiquette du dernier lien pratique de la page recettes pour qu’on comprenne qu’il sert à réinitialiser son calcul pour en réaliser un nouveau.

3. Un écho au test précédent.

La troisième personne testée est un homme sachant utiliser son GSM ainsi qu’Internet suffisamment facilement pour son quotidien. Son scénario était de faire son propre calcul puis de rechercher une recette de lessive.

A la 1ère étape du calcul, ses gestes sont hésitants : après avoir sélectionné la lessive, il compte cliquer sur “suite” mais attend et finit par cliquer sur les flèches. Il est donc dans la même situation que la deuxième personne testée : il va instinctivement appuyer sur “suite” aux lui des flèches car l’agencement de cette zone n’est pas intuitive.

Améliorations :

A l’instar du test précédent, celui-ci m’a permis de savoir qu’il faut améliorer l’agencement de cette section. Comme proposé précédemment, utiliser un slider où l’on pourrait voir déjà plusieurs produits serait une idée judicieuse. Savoir que deux utilisateurs ont eu la même réflexion m’a conforté dans cette envie d’améliorer mon prototype au mieux.

Cette étape une fois passée, il réalise son calcul à son rythme. Il observe tranquillement les résultats et se rend sur la page des recettes où il regarde la recette de lessive. Après cela, il visite la page des détails qui lui permet de prendre compte du coût important des tablettes de lave-vaisselle par rapport aux autres produits ménagers du quotidien (en effet, celles-ci coûtent en moyenne 0.29€/pièce selon l’analyse d’Efficac’éco). Il passe également sur la page expliquant comment Efficac’éco fixe ses prix et calculs, étant un peu intéressé par la recherche des différentes données. En essayant de revenir en arrière, le bouton de Figma ne fonctionne pas. Il finit par jeter un œil à la recette de produit multi-usages et par revenir sur la landing page où le footer doit être corrigé.

Améliorations :

• Corriger le bouton de Figma qui ne fonctionne pas.
• Donner un meilleur agencement au footer de la landing page.

Ses retours :

• (Etant un prototype, toutes les recettes ne sont pas visitables)

Toutes les améliorations synthétisées :

• Améliorer le slider pour qu’il montre plusieurs produits.
• Améliorer le contenu de l’étiquette du 4ème lien pratique de la page des résultats pour qu’on comprenne mieux à quoi il mène.
• Corriger le bouton de Figma.
• Améliorer le footer de la landing.