The UI Mystery Of Web Forms
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 web 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.
WHAT IS A WEB FORM?
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.
MODERN WEB FORM ELEMENTS
Typically, forms are made up of all kinds of different input fields. Nowadays, the following form elements are quite common in a website form.
- text input
- radio button
- select element
- text area
- button element
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>
CURRENT STATE OF WEB FORMS
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.
FORM PLACEMENT
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.
CONTRAST
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.
COPY
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.
CONTENT
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.
- Content should be relevant — If you made a promise, keep it and make sure the form reflects it. The link between what your users just read and what you’re asking for must be clear.
- Content should be concise — No one has the time, so making your copy to the point and as clear as possible is key. Keep in mind, any reason to doubt the purpose of the form or any ambiguity can have a huge impact.
- No errors — This is true for any copy, but forms get a lot of extra attention from your visitors. That’s why your forms should be completely without errors and in this way, instil trust.
SIZE MATTERS.
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.
ALL IN FOR TESTING.
Put it into practice and start testing. Here’s where the actual work comes in.
You’ve designed the entire web 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.
SUMMARY.
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?
- Make sure that your web form has one (and only one) purpose
- Make sure that this purpose matches the user story on your web page
- Place your forms somewhere relevant. Meaning: place them where the user should and will find them.
- Content & size matters.
- Over-invest in designing your web forms.
- Put your forms out into the wild for testing. Without proper testing you won’t get anywhere.
Written by Thomas Peham from Usersnap. This article first appeared on the Usersnap blog.
Usersnap is a visual bug tracking and feedback tool for every web project used by software companies like Facebook, Google & Microsoft.
Interested in more articles like this?
To better understand your colleagues and clients, check out this study on how developers and designers collaborate with clients.
