WebForm.Guide - All Topics

Layout

How the form is laid out, especially for more complex forms, has an enormouse impact on the user's ability to easily complete the form and achieve what it is they set out to do. There has been plenty of research into the impact of different approaches to presenting form elements and from this we can derive a number of simple design patterns that standardise and streamline the user experience.

It has long been known that people browsing the Web don’t read, they scan. This was a fact known in 1997 and yet still forms everywhere require the users to dissect what they’re presented with, read through too many verbose instructions, and move across the page in an unintuitive manner. We can do better than this.

Group Content

First and foremost, break the content into digestible chunks. This isn’t necessarily a problem for short forms like log-ins or newsletter subscriptions, but for anything longer it is worth taking the time to break the content - the questions, the fields, and associated information - into sensible groupings. This can also solve problems of meaning, where the way content presented can be ambiguous and confusing: for example, when purchasing an item an address field may refer to the delivery address or address associated with a credit card - simply breaking up the form into payment and delivery sections reduces the potential for confusion. For more information, see page 54 of Forms That Work (link below).

If the groupings are more than a few in number, then adding headings is a good way to make the form scannable and allow the user to orientate themselves. This is also great for accessibility as screen readers can use headings to build a hierarchy for blind users. Headings should, however, only even be used in a strictly nested order - level 2 headings only after a level 1 heading, level 3’s only after a level 2, etc. Rob Dobson explains why in the video tutorial linked below.

Paging

Paging is worth doing once the form becomes overwhelming when viewed in one go. There are no numerical minimum or maximum numbers on the ideal number of elements to a page, or total number of pages, it all entirely depends on the users and the domain at hand. Obviously, this is not all that helpful in identifying if your form needs to be split into multiple pages, nor is it helpful in identifying if your twenty page form is too long. It is this, more than anything, that benefits from user research. In some cases, as advised by gov.uk, it may make sense to split every question onto a separate page, whilst in other cases it may make sense to just give the user everything they need (though this is far less likely).

So what if you don’t have time to do user research? Ask yourself how willing will your users be to spending time getting through these questions. If the answer is not “very willing” then splitting the questions into digestible chunks is probably wise, and it is probably a good idea to err on the side of too many divisions. Just not too many that users get tired of pressing next.

Also, when using paging it is absolutely a good idea to perform validation on what the user has entered. Getting to the end of the long multi-page form to be told that some information on page 2 is incorrect is not fun. Especially, if the subsequent pages then getting wiped. Don’t ever ask a user to type the same thing twice; this happens far too often.

Whitespace

Ok, enough on blocks of content. How about the content - the questions and the form elements themselves? The easiest trick to make the form easier to complete is to reduce clutter, and thus distractions. Increase the whitespace between elements (don’t worry users know how to scroll if necessary), and remove any superfluous content on the page. Whitespace provides three distinct purposes.

Single Column

User research, consistently proves that users find forms much easier to fill out and make fewer mistakes if they are presented each of the questions and fields in a sequential order. One at a time, from top to bottom. It goes back to the whole scanning behaviour: having all of the content in one vertical column it is very easy to scan from one point of focus to the next. And even better, this is very easily to achieve in HTML and CSS, but if you need something more complex than the default browser behaviour, flexbox is the ideal solution as content can be arranged in a responsive manner and is supported by all major modern browsers.

Positioning Labels

Another fact backed by plenty of research (see the sources) is that labels should be placed above a field rather than beside (left or right). Plenty on labelling will be discussed in the labelling and internationalisation sections, but it is worth mentioning that eye-tracking research has revealed that users scan down the left side of the form and will take more time to read labels if they fall between consecutive components of the form. This results in a smoother experience and fewer mistakes made.

Sources

Additional Resources

Corrections? Improvements? Suggestions? Drop us an issue.