Whether you are wanting to capture user details through a newsletter sign up form or wanting a user to complete a purchase online, there will no doubt be a form present. Forms are a key conversion tool, therefore creating forms that are easy to use and create a smooth journey for the user is crucial.
Form design takes into consideration all factors that influence a web form, from layout to UX. These forms will sit on your website where your visitors input and submit information, directly influencing the likelihood of a conversion.
The design of your forms will impact the overall user experience, If a user gets frustrated with your form or it’s not clear what they need to do, you risk the chance of them leaving your site or abandoning their order. Whereas a well-designed form will help to increase your conversions and provide your customers with a positive experience.
26% of people abandoned their purchase during checkout due to a long or complex process
Forms are critical for converting customers, here at Clicky, we always try and make the process as pain-free as possible. We’ve detailed the key elements for you to consider for successful form design.
This refers to the visual elements of your form input fields.
Form fields are usually rectangular or a simple line, people recognise these shapes as form fields so we should try to keep to these shapes.
Each form field should be labelled, this tells the user what details you require of them. It’s important that the labels are always visible so that the user can go back and check all their details are correct for each field.
A drop-down menu in forms allows a list of answers that the user can choose from. The lists should be ordered alphabetically so that the user can easily find the item they’re looking for. If there is an item which is likely to be selected by most users, for example, their country, this can be placed at the top of the list and separated from the rest of the list with a dividing line.
For your form to work, you need a button and it is important that this button is easy to find on the page. The text within the button should clearly state what will happen once the button has been clicked, such as, “Add to basket”. Buttons can be styled differently to suggest whether it is a primary or secondary action. Sometimes buttons can be colour coded, for example, a green button might be used to suggest a positive action.
Tell people what to expect after filling in your form, if a user is signing up for your monthly newsletter then it could be that you tell them what to expect in your newsletters – news, special offers, latest products, etc. If your form is quite long it might be worth telling the user how long they might expect to spend filling it in.
Forms that are arranged in one column make it easier for the user to fill in as we naturally read top to bottom.
Really long forms are off-putting – when creating a form ask yourself if you really need all the information you are requesting. If it is a case that you will be getting in touch with the user by phone/email you can always ask additional details once signed up. If your form contains fields that are optional then consider labelling them with “optional” instead of using an asterisk next to required fields, this is due to users associating asterisks with complicated contracts or hidden statements.
For long forms, you can group associated fields under one heading, for example, “Your Details.” It’s also worth putting a simple progress bar or breaking the form into steps on longer forms so that users know how much of the form is left to complete.
If the user has filled in the form incorrectly, you should show them clearly what has gone wrong. As well as using a colour such as red to highlight this, you also need to tell them exactly what they need to do to make things right. Animation can also be used to indicate a wrong input, for example sometimes you might see a shake when you input your password wrong. For longer forms it can be helpful if you place form validation as the user goes along, putting a simple green tick next to any completed correctly fields will be beneficial to the user.
All the form fields on one single page, this is the most common way of laying out forms and is especially suited to shorter forms.
These types of forms are often used during check out processes. The components should be grouped at each step, eg. your details, billing address, payment details. These multi-step forms help make long forms less daunting for the user.
These forms ask for one thing at the time in a natural conversational way, because people see them more as a conversation the process doesn’t seem as long as they can’t see the actual length of the form.
Forms may not be the most interesting things to design but they can have a huge impact on your business, so putting in the time to get them right really is necessary. Small changes can make a huge difference!
Put the time in to ensure you're getting the most out of your forms.