Darren Wilson
Forms are a core part of our digital life. Whether it’s registering for an account, buying a present or making an appointment, we will need to fill a form to do so.
It’s very easy to annoy the user with requests for unnecessary information, difficult questions [1], a convoluted workflow or unintuitive ways to provide their data.
They can have very serious consequences when done poorly. A study found that of people completing a ‘living wills’ form to indicate what to do if they were left in a persistent vegetative state, 41% gave contradictory instructions. A similar number said their response did not correlate with what they intended [2].
Here are some tips to make sure you avoid those mistakes, to present a seamless experience for your users and prevent them from abandoning part way through.
1. Understand your users
Think about who is going to be responding to the form and what they are trying to achieve by doing so.
If there is a reward or positive experience in completing the task, users are much more likely to do so.
Take into account any physical abilities and differences that users may experience: [2]
Vision problems affecting readability
Motor control limitations affecting ability to use a mouse, keyboard and/or touchscreen device
Cognitive issues affecting a person's capacity to understand the form
2. Refine your layout
Forms should be simple. Use clear headings to provide direction of what is required of the user.
Use of white space reinforces the sense of simplicity.
Using one column of content is preferable. Having more increases the risk of interrupting the users workflow.
IF using more than one column, then the content MUST be strongly related information.
Demonstrate progress throughout a long task to equip the user with information to evaluate how much time and effort is required to complete the task.
This can be represented by showing each stage, or a percentage completion rate. Either will help reduce abandonment.
Organise radio buttons and checkboxes vertically and not horizontally, or in grid format. It is easier for the user to browse them in this structure and make decisions faster [3].
Provide the user with affordances for how much information is required. For example adjust the size of the field to indicate the number of number of characters.
3. Apply auto-focus
Using auto focus on to the first item allows the user can get on with completing the form almost immediately.
As well as saving time and reducing steps, it relaxes the user and encourages them to continue.
Place extra visual emphasis on the active field. Using stronger colours and increasing border line weight are common strategies. Use the same technique to be consistent throughout the rest of the form.
4. Create logical grouping
Users can be overwhelmed at the sight of a long form, requiring lots of detailed information.
Define logical groups of fields and create shorter sections or subsections. This simplifies a perceivable large task into a manageable exercise for the user.
Use logical groups to enable the user to discern what is required and support faster completion.
Aim to have sections that have no more than 6 separate items, making each section clearly identifiable with headings and space.
Consider how you order content also. It should flow seamlessly, almost like a conversation. Think about:
As users think
Most important first
Easiest first to make users feel comfortable
5. Position labels correctly using concise copy
A label informs the user what the field relates to. Position them outside a field, ideally top aligned or floating. Users are more able to quickly finish forms when compared to left aligned labelling.
Top aligned labelling also maps well to mobile implementation.
The exception to this rule is to left align when there is an extremely large data set, represented on a large screen.
Locate labels in close proximity to the field it relates to. This pair should have distance to adjacent pair to prevent confusion.
Be concise with label copy to enable easier scanning. One or two words should be sufficient, while the use of complete sentences is to be avoided.
Avoid block capitals as the readability is more difficult.
6. Use placeholder text to add contextual information
Placeholder text provides additional information on information required, such as format and character limit. Position placeholder text inside a field.
Choose a different style for placeholder text such that it is easily distinguishable from text entered by the user. This eliminates confusion that a field has already been completed.
Placeholder text should disappear when a field is active, hence why it is preferred that any hints are located outside.
Avoid block capitals as the readability is more difficult.
Do not use placeholder text as labels as users can forget what the field is needed for.
At the very least consider moving the placeholder field text to become a label once active.
7. Create clear, concise and prominent call to actions
Make call to action buttons descriptive, stating the intent or action. Users seek clarity on what will happen when pressed. This increases trust and confidence.
Where forms have a primary and secondary action - typically proceed and cancel - create visual differentiation. Place emphasis on the primary action by using stronger colours.
In the example below from Amazon, the emphasis on delivery is to drive people to drive people to sign up to Prime. Hence the sign up CTA has much greater prominence.
Consider disabling CTA’s until all required content has been supplied in the correct format (feedback should indicate where this is not the case).
8. Use the right tool for the job
Use radio buttons where responses are mutually exclusive. Alternatively, use checkboxes where more than one response may apply.
Where there are six options or less, present all within the form (also see figure 4). Above six, use a drop down instead.
When the list becomes extremely long, consider the use of a search mechanism to avoid lengthy scrolling and aid faster matching.
A single checkbox can be used to as a response i.e. to accept terms and conditions (if not explicitly linked to call to action button).
Avoid using checkboxes to complete a form, and instead use a call to action button.
Use of radio buttons, checkboxes or drop-downs is preferred, where possible, to free narrative. Free narrative is more complex to enter, and to process into meaningful data.
Show all selections when the number of results is 5 or less to minimise the number of steps.
Use a drop down when there are 6 or more, and list them in an order that users find logical.
9. Minimise typing
Keep typing required by the user to a minimum. Other options are preferred for a number of reasons:
Requires more time
Has a greater cognitive workload
More prone to error, especially on mobile
Is more difficult to analyse and determine what the user needs, or to record
If free text is required, consider linking it keywords, especially if there is a need to link it to an end result i.e. finding a job description.
Implement techniques to minimise the amount of detail that the user manually needs to enter, especially if you can find the information for them.
Typical examples include postcode for an address or vehicle registration to find a car. It reduces time, frustration and increases confidence and trust.
10. Use visuals to support intuition
Using iconography or imagery in a form is an effective technique in reducing the proportion of text within a form.
Visuals can be effective in linking to what the user needs and is thinking, especially where it may not be easy for the user to articulate in words, such as a fashion style. (see figure 19).
It also helps to keep the experience more engaging, therefore reducing the likelihood of abandonment. They can also help recognition if the visual is stronger than the name itself.
11. Provide meaningful error feedback
There are three underlying principles when designing flows to correct mistakes or errors [4], for forms and in general: [5]
The error message should be easy to notice and understand
The field(s) in error should be easy to locate
Users shouldn’t have to memorise the instructions for fixing the error
As such, specify the error in close proximity to the field group so that it is no ambiguity where the issue is.
Be specific what the issue is with concise copy and use colour. Colour on its own is not sufficient as that impacts accessibility.
Use validation techniques only after the user has completed an action. Informing of an error when a task is not complete is frustrating, especially when the user knows what the error is i.e. format of information.
The exception to this rule is when it helps them during the process i.e. they have used incorrect characters.
When informing of the error after the event, anchor to the error in question, so the user does not have to find it.
If there is a simple instruction to aid correct entry, then display it accordingly. Do not hide it unnecessarily requiring additional steps.
Where a field instruction requires more descriptive or complex explanation, consider using a tool-tip button, dynamically displayed when that field is active.
When to provide help:
When a user checks input
As a user types
When a user pauses
Avoid having reset / clear buttons - accidents happen and data will be cleared by mistake. They very rarely help users and the risk of having them far outweighs the benefit.
Adobe go a step further than simply feeding back on errors. They are explicit with the prerequisites for what is needed. Dynamic feedback is then given as the user types, indicating what has been completed, or not, and if there are errors.
12. Only ask for what you truly need
Apply the mantra that if you do not need it, you should not ask it. Keep things as frictionless as possible.
More fields = More obstacles = More frustration
Consider what other mechanisms could be utilised to collect that information.
If you are going to ask for information that is optional, then be explicit about it.
Use the word ‘optional’ for items that are, optional. Everything else by default is mandatory and should be completed.
Providing feedback why specific information is required can alleviate frustration on behalf of the user.
If it is beneficial to the user, this may encourage them to add the information, optional or otherwise.
13. Support with password entry
Make it clear what the requirements are prior to submission i.e. format, use of special characters, capitalisation etc.
If the requirements are not permanently displayed during entry, then update the user what they still need to do as additional characters are entered (see Figure 21).
Provide users with an option to see their password i.e. a toggle button to hide/display, with default set to hide.
Indicate the password strength when setting a new password, updating it after each character entry.
Warn the user if CAPS lock is on.
Provide a recovery option in case they have forgotten.
14. Display visual feedback
Let the user know their form has been completed successfully. Don’t leave them wondering! Especially if there is some time and effort to process the data and achieve the end result.
15. Apply some humour
It doesn’t have to be dry and serious! Depending on the context of the where the form is seen, be conversational and bring some humour into the experience.
Align copy and imagery used to marry into the brand it is being used for.
Where users are engaged and have a positive emotional reaction, so long as the usability remains unaffected, completion rates are likely to increase as a result!
16. Test, Test, Test.
Once you’re happy with your design, before you release it, test it! See what works and what doesn’t. Use goal-driven tasks to see if and where users struggle and why. Figure out what remedial actions you can take to counteract these problems.
Listen to whether the correct functionality is there for what they require to address their needs. Iterate and re-test as appropriate till you and your users are happy.
Conclusion
Forms are necessary for businesses to enable their customers to provide information and to complete tasks such as purchasing products.
They should be frictionless to support high conversion rates.
Follow these tips to optimise your solution:
Understand your users
Refine your layout
Apply auto-focus
Create logical grouping
Position labels correctly using concise copy
Use placeholder text to add contextual information
Create clear, concise and prominent call to actions
Use the right tool for the job
Minimise typing
Use visuals to support intuition
Provide meaningful error feedback
Only ask for what you truly need
Support with password entry
Display visual feedback
Apply some humour
Test, Test, Test
References
[1] Don’t Make Me Think. Krug, S. (2014)
[2] Forms that Work: Designing Web Forms for Usability. Jarrett, C. and Gaffney, G. (2009)
[4] The Design of Everyday Things. Norman, D. (2002)
Get in touch with the author
Darren Wilson
Managing Director at UXcentric
07854 781 908
Commenti