Thread by @smashingmag

All the things I think about when I think about web forms. #uxpatterns

01 — What’s the absolute minimum user input we need for new customers to get started?
02 — When is the right time and place to ask users to verify critical input (email, password, permissions)?

03 — For each piece of data, what’s the best form element to collect it fast and accurately?
04 — For sensitive data input (e.g. phone number), do we explain why we need it?
05 — Are there any form elements which need hints (e.g. password requirements, username)?

06 — Do we always prefer tap-friendly components, i.e. large buttons, toggles, and sliders?
07 — Do text boxes appear as text boxes (good padding, bordered).
08 — Have we adjusted the width of each box to give users a hint of the expected length of input?

09 — Do we use proper labels, associated with input fields?
10 — Do we highlight required or optional fields, or both?
11 — Will labels be top-aligned or right-aligned (preferably the former)?
12 — Will we be using floating labels? If so, are they accessible?

13 — Do inputs have :focus and :active styles?
14 — For each input, do we need to enable/disable autocorrect, spell-checking and autocapitalization?
15 — Do we make use of autofill with the autocomplete attribute?
16 — Do we display the right keyboard on mobile (inputmode)?

17 — Do we lay out fields in a single column (preferably yes)?
18 — Do we show at most 7–8 input fields at a time on desktop, 3–4 on mobile?
19 — Are radio buttons actually round (preferably yes)?
20 — Are checkboxes square, with enough padding and large font size (18px+)?

21 — Do we avoid <select>-dropdowns as much as possible, and use steppers (<10 options) or datalist with autocomplete (>10 options) instead?
22 — For autocomplete, do we surface frequent hits? Do they appear in the alphabetical list as well?

23 — Do we use a localization based on user-provided country or ZIP/postal code (placeholders, masks, input field(s) width, formatting, spelling, currency, legal requirements)?
24 — Can we ask for a full name instead of first/last names?

25 — Do we avoid “Address Line 2” and use more contextual labels instead (“Apartment, suite, unit, floor”)?
26 — Can we use an address look-up widget to speed up location input?
27 — For date and time input, do we display input boxes or widgets with steppers for quick jumps?

28 — For inline validation, can we define a threshold per input field, after which we start validating input?
29 — On submit, do we scroll the user to the first error and focus on it?
30 — …or display the error above the submit button (focused)?

31 — Do we display the error message just above the input field (not covered by keyboard on mobile)?
32 — Do we provide autoformatting for phone number, birthday, amounts, numbers, dates, postal codes?
33 — Do we show the number of errors in the tab title as a prefix?

34 — Can we not disable submit buttons until all fields are filled in?
35 — Do we persist the data on refresh?
36 — Do we have an input budget in place (max number of input fields per step)?
37 — Do we track the tap count (min number of taps needed to complete the form)?

If you'd like to see a few more examples of various #uxpatterns, we have a few friendly, inclusive online workshops on interface design patterns and UX coming soooooon: smashingconf.com/online-worksho…

And a huge shout-out to @adambsilver and the entire community for the profound research on web forms! Adam also has published a wonderful book on @smashingmag on Form Design Patterns: smashingmagazine.com/printed-books/… — Thank you, Adam! ❤️