L’affordance, quel drôle de mot. Et pourtant c’est un des principes élémentaire de l’ergonomie web.
Ne pas y prêter attention, c’est risquer de perdre ses internautes. De les perdre sur le site mais aussi complétement, risquer de ne plus les voir revenir.

Définition selon wikipedia

L’affordance est la capacité d’un objet à suggérer sa propre utilisation.
Le terme est utilisé en ergonomie de manière restreinte :
pour se référer à la « capacité d’un objet à suggérer sa propre utilisation », par exemple, sans qu’il ne soit nécessaire de lire un mode d’emploi.

Le terme d’affordance est emprunté à l’anglais et il est parfois improprement traduit par potentialité. Il dérive du verbe to afford qui a un double sens : « être en mesure de faire quelque chose » et « offrir ».

En bref, vous interagissez avec un objet pour l’utilisation qu’il suggère: une poignée de porte, une serrure, un bouton, etc.
Il y aura des signes implicites tels que la forme de votre objet, les gonds d’une porte, la position d’un levier etc. et des signes explicites tels un écriteau ou une icône sur un bouton.

Différents champs participent à l’affordance d’un objet web, voici quelques exemples à suivre … ou pas.

La taille

La taille de votre objet doit être proportionnelle à son importance dans l’interface.
Autant le lien qui renvoi vers une page de moindre importance (comme les mentions légales) se devra d’être discret, autant un lien ou un bouton d’importance plus flagrante devra l’être aussi.

Sur le site d’Orange, la taille des boutons de déconnexion ou de changement d’utilisateur sont trop petits pour être rapidement perçus. Notre regard doit parcourir le haut de page pour retrouver l’icône correspondante.

La forme

La forme de votre objet participe grandement à son affordance.
Dans l’inconscient collectif un bouton à cliquer est soit rectangulaire soit rond avec un reflet mais imaginez un bouton triangulaire sans aucun contraste ou nuance de couleur particulière, il bénéficiera de peu de visibilité. Ne soyez pas étonné alors s’il génère peu de clicks.

Sur le site de l’assurance maladie, l’objet où est écrit « Rechercher » est en fait un bouton qui renvoi vers un formulaire de recherche. Non pas que cette fonction soit inutile, elle est au contraire bien pensée. Mais elle peut sembler complètement déroutante pour un internaute qui s’attendrait à un encart pour y taper directement son texte (comme sur beaucoup de sites…).
Ici le type d’objet n’est pas du tout explicite.

Le libellé

Une icône adéquate ou un libellé explicite seront autant d’indices qui faciliteront la navigation de l’internaute sur votre site.
Exit donc les « cliquez-ici », les « suivez ce lien » ou autres libellés qui n’apprennent rien sur la fonction d’un objet ou la destination d’un lien.

Sur le site de la Banque Postale, les liens pour accéder aux comptes ou devenir client ont l’apparence de boutons.
Les libellés des liens sont explicites.
Leur contraste ainsi que leur position permet de les retrouver rapidement.

La localisation

Selon son degré d’importance, un objet sera placé en divers endroits.
Il pourra être placé en tête de contenu pour être rapidement perçu par exemple.
On parlera de placement objectif.
Le placement subjectif est celui auquel s’attend l’internaute, tel un menu horizontal en haut du site ou un menu vertical placé à la gauche de la page.

Les conventions

Chaque internaute ne vient pas sur votre site avec un œil totalement neuf.
Certains affichages, formats ou propriétés d’objet font partie d’une normalisation collective.

Chaque internaute averti se fait une idée précise de comment sont disposés des éléments sur une page web ainsi que du type d’éléments qu’il pourra retrouver.
On s’attend en général à retrouver la bannière en haut, le logo en haut à gauche puis le menu horizontal en dessous ou au dessus de cette bannière mais en tout cas pas en bas de la page.

Ces règles ont un sens puisqu’elles répondent à des critères d’ergonomie, de rapidité d’accès ou encore répondent au parcours de lecture logique que suivent vos yeux.
C’est notre inconscient collectif, y déroger c’est risquer de déranger, gêner l’internaute.

Ainsi ne soulignez jamais un texte qui ne soit pas un lien ni ne créez un élément de design aux allures de bouton s’il n’est pas cliquable ou s’il ne mène nulle part.
Cela nuirai au confort de navigation sur votre site or un site non confortable est un site sur lequel on ne veut pas revenir (ou en tout cas on n’y reste pas longtemps).