L’affordance est un terme peu connu des non spécialistes de l’ergonomie. Comme c’est une notion qui me parait importante en webdesign et ayant un lien avec le graphisme des interfaces web, j’ai décidé de lui consacrer un article.

Introduction

Pour rentrer dans le vif du sujet, voici une définition courte du mot « affordance »: l’affordance est la qualité d’un objet à suggérer son utilisation. L’ergonome, Amélie Boucher, définit l’affordance comme étant les possibilités d’action suggérées par les caractéristiques d’un objet. Ce qui signifie, dans d’autres termes, la même chose.

L’affordance est une notion importante en ergonomie car elle facilite le travail cognitif des internautes. Plus un élément est affordant, plus l’internaute peut anticiper son comportement et son utilité.

Quel rapport avec le webdesign me direz-vous ?

Sur le web, les objets sont virtuels, ils sont représentés graphiquement. Le graphiste peut donc directement intervenir sur l’affordance d’un élément web. En effet, l’apparence des objets va participer à son affordance en jouant sur différentes dimensions tel que la forme, la couleur, sa localisation dans l’interface, la présence d’éléments indiçant la présence d’un lien, sa mise en évidence pour faciliter son repérage. Il faut aussi s’intéresser au comportement de l’objet lorsqu’il est sollicité car cela participe également au renforcement de son affordance.

Graphisme et affordance

Les éléments qui ont besoin d’une affordance forte dans une interface web sont les éléments avec lesquels l’internaute va interagir. On peut donc citer: les boutons, les liens hypertextes, les menus, les éléments de formulaire et plus généralement tous ce qui est cliquable.

Lorsqu’un internaute arrive sur un site qu’il n’a jamais vu, comment sait-il ce qu’il doit faire pour répondre le plus rapidement possible au besoin qui l’a amené sur ce site ?

Tous simplement en reconnaissant, grâce à son expérience du monde réel, des indices qui l’informeront sur l’utilisation des objets présents dans l’interface.

Les facteurs qui vont permettre à l’internaute de percevoir l’affordance d’un objet sont :

• - Le contexte: l’environnement dans lequel l’objet est représenté.
• - La culture de l’internaute: l’influence des normes sociétales sur la compréhension de l’utilisation de l’objet.
• - L’instinct: une association inconsciente entre l’objet et son utilité liée aux caractéristiques physique de l’objet.
• - Le mental: la compréhension et les attentes de l’internaute sur son interaction avec l’objet.

Tous ces facteurs pourront être influencés par le traitement graphique de l’objet et c’est là que le travail du graphiste intervient.

Exemple

Prenons un exemple simple, le traitement graphique d’un formulaire de contact. Nous le représenterons par quatre champs textes « nom-prénom(obligatoire) », « e-mail (obligatoire) », « téléphone », « sujet », un champ textarea « votre texte » et un bouton « envoyer le message ».

Voici un formulaire exagérément et volontairement peu affordant:

J’ai un peu forcé le trait et il y a peu de chance que vous trouviez, dans la réalité, un formulaire de contact aussi mal conçu. Mais si j’ai dessiné un formulaire à ce point « mal foutu » c’est pour mieux mettre en évidence les changements subtiles qui peuvent améliorer l’utilisabilité.

Alors, comment améliorer l’affordance de ce formulaire par un traitement graphique ?

(Quand je parle ici de traitement graphique, je pense au dessin des éléments du formulaire mais aussi à sa mise en page et à la mise en place d’éléments qui favorisent la perception de son utilisabilité.)

Voici ma proposition graphique:

Comme vous le constatez, l’utilisabilité de ce formulaire est davantage intuitif pour l’internaute que le précédant. Énumérons les changements graphiques qui ont permis cela:

La mise en page

Pour la mise en page, j’ai utilisé une grille afin d’aligner les éléments qui constituent le formulaire. Ces alignements structurent le visuel et facilite la lecture des informations. Un formulaire est typiquement le genre d’interface qui nécessite un peu de rigueur dans sa présentation pour favoriser son utilisabilité. En travaillant à partir d’une grille, j’applique le principe de continuité de la théorie de la Gestalt. Comme vous le verrez plus loin, d’autres principes de cette théorie seront appliqués dans le design de ce formulaire.

Les formes

Certains éléments sont traités, graphiquement, de manière similaire. Cela permet d’établir un lien entre ces éléments pour indiquer à l’internaute que les objets qui se ressemblent ont probablement une fonction similaire où une importance hiérarchique équivalente. Il s’agit ni plus ni moins d’appliquer le principe de similarité de la théorie de la Gestalt.

