How To Build An Awesome Form
A quick guide on how to cope with most common design problems when creating a form.
I’m finding ugly forms all the time, everywhere. It seems not many people pay attention to user friendly interfaces when it comes to filling in brackets. They tend to forget this is usually the first real interaction between the new customer and their product or brand. When overall feel and look of the brand is crucial, it is the registration or purchase process that boosts up conversion rates or generates real profits. That’s why the design should be executed with the same care, knowledge and attention to details as your main product, website or flyer you use to advertise your services. In this article I’ll try to highlight some of the main factors that can make a well designed form come true. Following these rules will help you create a neat, friendly tool your customers definitely gonna love.
1. Your Goal
The most important rule to follow when building a form (as well as more complex content and layouts) is to have a general idea of what what is your goal and what are the most efficient ways to achieve it.
For example, if you need to create a registration form, your goal is to guide the user through the registration process in a way he won’t feel overwhelmed by the complexity of the process nor distracted and confused with to many focal points. Therefore you need a simple layout, as short as possible with large and clear call-to-action button that triggers the desirable action here — signing up a new customer. Something like this:
When you need to sell your services online, you have to set up a layout that drives the user towards the purchase. Since people don’t like filling in long forms, keeping it short will surely increase the conversion rate and make it more user friendly. If you’re selling a single service, make sure the CTA will be connected directly with the purchase process and all necessary information is provided in a clear and obvious way.
When you have more than one item to sell, make sure to display all of them side by side, so the customer can easily compare your services and pick the one he feels would be the best for him. However, make sure to highlight the option you think is the best from your point of view and make it a focal point of your offer.
Anytime you need to make a new form, think the big picture first. What are your goals? What’s the most important and most desirable user action? What’s the most crucial information that your user needs to provide in order to complete the registration/purchase process? Keep in mind there is no such thing as a default form that will always fit all your needs. To make your form work and convert well, it always needs to be tailored to your users needs.
2. Building The Form
Now that you already know what to do, it’s good to take your time and think of the structure of your form. It’s best to keep it as short as possible so think of the most important information your customers need to provide to finish the process. Does the registration process require anything more than an email address and a password? Does making the user go through the complicated birth date and address section is absolutely crucial at this point? People don’t like filling in long forms so if you build a long list of mandatory fields to complete it is very possible that the drop out rate will increase and less people will actually fight their way through and finish the process. Even if you think you will eventually need more detailed info, you can always ask for it later, when the user is already registered and is already using your services.
Unfortunately for some sectors however,, i.e. banking, financial, online gambling; long forms are necessary. To verify each user on signup you need to retrieve more sensitive and private information such as personal security number or credit card number to proceed with the registration. In this case it is best to divide the content into sections so that the user can scan and analyze the fields faster and easier.
When dividing the form into sections keep in mind that people have problems coping with a lot of information at once, so make sure that each section contain around 4–5 fields to generate a well balanced flow so you can keep the user focused on the task. Sections also need to be categorized, so try to avoid mixing different type of information and gather categories into blocks such as personal details, address, login/password, credit card details etc.
Next step is a proper Call To Action button (CTA). Depending on the structure and needs you may present more than one focal point of the form, however remember the more triggers you will place within the layout, the more confusing it can become the user. He might not be able to recognize which CTA is the most important one and instead of finishing the process he might be driven away to some other places on your website he doesn’t really want to see at this point. And that’s a big no-no in terms of on-site experience so try to keep it as simple as possible.
3. User Interface
When you think of user interface, try to use colors as neutral and low profile as possible. The form should almost blend into the background, it makes it look less difficult and more friendly for the user. All the flashy colors should be used for more important stuff like validation messages or Call To Action elements. Keep in mind that when it comes to digital screens, it’s easier to read dark text on a light background, not the other way around.
It is also important to stick to modules when you’re building the form from scratch. Using modular elements helps to constrain the same proportions, widths, heights and gutters across the entire form making it super consistent and uniform. It is a good practice to keep easy to follow increments such as 5, 10, 15, 20px whenever it’s possible. This will make resizing inputs and buttons much faster and easier. Also, don’t be afraid of large, chunky inputs and rounded corners. The less technical your design is, the more user friendly it becomes.
The correct division within the form’s structure is very important in terms of its legibility. With numerous sections, divisions and subdivisions it’s easy to loose focus and get tangled within the never-ending structure of inputs and dropdowns. There are however a few easy tricks to get rid the problem.
First of all you need to establish the form’s structure, listing down all headings, sections, subsections and inputs. The key here is quite easy to follow. Main headings use the largest font size in the form. Then you need to decrease the font size for divisions and subdivisions accordingly. At the very end of the chain are inputs descriptions and validation messages that should use the smallest font size. This creates a clear and legible hierarchy between all elements on the page.
As I’ve mentioned earlier, the right distribution of colors is crucial for the legibility of the design and for establishing focal points of the form. By keeping the content neutral and CTA elements highlighted by strong, distinct colors you can create a perfect contrast between the content and the trigger your customer should be focusing on. So wether it is a „Sign Up” button or „Buy Now” box, it should be the most important element on the screen. If you are able to place it above the fold within your design, it’s a big plus from the marketing point of view as it is more likely that your new customer will sign up for the service when it is clear that the form is short and easy to fill in.
The CTA copy should be direct, clear, informal and as short as possible. Less formal and more direct messages bring better conversion rates as they are more user friendly and they can shorten the distance between the customer and the business owner stating „this is your website, created especially for you, so feel free to take a look around”. So instead of „Please click here to get to know more about the product” it’s better to simply say „Tell me more!”. For more formal projects (i.e. bank account registry form) you might want to tone the language down to a straight forward short messages like „More”.
4. User Experience
Now that you have established the overall structure and general feel and look of your form, it’s time for the user experience review. Apart from well designed sections, inputs and CTAs, you need to make sure your form is readable, easy to use and all actions required from the user are described in an obvious and intuitive way.
First of all, as I have mentioned many times before, keep it short. Reinvestigate all your inputs and dropdowns and make sure you need all of them to retrieve the necessary information from your new customers. Sometimes it’s just email and password that are sufficient, sometimes the information needs to be more detailed. Remember that you can still push your registered clients to fill in more detailed information such as Personal Info or Payment Details later on, once they’re already using your website/services.
Also, try to combine as many inputs as possible. Instead of three dropdowns for birth year, month and day, merge it into one easy to use field with intuitive calendar. Make sure that you really need those two separate fields for street name and street number. Maybe it’s better to use a single field instead and make the user experience more similar to addressing a real postcard or an envelope?
If your form is not very complex in terms of titles and descriptions, try to place them inside the inputs. First of all this will help you save some valuable space on the page and make the form look more uniform. Second of all there will be no need to scan two different columns — one for the title and one for a correct input, which might be a big issue with long, detailed forms. Input titles and tips inside brackets will support the user better when filling in the form as they will be directly connected to the action he needs to perform. Take a look how much space you can save with a prefilled input:
Form validation is another important feature you need to consider. When filling in the form, the user needs to be aware if the mistakes he’s very likely to make on the way. The sooner he knows what to fix, the bigger the chance he will get everything right in his first try. You can validate the form in two ways — by server side validation (the form is evaluated when the user tries to submits it and the form is sent to the server for validation ), or client side validation, also called inline validation (the form is evaluated in real time, as clients goes through the inputs one by one).
First method is used mostly with long-running forms that include sensitive or private data that needs to be sent to the server for validation. In response, the server sends back the evaluated form with indication which fields need to be fixed. Usually, corrupted fields go red and the tip on how to fix the problem is provided as a red message somewhere near the corrupted field (most likely underneath the field). It is also quite common to show the list of all mistakes the user has made as list above or below the form, however this might not work very well with longer and more complicated layouts.
Second method is often used for online sign up forms to shorten the registration process end enhance user experience (the quicker the user gets everything right, the bigger the chance he will actually finish the process). Inline validation messages usually appear underneath or beside inputs that need to be corrected or have been skipped. Inline validation also lets you eliminate a bit techie and unfriendly way of marking the mandatory fields with a red asterisk. Indicating users mistakes on the go is much more efficient and way more user friendly.
5. Common Mistakes
Mistake #1 — Confusing layout
A solid and uniform structure of the form is very important for its legibility. It is very often that designers (or more likely developers) don’t follow any rules when setting up a default layout for the form. Inputs are usually scattered across the page, misaligned, small and very unfriendly. This makes the entire page look more like an IT interface than a friendly page that guides the user through the process. So if you want to keep high conversion rates on your website, make sure the layout is not confusing and everything is crystal clear at the first glance.
Mistake #2 — Lack of a proper hierarchy
A lack of a proper hierarchy is another common mistake when designing more complex and longer forms. Ignoring categorization and using one single style for the entire form will make it illegible and confusing. With no clear division between sections and subsections it is very possible users won’t be able to understand the general purpose of the form or a reason for providing a very private data in order to complete the process. Make sure you layout is clear and easy to understand, avoid long and confusing sections and provide additional description or instructions wherever it’s necessary.
Mistake #3 — To many CTAs
Wrong color coding and excessive use of Call To Actions may lead to chaos and confusion. Quite often marketing is pushing a lot of different upselling points, triggers and CTAs in order to get more conversion through the form and to direct users stronger towards the purchase. This is the shortest way to losing your new customers and buyers by offering them everything on one single page where they would rather expect one main thing they want to focus on.
Make sure you will drag their attention only to things that are most important on the page, guide them through the process with color coded CTAs and other triggers, however keep in mind that you form is not an advertising spot. You will get the chance to push your products later on with mailers, newsletters and other clever ways to win your customer’s attention.
