{"id":36897,"date":"2022-05-01T01:00:00","date_gmt":"2022-04-30T23:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=36897"},"modified":"2025-08-20T17:26:27","modified_gmt":"2025-08-20T15:26:27","slug":"affordance-ux","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/affordance-ux\/","title":{"rendered":"UX design affordance&nbsp;: boostez vos CTA"},"content":{"rendered":"<p>L\u2019affordance est un terme courant du langage des concepteurs d\u2019interface centr\u00e9e sur l\u2019utilisateur, c&#8217;est-\u00e0-dire des professionnels de l\u2019UX design ou UX designers.<\/p>\n<p>Loin d\u2019\u00eatre nouveau, ce terme trouve son origine dans les ann\u00e9es 1970 o\u00f9 il est invent\u00e9 par un psychologue am\u00e9ricain d\u00e9nomm\u00e9 James J. Gibson. Il est ensuite popularis\u00e9 par l\u2019auteur Donald Norman qui l\u2019emploie dans son livre \u00ab The Design of Everyday Things \u00bb.<\/p>\n<p>Ainsi, l\u2019affordance est un concept psychologique qui touche d\u00e9sormais tous les secteurs d\u2019activit\u00e9, et qui forme notamment un outil cl\u00e9 dans la conception d\u2019interfaces utilisateur et dans l\u2019UX Design. Il s\u2019applique notamment pour valoriser l\u2019ensemble des calls to action de nos applications et site web. Principe et application, voici <strong>comment booster vos CTA gr\u00e2ce \u00e0 l\u2019UX design affordance<\/strong>&nbsp;!<\/p>\n<p>&nbsp;<\/p>\n<h2>Qu\u2019est-ce que l\u2019affordance&nbsp;?<\/h2>\n<h3>L\u2019affordance d\u2019un point de vue psychologique<\/h3>\n<p><strong>\u00ab Affordance \u00bb<\/strong> est un mot d\u2019origine anglaise qui renvoie \u00e0 la notion de potentialit\u00e9. Le terme est le r\u00e9sultat des recherches men\u00e9es par le psychologue James J. Gibson. Il entre dans le champ d\u2019action de nombreuses disciplines, telles que la psychologie cognitive et ergonomique. Dans ce cas pr\u00e9cis, l\u2019affordance d\u00e9signe litt\u00e9ralement l\u2019ensemble de nos possibilit\u00e9s d\u2019actions sur un objet.<\/p>\n<p>Le champ d\u2019application de l\u2019affordance est d\u2019autant plus perceptible quand on prend le temps d\u2019en d\u00e9composer le terme.<\/p>\n<p>Celui-ci se forme du verbe anglais \u00ab to afford \u00bb qui peut \u00eatre traduit par&nbsp;:<\/p>\n<ul>\n<li>s\u2019offrir quelque chose ;<\/li>\n<li>avoir les moyens de faire quelque chose ;<\/li>\n<li>fournir l\u2019opportunit\u00e9 de&#8230;<\/li>\n<\/ul>\n<p>Litt\u00e9ralement, l\u2019affordance donne donc les moyens \u00e0 l\u2019utilisateur de se servir de l\u2019objet, sans plus d\u2019explication. En d\u2019autres termes, l\u2019affordance est un appel \u00e0 l\u2019action au sens large qui induit une action qui peut \u00eatre&nbsp;:<\/p>\n<ul>\n<li>d\u2019appuyer ;<\/li>\n<li>de tirer ou pousser ;<\/li>\n<li>de tapoter ;<\/li>\n<li>de cliquer ;<\/li>\n<li>d\u2019effleurer ;<\/li>\n<li>de porter ;<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>Bref, d\u2019interagir avec un objet, mais aussi avec une interface.<\/p>\n<p>Ainsi, dans le monde physique, la forme de la poign\u00e9e de porte sugg\u00e8re instinctivement son utilisation afin de parvenir \u00e0 l\u2019actionner. De m\u00eame, la forme de la chaise vous indique comment vous asseoir dessus, etc.<\/p>\n<p>Le concept s\u2019applique ainsi \u00e0 bien des secteurs, et notamment au design, aux interactions entre l\u2019Homme et la machine, ainsi qu\u2019\u00e0 l\u2019IA.<\/p>\n<h3>L\u2019affordance du point de vue de l\u2019UX design<\/h3>\n<p>Le concept d\u2019affordance appliqu\u00e9 dans le domaine de l\u2019interaction homme-machine est quant \u00e0 lui le r\u00e9sultat d\u2019\u00e9tudes men\u00e9es par Donald Norman, sur la base du concept initial de James J. Gibson.<\/p>\n<p>L\u2019utilisation de l\u2019affordance est plus limit\u00e9e dans le domaine de l\u2019UX (qui comprend simultan\u00e9ment l\u2019ergonomie des interfaces et les interactions hommes-machines). Ici, elle d\u00e9signe sp\u00e9cifiquement la capacit\u00e9 qu\u2019\u00e0 l\u2019objet de sugg\u00e9rer sa propre utilisation. On comprend donc instinctivement l\u2019usage qu\u2019il est possible de faire dudit objet, sans qu\u2019il soit n\u00e9cessaire dans lire le mode d\u2019emploi. Ici, l\u2019affordance est donc synonyme d\u2019utilisation intuitive.<\/p>\n<p>&nbsp;<\/p>\n<h2>Application de l\u2019affordance dans l\u2019UI et UX design<\/h2>\n<p>L\u2019apparence d\u2019une interface num\u00e9rique a une importance capitale puisqu\u2019elle est la seule \u00e0 pouvoir offrir toutes les cl\u00e9s \u00e0 l\u2019utilisateur pour trouver ce qu\u2019il cherche, pour comprendre son fonctionnement et donc pour l\u2019utiliser. L\u2019affordance forme donc la notion de base d\u2019un <strong>design d\u2019interface<\/strong> r\u00e9ussi, puisqu\u2019elle permet de faciliter votre choix des bons \u00e9l\u00e9ments interactifs.<\/p>\n<p>Une affordance efficace permet \u00e0 l\u2019utilisateur de comprendre imm\u00e9diatement l\u2019int\u00e9r\u00eat de votre produit et la mani\u00e8re de l\u2019exploiter. Dans bien des cas, il est toutefois n\u00e9cessaire d\u2019aller plus loin en faisant jouer l\u2019\u00e9motion. Celle-ci joue en effet un r\u00f4le pr\u00e9pond\u00e9rant dans le processus cognitif et l\u2019attachement (ou le rejet) au produit. C\u2019est ce que l\u2019on appelle le design \u00e9motionnel.<\/p>\n<p>Ainsi, lorsqu\u2019on interagit avec une interface, on aime \u00e0 ressentir du plaisir, de l\u2019excitation ou de la satisfaction. Autant de sentiments qui nous poussent \u00e0 aller plus avant dans l\u2019exploration de ses fonctionnalit\u00e9s. Par cons\u00e9quent, l\u2019affordance est form\u00e9e de deux \u00e9l\u00e9ments indissociables que sont l\u2019utilisabilit\u00e9 de l\u2019objet et la perception de l\u2019utilisateur.<\/p>\n<p>&nbsp;<\/p>\n<h2>CTA et UX design affordance<\/h2>\n<p>Vous l\u2019avez compris, une affordance r\u00e9ussie permet \u00e0 l\u2019utilisateur de comprendre facilement l\u2019action \u00e0 ex\u00e9cuter. <strong>Le CTA<\/strong> lui-m\u00eame doit donc offrir une forme qui incite l\u2019utilisateur \u00e0 agir.<\/p>\n<h3>Maximiser l\u2019affordance du CTA&nbsp;: les r\u00e8gles de base<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-36902\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/call-to-action.jpeg\" alt=\"Call to action exemple\" width=\"700\" height=\"261\" \/><\/p>\n<p>Le <a href=\"https:\/\/graphiste.com\/blog\/erreurs-boutons-call-to-action\">Call To Action<\/a>, ou boutons d\u2019action, est un outil strat\u00e9gique qui permet \u00e0 l\u2019utilisateur de&nbsp;:<\/p>\n<ul>\n<li>r\u00e9aliser une demande de devis ;<\/li>\n<li>contacter l\u2019entreprise ;<\/li>\n<li>s\u2019inscrire \u00e0 une newsletter ;<\/li>\n<li>t\u00e9l\u00e9charger un document ;<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>En bref, le CTA est un outil de conversion. On accorde donc une importance toute particuli\u00e8re \u00e0 son affordance. Celle-ci est renforc\u00e9e par&nbsp;:<\/p>\n<ul>\n<li>le choix pr\u00e9cis du verbe d\u2019action ;<\/li>\n<li>l\u2019utilisation d\u2019une couleur adapt\u00e9e ;<\/li>\n<li>l\u2019ajout d\u2019\u00e9l\u00e9ments graphiques explicites ;<\/li>\n<li>Etc.<\/li>\n<\/ul>\n<h4>Le verbe d\u2019action<\/h4>\n<p>L\u2019emploi de verbes d\u2019action et de phrases courtes, permet de faciliter la compr\u00e9hension de l\u2019utilisateur sur la fonction du CTA. On pense par exemple aux injonctions du type \u00ab t\u00e9l\u00e9charger \u00bb et \u00ab ajouter au panier \u00bb, mais aussi au groupe de mots du type \u00ab je r\u00e9serve \u00bb et \u00ab j\u2019ajoute au panier \u00bb.<\/p>\n<p>Ici, on capte l\u2019attention de l\u2019utilisateur et on d\u00e9clenche son action \u00e0 l\u2019aide de deux ou trois mots. \u00c9vitez donc les termes trop g\u00e9n\u00e9riques du type \u00ab demande d\u2019informations \u00bb, \u00ab prendre contact \u00bb et misez davantage sur des expressions qui impliquent personnellement l\u2019utilisateur.<\/p>\n<h4>La couleur<\/h4>\n<p>Il n\u2019existe pas exactement de r\u00e8gles pr\u00e9\u00e9tablies quant \u00e0 la couleur qui doit \u00eatre utilis\u00e9e pour un CTA efficace. Sachez toutefois que les couleurs vives sont ici les plus souvent sollicit\u00e9es, \u00e0 l\u2019exception du rouge qui est associ\u00e9 \u00e0 la suppression. Le plus important est avant tout de maintenir harmonie et coh\u00e9rence dans le graphisme global de votre interface, dans le respect de la charte graphique de votre entreprise.<\/p>\n<h4>Le recettage<\/h4>\n<p>Si vous ne deviez retenir qu\u2019une seule chose dans cet article, ce serait celle-ci&nbsp;: testez absolument chaque nouvel \u00e9l\u00e9ment ajout\u00e9 \u00e0 vos CTA afin d\u2019en garantir la pertinence&nbsp;! R\u00e9alisez donc des tests utilisateurs \u00e0 chaque \u00e9tape de conception de votre interface afin d\u2019\u00eatre certains que le call To action r\u00e9ponde parfaitement aux usages de vos utilisateurs.<\/p>\n<h4>Le trop est l\u2019ennemie du bien<\/h4>\n<p>Attention \u00e0 ne surtout pas tomber dans l\u2019exc\u00e8s en pla\u00e7ant des boutons et injonctions \u00e0 cliquer un peu partout dans vos interfaces. Rien de tel pour perdre l\u2019internaute et r\u00e9duire de facto l\u2019affordance du CTA.<\/p>\n<p>De m\u00eame, il est tout \u00e0 fait contre-productif de donner \u00e0 vos boutons d\u2019appel \u00e0 l\u2019action une taille d\u00e9mesur\u00e9e par rapport aux autres \u00e9l\u00e9ments de l\u2019interface. Rien de tel, l\u00e0 encore, pour cr\u00e9er de la confusion chez l\u2019internaute.<\/p>\n<p>Gardez donc en t\u00eate que tout exc\u00e8s engendre un taux de clics m\u00e9diocre et diminue l\u2019attention de l\u2019utilisateur.<\/p>\n<h3>Quel style de design pour optimiser l\u2019affordance de mes CTA&nbsp;?<\/h3>\n<p>Reste \u00e0 d\u00e9terminer le style de design le plus appropri\u00e9 pour <strong>maximiser l\u2019affordance de vos CTA<\/strong>. Actuellement, trois d\u2019entre eux font loi dans le monde de l\u2019UX design.<\/p>\n<h3>1. Le skeuomorphisme<\/h3>\n<figure id=\"attachment_36899\" aria-describedby=\"caption-attachment-36899\" style=\"width: 367px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-36899\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/Skeuomorphic-Design-Examples.jpeg\" alt=\"skeumorphisme design\" width=\"367\" height=\"329\" \/><figcaption id=\"caption-attachment-36899\" class=\"wp-caption-text\">Credit image Apple<\/figcaption><\/figure>\n<p>Le skeuomorphisme est une technique de design qui consiste \u00e0 imiter artificiellement l\u2019objet r\u00e9el pour en faire comprendre l\u2019usage \u00e0 l\u2019utilisateur.<\/p>\n<p>Prenons ici un exemple concret&nbsp;: les \u00e9l\u00e9ments de conception graphique de vos boutons d\u2019appel \u00e0 l\u2019action, tels que les bordures, les ombres et contrastes, sont capables de donner une impression de sur\u00e9l\u00e9vation au call To action. Un effet qui rappelle immanquablement la forme du bouton dans la vie r\u00e9elle.<\/p>\n<p>Le skeuomorphisme permet ainsi d\u2019obtenir une affordance accessible \u00e0 tous les utilisateurs.<\/p>\n<h3>2. Le flat design<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-36900\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/flat-design-cta.jpeg\" alt=\"CTA en flat design\" width=\"700\" height=\"467\" \/><\/p>\n<p>Pour sa part, le flat design (c&#8217;est-\u00e0-dire le design plat) se caract\u00e9rise par une iconographie beaucoup plus minimaliste. Ici, le design s\u2019attache \u00e0 donner un maximum d\u2019indices d\u2019utilisation, mais avec le moins d\u2019\u00e9l\u00e9ments visuels possible.<\/p>\n<p>L\u2019av\u00e8nement d\u2019un tel style graphique est rendu possible par le public qui a aujourd\u2019hui moins besoin de rep\u00e8res, gr\u00e2ce \u00e0 sa parfaite connaissance du monde digital.<\/p>\n<p>Notez toutefois qu\u2019un tel minimalisme rencontre certaines limites qui ne lui permettent pas d\u2019atteindre une affordance assez claire pour tous les types d\u2019utilisateurs.<\/p>\n<h3>3. Le material design<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-36901\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/material-design.jpeg\" alt=\"Material design exemple\" width=\"700\" height=\"467\" \/><\/p>\n<p>Initi\u00e9 par Google et inspir\u00e9e du flat design, le material design cherche \u00e0 optimiser ce dernier en lui conf\u00e9rant une dimension plus vivante. Ainsi, conscient des limites du flat design, le material design joue sur les effets de parallaxe afin de donner simultan\u00e9ment une illusion de profondeur, de perspective et de mouvement.<\/p>\n<p>Conjointement, le material design exploite les vid\u00e9os et animations pour apporter un effet de plus grande r\u00e9alit\u00e9 \u00e0 l\u2019ensemble, tout en jouant avec le beau, l\u2019\u00e9mouvant et la bienveillance.<\/p>\n<p>&nbsp;<\/p>\n<h2>Notre astuce<\/h2>\n<p>L\u2019affordance est un concept \u00e0 la fois complexe et fascinant qui s\u2019av\u00e8re tout \u00e0 fait indispensable pour concevoir une interface centr\u00e9e sur l\u2019utilisateur. Par son biais, l\u2019<strong>UX designer<\/strong> cherche \u00e0 valoriser l\u2019utilisabilit\u00e9 de son produit, tout en optimisant l\u2019exp\u00e9rience de son utilisateur. Un d\u00e9fi de taille dans un monde o\u00f9 l\u2019usager est de plus en plus exigeant, habitu\u00e9 \u00e0 \u00eatre le centre d\u2019attention des interfaces et \u00e0 profiter d\u2019un acc\u00e8s tr\u00e8s rapide aux fonctionnalit\u00e9s recherch\u00e9es.<\/p>\n<p>&nbsp;<\/p>\n<p>Levier marketing puissant, l\u2019affordance du call To action fait ainsi l\u2019objet d\u2019une attention toute particuli\u00e8re de la part de l\u2019UX designer. Le CTA est en effet capable de g\u00e9n\u00e9rer de l\u2019interaction entre l\u2019enseigne et le client, il permet de collecter des donn\u00e9es et de convertir le visiteur en consommateur.<\/p>\n<p>Vous \u00eates \u00e0 la recherche d\u2019un <strong>UX designer en mesure de favoriser l\u2019utilisabilit\u00e9 et l\u2019affordance de vos CTA<\/strong> et de vos interfaces dans leur globalit\u00e9&nbsp;? Rendez-vous sur <a href=\"https:\/\/graphiste.com\/\" target=\"\u201d_blank\u201d\" rel=\"\u201dnoopener\u201d\/ noopener noreferrer\">Graphiste.com<\/a>, et d\u00e9couvrez-y les profils et portfolios de professionnels exp\u00e9riment\u00e9s et talentueux.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L\u2019affordance est un terme courant du langage des concepteurs d\u2019interface centr\u00e9e sur l\u2019utilisateur, c&#8217;est-\u00e0-dire des professionnels de l\u2019UX design ou UX designers. Loin d\u2019\u00eatre nouveau, ce terme trouve son origine dans les ann\u00e9es 1970 o\u00f9 il est invent\u00e9 par un psychologue am\u00e9ricain d\u00e9nomm\u00e9 James J. Gibson. Il est ensuite popularis\u00e9 par l\u2019auteur Donald Norman qui [&hellip;]<\/p>\n","protected":false},"author":69,"featured_media":36898,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[101],"tags":[69],"class_list":["post-36897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design","tag-graphisme"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UX design affordance : boostez vos CTA - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"L\u2019affordance est un terme courant du langage des concepteurs d\u2019interface centr\u00e9e sur l\u2019utilisateur, c&#039;est-\u00e0-dire des professionnels de l\u2019UX design ou UX\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/affordance-ux\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX design affordance : boostez vos CTA - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"L\u2019affordance est un terme courant du langage des concepteurs d\u2019interface centr\u00e9e sur l\u2019utilisateur, c&#039;est-\u00e0-dire des professionnels de l\u2019UX design ou UX\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/affordance-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-30T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:26:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"C\u00e9dric Reymbaut\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"C\u00e9dric Reymbaut\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/\"},\"author\":{\"name\":\"C\u00e9dric Reymbaut\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\"},\"headline\":\"UX design affordance&nbsp;: boostez vos CTA\",\"datePublished\":\"2022-04-30T23:00:00+00:00\",\"dateModified\":\"2025-08-20T15:26:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/\"},\"wordCount\":1763,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg\",\"keywords\":[\"Tout savoir sur le Graphisme\"],\"articleSection\":[\"UX design\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/affordance-ux\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/\",\"url\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/\",\"name\":\"UX design affordance : boostez vos CTA - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg\",\"datePublished\":\"2022-04-30T23:00:00+00:00\",\"dateModified\":\"2025-08-20T15:26:27+00:00\",\"description\":\"L\u2019affordance est un terme courant du langage des concepteurs d\u2019interface centr\u00e9e sur l\u2019utilisateur, c'est-\u00e0-dire des professionnels de l\u2019UX design ou UX\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/affordance-ux\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg\",\"width\":850,\"height\":423,\"caption\":\"Affordance Ux Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/affordance-ux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UX design\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/ux-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"UX design affordance&nbsp;: boostez vos CTA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c\",\"name\":\"C\u00e9dric Reymbaut\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g\",\"caption\":\"C\u00e9dric Reymbaut\"},\"description\":\"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/cedric\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UX design affordance : boostez vos CTA - Graphiste Blog","description":"L\u2019affordance est un terme courant du langage des concepteurs d\u2019interface centr\u00e9e sur l\u2019utilisateur, c'est-\u00e0-dire des professionnels de l\u2019UX design ou UX","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/affordance-ux\/","og_locale":"fr_FR","og_type":"article","og_title":"UX design affordance : boostez vos CTA - Graphiste Blog","og_description":"L\u2019affordance est un terme courant du langage des concepteurs d\u2019interface centr\u00e9e sur l\u2019utilisateur, c'est-\u00e0-dire des professionnels de l\u2019UX design ou UX","og_url":"https:\/\/graphiste.com\/blog\/affordance-ux\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2022-04-30T23:00:00+00:00","article_modified_time":"2025-08-20T15:26:27+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg","type":"image\/jpeg"}],"author":"C\u00e9dric Reymbaut","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"C\u00e9dric Reymbaut","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/"},"author":{"name":"C\u00e9dric Reymbaut","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c"},"headline":"UX design affordance&nbsp;: boostez vos CTA","datePublished":"2022-04-30T23:00:00+00:00","dateModified":"2025-08-20T15:26:27+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/"},"wordCount":1763,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg","keywords":["Tout savoir sur le Graphisme"],"articleSection":["UX design"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/affordance-ux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/","url":"https:\/\/graphiste.com\/blog\/affordance-ux\/","name":"UX design affordance : boostez vos CTA - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg","datePublished":"2022-04-30T23:00:00+00:00","dateModified":"2025-08-20T15:26:27+00:00","description":"L\u2019affordance est un terme courant du langage des concepteurs d\u2019interface centr\u00e9e sur l\u2019utilisateur, c'est-\u00e0-dire des professionnels de l\u2019UX design ou UX","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/affordance-ux\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/04\/ux-design-affordance-1.jpg","width":850,"height":423,"caption":"Affordance Ux Design"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/affordance-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"UX design","item":"https:\/\/graphiste.com\/blog\/webdesign\/ux-design\/"},{"@type":"ListItem","position":4,"name":"UX design affordance&nbsp;: boostez vos CTA"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/fd068361dcde9cff7ed7697f613f839c","name":"C\u00e9dric Reymbaut","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5c5c5ea80ab9004dec5ca778b3a0296920ea60943b147078d0f7e299e2a8f6f?s=96&d=mm&r=g","caption":"C\u00e9dric Reymbaut"},"description":"Je suis UX\/UI designer, passionn\u00e9 par les outils comme Figma et Framer. Le week-end, je m\u2019amuse \u00e0 concevoir des SaaS sur Lovable.","sameAs":["https:\/\/www.linkedin.com\/in\/cedricreymbaut74\/"],"url":"https:\/\/graphiste.com\/blog\/author\/cedric\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/36897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=36897"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/36897\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/36898"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=36897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=36897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=36897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}