{"id":5046,"date":"2016-02-25T16:28:42","date_gmt":"2016-02-25T15:28:42","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5046"},"modified":"2019-03-25T10:13:05","modified_gmt":"2019-03-25T09:13:05","slug":"ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/","title":{"rendered":"Am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 &#8211; Confoo 2016"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 10 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Je suis en ce moment \u00e0 Montr\u00e9al pour la semaine pour donner deux conf\u00e9rences \u00e0 Confoo.<\/p>\n<p>Le cession d&rsquo;aujourd&rsquo;hui s&rsquo;intitule \u00a0\u00bb\u00a0<a href=\"https:\/\/confoo.ca\/en\/2016\/session\/ameliorer-l-experience-utilisateur-grace-aux-animations-css3\">Am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3<\/a> \u00a0\u00bb et j&rsquo;y explique au travers d&rsquo;exemples illustr\u00e9s comment les animations, quand elles sont bien faites et bien pens\u00e9es vont participer \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience des utilisateurs de nos sites webs et applications. Ces animations sont d\u00e9sormais faisables tr\u00e8s facilement en CSS3. Ma conf\u00e9rence se base sur des cas pratiques concrets\u00a0dans lequels je d\u00e9tail pas \u00e0 pas le code n\u00e9cessaire \u00e0 leur r\u00e9alisations. Au programme : transitions de boutons et animations d&rsquo;ic\u00f4nes en SVG, menu off-canvas full CSS, customisation de checkboxs et am\u00e9liorer la visibilit\u00e9 et compr\u00e9hension des erreurs de formulaires gr\u00e2ce \u00e0 des animations.<\/p>\n<p><a href=\"http:\/\/codepen.io\/collection\/nkNNpo\/\">Les d\u00e9mos sont disponibles ici.<\/a><\/p>\n<p>Vous pouvez retrouver les <a href=\"https:\/\/speakerdeck.com\/stephaniewalter\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3\" target=\"_blank\" rel=\"noopener noreferrer\">slides \u00a0\u00bb\u00a0Am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 \u00a0\u00bb ici<\/a>\u00a0et ci-dessous :<br \/>\n<script class=\"speakerdeck-embed\" src=\"\/\/speakerdeck.com\/assets\/embed.js\" async=\"\" data-id=\"6562a117c9e54c6ab6aa2f17cfb01048\" data-ratio=\"1.33333333333333\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 10 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.Je suis en ce moment \u00e0 Montr\u00e9al pour la semaine pour donner deux conf\u00e9rences \u00e0 Confoo. Le cession d&rsquo;aujourd&rsquo;hui s&rsquo;intitule \u00a0\u00bb\u00a0Am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 \u00a0\u00bb et j&rsquo;y explique au travers d&rsquo;exemples illustr\u00e9s comment les animations, quand elles sont bien faites et bien pens\u00e9es vont participer \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience des utilisateurs de nos sites webs et applications. Ces animations sont &hellip;<\/p>\n","protected":false},"author":3,"featured_media":5048,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55,216],"tags":[],"class_list":["post-5046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-ui-web-design","category-conferences-formations"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Am\u00e9liorer l&#039;exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016 - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Am\u00e9liorer l&#039;exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016 - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 10 ans. Il se peut qu&#039;il ne soit plus \u00e0 jour.Je suis en ce moment \u00e0 Montr\u00e9al pour la semaine pour donner deux conf\u00e9rences \u00e0 Confoo. Le cession d&rsquo;aujourd&rsquo;hui s&rsquo;intitule \u00a0\u00bb\u00a0Am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 \u00a0\u00bb et j&rsquo;y explique au travers d&rsquo;exemples illustr\u00e9s comment les animations, quand elles sont bien faites et bien pens\u00e9es vont participer \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience des utilisateurs de nos sites webs et applications. Ces animations sont &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-25T15:28:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-25T09:13:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/02\/ux-animations.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/\",\"name\":\"Am\u00e9liorer l'exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/ux-animations.jpg\",\"datePublished\":\"2016-02-25T15:28:42+00:00\",\"dateModified\":\"2019-03-25T09:13:05+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/ux-animations.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/ux-animations.jpg\",\"width\":850,\"height\":350,\"caption\":\"Am\u00e9liorer l'exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Am\u00e9liorer l'exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","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:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/","og_locale":"fr_FR","og_type":"article","og_title":"Am\u00e9liorer l'exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 10 ans. Il se peut qu'il ne soit plus \u00e0 jour.Je suis en ce moment \u00e0 Montr\u00e9al pour la semaine pour donner deux conf\u00e9rences \u00e0 Confoo. Le cession d&rsquo;aujourd&rsquo;hui s&rsquo;intitule \u00a0\u00bb\u00a0Am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 \u00a0\u00bb et j&rsquo;y explique au travers d&rsquo;exemples illustr\u00e9s comment les animations, quand elles sont bien faites et bien pens\u00e9es vont participer \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience des utilisateurs de nos sites webs et applications. Ces animations sont &hellip;","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2016-02-25T15:28:42+00:00","article_modified_time":"2019-03-25T09:13:05+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/02\/ux-animations.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/","name":"Am\u00e9liorer l'exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/ux-animations.jpg","datePublished":"2016-02-25T15:28:42+00:00","dateModified":"2019-03-25T09:13:05+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-grace-aux-animations-css3-confoo-2016\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/ux-animations.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/ux-animations.jpg","width":850,"height":350,"caption":"Am\u00e9liorer l'exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 - Confoo 2016"},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=5046"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5046\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/5048"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=5046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=5046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=5046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}