veblog

liste de diffusion | contact

 accueil > archives > ergonomie, design > liens hypertextes contre menus DHTML: vive la simplicité


liens associés

sur veblog.com

méthodologie des tests utilisateurs

ailleurs sur le web

le site du premier ministre

sur Shorewalker: "A flying menu attack can wound your navigation"

Navigation hypertexte classique contre menus déroulants DHTML:
la victoire de la simplicité.

page créée le: 30/01/2001
réagir à cet article

Résumé: le nouveau site du premier ministre propose une version "graphique" et une autre en mode texte. Un test utilisateur a été conduit sur ces deux versions pour savoir laquelle se révèle la plus performante : la plus simple l'emporte sans discussion. En cause, la faible utilisabilité des menus déroulants.

Le nouveau site des services de Matignon (www.premier-ministre.gouv.fr) propose une version texte où la navigation est confiée à de simples liens , et une version graphique où les concepteurs ont fait appel à des menus déroulants en DHTML. L'occasion était belle de comparer, sur deux sites à la structuration parfaitement identique, l'efficacité respective de ces deux modes de navigation. J'ai donc monté un mini test utilisateur pour recueillir des premiers résultats.

Méthodologie du test et précautions de lecture

1. je n'ai pas moi même participé au test, car (les lecteurs assidus de veblog le savent) je suis naturellement favorable à la simplicité et ai donc un préjugé défavorable vis à vis des menus déroulants comme outil de navigation sur internet. Je ne pouvais donc être juge et partie.

2. Le test a été réalisé par quatre "cobayes" dont aucun n'est un professionnel du web. Leur pratique va de l'usage simple (un peu de surf, mail ) à une utilisation avancée (personne ayant déjà effectué plusieurs achats en ligne). Ces personnes étant des amis et/ou des collègues de bureau dont le temps est compté, le test n'a comporté que quatre tâches à accomplir (recherches d'informations précises) successivement sur la version graphique puis la version texte pour deux d'entre eux, et vice versa pour les deux autres. Deux testeurs ont eu accès à une liaison rapide, deux autres sont passés par un modem classique. Les testeurs étaient invités à s'exprimer à voix haute et n'ont reçu aucune aide de l'observateur (moi même) pendant l'exercice. (cf. veblog, comment tester un site internet)

Par conséquent, ce test n'a pas recueilli assez de données pour que ses résultats puissent être considérés comme une vérité générale. Il mériterait d'être reconduit par de vrais professionnels (axance ? yuseo ?) sur des panels de deux fois quatre ou cinq utilisateurs ayant une huitaine de tâches à accomplir, dont certaines plus complexes que celles que mes moyens d'amateur m'ont permis de monter.

Toutefois, les résultats sont suffisamment tranchés et convergents pour permettre de tirer sinon des conclusions définitives, du moins des hypothèses précises facilement vérifiables.


Résultats du test

La synthèse du test fait apparaître les résultats suivants :

en ce qui concerne les tâches accomplies lors de la première série de quatre tâches (deux testeurs sur la version graphique, deux sur la version texte) :

  • 4 tâches complétées sur 8 pour la version graphique, 6 sur 8 pour la version texte.
  • Pour les quatre taches accomplies dans les deux cas, le temps d'accomplissement à été inférieur de 5 à 119 % toujours en faveur de la version texte.
  • Le nombre d'erreurs et de retours en arrière sur la version texte a été inférieur de 40% à celui observé sur la version graphique.

Dans un deuxième temps, les testeurs ont réaccompli les quatre tâches sur la seconde version. Les 2 personnes ayant commencé par la version graphique ont amélioré leur temps d'exécution pour chaque tâche sur la version texte, et ce à chaque fois, ce qui est logique puisqu'ils avaient en mémoire l'emplacement des pages.

On aurait pu s'attendre à ce qu'il en soit de même pour les personnes passant de la version texte à celle comportant les menus déroulants. Et bien, de façon surprenante, pas du tout ! si le nombre de tâches complétées (6/8) n'a pas régressé, le temps d'exécution a été amélioré pour une d'entre elle, égalé pour deux autres, et augmenté de 15 à 55% dans les trois autres cas.

Malgré le faible nombre de testeurs, on peut donc affirmer sans crainte que l'utilisabilité de la version texte est nettement supérieure à celle de la version graphique.

Commentaires et impressions subjectives des testeurs pendant l'exercice

l'expression à voix haute des utilisateurs et l'observation de leur navigation fait apparaître les éléments suivants :

La principale cause des mauvais résultats de la version graphique tient dans l'utilisation des menus déroulants (ainsi que dans la "télécommande" de la version graphique qui irrite les utilisateurs plus qu'elle ne les éclaire). Les explications sont les suivantes :

  • Le comportement des menus déroulants est inconsistant: lorsque la souris passe sur l'intitulé primaire des menus latéraux-gauche (par exemple : "chantiers gouvernementaux"), le pointeur de la souris se transforme en main en même temps que la liste déroulante apparaît, laissant à l'internaute croire que l'intitulé primaire est cliquable. Or, si l'on clique dessus, rien ne se passe : seul le menu déroulé est réactif. Il est frappant de voir que même après plusieurs passages, certains utilisateurs se laissent prendre et essaient plusieurs fois de cliquer l'intitulé primaire. Les moins expérimentés sont réellement rendus perplexes par cette anomalie de fonctionnement et ne s'y habituent que très lentement.


