The A to Z of UX - F is for Forms: 16 tips for how to design a great form

Updated: Dec 16, 2019

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.

Figure 2: Amazon Account sign-up single column

IF using more than one column, then the content MUST be strongly related information.


Figure 3: Facebook Account sign-up page with a multiple columns for strongly associated information i.e. First name and surname

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.


Figure 4: Amazon checkout - process stages

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].


Figure 5: Amazon delivery options - Radio buttons

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.


Figure 6: John Lewis checkout - Varying field length


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.

Figure 7: Google account creation - auto focus


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.


Figure 9: LinkedIn account creation - Top aligned labels


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.


Figure 10: Tesco account creation - Placeholder text

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.

Figure 11: Gmail account creation -dynamic field label / placeholder text


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.


Figure 12: Trainline ticket purchase account creation - Clear CTA

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.


Figure 13: Amazon delivery options - CTA’s

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.


Figure 14: Enterprise hire car selection tool - checkboxes


Figure 15: Google settings - single checkbox, radio button, multiple checkboxes



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.


Figure 16: Money Supermarket home insurance quote - keywords

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.


Figure 17: Confused vehicle insurance quote - vehicle finder tool


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.


Figure 18: Thread account registration - brand affiliation


Figure 19: Thread account registration - style selection imagery



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]

  1. The error message should be easy to notice and understand

  2. The field(s) in error should be easy to locate

  3. 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.

Figure 20: Money Supermarket home insurance quote - errors

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.


Figure 21: Adobe account registration - dynamic feedback


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.

Figure 21: BBC sign up - confirming why information is needed

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.


Figure 22: Absolute Radio account registration - Passwords


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.


Figure 23: Money Supermarket vehicle insurance quote - form submission feedback


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!


Figure 24: Slack channel setup - humour


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:

  1. Understand your users

  2. Refine your layout

  3. Apply auto-focus

  4. Create logical grouping

  5. Position labels correctly using concise copy

  6. Use placeholder text to add contextual information

  7. Create clear, concise and prominent call to actions

  8. Use the right tool for the job

  9. Minimise typing

  10. Use visuals to support intuition

  11. Provide meaningful error feedback

  12. Only ask for what you truly need

  13. Support with password entry

  14. Display visual feedback

  15. Apply some humour

  16. 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)

[3] https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

[4] The Design of Everyday Things. Norman, D. (2002)

[5] https://www.nngroup.com/articles/errors-forms-design-guidelines/




Get in touch with the author


Darren Wilson

Managing Director at UXcentric

darren@uxcentric.co.uk

07854 781 908

View all >

© 2017 UXCENTRIC Ltd. All Rights Reserved. Registered in England & Wales, based in Rugby, UK. Company number 11033647.