Refonte d’une interface web

Posté le : 11 avril 2006 Dans la catégorie : Non classé |
Aucun tag pour cet article.

Dans le cadre de mon mémoire j’ai eu l’occasion d’effectuer un audit ergonomique ainsi qu’une refonte d’interface. Il s’agit ici d’une fiche produit du site de la Fnac.

Les modifications

La fiche originale :

fiche produit

Dans cette fiche-produit, certains défauts doivent être corrigés :

Les éléments importants ne sont pas bien mis en évidence
Beaucoup de bruit visuel au centre de la fiche et dans la rubrique « en détails »
Difficulté à lire le texte rédigé
Manque de cohérence entre certains éléments de la fiche-produit
Mauvais regroupement de l’information
Mauvais agencement des éléments

1. La modification du titre
Le titre original n’était pas bien mis en évidence à cause de la description de l’appareil qui se trouvait juste en dessous. De plus beaucoup d’éléments apparaissaient en haut de la fiche-produit ce qui pouvait poser des problèmes de repérage.

titre

Le titre du produit a donc été déplacé en haut de la fiche-produit afin que ce soit le premier élément vu par l’utilisateur. De plus, tout le bruit visuel autour du titre a été déplacé.

2. La modification de la présentation visuelle
La présentation initiale était basée sur une seule photo avec la possibilité de zoomer sur celle-ci à l’aide d’un lien hypertexte.

Dans la version modifiée, l’utilisateur à la possibilité d’avoir plusieurs vues du produit afin d’accroître la sensation de manipulation de l’objet. Il peut également zoomer en cliquant sur la vue qui l’intéresse.

3. La modification du descriptif
Le descriptif, qui nous donne les informations importantes du produit, avait la forme d’un texte continu. De plus, le vocabulaire utilisé n’était pas à la portée de tous à cause des termes techniques.

descriptif

Le nouveau descriptif a la forme d’une liste à puces pour éviter les problèmes de lisibilité. De plus, cette rubrique a été identifiée afin que l’utilisateur n’est pas à chercher pour trouver le descriptif. Enfin, une information sur le public cible a été rajoutée au début de la description afin que l’internaute n’est pas à consulter la fiche-produit pour rien.

4. La modification du système de notation
Sur la fiche produit du site de la Fnac, on observe deux types de notations : une notation technique, provenant de la fnac, et une notation provenant des utilisateurs. Ces deux systèmes sont différents et offrent donc une comparaison plus difficile. Un des deux systèmes est basé sur des étoiles, mais celui-ci ne donne pas la limite de la notation. De ce fait, l’utilisateur ne peut pas avoir une idée précise de l’avis des personnes qui ont déjà achetées le produit.

Notations

La modification du système de notation a portée sur la cohérence des deux systèmes afin de permettre une comparaison plus facile des notes. De plus, des étoiles vides ont été rajoutées pour montrer à l’utilisateur la limite maximale des notes.

5. La modification de la partie “services”
Sur la fiche-produit originale, les possibilités données à l’utilisateur n’étaient pas regroupées par thèmes. Cette rubrique était destinée à mettre toutes les informations qui n’avaient pas de place précise dans l’interface. On y retrouvait les liens pour avoir des informations supplémentaires, la notation des utilisateurs et les services. L’utilisateur devait donc éprouver du mal à chercher ce dont il avait besoin. De plus, toutes ces possibilités étaient séparées par des lignes qui causaient du bruit visuel.

Services

Dans cette nouvelle version, les informations ont été regroupées par section et les lignes séparatrices retirées afin de faciliter le repérage de l’information. De plus, des icones ont été créés pour les services qui n’en possédaient pas

6. La modification du prix
Le prix était initialement bien mis en évidence. La modification a eu lieu au niveau de la couleur qui a été changée en rouge afin d’attirer d’avantage l’attention de l’utilisateur et sur le retrait des zéros après la virgule.

7. La modification de l’avis de la Fnac
Sur la fiche originale, l’avis de la Fnac prenait beaucoup de place et il était sous la forme d’un texte rédigé avec une police petite et un interlignage faible ce qui causait des problèmes de lecture et de surcharge visuelle.

