Forms don't have to suck.
The User Experience of forms (or UX forms) is the process of enhancing the user's satisfaction by improving the usability, accessibility, and efficiency of interactions with these forms. These days, forms are present on almost every website. We all have come across them, be it before purchasing items, signing up for subscriptions, social networking or joining a discussion forum. It’s hardly an overstatement that they’re an indispensable element for information sharing today.
As a UI & UX designer, my job is to make complex SaaS websites easier to understand by making it interactive and user-friendly. It was after I started working that I realized UX Website Design has a lot more to it. The designing and development team at our workplace is focused on enhancing visual details, which mostly include the functional elements.
See the Pen Simple register form by Rahul Rathi (@rhulrathee) on CodePen.
The User Experience of forms plays a crucial role in the success of a website or app. If users can't find your forms user-friendly, they will not fill the form up. Thus, dollar leakage. This article takes you through the ideas to keep in mind when designing your forms. The UX industry places an immense importance on usability. User stories, sitemaps, wireframes, and usability testing get all the limelight—while User Experience of forms fades into fuzziness.
With all that in mind, here are UX Ideas for creating user-friendly forms that make it really easy for users.
Always help your user. If you previously have some data about the user, pre-fill those fields or even don’t show them at all.
See the Pen Remove Chrome Autocomplete Background Fill by Rahul Rathi (@rhulrathee) on CodePen.
- Most of the times you can easily detect a user’s country and the city by IP or geolocation.
- If a user came to the checkout process from your newsletter/marketing campaign, you definitely know his email. Hence, pre-fill the Email field.
2. Group the fields
If there are a lot of fields in your form, try to break them into groups by adding some additional spaces or section titles between them. This methodology gives a respondent the sentiment of continuous noting and rejects such considerations as “An excessive number of inquiries! I'll leave this for tomorrow".
3. Multi-step forms out-perform single-step forms.
So for what reason multi-step forms out-perform single-step forms? Here are a couple of conceivable reasons:
See the Pen Interactive Form by Rahul Rathi (@rhulrathee) on CodePen.
Multi-step forms can help overcome psychological conflicts The first impression seems less overwhelming.
The progress bar assists users to complete the form.
You can ask personal questions (e.g. Phone Number) on the final step when users have more ‘skin in the game’ from filling out previous steps.
4. Shorten forms with conditional logic
Conditional logic is where you only display a question if a user has answered a previous question in a certain way.
See the Pen conditionize.js - Conditional Form Fields w/ Data Attributes by Rahul Rathi (@rhulrathee) on CodePen.
5. Use zip code for lookup addresses
When asking for addresses, use a postcode/zip code lookup to reduce field entry. When asking users to fill out their address, it’s best practice to just ask for a house number and postcode/zip code, and then use a lookup service to suggest the full address.
I hope these ideas will help you design better forms.
For more ideas check out Learn the 22 Do's And Don'ts Of making your website forms.