The RunRex Guide To Great Form UI And UX
Do not underestimate the use of forms on your website. For a new subscriber to sign up or to get customer support or before selling a product or service, someone will need to fill a form. For your UI form, you should focus on the design for each part of the form that the user interacts with. For instance, can the user easily click the submit button or are your graphics clear.
In your UX form, focus on the less tangible aspects of the form. For instance, how well does the form work on a mobile phone, how easy is it to scan your eyes over the form. The UX form focuses on the experience the customer gets when he uses it.
Here are a few considerations from RunRex that will help you come up with great user interface (UI) and user experience (UX) Forms.
- The form should not have multiple columns
Keep your form in one column as multiple columns distract your customer.
- Use top aligned tables
Compared to left aligned tables, top aligned tables have higher completion rates while the top aligned tables align well with mobile. However, in case you are using large data sets, you can use the left aligned tables, as they can be quickly scanned, they can also prompt increased consideration and reduce height compared to top aligned tables.
- Group the inputs with the labels
Put the labels and the input together and leave enough height between the fields to make it clear for the users the label for each input.
- Do not use all caps
Text written in all caps is hard to scan and read. Users are put off by such text.
- In case the selections are less than five, show all of them
You can use an input selector in case you have more than five options rather than placing your option on the selector drop down that needs the user to click twice. In case the options are more than 25 add the contextual search option within your drop down option.
- Do not use the placeholder text as labels
When the placeholder is used in a form text, users find it difficult to check the information that is for which field, users skip fixing the errors, and the placeholders gives an additional burden for users with cognitive and visual impairments.
- Put your radios and checkboxes under each other
When you place your checkboxes under each other, users can easily scan the form.
- Calls to action should be descriptive
For instance, RunRex suggests that if you want your customer to sign up for your newsletter. Use the words sign up rather than the word submit as a call for action.
- Specify where and why an error has occurred
Show the user where the error is, and the reason for the error rather than pointing out there is an error. Specification of the error location makes it easy to correct.
- Show the basic helper text
Do not hide the basic helper text. In case the helper text is complex, put it next to the input in its focused state.
- Differentiate the secondary and primary actions
RunRex experts are of the opinion that secondary action may not even be necessary.
- Do not use inline validation while the user is filling out the field
At RunRex we recommended that you use inline indication after the user fills out the field unless the inline validation helps during the input processes such as in case of entering a password or username that has a character count.
- Length of the field should be an affordance
The field length should afford the answer length. This should be used for fields with a given character count such as zip codes or phone numbers.
- Make sense of your form
Long forms can seem overwhelming especially if they have no logical groups as users think in batches. Use logical groups for your forms so that the forms can be easier to fill and for the user to make sense of your form.
- Do away with the asterisk * and indicate optional fields
Some users might not know what you mean by the * sign it is recommended that you indicate the optional field as optional making it easier for the user to fill the form.
- Do away with some fields
Make your form shorter and seek ways to collect data other than putting in optional fields. For instance, you can collect some data using SMS, voice fingerprints, emails, biometric among other ways.
- Make your form fun
Most of us do not want to fill a form. Make it conversational and funny. Engage your user. Make it different in a good way. The designer should express the company’s brand to get a reaction. If your designer does it correctly, the completion rates can increase.
Forms are an important aspect of your online business revenue. Therefore, you must make your UI forms clearer. Easy to click, legible and use a design that is easy to the eye. The UX forms should have common elements grouped together, labels should be marked, and the form should be easy to scan with the eyes. These suggestions from RunRex will lead to better conversion rates.