All posts
Blog

What makes a form feel short

A form with ten fields can feel shorter than one with five. What drives the feeling is how many decisions it asks for, and how much work it makes somebody do to answer.

UI design Accessibility
Cover reading Ask for less., with a single column of form fields

Length is decisions, not fields

What makes a form feel long is the number of decisions inside it, not the number of boxes. "First name" is not a decision. "Which plan, and do you want to be billed annually" is several, and one of them needs the person to go and read something else before they can answer.

So the first pass over a form that feels long is not to delete fields. It is to find every place where somebody has to stop and work something out, and to make those moments easier or move them somewhere else.

One column

In a two column form the eye has to decide at every row whether to move right or move down. That decision repeats for the length of the form, and it is the reason people skip fields in multi column layouts and then meet a validation error they do not understand.

A single column has one path through it. The exceptions are short values that are read as one thing anyway: a town and a postcode, an expiry month and year. Everything else goes underneath.

Labels above the field

Above the input, left aligned with it, and visible the whole time. That placement survives long labels, translation into languages that need more words, and the moment somebody scrolls back to check what they already typed.

Using the placeholder as the label is the most common accessibility failure in interface work. It disappears at the exact moment it is needed, which is when the field has focus. Its contrast is usually too low to read comfortably. Once the form is filled in, nothing on screen says what any of the values mean, so checking your own answers means emptying fields to see the hints again.

Do not split one value across several inputs

A phone number is one thing the person knows. So is a date of birth, and so is a reference number. Splitting them into three or four boxes creates focus behaviour that has to be written and maintained, breaks pasting, and makes the form look longer than it is.

Take one input, accept whatever formatting somebody types, and normalise it afterwards. Stripping spaces and dashes is work software is good at, and it is not work worth handing to the person filling in the form.

Mark the smaller set

If most fields are required, mark the optional ones. If most are optional, mark the required ones. Putting an asterisk on every field communicates nothing, because a mark that appears on everything has stopped being a mark.

Validate at the right moment

Not on every keystroke. Somebody typing an email address is in an invalid state for almost the whole time they are typing it, and showing an error while they work is nagging them for an answer they are in the middle of giving.

Validate when they leave the field. After a field has gone into error, live validation becomes the right behaviour: at that point they are correcting something, and telling them the moment it is fixed saves another round trip.

Two things never to do while somebody is typing: move the focus for them, and clear a field because its contents were wrong. Both destroy work that took effort to produce.

Errors next to the thing that is wrong

At the field, in text, saying what to do about it. A summary at the top of the form is worth adding as well on long forms, and it is genuinely useful for anybody navigating by keyboard or screen reader, but it does not replace the message at the field.

"Invalid input" is not a message. It names the software's opinion and none of the person's options. Say what good looks like instead, with an example of the format.

The biggest win is deletion

Every field costs some proportion of the people who started. The question worth asking of each one is whether it is needed now, or whether it could be asked later, worked out from something else, or never asked at all.

A signup form that collects a company name and then never uses it has traded completion for nothing. That trade is usually invisible, because the people it cost are the ones who are not in the data.

Who this is for

None of this is about making a form look good. It is about the person filling it in, who did not set out to fill in a form and is doing it because it stands between them and something they actually wanted.

Got something that needs building from scratch?

Brand, design and build, handled by one person, start to finish.