avis

Sur la fiche modifiée, seule la première phrase a été gardée et un lien hypertexte a été rajouté pour les internautes qui voudraient lire la suite de l’avis.

8. La fiche modifiée
Toutes les modifications apportées ont pour objectif de mettre en avant les éléments importants de la fiche-produit afin que l’utilisateur n’ait pas à chercher les éléments qui lui sont primordiaux dans sa prise de décision. De plus, pour beaucoup d’internautes, la crédibilité d’un site passe par une certaine sobriété des composantes présentées.

Fiche Modifiee

C’est pourquoi les éléments centraux de la fiche-produit originale ont été enlevés. En effet, ceux-ci attiraient l’attention de l’utilisateur et l’empêchaient de voir les éléments vraiment importants. De plus, ces éléments causaient de la confusion sur les délais de livraison et sur l’état des stocks qui constituent pourtant des composantes très importantes. Toutes ces modifications vont donc être vérifiées par des tests d’utilisabilité.

Les tests d’utilisabilité

Ce test se décompose en trois étapes : des questions à choix multiples, des questions de préférence entre la fiche originale et la fiche modifiée et une partie de libre expression sur chacune des fiches. Dans la première partie, il s’agit de chronométrer le temps qu’un utilisateur met à trouver une information. Dans la seconde partie, l’utilisateur doit choisir les composantes qu’ils préfèrent entre les deux fiches. Dans la dernière partie, il doit donner son avis sur ce qui lui plait ou déplait sur chacune des fiches. Ce test a été réalisé par le biais d’un formulaire proposé sur Internet auprès de 200 internautes.

La compatibilité du produit
Il s’agissait ici de trouver les informations relatives à la compatibilité du produit avec les ordinateurs de type PC ou MAC.

compatibilite

Sur cette question, les utilisateurs ont mis en moyenne 2,9 secondes de moins pour répondre sur la fiche modifiée. Cela s’explique par le fait que l’information à chercher était présentée dans une liste à puces plutôt que dans un texte continu comme dans la fiche originale. Le pourcentage d’erreur est assez faible pour la fiche originale car le descriptif est court et donc l’information n’était pas très difficile à trouver.

L’état des stocks
Dans cette question, l’utilisateur devait trouver si le produit qu’il consultait était en stock.

stock

Les résultats de cette question sont très parlants. En effet, les utilisateurs ont mis en moyenne près de 10 secondes de moins pour répondre sur la fiche modifiée. Cela est en partie dû au temps de réflexion dont l’internaute a besoin pour répondre à cette question sur la fiche initiale, cette dernière proposant des informations contradictoires. Cela explique aussi le fort pourcentage d’erreur ce qui implique que l’utilisateur peut encore avoir des doutes après avoir consulté la fiche-produit originale.

L’accès à la fiche technique
Ici, l’utilisateur devait dire s’il pouvait, en fonction des informations présentes sur la fiche-produit, accéder à une fiche technique concernant le produit présenté sur la fiche.

acces

Sur cette question, le temps de réponse sur la fiche modifiée est inférieur de 2,8 secondes par rapport à la fiche initiale. Cela peut s’expliquer par le regroupement des liens par thèmes ce qui a donc eu pour effet de raccourcir le temps de réponse. De plus, le taux d’erreur très important est en partie dû au bruit visuel qu’il y avait sur la première fiche et qui rendait cette fonctionnalité plus difficile à trouver. Les utilisateurs, ne trouvant pas tout de suite la réponse, ont pû penser que cette fonctionnalité n’existait pas.

Les préférences
Cette étape avait pour objectif de faire une comparaison entre les deux fiches-produits au niveau de la présentation visuelle du produit, de la lisibilité des informations et de la mise en évidence du nom du produit. Dans le test, nous avons demandé aux utilisateurs de choisir entre les deux fiches pour chacun des critères.

préférences

