Building a web page or web app takes a lot of time, resources and patience. I get that. And because of these reasons, the little things get overlooked.
When building a new website or application, you probably count your website form as one of those little things.
But it really shouldn’t be overlooked, this little thing.
That is why I’m going to talk about the UI mystery of web forms and how you can build an awesome form for your website yourself.
Before we take a look at the UI of great and bad forms, we need to come up with a common understanding of what a website form is.
According to Wikipedia, a form – or web form – can be defined as the following:
A webform […] allows a user to enter data that is sent to a server for processing.
Or as W3C would describe it:
The form element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
Forms can therefore have various options and fields. A form can used for entering payment data, or it can be used to search for a keyword on a search engine.
To sum it up, web forms are a useful tool for tracking certain information from your website visitors.
And they are probably the most important element on your website when it comes to achieving your business goals.
Typically, forms are made up of all kinds of different input fields. Nowadays, the following form elements are quite common in a website form.
and many more.
As seen in the example below, we’re making use of radio buttons in order to let our website visitor choose the preferred pizza size:
<form> <p><label>Customer name: <input></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> </form>
Websites always have a purpose. This purpose could be something as simple as to inform people about something.
Or entertain them. It could also be that the purpose is something more direct and the website wants you to buy something or even actively help you achieve something.
For many businesses, the website becomes a sales funnel. And the contact form might be your call to action.
If you’ve ever looked into it, you’d already know.
The differences between a great form and a bad one can be almost too subtle to notice or even be completely counterintuitive.
The color of a button, the placement of the form, you name it, everything seems to have an impact on a form’s performance. It’s hard to give specific guidelines on designing web forms since there’s no one true solution. But there are some best practices that give you a great idea of where to start.
(login form on invisionapp.com)
(sign up form on typeform.com)
When talking about great form designs we have to consider the user story. Forms can be bad not because of design or copy, but because of where you place them.
Your subscription form should be placed near the part that tells them about what to expect. It’s all about flow, and your form’s placement is key to converting your users and keeping them in that flow.
Some examples of bad forms can be found on badforms.com:
Once you’ve guided your audience to the form, make sure that it stands out on its own.
Your users should know something’s expected from them just from the look of the form. Use colors to your advantage to make it stand out. Contrast is your friend.
(source: http://badforms.com/labels-inside-fields/)
Text should stand out and be readable.
The styling should be consistent and well thought-out. Most importantly, the position of the text and how it’s represented can make a huge difference to your conversion rate.
You’ll probably be telling people all about your product or service. While the design part of the web form has a big impact on making it stick out and making it “feel” relevant, the copy actually makes it remarkable and is what convinces people to click through after they’ve had that first glance.
Now, copy goes beyond just the words and here too, styling makes a difference.
Simple things like font colors and background colors can make or break a form.
But even font sizes, copy placement and other seemingly small elements can have a tremendous impact on the performance of the form.
When you know that, there are also couple of things you should think about when you’re designing web forms which are really only due to the content, not the styling.
No one likes spending a lot of time filling out a form.
Making sure you only ask for the most relevant information is pretty key to your conversion rate.
But it’s important to understand that the form length isn’t the only factor to keep in mind. The purpose of the form is pretty important as well. As it happens, people seem to be pretty happy filling out a long form for a survey or for a contest, but not as happy filling out a purchase or a contact form.
To go around the limitations of form length, a social login can help quite a bit already. Your customers only have to click a button and a site they already trust keeps their data. It’s a win-win.
However, when you need more information you’re still going to have to ask for it.
Put it into practice and start testing. Here’s where the actual work comes in.
You’ve designed the entire form, added the perfect copy and you’re ready to go live.
But as I said before , there are no certainties when it comes to form design. The smallest changes can have the largest impact. That’s why the first step you need to take is to test out your forms.
You’ve probably thought of more than one piece of copy for your website’s forms. That means you have different headlines that might work, different calls to action for your form buttons. But there’s more to it than that.
Changing things like field lengths, form location, size and general styling are all things you can test.
So does that mean you should? If there’s even the slightest doubt, there’s only one way to find out. Simply create an account with Optimizely or host your site at Unbounce and start testing.
A/B testing your sign up and contact forms won’t get you anywhere, if you’re not making sure to have a test plan in place.
So what should go into a great test plan for testing your web forms?
I know this was quite a lot and probably way too much to grasp at once. So what are my key learnings when it comes to designing great web forms?
This article was brought to you by Usersnap – the #1 customer feedback platform – and feedback platform (QA, UAT) for every web project. Say hi on Twitter.
Ever wonder how some companies make product updates feel like the highlight of your day? …
Picture this: You’re in the middle of a hectic workday, balancing strategic decisions with daily…
Ever wish customer feedback came with subtitles? With the right feedback analytics tools, you can…
Survey design is the backbone of effective data collection, enabling businesses, product managers and researchers…
Wondering how to master Jira’s vast capabilities for strategic project/product success? Epics are the key…
In this article, we walk you through the ultimate in-app feedback how to strategy, including…