Web forms can be the burden of many designers but they play an essential role on any site.
We spend millions driving users to websites or landing pages that feature a form. If you want to boost your website’s conversion rate, there is nothing more effective at capturing important information during the checkout process or lead information on a landing page than with well-designed, optimised forms.
Use fewer (or more) fields
For awhile there has been some debate about the specific form length to maximise conversions. In reality, there isn’t a specific length that works better. Sure, shorter forms get more of one type of conversion, but longer forms get another type. Fewer fields in a form will produce a higher quantity of conversions but not necessarily a higher quality of conversion.
By having a shorter minimal form that only asks for leads’ names, email addresses and phone numbers, you’ll get more conversion because there is less effort involved to input that information, yet the quality isn’t great as you don’t know how relevant these leads are to your business. Creating a longer form that collects more than just names, email addresses and telephone numbers, you’ll have more information to better decide how to market to them.
Forget mandatory registration
If there is one thing that can kill conversions quickly when your customer is already set on buying a product, it’s the apprehensive registration process. We already know that forcing customers to register or sign-in before a purchase will lower conversion rates because of the additional steps.
When designing forms for a checkout, make them as short as possible to encourage consumers to go through with the intended purchase. People are impatient, especially when buying something and no one wants to waste extra time before they can checkout.
A great example is Firebox. The unusual retailer features an initial checkout page that doesn’t force shoppers to register again or force registration on new shoppers. Instead, it allows returning customers to input their email address and password or go directly to the checkout-as-a-guest, where they’ll just input basic information if they’re a new customer.
User experience is vital for onsite form conversions. If someone skips a mandatory field or fails to complete the field correctly, it should be highlighted immediately. Presenting users with an error message after the entire form has been filled can be extremely frustrating and difficult to determine what area was incorrect.
The example from Kin HR is a great showcase of inline correction. Instead of waiting until the user submits the form, they immediately notify the customer that they’ve missed a section. This makes it quicker and easier for the user to rectify their error.
Clear labels and explanations
Twenty-one years since HTML forms were created and it’s still baffling to discover that some designers still neglect the fundamentals to ensure that users can make sense of a form straight away.
The purpose of using clear labels and explanations in forms and their fields is to minimise and potential problems when inputting data, many of which come from being confused as what to enter.
MailChimp however; is one website where clarity dominates. We can immediately see how the clear labels are understandable and easy to read. By the labels being outside the input box users are able to always see what is expected of them, even if they’re already started typing. The explanation fields are also clear, such as the one under the email address box, which is made bold and a clear link to further information.
The standard form is made from a number of fields that leads fill in basic details like their name, email address etc. It’s a little mundane and repetitive. Try mixing things up and playing around with some ideas for better conversions.
Narrative forms, are ones in which the conversation is kept going, instead of ending it where the input fields end. This type of form continues to engage your user by prompting them to fill in the fields in a first-person narrative. It’s more personal more enjoyable for the end user. So next time you’re thinking of playing it safe, take a small risk and it may pay off.
Tribal Media have executed this method perfectly, they have used a more personal approach to their enquiry form and it feels a lot more interesting and engaging that your standard form. The placeholders help the user understand what is required to complete the narrative.
We all want to avoid as much “spam” as possible and many of us use captcha codes to help filter out the qualified entries. Although this part of the form can be very effective at doing what it should be doing, it’s important that it’s not too difficult to read or engage with. Previously, many brands used captcha codes that would include combinations of letters or phrases in different fonts and sizes, which in turn was hard to replicate. Captcha code has today, become more user-friendly as seen below. Its simplicity in design will help with conversion.
Multiple methods of contact
Whatever the reason you want to collect information from your users, you should be providing alternative ways to contact you. Not every customer wants to complete a form, provide a prominent phone number to build trust. If you’re a retail store, offer your location so people can find you and visit in person. By offering more options to contact you, you instill more trust and encourage engagement.
What we hoped to show is that smart design focused on effective forms that deliver a seamless user experience is the center of every successful form. By putting ourselves in the shoes of the user as we create these forms, we can create better points of engagement and drive better results.
We also need to remember that designing a form is just one aspect of web design and we need to create more engagement throughout to encourage higher conversions. All these tips are tried and tested, which is why you’ll see them on some of the most successful online stores today.