mardi 02 Mar .21

Qu’est-ce que l’affordance et comment l’utiliser ?

qu'est-ce que l'affordance

Si vous passez un peu de temps avec des professionnels de l’expérience client et/ou utilisateur, vous constaterez rapidement qu’ils utilisent un langage bien particulier. Vous avez sans doute déjà entendu parler d’UX ou même de CX. Mais, connaissez-vous le terme « Affordance » ? Non ? Tant mieux, c’est que nous allons vous expliquer dans cet article.

Histoire de la terminologie « Affordance »

Le terme a été introduit pour la première fois par le psychologue James Gibson. Ce n’est qu’en 1979 qu’il clarifie la définition de sa terminologie dans le livre « The Ecological Approach to Visual Perception » :

« L’affordance de l’environnement est ce qu’il offre à l’animal, ce qu’il fournit, en bien ou en mal. Je l’ai inventé. J’entends par là quelque chose qui fait référence à la fois à l’environnement et à l’animal d’une manière qu’aucun terme existant ne le fait. Il implique la complémentarité de l’animal et de l’environnement ».

Appliqué à la conception, le terme ne désigne que les possibilités d’actions physiques dont l’utilisateur est conscient. Dans cette perspective, le terme a été développé dans les explorations de Donald Norman dans son livre, « The Design of Everyday Things ».

Selon l’expert, « …le terme « affordance » fait référence aux propriétés perçues et réelles de la chose, principalement les propriétés fondamentales qui déterminent la manière dont la chose pourrait être utilisée. Les boutons sont faits pour être appuyés. Les fentes servent à insérer des objets. Les balles servent à lancer ou à faire rebondir. En un seul regard, l’utilisateur sait ce qu’il doit faire. Aucune image, étiquette ou instruction n’est nécessaire ».

Avec l’avènement de diverses interfaces utilisateurs, les affordances ont reçu un nouveau vecteur de développement.

Mais alors, qu’est-ce que l’affordance numérique exactement ?

L’un des objectifs principaux de la conception de sites web est d’améliorer l’expérience utilisateur. Les affordances peuvent être utilisées spécifiquement pour atteindre cet objectif. Au début, les moyens numériques peuvent sembler sans intérêt pour le processus. Certaines personnes peuvent même les considérer comme contre-intuitives. Cependant, les interfaces numériques peuvent influencer profondément l’expérience de l’utilisateur, car le modèle d’interaction change entièrement.

Par exemple, lorsqu’une personne clique sur un bouton « Soumettre », elle le fait en raison de l’apparence du bouton. Il comporte des éléments caractéristiques qui indiquent aux utilisateurs qu’il s’agit d’un élément interactif. Un simple texte, sans effet sur celui-ci, n’inciterait en aucune façon les gens à cliquer. C’est là qu’interviennent les affordances numériques. Faire ressembler l’hyperlien à un bouton réel aide les visiteurs à trouver et à utiliser l’élément.

L’objectif est de faire ressembler l’élément numérique à celui rencontré dans le monde réel afin que les visiteurs puissent facilement associer les caractéristiques. C’est ce que l’agence Churchill fait lors de la création et refonte de site.

Éléments de l’interface utilisateur et interactivité

Les concepteurs de sites web sont responsables de la conception des interfaces que les gens utilisent. Ils utilisent des éléments qui sont censés faire interagir les visiteurs avec le site en question.

Cela signifie que tous les éléments qu’ils incluent dans une interface utilisateur doivent avoir des caractéristiques qui les rendent interactifs. La façon dont les utilisateurs perçoivent et utilisent un site web est uniquement le résultat de la façon dont le concepteur a assemblé les éléments de l’interface. Toute la conception est axée sur l’encouragement de l’interaction.

La théorie des affordances dans la conception de sites web

Une fois que vous aurez compris ce qu’est une affordance et comment elle peut être utilisée, vous vous améliorerez dans la conception d’interfaces. L’utilisation des affordances dans la conception de sites web conduira à une meilleure convivialité et à une plus grande interaction de la part des utilisateurs, en fonction de l’objectif du site. Une affordance peut, par exemple, influencer les taux de conversion ou d’inscription. En raison de son impact visible, l’affordance doit être la principale préoccupation d’un concepteur de site web avant de commencer son travail, même si cela peut sembler délicat au début.

Exemples d’affordances dans la conception de sites web