Vous aurez beau cliquer sur la colonne de gauche, rien ne se passe
bien qu'une main apparaisse. seul le menu déroulant de droite est réactif.
notez également la petitesse des polices de caractères.

  • Il y a nécessité pour cliquer sur une zone déroulante d'avoir un mouvement extrêmement précis de la souris, horizontal puis vertical, vu l'étroitesse des zones considérées, pour cliquer exactement à l'endroit voulu. Si l'utilisateur fait glisser la souris de façon oblique (ce qu'il fait souvent, l'homme ayant une propension naturelle à réduire ses mouvements au minimum...), alors la liste déroulante change et correspond à celle qui se serait déroulée si l'utilisateur avait choisi l'intitulé primaire de la ligne suivante. Gênant.
  • Plus ennuyeux : Les utilisateurs ayant testé le site via modem ont trouvé les temps de chargement de la version graphique agaçants. "Si ce n'avait pas été un test, je serais parti depuis longtemps", a dit l'un d'eux.
  • Un temps de latence est nettement perceptible (via modem) entre l'affichage des intitulés primaires et l'apparition des menus déroulants.
  • La lisibilité des listes déroulantes est médiocre, à cause de l'emploi de polices liliputiennes. Au contraire, les liens qui apparaissent sur une nouvelle page dans la version texte sont d'une taille normale qui les rend parfaitement intelligibles, et leur permanence à l'écran, indépendamment de la position de la souris, semble décontracter l'utilisateur qui peut mieux les enregistrer.
  • Les intitulés des listes déroulantes sont nécessairement courts donc pas forcément toujours très explicites. Les placer sur une pleine page nouvelle permettrait de les étoffer (mais la version texte du site du PM ne profite pas de cette possibilité).
  • La principale observation du test est que les listes déroulantes sont beaucoup moins mémorisables que les liens hypertextes classiques sur une page séparée. Alors que les utilisateurs de la version texte voient le temps nécessaire à l'accomplissement des tâches diminuer au fur et à mesure, les utilisateurs de la version graphique ne semblent pas progresser. De même, les retours en arrière et les « fausses pistes » diminuent plus rapidement avec la version texte qu'avec les menus déroulants. Le site graphique est donc beaucoup moins mémorisable que son homologue hypertextuel. C'est pourtant là un élément essentiel de l'utilisabilité d'une interface homme-machine.

Pourquoi l'analogie avec le logiciel classique ne fonctionne pas :

La principale raison pour laquelle les concepteurs de certains sites croient que les menus déroulants apportent un plus à l'utilisateur est liée à l'usage massivement répandu de cette technique dans les logiciels que tout le monde utilise au bureau. Ils présupposent que cette analogie facilitera l'usage des sites ainsi équipés.

Bien à tort ! Tout d'abord, on notera qu'un utilisateur a en général besoin d'une formation ou de nombreux tâtonnements pour comprendre un logiciel inconnu.

D'autre part, s'il a installé le logiciel, c'est avec une certaine motivation, et l'envie de passer le temps nécessaire pour en exploiter les possibilités qui l'intéressent. Sur le web, le temps que l'internaute est prêt à passer pour comprendre le fonctionnement d'un site est proche de zéro : soit le site est immédiatement intuitif, soit une importante proportion d'utilisateurs va voir ailleurs.

Ensuite, les menus déroulants des logiciels obéissent à une logique particulièrement rigoureuse y compris lorsque l'on change de logiciel, voire même de système d'exploitation :

  • Le premier menu s'appelle toujours « fichier », on est à peu près sur d'y trouver des commandes d'ouverture, de fermeture, de sauvegarde du travail en cours, etc...
  • Le second menu se nomme presque toujours « édition », avec les fonctions « copier-couper-coller-annuler »,
  • Le troisième concerne souvent l'affichage,
  • Le dernier est le menu d'aide,
  • Et seulement entre cette aide et l'affichage, deux ou trois menus propres à chaque application, qui demandent un temps d'apprentissage plus élevé.


La barre de menus de la plupart des logiciels comporte invariablement
la séquence "fichier | édition | affichage .... aide"
cette permanence facilite en général l'apprentissage des logiciels.

Rien de tout çà avec les menus déroulants sur internet : chaque concepteur fait ce qu'il veut, et les menus sont imprévisibles, non constants d'un site à l'autre...

Enfin, le logiciel a pour fonction de manipuler des contenus, de les éditer, modifier, bref, d'agir sur un contenu qui évolue par séquences sur l'écran. A contrario, le web est d'abord un outil de navigation dans une masse de contenus, visant à faire se succéder divers objets à l'écran, avec un niveau d'interaction assez limité avec ces objets. Les éléments d'interface adaptés à la première fonction ne le sont pas forcément à la seconde.

Qu'en déduire pour le site du premier ministre et pour les autres :

Le site du PM gagnerait à remplacer en "prime access" sa mouture graphique (à supprimer complètement) par la version texte. Aucun utilisateur, interrogé après le test comparatif, n'a estimé que le site était "plus cool" ou "plus intéressant" lorsqu'il était graphique... Même si certains reconnaissent qu'ils n'auraient peut être pas exprimé la même chose si on leur avait simplement montré des captures d'écrans, sans qu'ils ne l'utilisent vraiment.

D'une façon générale, préférez une navigation classique, quitte à répartir les choix sur deux niveaux d'arborescence, avec des pages rapides à charger. N'essayez pas à tout prix de permettre toutes les options de navigation sur une seule page, et surtout n'essayez pas de singer sur le web les techniques de design des logiciels bureautiques: elles n'ont pas les mêmes finalités, et ne sont pas toutes adaptées à la navigation inter-documentaire.

PS. Ce test du site du PM a révélé des points forts et d'autres imperfections indépendantes de sa version, qu'il n'est pas du propos de cet article de traiter. Je vous laisse le soin de les découvrir. V.BENARD.


contact: vincent@veblog.comliste de diffusion

©informations légales & vie privée

accueil - haut de page

statistiques par