{"id":13995,"date":"2019-10-21T10:30:28","date_gmt":"2019-10-21T08:30:28","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=13995"},"modified":"2025-08-20T17:23:34","modified_gmt":"2025-08-20T15:23:34","slug":"creer-micro-interaction-efficace","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/","title":{"rendered":"Comment cr\u00e9er une micro-interaction efficace\u00a0?"},"content":{"rendered":"<p>Une micro-interaction sert \u00e0 indiquer, de mani\u00e8re visuelle, qu\u2019un utilisateur est en train d\u2019agir&nbsp;: il envoie un formulaire, charge une vid\u00e9o\u2026<\/p>\n<p>Elle sera efficace si elle est utile et qu\u2019elle suscite une<a href=\"https:\/\/graphiste.com\/blog\/generer-emotions-nostalgie\" target=\"_blank\" rel=\"noopener noreferrer\"> \u00e9motion.<\/a><\/p>\n<p><strong>Voici comment y parvenir.<\/strong><\/p>\n<h2><\/h2>\n<h2>Qu\u2019est-ce qu\u2019une micro-interaction&nbsp;?<\/h2>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_13998\" aria-describedby=\"caption-attachment-13998\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/dribbble.com\/shots\/5008200-Menu-Icon-Animation-Micro-Interaction\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-13998 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/burger-close-menu-micro-interaction-animated-tranmautritam.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><figcaption id=\"caption-attachment-13998\" class=\"wp-caption-text\">Dribble<\/figcaption><\/figure>\n<p>Une <a href=\"https:\/\/graphiste.com\/blog\/web-design-exemple-micro-interaction\" target=\"_blank\" rel=\"noopener noreferrer\">micro-interaction<\/a> est une animation qui prend vie suite \u00e0 une action de l\u2019utilisateur. Ce peut \u00eatre le changement de couleur d\u2019un bouton, une image qui bouge et appara\u00eet \u00e0 un moment pr\u00e9cis, trois petits points qui signalent un t\u00e9l\u00e9chargement\u2026<\/p>\n<p>Son but est de rendre l\u2019utilisation d\u2019un site ou d\u2019une application plus vivant, mais aussi plus pratique&nbsp;: l\u2019internaute ne se demande pas s\u2019il se passe quelque chose, <strong>il le voit.<\/strong><\/p>\n<p>Par d\u00e9finition, une micro-interaction ne dure que quelques secondes, et doit donc \u00eatre relativement l\u00e9g\u00e8re \u00e0 charger. Certains parlent m\u00eame d\u2019un ordre de grandeur de 400 millisecondes seulement&nbsp;!<\/p>\n<p>&nbsp;<\/p>\n<h2>Pourquoi utiliser des micro-interactions&nbsp;?<\/h2>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14002\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/001c.gif\" alt=\"\" width=\"928\" height=\"640\" \/>Savoir quelles sont les bonnes raisons d\u2019utiliser une micro-interaction vous aidera aussi \u00e0 r\u00e9fl\u00e9chir comment la concevoir.<\/p>\n<p>Ce type d\u2019animation&nbsp;: <\/p>\n<ul>\n<li>am\u00e9liore le parcours de l\u2019utilisateur ;<\/li>\n<li>lui sert \u00e0 comprendre o\u00f9 il se trouve dans son parcours ;<\/li>\n<li>lui permet de savoir que ses actions sont prises en compte ;<\/li>\n<li>gratifie certains actes par une r\u00e9compense et gamifie l\u2019utilisation ;<\/li>\n<li>capte l\u2019attention ;<\/li>\n<li>rend l\u2019exp\u00e9rience plus plaisante ;<\/li>\n<li>am\u00e9liore votre impact sur vos clients.<\/li>\n<\/ul>\n<blockquote><p>\u00c0 lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/comment-ajouter-humour-site-web\">Comment ajouter de l\u2019humour \u00e0 votre site web&nbsp;?<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Quels sont les types de micro-interactions les plus fr\u00e9quentes&nbsp;?<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14003\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/micro-interaction-frequente-graphiste.gif\" alt=\"\" width=\"928\" height=\"640\" \/><\/p>\n<p>Dans le domaine des micro-interactions, il existe de nombreux gestes qui se font de plus en plus naturels, comme le Swipe, qui fait glisser les \u00e9l\u00e9ments sur un \u00e9cran tactile.<\/p>\n<p>Vous voyez aussi de plus en plus appara\u00eetre des formulaires qui indiquent visuellement <strong>si les cases sont bien remplies<\/strong>. Ou si le mot de passe comporte bien tous les \u00e9l\u00e9ments n\u00e9cessaires (longueur, majuscules, caract\u00e8res sp\u00e9ciaux\u2026). Ce qui \u00e9vite \u00e0 l\u2019utilisateur la frustration d\u2019envoyer un formulaire incomplet puis de devoir recommencer.<\/p>\n<ul>\n<li>Il en va de m\u00eame sur les micro-interactions qui signalent que votre fichier est en <strong>train de charger<\/strong> sur le site ou, \u00e0 l\u2019inverse, qu\u2019un t\u00e9l\u00e9chargement est en cours.<\/li>\n<li>Les boutons anim\u00e9s ou les call-to-actions qui apparaissent au bon moment rel\u00e8vent du m\u00eame ordre.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>Ins\u00e9rez vos micro-interactions au bon moment<\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14001\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/micro-interaction-nuit-jour-graphiste.gif\" alt=\"\" width=\"600\" height=\"450\" \/><\/p>\n<p>Une micro-interaction qui intervient de mani\u00e8re anarchique va plus distraire vos utilisateurs que leur \u00eatre utile.\u00a0Elle doit toujours accompagner une action, et toujours le m\u00eame type d\u2019action.<\/p>\n<p>Par exemple, si vous d\u00e9terminez une<a href=\"https:\/\/graphiste.com\/blog\/infographies-ajouter-animation\" target=\"_blank\" rel=\"noopener noreferrer\"> animation<\/a> pour indiquer un chargement, vous ne l\u2019utiliserez que lors de ces \u00e9pisodes. Et pas juste pour le passage d\u2019une page \u00e0 l\u2019autre.<\/p>\n<p>De m\u00eame, \u00e9vitez de surcharger votre page ou votre application avec de trop nombreuses micro-interactions. Vous n\u2019\u00eates pas en train de produire un dessin anim\u00e9, avec des images qui bondissent dans tous les sens&nbsp;: vous cherchez comment <strong>am\u00e9liorer l\u2019exp\u00e9rience de l\u2019utilisateur<\/strong> afin qu\u2019il ne se sente pas abandonn\u00e9.<\/p>\n<p>&nbsp;<\/p>\n<h2>Transmettez votre identit\u00e9<\/h2>\n<figure id=\"attachment_13999\" aria-describedby=\"caption-attachment-13999\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-13999 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/503885b9fdd34c2e65380799cb2e816c.gif\" alt=\"micro interaction utile efficace pour convertir\" width=\"400\" height=\"300\" \/><figcaption id=\"caption-attachment-13999\" class=\"wp-caption-text\">Source&nbsp;: MailChimp<\/figcaption><\/figure>\n<p>Une micro-interaction est aussi l\u2019occasion de partager un peu de vous.<\/p>\n<p>Parce qu\u2019elle peut \u00eatre tr\u00e8s sobre et purement fonctionnelle\u2026 ou bien int\u00e9grer un peu d\u2019humour (c\u2019est aussi ce que l\u2019on voit sur les pages d\u2019erreur 404).\u00a0Elle peut \u00eatre l\u2019occasion d\u2019int\u00e9grer votre <a href=\"https:\/\/graphiste.com\/blog\/inspiration-personnages-attachants\" target=\"_blank\" rel=\"noopener noreferrer\">mascotte<\/a>\u00a0ou votre logo \u00e0 votre convenance.<\/p>\n<blockquote><p>L\u2019important, c\u2019est de montrer que vous n\u2019avez pas juste pris n\u2019importe quelle micro-interaction sur un site de codeurs, mais que vous y avez int\u00e9gr\u00e9 votre touche personnelle.<\/p><\/blockquote>\n<p>La micro-interaction devient donc utile pour vous aussi, puisqu\u2019elle vous sert \u00e0 vous <strong>d\u00e9marquer.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>Quelques outils pour cr\u00e9er des micro-interactions<\/h2>\n<p>La plupart des outils utilis\u00e9s pour le codage peuvent \u00e9galement s\u2019appliquer pour les micro-interactions. Pour les sites internet, les Animations CSS seront efficaces, tout comme Framer.<\/p>\n<p>Pour une utilisation plus bas\u00e9e sur les smartphones, vous vous tournerez plut\u00f4t vers Xcode ou Android Studio.\u00a0Ce qui ne vous emp\u00eachera pas d\u2019ajouter \u00e0 votre bo\u00eete \u00e0 outils <a href=\"https:\/\/graphiste.com\/blog\/after-effects-12-intro-gratuites-video\" target=\"_blank\" rel=\"noopener noreferrer\">After Effects<\/a>, <a href=\"https:\/\/graphiste.com\/blog\/logiciel-prototypage-maquette-web\" target=\"_blank\" rel=\"noopener noreferrer\">Invision<\/a>, Marvel\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Une micro-interaction sert \u00e0 indiquer, de mani\u00e8re visuelle, qu\u2019un utilisateur est en train d\u2019agir&nbsp;: il envoie un formulaire, charge une vid\u00e9o\u2026 Elle sera efficace si elle est utile et qu\u2019elle suscite une \u00e9motion. Voici comment y parvenir. Qu\u2019est-ce qu\u2019une micro-interaction&nbsp;? &nbsp; Une micro-interaction est une animation qui prend vie suite \u00e0 une action de l\u2019utilisateur. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":14006,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-13995","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment cr\u00e9er une micro-interaction efficace\u00a0? - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Une micro-interaction sert \u00e0 indiquer, de mani\u00e8re visuelle, qu\u2019un utilisateur est en train d\u2019agir : il envoie un formulaire, charge une vid\u00e9o\u2026 Elle sera\" \/>\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\/creer-micro-interaction-efficace\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er une micro-interaction efficace\u00a0? - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Une micro-interaction sert \u00e0 indiquer, de mani\u00e8re visuelle, qu\u2019un utilisateur est en train d\u2019agir : il envoie un formulaire, charge une vid\u00e9o\u2026 Elle sera\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/\" \/>\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=\"2019-10-21T08:30:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:23:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-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=\"Laura Michaud\" \/>\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=\"Laura Michaud\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/\"},\"author\":{\"name\":\"Laura Michaud\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2\"},\"headline\":\"Comment cr\u00e9er une micro-interaction efficace\u00a0?\",\"datePublished\":\"2019-10-21T08:30:28+00:00\",\"dateModified\":\"2025-08-20T15:23:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/\"},\"wordCount\":731,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/\",\"url\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/\",\"name\":\"Comment cr\u00e9er une micro-interaction efficace\u00a0? - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg\",\"datePublished\":\"2019-10-21T08:30:28+00:00\",\"dateModified\":\"2025-08-20T15:23:34+00:00\",\"description\":\"Une micro-interaction sert \u00e0 indiquer, de mani\u00e8re visuelle, qu\u2019un utilisateur est en train d\u2019agir : il envoie un formulaire, charge une vid\u00e9o\u2026 Elle sera\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#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\":\"Comment cr\u00e9er une micro-interaction efficace\u00a0?\"}]},{\"@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\/33c0ef04707fbe50a096f282050bb5f2\",\"name\":\"Laura Michaud\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g\",\"caption\":\"Laura Michaud\"},\"description\":\"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/michaudlaura\/\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/laura\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er une micro-interaction efficace\u00a0? - Graphiste Blog","description":"Une micro-interaction sert \u00e0 indiquer, de mani\u00e8re visuelle, qu\u2019un utilisateur est en train d\u2019agir : il envoie un formulaire, charge une vid\u00e9o\u2026 Elle sera","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\/creer-micro-interaction-efficace\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er une micro-interaction efficace\u00a0? - Graphiste Blog","og_description":"Une micro-interaction sert \u00e0 indiquer, de mani\u00e8re visuelle, qu\u2019un utilisateur est en train d\u2019agir : il envoie un formulaire, charge une vid\u00e9o\u2026 Elle sera","og_url":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2019-10-21T08:30:28+00:00","article_modified_time":"2025-08-20T15:23:34+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg","type":"image\/jpeg"}],"author":"Laura Michaud","twitter_card":"summary_large_image","twitter_creator":"@Graphistecom","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Laura Michaud","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/"},"author":{"name":"Laura Michaud","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/33c0ef04707fbe50a096f282050bb5f2"},"headline":"Comment cr\u00e9er une micro-interaction efficace\u00a0?","datePublished":"2019-10-21T08:30:28+00:00","dateModified":"2025-08-20T15:23:34+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/"},"wordCount":731,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg","articleSection":["Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/","url":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/","name":"Comment cr\u00e9er une micro-interaction efficace\u00a0? - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg","datePublished":"2019-10-21T08:30:28+00:00","dateModified":"2025-08-20T15:23:34+00:00","description":"Une micro-interaction sert \u00e0 indiquer, de mani\u00e8re visuelle, qu\u2019un utilisateur est en train d\u2019agir : il envoie un formulaire, charge une vid\u00e9o\u2026 Elle sera","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/une-graphiste-reussir-micro-interaction-efficace-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/creer-micro-interaction-efficace\/#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":"Comment cr\u00e9er une micro-interaction efficace\u00a0?"}]},{"@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\/33c0ef04707fbe50a096f282050bb5f2","name":"Laura Michaud","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3328cc0c887f98cec6b2979af3311ab6333fc7cc2d4847514cfec6a56fa08a7?s=96&d=mm&r=g","caption":"Laura Michaud"},"description":"Laura connait tous les meilleurs outils pour g\u00e9rer des projets et une entreprise. Cr\u00e9ative, c'est aussi une sp\u00e9cialiste des outils de cr\u00e9ation graphique pour faire briller une entreprise.","sameAs":["https:\/\/www.linkedin.com\/in\/michaudlaura\/"],"url":"https:\/\/graphiste.com\/blog\/author\/laura\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/13995","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=13995"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/13995\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/14006"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=13995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=13995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=13995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}