En ergonomie web, le principe de contexte pourrait se définir par limiter l’activité des utilisateurs à un contexte donné, soigneusement délimité, à moins d’avoir de très bonnes raisons de faire le contraire. Le principe de contexte renvoie donc à la manière dont le site interagit avec l’utilisateur.

La notion de contexte repose sur la règle essentielle selon laquelle l’utilisateur doit à tout moment savoir qui il est, où il se trouve, d’où il vient, et où il va. Cela passe par un grand nombre d’éléments visuels récurrents, aisément reconnaissables, et fonction des univers ou des thématiques visités.

L’utilisateur doit savoir à tout moment qui il est…

Votre utilisateur doit savoir à tout moment qu’il est authentifié, et sous quel nom. Amazon propose une identification visuelle très forte du contexte utilisateur. La possibilité de changer en cas d’erreur, Vous n’êtes pas Frédéric est beaucoup plus efficace qu’un simple bouton “logout”.

Zone d'identification d'un utiisateur authentifié chez Amazon

Au contraire, un utilisateur qui ne serait pas encore authentifié se voit invité à le faire, et à créer un compte le cas échéant.

alt="Zone

… savoir où il se trouve

Un utilisateur doit savoir à tout moment où il se trouve sur votre site. Cela passe à la fois par une indication précise de son emplacement, et par des indications plus générales liées au contexte.

Perdu sur Internet ?

Le fil d’Ariane

Le fil d’Ariane est également très important. Il renseigne en effet vos utilisateurs sur l’endroit où ils se trouvent, d’où ils viennent, et dans quel contexte ils se trouvent.

Ainsi, 3 exemples de fil d’Ariane, fonction du contexte de lecture d’une note, selon qu’on y accède directement,

Fil d'Ariane dans le contexte d'accès direct

dans le contexte de la catégorie Web 2.0,

Fil d'Ariane dans le contexte de catégorie

ou dans celui du tag twitter

Fil d'Ariane dans le contexte de tag

Cet exemple, au passage, est symptomatique de ce qu’il ne faut pas faire (sic). À moins de proposer, par exemple, des contenus liés ou des statistiques spécifiques, je n’ai pas vraiment de raisons valables de présenter un même article dans 3 contextes différents. C’est au contraire plus difficile à appréhender pour l’utilisateur, là où l’on se doit de chercher la simplicité.

L’identité visuelle par univers

En identifiant chaque univers thématique par une couleur dominante, vous aidez vos utilisateur à savoir où ils se trouvent. Le changement de couleur les alerte également, les avertissant qu’ils sortent d’un univers pour entrer dans un autre.

Le journal Le Monde a récemment donné une identité forte à sa rubrique sportive, organisée autour d’une frise chronologique des événements à venir, allant ainsi bien au delà d’une simple couleur dominante.

Univers sportif du Monde

La navigation

Navigation et sous navigation doivent également être mises à profit afin d’indiquer à un utilisateur où il se trouve. Cependant, ce signal visuel doit être accompagné d’un autre, par exemple le fil d’Ariane, afin de ne pas pénaliser les déficients visuels.

Le site de vente en ligne Darty met en avant l’univers visité dans la navigation. Malheureusement, cette information est complètement diluée par la présence d’éléments utilisant le même code couleur dans les zones immédiatement adjacentes : la recherche, et la promotion de la commande produit par téléphone.

Navigation chez Darty

… savoir d’où il vient et où il va

Le fil d’Ariane, que nous avons rapidement vu plus haut permet à un visiteur de savoir où il se trouve et d’où il vient. Il lui permet également de remonter dans la hiérarchie du site, en fonction du contexte.

Les sites d’e-commerce l’ont bien compris, dès qu’un processus nécessite plusieurs étapes, il faut indiquer à l’utilisateur à la fois combien il lui en reste, quelles sont les étapes en souffrance, et où en est exactement.

Le site de la Fnac indique de manière simple et précise quelles sont les étapes permettant de valider l’acte d’achat.

Chemin de validation de l'acte d'achat

Il propose également pour chaque écran la possibilité d’avancer dans le processus ou de revenir en arrière.

Retour en arrière dans le processus d'achat de la Fnac

Et voilà, c’est tout pour ce premier article consacré aux grandes notions fondamentales de l’ergonomie web. La prochaine fois, nous étudierons la notion d’accompagnement.

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: