Boost Your Client’s Conversion Rate With These 7 Form Design Tips

Grab a piece of paper and scribble down the five things you consider most important to any website design. Hopefully forms made it high on your list of priorities, because whether its a contact page, sign-up form or credit card payment, your client’s income relies on visitors clicking that submit button.

Poor form design leads to abandoned shopping carts and traffic walking right out the exit door and you need to work closely with developers to find the right mix between visual impact and performance. So today we’re looking at seven key elements to web forms and how you can boost your client’s conversion rate with better design.

#1: Earn User Trust

The first thing any form needs to say to users is that they can trust your client with their payment, personal details and privacy. Whoever puts the code together needs to make it secure in every possible way, but it’s your job to communicate this security through a design that speaks quality.

You can spell it out for visitors with promises like “We will never share your information with third parties” (as long as you know this is the case), but can you imply security with a professional design that earns user trust. It’s not so difficult to achieve this with contact forms, but payments can be a much trickier task – however UXPin does a great job with this payment form design:

UXPin-Credit-Card-Form-UI-Design-Pattern

 

#2: Make It Clear

Communication is the common theme when it comes to form design and it will crop up throughout this article. Every aspect of your form needs to give clear instructions to every user and you have to avoid confusion at all costs. Sadly, there isn’t any perfect formula when it comes to form UX, but there are a number of best practices that you can follow.

First of all you should avoid horizontally aligned labels as they make your form harder to digest, as illustrated by this image featured in a great blog post by That Web Guy:

label_allignment

While you should also be careful with placeholders as they have been found to cause more confusion that they resolve in many cases. This is something you will need to discuss with developers, but placeholders that disappear before the user starts typing can cause particular issues. And it’s also a good idea to stay away from asterisks for required fields to avoid any confusion. Go for text that actually says “required” next to inputs and you can’t make things much clearer than that.

The usual design concepts apply as always and your best bet is to keep things minimal and use plenty of space to make your forms easier to navigate. Feel free to get creative with your forms, but this is one part of your web designs where you might want to stick to what users know and trust, because forms and confusion are a costly mix.

#3: Make It Easy

Just as your forms need to be clear, they need to be equally simple to use. Nobody likes to fill out forms – especially when it involves parting with their hard-earned wages – and the last thing you want is a user giving up half way through a payment because your form is too complicated or frustrating.

Simplicity is the key and you should ask as few questions as possible when it comes to forms. Your clients may give you a list of details they want from every user, but you need to come up with the best compromise you can. Less is definitely more in this case and the fewer fields you have in your contact form, the more conversions you can expect. Not only because it makes your form quicker and easier to use, but because personal data is, well… pretty damn personal to people.

Check out this nice, simple contact form from WebPlace that follows all the pointers we have covered so far:

easy

#4: Be Mobile Friendly

As always we have to talk about mobile devices and there is plenty to think about when it comes to mobile-friendly forms. Luckily, most of this comes down to HTML5 markup that make typing data into fields more intuitive – and if you do your own coding you can find documentation over at HTML5 Rocks.

From a design perspective, most of the principles we have already covered are ideal for a mobile first approach. Large text inputs and plenty of space make it easier for users to select input fields on touchscreen devices, while vertically aligned labels make a single column layout much simpler for smaller screen sizes. Just don’t forget to spare a though for colour and contrast as dark designs can be difficult to see in direct sunlight.

Screenshot 2014-09-17 at 16.43.21

#5: Give Live Feedback

Another task for the developer of your contact forms is to integrate client-side validation that gives feedback to users as they fill out your forms. The aim is that a user never hits submit until they have correctly filled out your form, avoiding any errors or second attempts. This is why communication is so important and it’s a good idea to give some sort of live feedback while users fill out their details.

You can see an example of live (or inline) validation in this video:

Just be mindful when it comes to live validation as a number of studies have found that this approach can actually cause further confusion – especially when it is overused. As a rough guide, only use inline validation when the answer is not obvious or mistakes are likely. You can read more on validation issues in this article from A List Apart.

#6: Focus On The ‘Submit’ Button

All your hard work comes down to the user hitting that submit button and until that happens your design hasn’t been a success. So it makes sense to put a heavy focus on your submit button and colour is hugely important here. You should already be making use of accent colours in your design and your submit buttons need to stand out like this simple sign-up form by ViziCities:

Screenshot 2014-09-17 at 16.59.42

You’ll also notice that the submit button in this ViziCities design doesn’t say “submit” and that’s because the default text for submit buttons doesn’t do conversion rates any good. Buttons should be instructive and speak to the user directly in either first or second person.

Screenshot 2014-09-17 at 17.06.02

#7: Confirm Success

Finally, users need to know that their message, sign-up or payment was successful – so make it clear with a friendly little message to let them know everything went without a hitch. Thanks to Ajax and server-side JavaScript users are no longer redirected to another page after they hit submit –  so you can get creative with your success messages and even prompt users to take another action along the conversion process.

Screenshot 2014-09-17 at 17.22.19