How we improved the UX on our forms.
Standing between the user’ goal is most of the times, a form. They are the predominant way of interaction on web.
We can find different types: Signup forms, application forms, put-your-email here to apply (and receive SPAM for life!). So many forms, to be completed by users that don’t want to waste their time.
Users expect quick answers, or we loose them.
On Funding Circle, we are working on improving our Borrower experience, rebuilding application forms so borrowers can apply to a loan faster, with less errors, smoothly.
So, what have we done so far to improve the user experience on Forms?
Removed unnecessary fields.
It’s about content-first, what do we actually need from the user? Don’t ask for information you wont use. Go one-by-one. Do they add a value?
Group related information.
Think about the flow from one set of questions to the next (don’t add unnecessary barriers). Establish a conversation, make it feel natural. Organise the information in a way that is easy on the eyes. Clearly define labels, separate information, use white space where it is necessary.
Added progress bars
Notify users where they are on the progress (specially if it’s a long process!). Add time it takes to complete. (If you say it’s a 1-minute form, it should be a 1-minute form.)
Think about the user: focus on your personas
If you already researched and have your personas, call them for testing. How would each of them complete the forms? Each persona has difference behaviors & needs. Observe the pain points. What can you do to make their experience better?
Mobile-first approach
40% traffic of our site comes from mobile & tablets. Start mobile and work towards desktop version. With so many devices and screens sizes, site should be responsive at all times.
On desktop, forms may appear to require both keyboard and mouse. However, in most cases, they can be completed by using the keyboard with little or no need for the mouse. Using the keyboard instead of the mouse can reduce the need to switch between them and make data-entry more smooth and speedy.
Also, users that tend to look at the keyboard while typing (probably less tech savvy), generate more errors.
Improved validation states
Providing a real-time inline validation can help people complete web forms more quickly and with less effort, fewer errors, and more satisfaction. We are notifing good/wrong validation when the user moves to the next field.
Don’t show an error if the user hasn’t started written, you haven’t given the opportunity to type it. It could frustrate the users. Check this great article by Luke W. on A list Apart, about inline validation before — during — & after.
Also, for our one-page-application (+18 fields), we want to apply the errors-only approach (first read on an article by Christian Holst on Smashing Magazine).
Implementation appears to be easy. We are looking forwards to plan a usability test before releasing it.
Help the user.
Keep and eye on those fields that users get more confused. We have added a tooltip on focus when needed (ONLY when needed, we don’t wont to crump all the design).
On mobile, help messages should appear over the input, and be visible when typing.
Supporting & encourage messages on the sides, again, they should be there if they provide value (like trust, help). Copy should be concise, easy.
To sum up, forms can be complicated, work on UX from the beginning. Work on to keep them clean, grouping important information together, with clear & easy to understand copy. Encourage the user to complete with correct use of validation. Provide help.
Most important, evolve and test your product.
