How to Create User-Friendly Quote and Buy Forms

The quote and buy (Q&B) journey can be complex. Ensuring a positive user experience is vital to ensure potential customers are not lost along the way. 

In this post, we run through the best practices and principles to help UX designers create user-friendly Q&B forms.

1. Do not lose sight of the user’s objective

At the quote stage, the user’s main goal is to see a product overview and a price. Your job is to build a solution that allows quick and easy access to that information. 

Most people like to compare quotes from different providers. Industries such as personal finance, insurance and utilities are dominated by comparison sites.

This means the user is likely to gather quote comparison results from more than one website. So they will be comparing the Q&B user experience offered by the different comparison sites. 

2. Use a single-column layout

It can be tempting to use all of the white space on the page with a double column layout but doing so can bring ambiguity and confusion. 

There is usually a set order to Q&B forms, with questions following a logical sequence. With two columns of questions, some users will read left to right before moving to the next row. Others will complete one column before moving on to the next. 

Although using a single column layout will leave the right hand of the screen blank, the form will be much easier for the customer to navigate. 

3. Adjust the size of text fields and input boxes to fit the information they will contain

Making all of the boxes the same size gives the form a clean edge and neat appearance. But it can also increase the chance of input errors, i.e. users entering the wrong information in the wrong box. 

This is a common problem for payment information boxes. When inputting payment information, users have to enter numbers of very different lengths, in boxes that appear one after another. For example, the account number is much longer than the security code. 

If you use three boxes the same size, users are more likely to put the wrong information in the wrong box. Using different sized boxes will help to reduce the risk of data input errors. 

4. Be smart with help text and use it sparingly

For each question or field, ask yourself whether help text is absolutely necessary. For example, most people don’t need instructions on how to enter their first name. 

Very often, help text is included with every question, but it only serves to repeat the question. If help text is really necessary (i.e. to define a technical term), then show it prominently, rather than hiding it behind a help icon. 

5. Consider using radio buttons instead of drop-down menus 

For questions with more than one possible answer, drop-down menus can be a good space saver. However, radio buttons are often an even better option. They are easier to scan, require fewer interactions and are not subject to style changes applied by the operating system.

As a general rule of thumb, use radio buttons for questions with less than six possible answers. For questions with six or more possible answers, use a drop-down menu. 

6. Only use visuals if they improve comprehension

Remember, your objective is to help users work through the questions quickly and easily. Focus on comprehension – making it easy for users to understand what information is required. If visuals can help with that understanding, use them. 

For example, illustrating the different door lock types featured in home insurance quote forms. 

Do not just include visuals because they look nice or because you think the page needs a splash of colour. 

7. Copy is just as important as buttons and text boxes

Users should be able to quickly understand what information they need to enter into the form. 

The way a question is written plays an important part here. Keep the tone of voice plain and simple, using words everyone will understand. If you have a choice to use a simple word or a complicated one, use the simple one. 

Avoid unnecessary use of technical language. If technical terms do need to be included, give a definition using help or hint text. 

This may seem obvious, but often the questions are drafted by product and technical subject matter experts. Making sure the copy is easy to understand often falls to the UX designer. 

8. Avoid using a conversational tone of voice

‘Hey, tell us your name’ might seem fun at first – but the novelty soon wears off. Think again about your overall objective – to help the user complete the form quickly and easily. 

‘First Name’ does the job in half as many words, and there is no chance of it annoying a potential customer by being over-familiar. 

9. Remember to include the fundamentals

• Progress bar – no one wants to be trapped in a never-ending Q&B form
• Back button – always provide a way to go back to the previous step
• Review stage – include an option for users to review their information before committing to buy

10. Know what a bad experience looks like – and avoid making the same mistakes!

It is crucial to consider the things users do not want to do at the quote stage – but they are often forced to endure. Incidentally, these tend to be the things providers want users to do. 

For example:

• Signing up to create an account and password. This can come at a later stage. 
• Giving more personal information than is necessary. This often ends up being used for marketing purposes. 
• Quirky UI features, for example auto-scrolling or animations. These try to either anticipate users’ needs or give them the ‘wow’ factor. They are annoying at best – at worst, they can make the form more difficult to understand, meaning it takes longer to complete. 

To summarise, simplicity is key. Your objective is to make the Q&B form as straightforward as possible. This will help to avoid form abandonment and ensure a positive user experience for potential customers.