En travaillant sur des formes connues, j’augmente l’affordance des éléments. Un bouton est souvent représenté rectangle. Si je le dessine en forme d’étoile, son utilisation sera perçue de manière moins évidente par l’internaute. Cela peut paraitre contraignant pour la créativité mais le design web n’est pas toujours un acte de création pur. Le web design doit s’inscrire dans un contexte et des contraintes d’ergonomie et d’utilisabilité. Le design web doit donc savoir jongler entre esthétisme et normes d’usages.

La taille

La taille des champs de formulaire doivent être suffisante pour suggérer leur utilité. Si le champs est trop court, l’utilisateur se demandera si il correspond bien à l’idée qu’il se fait de son utilité. Par exemple, si un champ « téléphone » fait une taille équivalente à la saisie visible de 4 caractères alors qu’un numéro de téléphone en occupe au minimum 10, le doute s’installera.

Vous aurez aussi remarqué la taille importante du bouton « Envoyer le message ». Je l’ai un peu exagéré ici mais c’était pour illustrer la loi de Fitts qui dit que « Une cible est d’autant plus rapide et facile à atteindre que celle ci est proche et grande. » Il convient donc aussi, pour faciliter le clique de l’internaute, de placer ce bouton suffisamment proche du dernier champs à priori saisi, le textarea « Votre texte ».

Enfin la taille du texte doit permettre une lecture aisée. Plus l’information a de l’importance, plus la taille du texte sera grande. Jouer sur ce facteur est une des solutions (il y en a d’autres) pour établir une hiérarchisation de l’information.

Les couleurs

Le couleurs sont porteuses de sens. Lorsque j’utilise le rouge et le jaune pour le message d’erreur, c’est parce que ces couleurs sont remarquables et associées dans notre imaginaire au danger et aux objets de signalétique.

Les arrières plans doivent être de préférence de couleurs neutres (éviter les couleurs trop saturées) pour ne pas rentrer en compétition avec les éléments importants de l’interface. Gardez les couleurs vives pour attirer l’attention de l’utilisateur (messages d’erreur, titres …).

Les indices

Vous pouvez aider la compréhension du message en utilisant des éléments qui serviront d’indices. Il peut s’agir de puces, de flèches ou d’icônes. Ici j’utilise une lentille jaune avec un point d’exclamation pour indiquer à l’internaute que le message affiché réclame toute son attention.

Les exemples du format de saisi des champs du formulaire (ex: champ téléphone) peuvent être de précieux indices pour éviter à l’internaute de se tromper et de recommencer sa saisie.

Les libellés

Les libellés textes doivent être explicites sans être trop longs. Sur le plan graphique, la couleur du texte doit être lisible en établissement un rapport de contraste suffisant avec son arrière plan.

Le contraste

L’utilisation du contraste permet de faire ressortir certains éléments. Dans mon exemple, j’ai utilisé le contraste pour attirer l’attention de l’internaute sur les titres qui jouent un véritable rôle de panneau indicateur. Cela permet de répondre rapidement aux questions: Ou suis-je ? de quoi s’agit-il ?

Ici, j’ai essentiellement créé du contraste en jouant sur la couleur et la taille des éléments.

La profondeur

Des simulations 3D par des effets de dégradés et d’ombres portées font ressortir les cadres et le bouton.

En donnant du volume au bouton, j’augmente son affordance car j’incite l’internaute à cliquer dessus. En effet, nous avons tendance à appuyer ou à toucher tout ce qui est proéminent. (Attention, votre imaginaire s’égare !)

Les espaces

En laissant respirer la composition par la présence d’espaces, je facilite la lecture du formulaire. Cela me permet aussi d’appliquer le principe de proximité de la théorie de la Gestalt. Par exemple, les libellés des champs sont proches des espaces de saisies qui leur correspondent. Chacun des binômes « libellé-champs de saisi » sont suffisamment espacés les uns des autres pour ne pas apporter d’ambigüité lors de la prise d’information visuelle.

Conclusion

Comme vous l’aurez probablement remarqué, tous ces principes graphiques sont d’une évidence et d’une simplicité déconcertante.

Alors, pourquoi en parler ?

Parce que, malgrès ce constat, il arrive encore de trouver des pages web dont le design ne tient pas compte de ces évidences.

Pour pouvoir les mettre en œuvre, encore faut-il y penser au moment de la réalisation des maquettes graphiques. Et pour penser à ces principes simples, il faut commencer par les connaitre pour en prendre conscience dans vos futures créations.

Sources:

- Ouvrage « Ergonomie web. Pour des sites web efficaces » – Amélie Boucher – Edition Eyrolles
- Sur le site web Motive, l’article: Perceived affordance