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.
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.
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.
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.
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.
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.
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.
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.
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.
Instead of using a common ‘*’ to show required fields, we only highlighted the fields that were optional. Hope this helps you with creating forms.
If you prefer to speak with someone, call 01202 203160 or if you'd like to book a 30 min meeting to see if we can help just let us know and we'll arrange a call with one of our Directors.