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
Elaine Goldfarb
Elaine, Directrice de production et pilier de l'agence Churchill depuis près 20 ans, a guidé et supervisé d'innombrables refontes de sites internet, affirmant sa position en tant que véritable experte en création de site web. Avec une profonde connaissance en UX, design et développement, elle est la force motrice derrière la transformation digitale de + de 150 clients.
CONTINUEZ SUR LE SUJETLes articles dans la même catégorie
cahier_des_charges_site_internet
mardi 12 Mar .2024

De la présentation détaillée de l’entreprise, en passant par la définition minutieuse du projet, jusqu’à l’élaboration d’une stratégie SEO pointue et la gestion rigoureuse du budget et du planning. Le cahier des charges se révèle un allié incontournable dans la

menu_site_web_agence
mercredi 06 Mar .2024

Explorez des stratégies efficaces pour la conception de menus web, incluant les avantages des menus dropdown, sidebar, et l’importance des CTA. Apprenez comment ces éléments, illustrés par des exemples concrets, peuvent améliorer à la fois l’expérience utilisateur et le SEO

fonctionnement-agence-web
vendredi 16 Fév .2024

De la création de sites à la mise en œuvre de stratégies SEO, en passant le branding, explorez l’impact crucial des agences web sur le succès en ligne des entreprises. Découvrez le fonctionnement, les acteurs clés de ces agences ainsi