Logo tutoriel
Bandeau 468x60
Signet
Arrondi
Ergonomie cognitive

Les études sur l'interfaçage homme-machine démontrent que l'internaute ne lit pas les textes sur l'écran comme un document papier. C'est enfoncer une porte ouverte que de le rappeler. D'autre part, L'exigence de l'internaute est de pouvoir être actif et autonome sans perdre de temps pour appréhender le contenu informationnel, tout en étant agréablement surpris. Alors comment marier esthétique, rapidité, convivialité  et accessibilité de l'information ?

Les erreurs d'interprétation des internautes sur les éléments d'interface, qui paraissent évidents aux concepteurs, est le premier sujet d'étonnement. Les 15 premières secondes sur une page concentrent le maximum de risques de malentendus, selon la société Mediangles. L'interface, tout en restant agréable à l'oeil, doit donc être sobre et intuitive !


RAPPORT TEXTE / IMAGES

Le rapport texte/image doit être spécifiquement étudié pour chaque étape ou chaque partie du site. Le poids des images doit bien entendu être allégé au maximum.

En terme de volume d'information textuelle, si le web rappelle le papier, il s'agit bien d'un média à part. Il faudrait dans l'idéal, se demander comment le sujet serait traité à l'écrit, puis diminuer de moitié le volume de textes !

Les contenus importants doivent donc être disponibles sous format imprimable (ie PDF) et proposés au téléchargement.


SATURATION DE LA MEMOIRE VISUELLE

Les premières pages au premier niveau de clic doivent être rapides et sobres et préciser sans ambiguïté leur position par rapport au reste de l'arborescence. Ce premier écran de rubrique doit faire le tour de la question, proposer 3 grands messages et 7 liens au maximum.


SIGNALETIQUE et DECORUM

La signalétique de ce site reste discrète, bien qu'omniprésente, et joue son rôle : guider l'utilisateur tout en se faisant oublier.

Le decorum est léger: seul 4 images GIF en 16 couleurs donnent une allure esthétique à la page. Ici elles ont volontairement été détruites pour en dévoiler le cadre vide :

  • arrondi3.gif : en haut à gauche, elle arrondit le bord haut gauche de la page;
  • signet3.gif : elle créé l'effet de signet en haut à droite de la page;
  • pied3.gif : elle créé un espacement entre la fin de texte et le bas de page;
  • retour3.gif : elle ferme la page en bas à droite et permet de revenir en haut de page (cliquable).

Un site doit proposer, contrairement à la séquence du livre, un "itinéraire" ou une rythmique dans la visite du site et la découverte de l'information, répercuté au niveau du visuel. Il doit recréer une linéarité qui peut être court-circuité, dès que possible, par l'utilisateur. Le concepteur doit donc endosser le difficile rôle du visiteur et en suivre la logique et non la sienne.

Une scénarisation doit être mise en place. L'introduction aux thématiques généralistes du site doit permettre de présenter ensuite des développements simples puis complexes qui en découlent. Chaque thématique peut être affichée dans son détail par l'utilisateur connaisseur ou au contraire mis en valeur par une simulation simple pour l'utilisateur novice. Puis l'utilisateur peut laisser un message si besoin est.

De plus les études montrent que les internautes sont très vite agacés par la publicité envahissante et clignotante ainsi que par les entreprises qui se montrent trop pressantes ou trop démagogiques.

Le bandeau de publicité (haut de page) ci-dessus peut donc pointer vers des sites partenaires ou des sites d'annonceurs payants. Mais il faut veiller à son intégration harmonieuse dans la page. L'emplacement peut être aussi laissé vide afin de na pas surcharger chaque page du site.


DU GENERAL AU PARTICULIER

Les idées doivent permettre de passer du général au particulier ou de la conclusion vers l'explication et suivent ce shéma gauche - droite  :

Du général au particulier

  1. dans la pseudo-frame de gauche se retrouvent les grandes sections de la page d'accueil (le général)
  2. le détail d'une section générale se lit dans le corps du texte de la page, et des liens peuvent y êtr einsérés, soit vers d'autres pages de même contenu, soit d'autres sites.
  3. tout à droite, dans le cadre de couleur aubergine, se trouvent les liens qui permettent d'approfondir une thématique au prix d'un niveau l'arborescence supplémentaire (le particulier).

Il faut laisser à l'utilisateur la possibilité de voir en détail un produit, un service, une information par un clic de 2e ou 3e niveau, mais ne pas lui asséner de lourdes pages sans le prévenir.

 
  Pied de pageHaut de page
© 1999-2001
BBS Architecte