On peut voir que pour les trois critères, la préférence des utilisateurs va vers la fiche modifiée. Les résultats sont francs pour la présentation visuelle du produit et pour la lisibilité de la fiche. Cependant, ils sont plus mitigés pour la mise en évidence du nom du produit. Cela peut s’expliquer par le fait que, sur la fiche originale, le nom du produit est situé près de la présentation visuelle qui attire l’attention de l’internaute en premier lieu. De ce fait, l’utilisateur n’éprouve pas de réelles difficultés à trouver le nom du produit sur la fiche originale.

J’espère que ce dossier vous aidera à mieux comprendre les différentes étapes de la refonte d’une interface à l’aide de tests d’utilisabilité. N’hesitez pas à laisser un commentaire !

Posts relatifs

Commentaires

32 commentaires sur “Refonte d’une interface web”

aziz le 11 avril 2006 12:08

Excellent !
Damien / ergonoblog le 11 avril 2006 12:25

merci
Laurent le 11 avril 2006 15:45

Très bel exercice d’information design. Les résultats des tests utilisateurs sont très intéressants.

Concernant les descriptifs, j’aurais été curieux d’essayer de dissocier la clé de la valeur valeur en les alignant dans un tableau. Cela aurait peut être permis de scanner plus rapidement les valeurs des clés des propriétés techniques.

Pour l’avis de Fnac, je trouve que les lignes sont toujours trop longues et le lire plus… demandera un effort supplémentaire.

D’un point de vue efficacité, le bouton ajouter au panier est toujours mal placé à mon avis et il s’agit tout de même d’un élément très important.

Merci pour ce super post
Damien / ergonoblog le 11 avril 2006 15:53

Je suis d’accord avec toi, des améliorations peuvent encore s’ajouter, ce travail a été effectué il y a presque 2 ans et ma vision de l’ergonomie a évolué
Adrien le 11 avril 2006 19:13

Félicitations pour cet excellent post
Sebastien Billard le 12 avril 2006 17:05

Bravo pour ce billet hautement instructif, si tu en as d’autres, je suis demandeur

Question technique : comment fonctionne le chronométrage lors des tests ?
Damien / ergonoblog le 12 avril 2006 21:16

Pour le chronométrage, il s’agit d’un petit script en JavaScript que j’appelle dans la balise <body> avec l’evenement onload, donc au chargement de la page. Il s’arrete au moment où l’utilisateur clique pour valider sa réponse.

Dans l’interface, il y a un champ caché (type hidden) dans lequel le compteur tourne. Cela me permet de recuperer sa valeur dans une base de données pour le traitement des résultats.

Si tu souhaites que je te transmette le code, n’hesite pas à m’envoyer un mail : anfroydamien@yahoo.fr
Laurent le 12 avril 2006 21:31

Très bien l’idée du chronométrage avec le javascript. Je vais reprendre le concept et l’adapter en ajax. Grâce à Ajax, il y a moyen d’obtenr des interaction log assez détaillés. J’ai envie de refaire quelques études sur un de mes sites.
Damien / ergonoblog le 12 avril 2006 21:50

tiens moi au courant si tu as des résultats interessants, ca m’interesse
Hugues le 14 avril 2006 10:44

Bravo, excellent boulot Damien ! Juste pour chipoter, gagne tu vraiment quelques chose en limitant le commentaire de la Fnac sur le produit à la première phrase ? Certes, ce procédé rend la page moins chargée. Mais d’un autre coté, le commentaire est en fin de page, et ceux qui déterminent leur achat en fonction de ce type d’information on systématiquement un clic de plus à réaliser. Par ailleurs, si l’utilisateur souhaite imprimer la fiche technique il devra se contenter de la première ligne de ce commentaire … à moins que la feuille de style dédiée à l’impression gère ce point de manière appropriée (si c’est le cas, oublie la fin de ce trackback …). Encore bravo.
Damien / ergonoblog le 14 avril 2006 11:00

Ton commentaire est très pertinent. Je ne pourrai pas te donner une réponse issue des tests car ceux-ci sont restés basse fidélité (maquette graphique).

En ce qui concerne la fiche produit, je pense qu’elle doit être une sorte de "carrefour" de l’information autour du produit en question, ou une sorte de "homepage produit".
C’est-à-dire que l’utilisateur, une fois sur cette page, doit savoir le type d’informations qu’il peut obtenir, et y acceder par un clic.

