Dans le monde physique, les affordances sont décrites comme les propriétés ou caractéristiques perçues et réelles d'un objet qui dictent leur utilisation sans explication : une fente pour la monnaie, un trou de serrure, une poignée de valise, une poignée de porte ; des objets quotidiens dont nous comprenons automatiquement l'utilité et la manière de les utiliser.
Dans le monde numérique, de la même manière, les affordances UX sont les éléments interactifs d'un site web, d'une application ou d'un produit qui créent des opérations intuitives, nous permettant de nous concentrer sur le contenu dont nous avons besoin et non sur le fonctionnement de la plateforme.
En tant que chercheurs UX, nous comprenons la véritable valeur et les avantages qui se cachent derrière ces fonctionnalités intuitives et innovantes et comment elles font la différence entre une conception visuelle forte et une conception visuelle faible. Les utilisateurs ne devraient pas vraiment remarquer les meilleures affordances, mais les accepter automatiquement parce qu'ils comprennent déjà le langage visuel dans lequel ils travaillent : les menus hamburger, les fonctions du panier d'achat, les icônes de courrier électronique ou de médias sociaux sont autant d'affordances claires comme de l'eau de roche dont la fonction est évidente, ce qui rend leurs interactions numériques instinctives et inconscientes.
Cependant, en tant que chercheurs UX, nous avons régulièrement constaté qu'une interface utilisateur peut rapidement devenir déroutante ou problématique si elle n'est pas dotée des moyens nécessaires que ses opérateurs comprennent.
Grâce à la recherche et aux tests UX, nous découvrons les problèmes opérationnels des produits où les utilisateurs :
- Ne sait pas quelle action entreprendre
- Ne pas voir de prochaine étape possible
- Ne pas reconnaître une opportunité de résultat possible
- Perdre le contrôle d'une fonction
- Perdre le contrôle de la navigation
- Perte de confiance dans les tâches complexes
- Ne pas repérer les indices visuels
Comme pour tous les composants et fonctionnalités de l'UX et de l'UI, la seule façon d'éliminer de manière réaliste les erreurs et les malentendus est de procéder à une conception éclairée, fondée sur des données, et à des tests réguliers. Le terme "affordance" fait référence aux propriétés fondamentales d'un élément et, en premier lieu, ces propriétés fondamentales doivent guider l'utilisateur vers une voie spécifique destinée à améliorer l'expérience. Ce n'est qu'en effectuant des tests que nous pouvons voir si nos produits sont adaptés à leur usage.
Des moyens efficaces sur les marchés internationaux
Que vous construisiez pour un marché local, culturel ou mondial, les meilleures interfaces conviviales présentent tous les types d'affordances que votre public reconnaît facilement afin d'offrir des interactions instinctives à l'utilisateur. La recherche et les essais jouent un rôle important dans la pénétration des marchés mondiaux, car de nombreux éléments graphiques ou métaphoriques ne parviennent pas à se convertir, ce qui crée de la confusion ou, pire encore, de l'offense.
Définition et explication de l'affordance dans le design UX
L'affordance est une propriété ou une caractéristique d'un objet qui présente une incitation ou un indice visuel sur ce que fait cet élément pour atteindre un résultat spécifique.
Importance de l'accessibilité dans le design UX
- Guide le comportement de l'utilisateur ? Des affordances bien conçues et bien positionnées dirigent les utilisateurs là où ils doivent être ? simplement et instinctivement.
- Amélioration de la convivialité ? Tout comme les objets physiques, ces composants souvent minuscules jouent un rôle important dans une expérience numérique rapide, en facilitant la façon dont nous interagissons avec eux. Cette facilité d'utilisation accrue se traduit par un engagement supplémentaire et des taux de conversion plus élevés.
- Créer une expérience utilisateur cohérente ? La cohérence est essentielle à la réussite de toute interface numérique. En restant cohérent avec les formats que nos utilisateurs comprennent, attendent et apprécient, nous nous assurons qu'ils continueront à s'engager avec eux de manière répétée.
- L'accessibilité améliore l'expérience de l'utilisateur ? Tout ce que nous faisons vise à offrir une meilleure expérience aux clients et aux utilisateurs. De tels moyens permettent d'obtenir les conceptions conviviales que nous nous efforçons de produire.
- L'UX et l'UI deviennent plus intuitives et agréables à utiliser ? Le véritable objectif de notre travail.
Types d'affordances dans le design UX
Affordances explicites
Les affordances explicites sont clairement identifiées pour garantir une utilisation évidente, souvent à l'aide d'une image ou d'une instruction textuelle.
Par exempleun bouton avec une description textuelle, "cliquez ici pour plus d'informations", "ajouter au panier", ou "soumettre le formulaire".
Affordances implicites
Les possibilités implicites font référence à des éléments qui n'ont pas de repères visuels évidents ou d'étiquettes, mais qui sont reconnus comme des possibilités en raison d'une conception commune dans le contexte de la position ou de l'apparence.
Par exempleLe site web de l'entreprise, une rangée d'icônes de médias sociaux ou de logos de clients.
Affordances cachées
Les affordances cachées restent invisibles jusqu'à ce que l'utilisateur prenne les mesures nécessaires pour les révéler.
Par exemplePar exemple, un menu déroulant apparaît lorsque l'utilisateur survole l'élément de menu de niveau supérieur (ou lorsqu'il clique sur un menu hamburger sur les petits écrans) ou un champ de texte qui n'apparaît que lorsque l'on clique sur l'icône de la fonction de recherche.
Affordances graphiques/métaphoriques
Ces types d'affordances sont des icônes ou des images représentant une contrepartie dans la vie réelle. Il peut s'agir d'icônes, d'illustrations ou de photos.
Par exempleL'icône de la loupe peut représenter une barre de recherche ou être utilisée comme fonction de zoom, une icône d'enveloppe pour le courrier électronique, un panier d'achat pour un panier d'achat numérique, ou un drapeau pour changer de langue ou de lieu.
Affordances Skeuomorphiques
Les affordances Skeuomorphic ressemblent à leurs homologues du monde physique et fonctionnent de la même manière.
Par exempleUn livre numérique dont les pages peuvent être tournées, un calendrier qui défile d'un mois à l'autre ou des éléments que l'on peut faire glisser dans de nouvelles positions.
Affordances des motifs
Les possibilités offertes par les modèles s'appuient sur des méthodes et des modèles d'interface utilisateur déjà reconnaissables.
Par exempleIl peut s'agir de menus de navigation en haut ou en bas des pages, de logos de sites web qui renvoient les utilisateurs à la page d'accueil, ou d'un texte souligné dans une couleur différente représentant un lien.
Les affordances négatives
Les affordances négatives représentent des éléments de conception inactifs.
Par exempleLes boutons grisés, les champs de saisie remplis automatiquement ou les autres boutons non mis en évidence d'un onglet d'options.
Fausses affordances
Les fausses affordances semblent dicter une action particulière mais offrent quelque chose de différent de ce qui est attendu ou rien du tout.
Par exempleIl s'agit d'un texte coloré et souligné qui n'offre pas de lien cliquable ou d'un bouton grisé qui fonctionne quand même lorsqu'on clique dessus.
Principes clés de la conception d'interfaces efficaces
Placer les utilisateurs au centre de la conception
Les recherches et les essais montreront quelles versions ou options les utilisateurs comprennent instinctivement, produisant les résultats et les retours les plus réguliers et les plus fructueux. Pour mieux comprendre vos utilisateurs, définissez des personas et adaptez vos conceptions à ces personas pour créer des affordances efficaces.
Suivre les bonnes conventions de conception ? Cohérence, familiarité et logique
Restez dans les conventions reconnaissables de l'affordance du modèle et des conventions de conception communes. Une nouvelle application ou une nouvelle fonction nous semblera déjà familière si les éléments qu'elle inclut suivent un format auquel nous sommes habitués.
Visibilité et retour d'information
Une conception propre et claire consiste à garder les choses simples tout en décrivant des objectifs clairs à partir de l'affordance d'un élément. Veillez à ce que les affordances de notification soient utilisées lorsque vos utilisateurs ont besoin d'une confirmation ou d'un retour d'information sur une action.
Clarté et intuition
La clarté et l'intuitivité d'une interface utilisateur se traduisent par une expérience utilisateur transparente qui permet de passer d'une action ou d'une zone à l'autre. Les sites web et les applications doivent être suffisamment intuitifs et familiers pour guider les utilisateurs vers le contenu souhaité et faciliter les conversions.
Éléments de l'interface utilisateur qui utilisent l'affordance UX
Boutons
Les boutons sont nos éléments d'appel à l'action les plus puissants, il est donc impératif que leur rôle soit évident et facilement reconnaissable. La forme, la taille, la couleur, les étiquettes, le contraste et le texte peuvent tous jouer un rôle.
Icônes
Les icônes sont typiquement des affordances de modèle, où nous reconnaissons leur fonction par la simplicité de ce qu'elles représentent, par exemple, les icônes de favori et de réaction des médias sociaux, les icônes de courrier électronique, de téléchargement ou de partage. Malgré les différences de style entre les marques, de nombreuses icônes suivent un format universel (ou au moins géographique) que nous comprenons automatiquement.
Champs de saisie
Nous savons que nous sommes censés ajouter des données lorsque nous sommes confrontés à un champ de saisie. Ils comprennent souvent une affordance explicite de copie d'exemple dans une couleur pâle et une affordance de notification lorsqu'ils sont remplis correctement.
Animations
Les affordances animées peuvent montrer aux utilisateurs comment utiliser une fonction ou une option spécifique. Par ailleurs, un bouton qui tremble nous montre que nous avons fait une erreur et que nous devons résoudre un problème pour continuer, le tout sans un long texte explicatif.
Notifications
Les affordances de notification indiquent un changement ou une action requise. Ces affordances visuelles peuvent être une coche à côté d'un champ de saisie d'un formulaire, une mise à jour du nombre d'articles dans un panier ou les cercles rouges numérotés au-dessus des applications sur votre iPhone.
Défis et pièges courants dans la mise en œuvre de l'accessibilité
Équilibrer la simplicité et la complexité
La véritable beauté de l'affordance réside dans sa simplicité. Cependant, chaque élément interactif peut contrôler quelque chose d'incroyablement complexe. L'art d'une bonne conception consiste à trouver un équilibre entre les deux, en produisant la manière la plus simple d'effectuer les tâches les plus complexes.
Éviter les affordances fausses ou trompeuses
Les fausses affordances peuvent induire les utilisateurs en erreur et semer la confusion dans leur fonctionnement. Nous savons que les clients abandonnent facilement leurs paniers à moitié remplis et leurs applications lorsqu'ils rencontrent des problèmes. Il est donc nécessaire d'éliminer les éléments qui prêtent à confusion, de préciser où se trouve l'étape suivante ou de donner des exemples d'affordances cachées.
Bonnes pratiques pour la création d'une conception homogène de l'accessibilité
Recherche et test d'utilisateurs pour une expérience optimale
En tant que chercheurs UX, nous sommes parfaitement placés pour vous dire à quel point notre travail est important dans ce domaine. Les tests continus et l'itération tout au long des étapes et des processus sont nécessaires à chaque étape de la conception d'un produit numérique. Avec affordances, nous travaillons sur des éléments aussi simples que les tests A-B (fournir des choix basés sur des données qui convertissent) jusqu'aux tests UX internationaux, où les différences culturelles et géographiques peuvent rendre un processus, une interface utilisateur ou même une application entière inutilisable.
Rester à jour avec les modèles et conventions de conception
La technologie et le design étant en constante évolution, les concepteurs doivent garder une longueur d'avance. En vous tenant au courant des conventions populaires, des nouveaux outils, des innovations et des modes, vos interfaces numériques resteront opérationnelles et répondront aux attentes des utilisateurs.
Conclusion : Le pouvoir de l'affordance efficace dans la transformation de l'expérience de l'utilisateur
Vous comprendrez maintenant à quel point l'apparence physique et les propriétés essentielles des affordances sont importantes. C'est en menant des recherches UX sérieuses que nous trouvons les problèmes et les enjeux liés à nos applications et à nos produits, et que nous déterminons les solutions qui donnent les meilleurs résultats.
Bien qu'il apparaisse comme une petite partie d'un vaste système, le design UX s'appuie fortement sur des affordances efficaces pour réaliser les projets les plus performants. Les affordances permettent d'éviter ou de prévenir les erreurs des utilisateurs et de contourner les limites des logiciels, qu'il s'agisse de simples mises à jour de copies ou de représentations d'objets réels ou originaux ; l'exploitation des affordances est devenue une forme d'art.
Nos experts en recherche sur les utilisateurs sont à votre disposition pour vous aider à vous rapprocher de vos clients. Si vous souhaitez organiser un appel sans engagement, contactez-nous par e-mail à l'adresse suivante hello@ux247.com ou faites-nous part de vos besoins en utilisant le formulaire ci-dessous.
