Form UX

The foundations of Form UX

Be concise

Do we really need all this?

(Reduce cognitive load)

Single column layouts

Grouping inputs

<form>
  <fieldset>
    <legend>Personal information</legend>
    <label>
      First Name<br>
      <input name="fname">
    </label>
    <label>
      Last Name<br>
      <input name="lname">
    </label>
    <label>
      Email<br>
      <input name="email" type="email">
    </label>
  </fieldset>
</form>

Visual contraints

Optional instead of required

- maybe both?

https://www.nngroup.com/articles/web-form-design/

Test with users

avoid this ->

Be permissive

🤔

Be permissive

🤔

Choose the right HTML element

https://uxdesign.cc/if-satan-was-a-web-designer-dc5cdf06dff9

Choose the right HTML element

How do I find out what to use?

Test with users

Which one do I use?

Hvad er galt her?

Placeholders

Placeholders as labels

It's difficult to remember what information belongs in a field, and to check for and fix errors

— nngroup

Disappearing placeholder text strains users’ short-term memory.
Without labels, users cannot check their work before submitting a form.
Placeholder text that disappears when the cursor is placed in a form field is irritating for users navigating with the keyboard.
Users may mistake a placeholder for data that was automatically filled in.

https://www.nngroup.com/articles/form-design-placeholders/

Placeholders

👎🏻

Placeholders

👍🏻

Placeholders

Always use a label!

If we have to leave out the <label> e.g. due to design constraints, what do we need to ensure in terms of UX?

Relevant feedback is important

Form states

:focus
:user-valid
:user-invalid
:checked
:disabled

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#Index_of_standard_pseudo-classes

input[type="text"]:user-valid {
  color: green;
}

input[type="text"]:user-invalid {
  color: red;
}

øvelse

Byg formularen

Lav HTML-formularen, der gør os i stand til at vise følgende data i et UI Card som dette

Data representation

You Might Not Need A Label

Scannability

province + country

farm size

name

d.o.b.

members

province + country

farm size

name

d.o.b.

members