Une fois que les concepteurs ont appris à définir l’affordance, il est temps d’étudier les aspects liés à chaque type d’affordance.

Les étiquettes

Les étiquettes représentent le type d’affordance le plus courant. Elles sont spécifiques aux sites web qui ciblent un public moins averti en matière de technologie. Pour les sites web dont les interfaces sont complexes et difficiles à naviguer, l’utilisation d’étiquettes peut faciliter les choses. Une étiquette indique la fonction d’un élément permettant ainsi à l’utilisateur de savoir ce qu’il fait.

Par exemple, lorsqu’un utilisateur remplit un formulaire, il s’attend à avoir des détails sur ce qu’il doit écrire dans chaque champ (Nom, adresse). Comme tous les formulaires sont personnalisés pour chaque site web, il n’y a pas de modèle précis qu’ils pourraient suivre.

L’étiquette est la méthode la plus claire et la plus précise pour donner aux gens des détails sur le fonctionnement des champs et sur ce qu’ils doivent faire pour interagir avec le site.

Les modèles

Les personnes qui passent du temps sur différents sites web remarqueront des schémas entre eux. Ces schémas font référence à certaines actions qui sont répétitives et qui sont les mêmes, ou du moins similaires, sur chaque site auquel les gens accèdent. Par exemple, lorsqu’ils visualisent des images en mode carrousel, les utilisateurs sauront comment utiliser les flèches gauches et droites pour naviguer parmi les images.

Le mode carrousel peut être utilisé de manière élégante sur tout type d’interface pour signaler des actions aux visiteurs. Les gens sont exposés à une multitude d’offres de modèles chaque jour, en naviguant sur différents types de sites web. Ainsi, ils les reconnaissent et les utilisent plus rapidement lorsqu’ils tombent sur un modèle similaire.

Affordances métaphoriques

Le moyen le plus simple d’ajouter une affordance à la conception de sites est de disposer d’une référence du monde réel. Cet objet qui existe dans la vie réelle représente des métaphores pour l’affordance. Prenez les icônes par exemple. La plupart des icônes s’inspirent d’objets de la vie réelle, communiquant ainsi l’affordance.

De plus, les icônes emails utilisent les enveloppes comme métaphore. La page d’accueil d’un site web est souvent signalée par une icône de maison, qui transmet l’idée de « rentrer chez soi ». Les icônes d’imprimante font référence à l’utilisation des fonctionnalités d’une imprimante, etc.

Il est intéressant de noter que l’icône de sauvegarde est une disquette qui est une technologie obsolète, mais les concepteurs l’utilisent toujours parce qu’elle agit à la fois comme une métaphore et un modèle, dans la mesure où les gens sont habitués à cette association.

L’affordance caché

Une affordance cachée n’apparaîtra que lorsque certaines conditions sont réunies. Par exemple, rendre un mot cliquable uniquement au survol. L’affordance n’est pas présente tant que l’utilisateur ne l’a pas découverte et n’a pas interagi avec elle.

Les concepteurs devraient utiliser des affordances cachées pour les sites web qui ont déjà une interface encombrée et qui souhaitent la simplifier visuellement. Le seul inconvénient d’une affordance cachée est que l’utilisateur doit la trouver par lui-même, sans avoir d’indices qui le dirigent vers elle.

 

Un projet web ? Parlons-en ! Audit gratuit
CONTINUEZ SUR LE SUJETLes articles dans la même catégorie
les contraintes d'un CMS
mardi 09 Mar .2021

Créer un site web à l’aide d’un CMS présente de nombreux avantages : facilité d’utilisation, centaines de templates pré-construits et personnalisables, plugins vous permettant de customiser votre site à l’infini etc. Cependant, certains CMS ne sont pas faits pour toutes les

UX vs CX
mardi 23 Fév .2021

Il existe de nombreux débats sur la différence entre l’expérience client (CX) et l’expérience utilisateur (UX). Le terme « UX » existe depuis plus longtemps que « CX », il a été créé par Don Norman dans les années 90. L’expérience client est un

Mise à jour Google Expérience
mardi 16 Fév .2021

La mise à jour de Google Expérience prendra effet à partir du mois de mai 2021 … c’est donc pour bientôt ! Pour classer les résultats dans son moteur de recherche, Google prendra désormais en compte l’expérience utilisateur. Il testera également