Web Form Optimisation and Best Practice (Part 1/4): Standard Form Elements

Web Form Optimisation

Online forms are an important part of many online conversion funnels, making usability vitally important. Designing forms that keep users engaged for enough time to fill out the required information can make a remarkable difference to the overall percentage of users that convert.

In this series we explore form best practice and how to optimise your forms, starting with how to use standard form elements.

Jump to a section

1. Text Field Size & Shape
2. Drop-down Fields
3. Radio Buttons & Checkboxes
4. Field Labels
5. Buttons

1. Text Field Size and Shape

Form fields should always be designed to the width of the expected input text. For example, credit card CVC security codes are a maximum of 4 digits long, so there is no reason for the field to allow for any additional digits.

Baymard Institute outline three main types of text input fields in one of their UX research articles.

1.1 Fields with a fixed input

Fields such as the CVC code mentioned above, or year of birth – where the exact number of characters being entered is known – should always be adjusted to exactly match the input length.

cvc form field

1.2. Fields with a variable input length but a normal average character length

This is the most common type of text field. Information like names or email addresses generally stay fairly close to an average number of characters – for example, most email addresses are around 25 characters. By making the field long enough to fit a number of characters that is just above the average you make your form match user expectations more closely.

email address form fields

1.3. Fields with a variable input length and a wide range of possible character lengths

Number three is the trickiest type of field for which to accurately set the length, as some information may vary greatly; for example, postal codes from country to country can vastly differ in length. These fields should be sized based on the expected length of characters and may sometimes have to ignore extreme edge cases to ensure expectations are clear for the majority of users. This one comes down more to common sense, as well as a bit of research into the upper and lower expected input lengths.

Field length acts as an additional visual aid for users to indicate what is expected of them so it’s important to get it right. An additional benefit of varying your form field lengths is that it helps to break up the monotony of the page and therefore keep your user’s attention.

2. Drop-down Fields

Studies have shown that the conversion rate of forms using a single drop-down field can decrease by around 10% and forms with multiple drop-down fields fare even worse, dropping by up to 12%. Therefore, it’s really important to give full consideration as to whether a drop-down is actually the best way of displaying your information.

If you only have a small number of options in your list, you should consider using radio buttons instead. It’s best for users to have as much up-front information available as possible and to give them as few actions to perform as possible to save them time (albeit only a few seconds).

radio buttons or dropdown fields

On the flip side, it’s also a bad idea to have too many drop-down options as it can take users a lot of time to scroll through and find the relevant entry. This is especially noteworthy for mobile and tablet users as the space to show drop-down options is significantly smaller on most native interfaces.

The style of your field ought to be decided on a case-by-case basis, depending on the audience and information you are showing – but an example where an alternative can be effective is in country/location selectors. Using an auto-complete search field that narrows down options as you type works well in this scenario as it still prompts users to select a predefined option but also allows them to narrow down their selection, rather than scrolling through reams of results.

Predictive form field

Ultimately, drop-downs should be used as infrequently as possible and replaced with other functionality that allows users to make selections in fewer clicks and with greater speed. For more alternative suggestions, Luke Wroblewski runs through multiple options in his article ‘Drop-downs Should be the UI of Last Resort’.

3. Radio Buttons and Checkboxes

Firstly, it is important to make sure you are using the right selector for the job.

Radio buttons should be used for a list where options are mutually exclusive. They should also conform to standard visual representation such as a small circle with a second circle inside when selected.

Checkboxes can be used where there is either one option that can be turned on or off, or where there are multiple items and any number can be selected. Checkboxes should be visualised as a small square with some form of cross, tick or checkmark when selected.

radio button and checkbox form fields

It’s best to observe the common visual representations for these selectors, as users are already accustomed to how they work. Conforming to this will help to avoid user frustration when the form fails to behave as they expected it to.

To make your list simple and quick to use it is generally best to ensure all options are listed in vertical columns. This makes it easier for the user to scan and removes any confusion over which selector belongs to which list item. If list items must be placed horizontally (which is occasionally necessary to reduce the overall depth of the form), it is important that items are clearly spaced to reduce any confusion.

vertical and horizontal radio button examples

Nielson Norman Group outline further guidelines for best practise use of selectors in their article ‘Radio Buttons vs. Checkboxes’.

4. Field Labels

Most online forms use labels that sit either above or inside the field, which both present different challenges.

Forms with labels above the field create unnecessary dead space and create the impression that there are more elements on the page for the user to complete. This can make users feel like the form is going to be more effort to fill out than it’s worth, causing you to lose conversions.

form field with label above

Forms with labels inside the field are more space conservative and make the page tidier and less intimidating for users; generally, when a user clicks into the field the label disappears. Inexperienced users may become confused by this though and find it hard to understand where they should be putting information – making them more likely to abandon your form.

form field with label inside

UX Movement’s article on form labels highlights a style of field design that combines both in-field and top-aligned labelling. This method creates an easy-to-read flow for the form whilst ensuring that form labels are maintained.

combined in-field and top-aligned labelling

Our favourite method of labelling fields comes from Google Material design. When the user engages with the text input field, the floating in-line labels move to float above the field. This interaction is demonstrated in the below GIF created by Matt D Smith. This design not only allows the user to view the form in an uncomplicated way, it also ensures labels are always viewable whilst also adding a satisfying animated element to excite and intrigue the user.

Google's floating form labels

Forms with left-aligned labels are also a valid option and are easy for users to scan; however, when designing with an economy of space, floating labels are still preferable due to their versatility in responsive designs.

left-aligned form field label

5. Buttons

When designing buttons for forms there are several things to think about, including wording, colour and style.

As a general rule, button text should explain the outcome of the button click, whilst remaining as unintimidating as possible. There are also certain words and phrases to utilise or avoid in order to optimise the conversion path, with ‘submit’ being the least favourite choice, reducing form conversions by up to three percent. Advice from wordstream.com is to use action packed words like ‘get’, ‘reserve’ and ‘try’. These action words should also be supplemented with descriptive language that explains the action such as ‘Try Our Free Trial’, ‘Reserve Your Seat’ or ‘Download Whitepaper’, while making sure to keep the word count low for short and snappy button text.

descriptive button text

Button colour is also very important. The primary goal of a CTA button is to attract the attention of the user, so it is best to use contrasting colours to ensure your button jumps out from the page. Red and orange buttons are proven to be the best converting colours due to the nature of how the human eyes perceives colours at this end of the spectrum. From a design point of view, it is not always appropriate to simply ‘stick a red button in’, so colour should always be tailored to suit the colour scheme of the site. One useful technique suggested by Michael Aagaard at Unbounce is to use the ‘squint test’ when selecting button colour to test which colours stand out best.

various colour options for buttons

Button size and style is also important – ultimately, users need to immediately understand that it is in fact a button and not another design element. This can be achieved in a variety of ways, including adding rounded corners, shading and highlights, and using hover states.

It’s also good practice to make it obvious when a button has been clicked to make sure users are assured that the action has been completed. Tympanus have put together a selection of creative button animation styles that are great inspiration for action-obvious CTAs.

As well as these standard form elements, try to keep in mind other functionality like date pickers, sliders and switches, which can help to simplify your form, as well as adding a level of interactivity that should keep users engaged.

Watch out for part two in the series where we will run through best practice for mandatory fields and how to build useful form validation. Make sure you don’t miss it!