Concernant une version imprimable, je suis d’accord avec toi sur le fait qu’un maximum d’information doit y apparaitre, la problematique d’affichage étant différente du web.

Merci pour ton com
Vincent le 19 avril 2006 11:57

Excellent billet. Je me suis permis de le citer sur mon blog. Bonne continuation.
Damien ANFROY le 19 avril 2006 13:02

Merci
Référencement, Design et Cie le 20 avril 2006 14:10

L’usabilité en pratique

La théorie c’est bien, la pratique, c’est mieux ! A lire sur le blog de Damien Anfroy, un excellent billet sur l’audit ergonomique puis la refonte d’une fiche produit Fnac, validée ensuite par des tests utilisateurs. Les résultats obtenus sont…
TOMHTML le 20 avril 2006 16:53

Toutes mes félicitations, c’est très instructif.
Je bookmarke et j’en parle autour de moi
@+
Esk le 20 avril 2006 17:21

Bravo pour ce billet !

Est ce que l’on sait par contre si grâce à ce travail là, le CA a augmenté de manière significative ?
Est ce que le volume de ventes a augmenté ?
Quid du panier moyen, il a évolué à la hausse également ?
Damien / Ergonoblog le 20 avril 2006 17:44

merci pour les encouragements.

Je tiens à préciser que cette étude ne vient pas d’une demande de la Fnac, il s’agit du cas pratique de mon mémoire que j’ai voulu vous faire partager. Pour cause le résultat de cette étude n’est pas la page produit que l’on retrouve actuellement sur le site.
Ce post a pour vocation de montrer une méthodologie et aussi dans quelles mesures certains éléments peuvent être validés par des tests utilisateurs

Je ne pourrais donc pas répondre aux questions que tu mets en avant et qui sont bien évidement essentielles
Blogorrhée le 20 avril 2006 18:30

Le métier de mes rêves…

C’est juste pour dire que le métier de mes rêves existe… ) http://www.damienanfroy.net/index.php?2006/04/11/33-refonte-d-une-interface-web bon sinon c’est aussi l’occasion de signer mon retour sur le Blog !!! bonne soirée tout le monde !
NEO-MA [weblog] le 21 avril 2006 8:34

Ergonomie

Lorsque l’on parle d’accessibilit?on pense aussi ergonomie car une navigation mal con? ou une page mal agenc?est tout aussi perturbante pour l’internaute dans l’utilisation d’un site. Damien Anfroy, sur son blog ErgonoBlog, propose un audit…
Pierre le 21 avril 2006 20:46

Espérons qu’ils vous liront, personnellement il m’est impossible de tenir plus de 10 secondes sur le site de la Fnac.
Daniel Broche le 24 avril 2006 18:17

Le lundi c’est ergonomie

Si seulement tous les mémoires de stage étaient aussi interessants que celui de Damien Anfroy ! Il y a beaucoup de vrai et efficace là dedans. Apres reste à trouver le temps de le mettre en oeuvre chez soi entre
Thibaut Bayart le 25 avril 2006 10:49

Etude sur l’ergonomie d’un site marchand

Pour tout ceux qui travaillent dans le e-commerce, qui maintiennent, administrent un site marchand, je vous conseille de lire l’étude ergonomique de Damien Anfroy. Il a réalisé un audit ergonomique et une étude d’interface des fiches produits…
sdelaunay le 26 avril 2006 13:50

Bonjour,

Bravo pour ce cas d’ergonomie.

Je voudrai rajouter mon avis personnel quand à l’optimisation de cette fiche de par mon expérience :
- Je conseil le prix dans une couleur positive et le moins agressif possible tout en le mettant en valeur (rouge c’est une couleur d’alerte)
- Le bouton d’ajout au panier doit effectivement toujours être en valeur et si possible près du prix afin de concentrer l’achat sur la même zone.
- Les éléments de réassurance également proche du prix et du bouton d’achat doivent être mis en valeur aussi.

