thinking

Developing UX for forms

Web forms are a great invention and a very powerful lead generator for companies. This article gives a few tricks to make your contact form simpler and increase its conversation rate

Alongside image embedding, has been the greatest addition to HTML language, since 1994 when it was first introduced. As users became able to submit data to the server, the web suddenly became interactive.

Among the large amounts of forms available all over the web, the contact ones are the most used and - for some businesses - the best lead generators. Therefore, the last thing you want to do is make this process unpleasant – risking an increase in your abandon rates and encouraging data loss.

A recent study conducted by researchers from the University of Basel and Google Zurich gives 20 guidelines to improve online forms, leading to faster completion times and fewer drop-outs. This article leans on those discoveries and highlights some best practices you should follow on your website.

Layout

Make it simple.

Make it really simple.

55% of your users spend fewer than 15 seconds on a page, make it really really simple.

Start by reducing the number of fields. All of them.

When Expedia deleted one field from their registration process, they increased their profit by 12 million. Why? Because a single “Company” field broke the flow of their entire User Interface. It was not a mandatory one, it was just a confusing one.

Your clients are not setting up their match.com account, they don’t want to fill out loads of answers, they simply want more details about those socks you sell.

Don’t ask how they found you. Don’t ask if they want to receive your newsletter. Don’t ask what they don’t care about.

Request a name, an email address, and a question.

Ask them clearly. Use their language, not your jargon.

Ask them in one column.

Ask them in a logical order.

Add a label at the top of each field, left aligned, exactly where your users will naturally look. Keep the label visible so your user can later compare their answers to the labels.

If you really want to ask them if they want to receive your newsletter, make it obviously optional and move the field to the bottom.

Process

I’ve got a client. A charity. We rebuilt their donation process for them.

The process was simple enough, they had already done a good job.

But there was one very poor idea; redirecting the user to a login page if they have already donated.

Most donors give twice a year, not every day. Who remembers a password 6 months later?

Some took multiple attempts at guessing their password. And failed.

Some requested a new password. And had to retype their email address one more time

Some went all the way through the forgotten password process.

Some eventually donated once logged in.

Most did not.

Their best customers were giving up.

Users don’t like registering. This additional process may even cause half of them to leave the site.

With that in mind, we re-engineered the donation process.

Now their regular donors can login first or can donate without logging in.

Profile deduplication is done in the backend. So, if any email address appears more than once, the system recognises and merges the entries.

Don’t turn an operational issue into a usability issue.

The same thing happened to a major e-commerce website back in 2009.

They were asking visitors to login or register before proceeding to checkout.

They finally added a button to “Continue” without registering.

Purchase increased by 45% the first month.

That’s a $300,000,000 button.

Same rule applies to a contact form.

Don’t over engineer it, people just want to contact you.

Make it really simple.

Form completion

Use technology to help your users.

Input types and maximum sizes will definitely reduce bad data.

Use metadata to enable auto-complete to speed up the process for the user.

Don’t throw a generic error. Highlight what is wrong. Give guidance. Help people to understand what’s wrong and how to make it right.

Validate on the go, as the user is typing.

A study by Luke Wroblewski demonstrated a 22% decrease in errors made and a 42% decrease in completion times with real-time feedback.

Don’t be too restrictive. Forgetting a space in the postcode is not such a big deal.

I also sometimes use [email protected] to register. I know asd is not a valid domain but I just don’t want to give my real email.

If you insist, I will use [email protected] anyway.

So don’t insist.

And if you really need a user to provide you with a valid email address, make sure they understand the benefit of giving it to you.

Submission

This is probably the simplest stage, so keep it simple.

Chose the right colour, chose the right shape.

There are a lot of articles about orange supremacy on call to action.

But orange is not always a winner.

Ask Bing how they increased their annual revenue by $80 million

The most important consideration about shape and colour is how it changes the visual flow of the form, how it makes the buttons stand out.

Make sure you choose the right label.

A “Submit” button describes what the system does, but it doesn’t describe what the user does.

It can be fun or formal, it can be short or long but it must be informative.

By clicking, the user triggers the next stage of their journey.

As an editor, you write the text but it’s the user who actually clicks.

“Send my message” will therefore perform better than “Send your message”.

And finally, remove the “reset” button, the most frustrating and useless button on the web.

If you’d like to talk to us about optimising your form design, get in touch on [email protected]

Written by Bertrand Humm, Interaction Design Strategist

Back