davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
394 Commits
1 Branch
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
larlet-fr-david-cache/cache/ea6f3644381c108795010c0ae6a.../index.html

index.html 28KB
Raw Permalink Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Form design: from zero to hero all in one blog post (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Form design: from zero to hero all in one blog post (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post/">Source originale du contenu</a></h3>

  463.     <p>Hi there. If we haven’t met before, I’m Adam and I’m obsessed with designing forms. And I have been for almost 20 years.</p>

  464. 

  465. <p>What is it about forms then?</p>

  466. 

  467. <p>Every meaningful interaction on the web is achieved by a form of some sort. Whether it’s letting users renew their passport, send an email or buy something.</p>

  468. 

  469. <p>Basically anything that isn’t just reading content.</p>

  470. 

  471. <p>What’s interesting though is that on first glance, forms are easy. In a few minutes you can have text boxes and radio buttons on screen and working.</p>

  472. 

  473. <p>But look around the internet for a minute, and you’ll find a million and one usability issues revolving around forms.</p>

  474. 

  475. <p>I’m pretty sure I’ve come across every single one of them. And spent hours solving each one in a way that works for everyone.</p>

  476. 

  477. <p>And some forms have more than just fields and buttons. They can contain complex interactions or form part of a wider journey—both of which need due care and attention.</p>

  478. 

  479. <p>So, if I was designing a new form, I’d want to know how to avoid the common issues. And to use my time to solve newer and perhaps more difficult problems.</p>

  480. 

  481. <p>Seriously, who wants to spend time solving something that’s already been solved?</p>

  482. 

  483. <p>That’s right—nobody.</p>

  484. 

  485. <h2 id="a-note-before-we-begin">A note before we begin</h2>

  486. 

  487. <p>Much of what I’m going to say might sound obvious and boring. But <a href="http://blog.capwatkins.com/the-boring-designer">boring is good</a>, we don’t need to over complicate matters.</p>

  488. 

  489. <p>So if you’re looking for new and innovative ways to design forms, this is not for you.</p>

  490. 

  491. <p>This is about designing forms that everyone can use and complete as quickly as possible. Because nobody actually wants to use your form. They just want the outcome of having used it.</p>

  492. 

  493. <p>This guide is quick and to the point—a whistle stop tour of the knowledge I’ve accrued in my years of form design. It’s not exhaustive, but rather an entry point, designed to save you time on the basics.</p>

  494. 

  495. <p>Many points I make link off to other articles. If you read each of them, you’ll be more than equipped to make simple and inclusive forms that get out of the user’s way.</p>

  496. 

  497. <p>Let’s begin.</p>

  498. 

  499. <h2 id="don%E2%80%99t-mess-with-labels">Don’t mess with labels</h2>

  500. 

  501. <p><a href="https://adamsilver.io/articles/always-use-a-label/">Every input needs a label</a>. Sighted users can see them, visually-impaired users can hear them and motor-impaired users can more easily set focus to the related input.</p>

  502. 

  503. <p>Labels should be placed above the input because this works well for different size content and different screen sizes.</p>

  504. 

  505. <p><a href="https://adamsilver.io/articles/placeholders-are-problematic/">Placeholders are problematic</a>—both as makeshift labels and as a means of storing additional hint text. <a href="http://nostyle.herokuapp.com/examples/registration-form">Instead put hint text below the label and above the input</a>.</p>

  506. 

  507. <p><a href="https://adamsilver.io/articles/float-labels-are-problematic/">Float labels are also problematic</a>. They have many of the same problems that placeholders have—and some of their own.</p>

  508. 

  509. <p>Seriously, don’t mess with labels.</p>

  510. 

  511. <h2 id="crafting-questions">Crafting questions</h2>

  512. 

  513. <p>You should <a href="https://www.gov.uk/service-manual/design/form-structure#know-why-youre-asking-every-question">know exactly why you’re asking every question</a>. Use a <a href="https://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php">question protocol</a> to help you.</p>

  514. 

  515. <p>Don’t mark required fields, mark optional ones. Or better yet <a href="https://adamsilver.io/articles/form-design-handling-optional-fields/">avoid optional questions by using a branching question</a>.</p>

  516. 

  517. <p>Use hint text to tell users why you’re asking them for certain information—it’s not always obvious.</p>

  518. 

  519. <p>Hint text should be used where users are more likely to make a mistake, like when having to satisfy a complex set of password rules. Error messages should be a last resort.</p>

  520. 

  521. <h2 id="style-and-microcopy">Style and microcopy</h2>

  522. 

  523. <p>Form fields should look like form fields. That means they should be bordered and empty so it’s obvious where the input goes. Make fields easy to tap—44px height or more is good.</p>

  524. 

  525. <p>The width of the field gives users a clue as to the length of the content it requires. So don’t make all fields the same width for aesthetic purposes when you know the expected length.</p>

  526. 

  527. <p>Avoid <a href="https://baymard.com/blog/avoid-multi-column-forms">multi column form layouts</a>. They’re error prone, slower to use and can cause abandonment.</p>

  528. 

  529. <p>Buttons should look like buttons. They’re harder to spot when they’re aligned right, especially for screen magnifier users. So <a href="https://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">position the button to the left and below the last field</a>.</p>

  530. 

  531. <p><a href="https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98">Use sentence case for labels, hints and error messages</a>. It’s easier to read and to spot nouns. Button text should be a simple verb because the user is <em>doing</em> something.</p>

  532. 

  533. <h2 id="form-validation">Form validation</h2>

  534. 

  535. <p><a href="https://adamsilver.io/articles/inline-validation-is-problematic/">Live inline validation is problematic</a>. <a href="http://adrianroselli.com/2019/02/avoid-default-field-validation.html">Turn off HTML5 default validation</a>. Don’t <a href="https://axesslab.com/disabled-buttons-suck/">disable buttons</a>—users won’t know how to fix errors without feedback.</p>

  536. 

  537. <p>Validate forms <code>onsubmit</code>. You can still catch errors with JavaScript to avoid a server-side round trip.</p>

  538. 

  539. <p>Be tolerant of mistakes like extra whitespace, dashes and slashes. Do the hard work so users don’t have to.</p>

  540. 

  541. <p>Show an error summary at the top of the page which contains a list of errors. When one is clicked, set focus to the input. For a group of inputs, like radio buttons, set focus to the first input.</p>

  542. 

  543. <p>The error message should also be placed in context of the field. Put the message just above the field. Placing it <a href="http://adrianroselli.com/2017/01/avoid-messages-under-fields.html">below can cause problems</a>.</p>

  544. 

  545. <p>Prefix the word “Error:” to the document’s title. It’s the first thing announced by screen readers when the page loads.</p>

  546. 

  547. <p>Style error messages in red and use a warning icon to provide a <a href="https://developer.paciellogroup.com/blog/2018/01/inclusive-design-principle-provide-a-comparable-experience/">comparable experience for colour blind users</a>.</p>

  548. 

  549. <p>Error messages should be concise, specific, use plain language and avoid pleasantries like ‘please’. The <a href="https://design-system.service.gov.uk/">GOV.UK Design System</a> is full of brilliant examples.</p>

  550. 

  551. <p>You can <a href="http://nostyle.herokuapp.com/examples/validation">see all of this in action here</a>.</p>

  552. 

  553. <h2 id="flow-and-order">Flow and order</h2>

  554. 

  555. <p><a href="https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/">Start with one thing per page</a>. Then put the questions in a sensible order. For example, payment details should come after delivery details.</p>

  556. 

  557. <p><a href="https://design-system.service.gov.uk/patterns/question-pages/#using-progress-indicators">Start without a progress indicator</a>. They’re often not noticed and can be tricky to design for dynamic flows.</p>

  558. 

  559. <p>Tell users what they need and how long the form will take to complete before they start.</p>

  560. 

  561. <p>In really long forms, let users save their progress and return to finish it later. Use the <a href="https://design-system.service.gov.uk/patterns/task-list-pages/">task list</a> pattern to break up the journey into small, manageable parts.</p>

  562. 

  563. <p>Put <a href="https://design-system.service.gov.uk/patterns/question-pages/">back links in the top left of the page</a> so users don’t have to scroll past the form to go back. Avoid putting links within the body of the form as it disrupts the tab sequence for keyboard users.</p>

  564. 

  565. <p>Just before the end of a transaction, let users <a href="https://design-system.service.gov.uk/patterns/check-answers/">check their answers</a> and make changes. This provides reassurance and <a href="https://inclusivedesignprinciples.org/#give-control">keeps users in control</a>.</p>

  566. 

  567. <p>When a transaction is complete, show a <a href="https://design-system.service.gov.uk/patterns/confirmation-pages/">confirmation page</a> and send users an email confirmation. Tell users what will happen next.</p>

  568. 

  569. <p>Now’s a good a time to let your brand shine through. This is the beginning of the relationship—not the end.</p>

  570. 

  571. <h2 id="go-faster">Go faster</h2>

  572. 

  573. <p><a href="https://www.gov.uk/service-manual/design/form-structure#design-for-the-most-common-scenarios-first">Design for common circumstances</a> by putting the most used option first and marking it as selected. Except when you need to avoid bias—like in surveys.</p>

  574. 

  575. <p>Use the <a href="https://www.smashingmagazine.com/2017/03/improve-billing-form-ux/">browser’s autofill routine</a> to stop users from typing data manually. This also reduces the risk of typos.</p>

  576. 

  577. <p>Avoid the <code>maxlength</code> attribute. Many users don’t look at the screen as they type, so they won’t notice that some of their keystrokes were ignored until they look up.</p>

  578. 

  579. <p>Use form validation and a <a href="http://nostyle.herokuapp.com/components/character-countdown">character count</a> component instead.</p>

  580. 

  581. <p>Use <code>autocapitalize="none"</code>, <code>autocorrect="off"</code> and <code>spellcheck="false"</code> to stop browsers automatically changing user input on fields that expect grammatically incorrect data—like email addresses and passwords.</p>

  582. 

  583. <h2 id="field-design">Field design</h2>

  584. 

  585. <p>Use the right input type. On mobile it will provide users with a more useful keyboard.</p>

  586. 

  587. <p>Learn <a href="https://adamsilver.io/articles/form-design-when-to-use-the-number-input/">when and when not to use the number input</a>.</p>

  588. 

  589. <p>Don’t mix up radio buttons and checkboxes. And remember <a href="https://uxmyths.com/post/931925744/myth-23-choices-should-always-be-limited-to-seven">you can have more than 7 options on a page</a>.</p>

  590. 

  591. <p><a href="https://www.youtube.com/watch?v=CUkMCQR4TpY">Select boxes should be a last resort</a> because they’re really hard to use. Try radio buttons instead. Or use an autocomplete, if there’s a long list of options.</p>

  592. 

  593. <p>Don’t use <code>datalist</code> for an autocomplete. It’s <a href="https://caniuse.com/#feat=datalist">buggy and lacks support</a>. Autocompletes are really tricky, so you can <a href="http://nostyle.herokuapp.com/components/autocomplete">use mine</a>.</p>

  594. 

  595. <p>Use <a href="http://nostyle.herokuapp.com/components/memorable-date">three separate text boxes for dates</a>. Only use a date picker when users need to find a date in relation to another, or if they need to know the day, week or month that the date relates to. Date pickers are tricky, so you can <a href="http://nostyle.herokuapp.com/components/date-picker">use mine</a>.</p>

  596. 

  597. <p>Use a <a href="http://nostyle.herokuapp.com/components/stepper">stepper component</a> to help users make small numerical adjustments quickly and easily.</p>

  598. 

  599. <p>Don’t use multiple inputs when one will do, like when asking for a sort code. If you do have multiple inputs for a field, don’t auto tab between them. It causes users to make mistakes.</p>

  600. 

  601. <p>File uploading: try to accept large files and as many file types as possible. Don’t <em>rely</em> on the <code>multiple</code> attribute. Besides a lack of support, it can only be used to select files from a single directory.</p>

  602. 

  603. <p>Here’s one accessible way to let <a href="http://nostyle.herokuapp.com/examples/dropzone">users upload multiple files</a>.</p>

  604. 

  605. <h2 id="the-end">The end</h2>

  606. 

  607. <p>So there you are. A few hundred words on how to avoid 90% of the problems found in most online forms.</p>

  608.   </article>

  609. </section>

  610. 

  611. 

  612. <nav id="jumpto">

  613.   <p>

  614.     <a href="/david/blog/">Accueil du blog</a> |

  615.     <a href="https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post/">Source originale</a> |

  616.     <a href="/david/stream/2019/">Accueil du flux</a>

  617.   </p>

  618. </nav>

  619. 

  620. <footer>

  621.   <div>

  622.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  623.     <p>

  624.       Bonjour/Hi!

  625.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  626.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  627.     </p>

  628.     <p>

  629.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  630.     </p>

  631.     

  632.     <p>

  633.       Voici quelques articles choisis :

  634.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  635.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  636.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  637.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  638.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  639.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  640.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  641.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  642.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  643.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  644.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  645.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  646.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  647.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  648.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  649.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  650.     </p>

  651.     <p>

  652.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  653.     </p>

  654.     <p>

  655.       Je ne traque pas ta navigation mais mon

  656.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  657.       conserve des logs d’accès.

  658.     </p>

  659.   </div>

  660. </footer>

  661. <script type="text/javascript">

  662.   ;(_ => {

  663.     const jumper = document.getElementById('jumper')

  664.     jumper.addEventListener('click', e => {

  665.       e.preventDefault()

  666.       const anchor = e.target.getAttribute('href')

  667.       const targetEl = document.getElementById(anchor.substring(1))

  668.       targetEl.scrollIntoView({behavior: 'smooth'})

  669.     })

  670.   })()

  671. </script>