Bonne continuation..
Stéfan
David Levy (( Creativity Matters le 26 avril 2006 14:59

Ergonomie d’une fiche produit : la Fnac

Tres bonne analyse disponible ici : Refonte d’une interface web - damienanfroy.net - Ergonoblog : veille ergonomique. Merci Damien ! A voir aussi la reference en la matiere : useit …
carbrax le 27 avril 2006 9:48

Carrément utilisable en pratique !

Bravo et merci
Wynot le 28 avril 2006 18:28

Bravo
Damien a gagné sa place sur mon Netvibes, onglet ERGO.
Et tous les affiliés FNAC ont maintenant du boulot pour etre plus perf que le site amiral (qui réagira plus lentement, c’est normal).
Bientot sur mon blog
et merci
David
les z'ed le 1 mai 2006 2:18

encore des br?s, mais dominicales

Ne croyez pas vos yeux… C’est l’accroche de 5 sens, un site d’animation sur les site illusions d’optique. Dans zoneflash, les illusions d’optique c?e les animations exp?mentales et la programmation avec ActionScript (c’est aussi une mani?…
toto le ero le 4 mai 2006 17:43

bravo tres interessant,

il y a quand meme une grosse boulette sur la nouvelle fiche
un appareil photo "reflex"
type d’appareil: Reflex ( Prends les photos instantanément)
tres tres drole!!
c’est la visée qui est reflex,
(le viseur voit à travers l’objectif )
et non pas la prise de vue "reflex"
("je ne rate jamais une prise de vue…. normal c’est un reflex! :)))

est ce que cela ne nuit pas au serieux et la crédibilité
d’une fiche certe bien plus clair que l’ancienne?
a plus
.:Miaou Prod:. le 9 mai 2006 11:08

Un peu d’eronomie dans ce monde de brute

Cela me rappel des cours de psycho ergo de l’an dernier :-). Et oui on fait un produit / un design avant tout pour expliciter les choses, pas uniquement pour se faire plaisir. Ce petit article montre les ?pes d’une refonte de fiche produit pour le…
Julien Gandelin le 3 juin 2006 22:37

e-Commerce & ergonomie

Une des probl?tiques les plus r?rrentes d’un site e-Commerce r?de dans la pr?ntation de sa fiche produit : quelles informations, quelle hi?rchie, quel agencement de l’espace, quelles fonctionnalit?.. Heureusement, Damien Anfroy est…
ivan le 15 juin 2006 16:53

Merci Damien pour ce travail.

Par contre il y a quelque chose d’important pour moi qui ne figure pas dans ce que tu as mis en place.
Souvant l’étude ergonomique part d’un ecran.
Hors ce qui s’affiche à l’écran n’est pas révélateur de la façon dont sont organisé les données.

Prenons par exemple le descriptif que tu as réagencé en liste de puces avec des intitulés en grisés et le discriptif ensuite. Il n’est pas sûr que la personne qui entre ces données puisse les saisir ainsi. Souvant il ne s’agit que d’un champ d’information ‘descriptif’ et nom de plusieurs champs (’niveau d’utilisation’, ‘definition’ …). Même si il s’agissait de travailler ça en css, il n’est pas sur que le flux de données puisse sortir sous forme de differentes class …
Je ne sais pas si je suis clair.
Mais prenons alors l’exemple de la photo de l’appareil.
Losque tu proposes un lien vers plus de photo je trouve ça super interessant.
Par contre je ne suis pas sûr non plus que le systeme de saisie de la fiche produit
permette d’insérer plusieurs photos pour une fiche …

Donc tout ça pour dire, qu’il est important, aussi, de partir du systeme d’information pour ameliorer l’ergonomie d’un site. Sinon il y a des reponses pertinentes qui ne pourra pas voir le jour. Ce qui est dommage.

En tous cas bravo pour ce travail
et merci

Bon je continue de decouvrir ton blog
@+
Blog Appli-Box le 24 janvier 2007 14:44

refonte fiche produit fnac

Sur le blog de Damien ANFROYhttp://www.damienanfroy.net/index.php?2006/04/11/33-refonte-d-une-interface-web