Web Forms, we all have our share of filling up countless such forms. Some of our experience were pleasant, and some were just down right horrible. In this post, Joe Leech from cxpartners, bring together their experience in designing forms that are easy to use and get users through the process as quickly and easily as possible.
- Simple form field
- Optional fields
- Support text
- Help text
- Date fields
- Buttons
- Inline validation
- Postcode look-up
- Entering currency values
- Password strength
- Adding more than 1 email/phone
- Layout and examples
- Page level error handling
- Some no-nos
- Download cheat sheet as PDF
Simple form field
Centre align all form fields. Use a different style of text for the label versus support text. The further help field sits on the right hand side of the input. The label should follow sentence case; that is Upper case first word, then lower case second word(s).
Select boxes where possible should default to a value. If this is not possible default to italic text, slightly grey in colour saying ‘Please select…’
Place radio buttons underneath each other where possible. This allows for easy scanning:
Checkbox buttons take the same form. These can be listed in rows if needs be but only if there are more than five.
Optional fields
Users do not always understand the mandatory field marker (*) and on long pages the explanation can be lost. Where possible mark optional fields.
Support text
Support text should be used to give key information that is essential to complete the form field. Examples include password format and explanations for data collection.
Help text
Help text should be used to offer advice on a complex question. Where possible is should offer example answers and the format of that answer.
Help text should be activated by click and be a layer/lightbox next to the form field. Also if needed include links to contact form and the telephone number.
[back to top]
Date fields
For date of birth fields do not include a calendar look-up. Always use select boxes to minimise errors.
With standard date fields launch the calendar on focus on any of the form fields.
Adding select boxes for month and year aids look-up and a Select today link resets the calendar. Use a highlight colour to indicate Public Holidays if needed.
UK calendars begin on a Monday (many off-the-shelf JS calendars are American where calendars begin on a Sunday, the JQuery calendar offers it as a setting).
[back to top]
Buttons
Where possible there should be 2 kinds of button on the page.
- Support buttons such as postcode look-up, refresh, back etc.
- Primary button. There should be only one of these and it should be larger and with a different design. Primary button should include chevrons.
Having only 1 primary button clearly indicates to the user the most important action on the page. If more than 1 primary button is needed consider splitting form over 2 pages.
Where possible add a description to the primary button to indicate what the next screen will contain.
The final payment button should include a tick and some explanation text to give confidence to the user to click.
Inline validation
Where possible all form fields should validate following cursor focus leaving that field.
Where possible indicate why the form content is not correct. Do not use words such as error, problem or issue. Be positive.
Preselect the first option in the list.
[back to top]
Postcode look-up
Postcodes have on average 15 properties associated with them. Each of these properties may be broken up into flats. Therefore a large possible list of properties may result. Note positioning of
button under the field – buttons to the right can easily be missed.
If the user cannot see their address offer a link. On click this will display the manual address entry fields.
[back to top]
Entering currency values
Users enter currencies and monetary values into forms in a number of different ways. Where possible the system should accept the following options:
Password strength
Where possible use plain text rather than images to aid accessibility:
Adding more than 1 email/phone
Many users, especially those under 25, may not have a landline number or indeed consider this their main phone number. Allow users to select which phone it is they want to offer as a primary number.
Layout and examples
Group related form fields together into smaller chunks. This makes the form feel easier to complete and less intimidating.
Page level error handling
There may be situations where errors can only be managed at the form submit level. Offer a direct link to each error (to a maximum of three). Clicking on the ‘And 3 more’ link will show the full list of hyperlinked errors. Linking to errors in this way offers greater accessibility to users of screen readers.
Some no-nos
- Do not place form fields side by side in columns. Users often do not see the form fields in the right column.
- Only use 1 field for telephone numbers (i.e. no area code box) as many users will try and put the full number in the area code box.
- Avoid long, complex, text based explanations at the top of forms – nobody ever reads them.
Download cheat sheet as PDF
v1-Form-design-crib-sheet.pdf [252kb]
[back to top]
Joe Leech
Joe has been working in UX for 7 years. Joe has worked with clients such as Marriott, eBay, Nokia, theTrainline, Microsoft, TUI Travel, Peugeot, Virgin and the Co-operative Bank helping them to be more strategic in their customer focus and make the digital stuff they do measurably better.
