{"id":6950,"date":"2018-08-22T09:09:12","date_gmt":"2018-08-22T07:09:12","guid":{"rendered":"https:\/\/stephaniewalter.design\/?p=6950"},"modified":"2023-08-04T11:15:42","modified_gmt":"2023-08-04T09:15:42","slug":"ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/","title":{"rendered":"Am\u00e9liorer l’exp\u00e9rience utilisateur des formulaires mobiles – partie 1"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 8 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Cette semaine j’ai publi\u00e9 un article sur Smashing Magazine sur l’exp\u00e9rience utilisateur des formulaires intitul\u00e9 \u00ab\u00a0UX And HTML5: Let\u2019s Help Users Fill In Your Mobile Form (Part 1)<\/strong>\u00ab\u00a0. Il sera publi\u00e9 en deux parties. Les formulaires sont le moyen d’interaction principal des utilisateurs avec nos services et produits. On d\u00e9nombre aujourd’hui plus d’utilisateurs mobiles que \u00ab\u00a0desktop\u00a0\u00bb \u00e0 travers le monde. Pourtant, l’exp\u00e9rience des formulaires sur mobile est toujours et encore d\u00e9sastreuse.<\/p>\n

Lire l’article (en Anglais)<\/span><\/a><\/p>\n

Dans la premi\u00e8re partie de l’article, je reviens sur les bases de bonnes pratiques et d’ergonomie mobile<\/strong> : placement des labels, taille des champs, structure, hi\u00e9rarchie d’information \u00e0 l’int\u00e9rieur du formulaire. Je propose ensuite des solutions techniques et ergonomiques pour r\u00e9duire les co\u00fbts d’interaction sur mobile en fonction des besoins utilisateurs<\/strong>. Enfin, je reviens sur les bases pour la pr\u00e9vention et gestion des erreurs<\/strong>.<\/p>\n

Cette premi\u00e8re partie a vocation de guide de bonnes pratiques<\/strong>. Comme toutes les bonnes pratiques, il s’agit bien sure de bases, parfois vous devrez peut-\u00eatre y d\u00e9roger en fonction de besoins sp\u00e9cifiques de vos utilisatrices et projets. Le mot d’ordre : testez, TESTEZ vos formulaires, sur des appareils mobiles, avec VOS utilisateurs<\/strong>.<\/p>\n

Pour le moment je n’ai pas de traduction de l’article (vu la longueur vous comprendrez pourquoi) mais pour les francophones, vous pouvez consulter les slides de ma conf\u00e9rence \u00ab\u00a0Aidez-moi \u00e0 remplir vos formulaires mobile ! \u2013 Blend Web Mix 2016<\/a>\u00a0\u00bb ou consulter la vid\u00e9o<\/a>. C’est bien sure moins complet que l’article puisque ces contenus datent de 2016 mais vous avez une base.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 8 ans. Il se peut qu’il ne soit plus \u00e0 jour.Cette semaine j’ai publi\u00e9 un article sur Smashing Magazine sur l’exp\u00e9rience utilisateur des formulaires intitul\u00e9 \u00ab\u00a0UX And HTML5: Let\u2019s Help Users Fill In Your Mobile Form (Part 1)\u00ab\u00a0. Il sera publi\u00e9 en deux parties. Les formulaires sont le moyen d’interaction principal des utilisateurs avec nos services et produits. On d\u00e9nombre aujourd’hui plus d’utilisateurs mobiles que \u00ab\u00a0desktop\u00a0\u00bb \u00e0 travers le monde. Pourtant, l’exp\u00e9rience …<\/p>\n","protected":false},"author":3,"featured_media":6952,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55,70],"tags":[],"class_list":["post-6950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-ui-web-design","category-mobile-responsive-web-design"],"yoast_head":"\nAm\u00e9liorer l'exp\u00e9rience utilisateur des formulaires mobiles - partie 1 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Bonnes pratiques d'ergonomie de formulaires mobiles : placement des labels, taille des champs, structure, hi\u00e9rarchie d'information, co\u00fbts d'interaction, pr\u00e9vention et gestion des erreurs.\" \/>\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-des-formulaires-mobiles-partie-1\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Am\u00e9liorer l'exp\u00e9rience utilisateur des formulaires mobiles - partie 1 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Bonnes pratiques d'ergonomie de formulaires mobiles : placement des labels, taille des champs, structure, hi\u00e9rarchie d'information, co\u00fbts d'interaction, pr\u00e9vention et gestion des erreurs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/\" \/>\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=\"2018-08-22T07:09:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-04T09:15:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2018\/08\/ux-html5-formulaires.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-des-formulaires-mobiles-partie-1\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/\",\"name\":\"Am\u00e9liorer l'exp\u00e9rience utilisateur des formulaires mobiles - partie 1 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/08\/ux-html5-formulaires.jpg\",\"datePublished\":\"2018-08-22T07:09:12+00:00\",\"dateModified\":\"2023-08-04T09:15:42+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Bonnes pratiques d'ergonomie de formulaires mobiles : placement des labels, taille des champs, structure, hi\u00e9rarchie d'information, co\u00fbts d'interaction, pr\u00e9vention et gestion des erreurs.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/08\/ux-html5-formulaires.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2018\/08\/ux-html5-formulaires.jpg\",\"width\":850,\"height\":350},{\"@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'utilisabilit\u00e9 et l'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\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & 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 des formulaires mobiles - partie 1 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Bonnes pratiques d'ergonomie de formulaires mobiles : placement des labels, taille des champs, structure, hi\u00e9rarchie d'information, co\u00fbts d'interaction, pr\u00e9vention et gestion des erreurs.","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-des-formulaires-mobiles-partie-1\/","og_locale":"fr_FR","og_type":"article","og_title":"Am\u00e9liorer l'exp\u00e9rience utilisateur des formulaires mobiles - partie 1 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Bonnes pratiques d'ergonomie de formulaires mobiles : placement des labels, taille des champs, structure, hi\u00e9rarchie d'information, co\u00fbts d'interaction, pr\u00e9vention et gestion des erreurs.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2018-08-22T07:09:12+00:00","article_modified_time":"2023-08-04T09:15:42+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2018\/08\/ux-html5-formulaires.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-des-formulaires-mobiles-partie-1\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/","name":"Am\u00e9liorer l'exp\u00e9rience utilisateur des formulaires mobiles - partie 1 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2018\/08\/ux-html5-formulaires.jpg","datePublished":"2018-08-22T07:09:12+00:00","dateModified":"2023-08-04T09:15:42+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Bonnes pratiques d'ergonomie de formulaires mobiles : placement des labels, taille des champs, structure, hi\u00e9rarchie d'information, co\u00fbts d'interaction, pr\u00e9vention et gestion des erreurs.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/ameliorer-lexperience-utilisateur-des-formulaires-mobiles-partie-1\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2018\/08\/ux-html5-formulaires.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2018\/08\/ux-html5-formulaires.jpg","width":850,"height":350},{"@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'utilisabilit\u00e9 et l'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\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & 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\/6950","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=6950"}],"version-history":[{"count":1,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/6950\/revisions"}],"predecessor-version":[{"id":8424,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/6950\/revisions\/8424"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/6952"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=6950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=6950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=6950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}