Best Of E-commerce — 23 avril 2013 — 6 commentaires
Définition : l’affordance

Faites en sorte que les éléments de votre site soient faciles à interpréter! Utilisé en usabilité, le terme « affordance » fait référence à la capacité d’un objet à suggérer sa propre utilisation. Par exemple une chaise amène l’idée de s’asseoir, un classeur celle de ranger etc…

Cette notion est particulièrement importante en ce qui concerne les interactions homme-machine ainsi que dans ce que l’on nomme le « design d’interaction » dans lequel il s’agit de permettre aux utilisateurs de comprendre l’utilisation des objets virtuels (boutons, etc…), et ce seulement en visualisant ceux-ci.

Les principaux éléments avec affordance à prendre en considération :

Les boutons et onglets : L’affordance sur les objets de navigation est essentielle sur les sites! Les boutons et les onglets portent ces noms pour la simple et bonne raison qu’ils ont une apparence proche de celle des boutons et onglets que nous pouvons trouver « dans la vie réelle ». Voici un exemple montrant l’importance de l’aspect de ces éléments – il s’agit de faire comprendre au visiteur qu’ils sont cliquables!

affordance-for-buttons

Les liens : Par définition un lien est un morceau de texte que amène le visiteur sur une autre page ou bien un autre site web. C’est pourquoi les liens doivent se détacher visuellement du texte « normal ». Vos visiteurs ne vont pas s’amuser à cliquer sur chaque mot pour voir si c’est un lien ou pas!

Les icônes : Les symboles et autres représentations visuelles doivent également être facilement identifiables par l’utilisateur. Les pictogrammes ci-dessous sont utilisés comme des standards:

  • maison : page d’accueil du site ;
  • loupe : recherche ;
  • point d’interrogation : section « aide » ou FAQ ;
  • enveloppe ou @ : page « contact » ou envoi direct d’un e-mail ;
  • chariot : panier d’achat sur un site de e-commerce ;
  • drapeaux : changement de langue.

affordance-for-icons

Les champs de formulaires : L’affordance de ce type d’élément doit permettre à l’utilisateur d’immédiatement comprendre qu’il peut ou doit entrer du texte dans les champs en question. Vous pouvez même l’y aider en créant des formulaires dont les champs sont configurés pour le type de données qu’ils doivent contenir – ex :

affordance input fields

En conclusion, la « signalisation » visuelle d’un site est importante pour créer une expérience utilisateur de qualité – elle sert en effet de repère à nos parcours virtuels sur les pages d’un site. Inutile pour autant de réinventer la roue, mieux vaut prendre en compte les standards existants déjà largement répandus! Et même si vous n’êtes pas un grand fan de design, gardez en tête que ce travail d’affordance contribuera sans aucun doute à la qualité générale de votre site.

Articles similaires

Articles Recommandés



L'auteur

Laure Betaille

Autodidacte passionnée de web-marketing depuis un peu plus de 2 ans, je me suis lancée dans l'aventure de l'auto-entreprise afin de pouvoir développer mon expérience dans ce domaine! Je tiens également mon propre blog (en anglais) sur le sujet, et si mon coeur balance encore entre SEO, Community Management ou Responsive Webdesign, je compte sur les opportunités de mes projets pour me décider. Ah, une dernière chose, je suis aussi étudiante en 3ème année à l'HETIC !

 


6 Commentaires

  1. Le concept est très proche de celui d’ « ergonomie web », et je pense aussi que c’est un des domaines à prendre en compte lors de la réalisation d’un site internet ou d’une quelconque application d’ailleurs.
    Merci pour le tuyau en tout cas 🙂

  2. Bonjour Laure
    Je ne connaissais pas ce terme qui semble faire partie des nouveaux mots de la langue française, merci à vous pour cette découverte.
    Tout cela est d’autant plus vraie et d’autant plus compliqué lorsqu’on tient à avoir une identité visuelle particulière, visiblement cela s’applique également aux logos (là …. c’est encore plus difficile).
    Amicalement

    PS : Pas mal votre blog , 3éme année à l’HETIC… vous ne faites plus partie des autodidactes 😉

  3. Bonjour
    Je ne connaissais pas ce terme,je peux dire que j’ai appris un nouveau mot aujourd’hui,ceci dit je pense qu²avec l’évolution fulgurante du web-mobile,l’affordance auras de plus en plus d’importance.

  4. Je suis surprise qu’il n’y ait pas plus de monde qui connaisse ce mot de nos jours.
    Sachant qu’il existait de puis encore plus longtemps, j’avais appris ce mot il y a au moins 6 ans dans mon cours d’IHM (Interface Homme Machine): Ou comment construire une interface web ou logicielle intuitive.

  5. Un rappel de basiques est toujours le bienvenu.
    Il existe également des Call to action qui ne se cachent pas obligatoirement sous des boutons, liens et icones.
    Des textes sont régulièrement testés pour comprendre à quel type d’engagement répondent le mieux les internautes.
    Pour le mot affordance, il est plaisant au bruit mais est il vraiment utile?
    Je partage

  6. Bonjour,

    Il n’y a pas que sur le Web que le terme « affordance » joue un rôle prépondérant. C’est aussi le cas pour tout objet fonctionnel réalisé pour un utilisateur. Cela peut concerner un tableau de bords de véhicule, machine à café…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *