We were recently tasked with the redesign and reengineering of the online booking process for one of our travel clients. Because of the vast amount of options when booking a holiday, a lot of UX and UI thinking had to go into this. And due to it being such an important part of the whole website – after all, it’s bookings that they want – we wanted to design a nice and easy process for the user.
Badly implemented forms can make the user frustrated and want to give up, therefore losing a potential sale or booking. In fact, forms are usually the single biggest drop off point in the conversion funnel.
Below is some of our thinking.
Clearly explained form fields
If form fields needed explaining, we added an ‘info’ tooltip next to the title. When hovered over, the user could see a popup modal with clear instructions related to the question. This will help the user on the journey, making the process as easy as possible.
Top left labels
Research shows that aligning form labels above on the left increase completion time. The reason for this is because it flows better, making it easier visually to complete.
In-line validation
We used this to either approve or correct as the user completes the form. For example, if a email address isn’t valid, it gives an error message as they move on to the next field. This saves annoying the user when they try to submit the form, only to find lots of errors.
Field types that reduce the amount of clicks
When asking a question on the form we tried to use clickable icons instead of dropdowns to limit the amount of clicks. This also helps speed up the completion time.
Postcode lookup to reduce amount of field entries
To save the user time, we used postcode lookup to reduce field entries. By asking for just the house number and postcode, the lookup then suggests the full address.
Use of predictive search for certain fields
For longer fields with lots of pre-defined options, we used predictive search. An example of this was when getting the user to choose their country. This reduces the amount of typing.
Input fields sized on expected input
Instead of designing all our forms the same widths, we sized them based on the expected input. For example, a date of birth field will only require 8 characters. These being DDMMYYYY. In comparison, a full name could be 100% full width. Doing this makes the form easier to read.
Easily tappable areas for mobile (mobile first design)
The chances are the user will be using your form on some form of touch device. With this in mind we used the recommended minimum touch area of 44px x 44px, roughly a finger size.
Clear to see what is optional and not
Instead of using a common ‘*’ to show required fields, we only highlighted the fields that were optional.
Hope this helps you with creating forms.
