How To Build An Awesome Form

Kuba Chrześcijanek
Sep 13, 2015 · 11 min read

A quick guide on how to cope with most common design problems when creating a form.

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.

Image for post
Image for post
A Short Registration Form With Clear Call To Action Button
Image for post
Image for post
UX Pin Offer Page

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.

Image for post
Image for post
Grouping items into logic categories
Image for post
Image for post
Single CTA vs Multiple CTAs

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.

Image for post
Image for post
Modal treatment of various elements. Round increments (10, 20, 25, 30px etc.) make the entire structure of the form more organized
Image for post
Image for post
Twitter — Above The Fold Registration
Image for post
Image for post
Formal corpo-like CTA (top) vs more playful, direct approach (bottom)

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.

Image for post
Image for post
Udemy.com — A Short, Simplified Registration Form
Image for post
Image for post
Input with label and hint vs prefilled input box
Image for post
Image for post
Server Validation Example
Image for post
Image for post
Inline Validaion Example

5. Common Mistakes

Mistake #1 — Confusing layout

Image for post
Image for post
Image for post
Image for post
An example of an overcomplicated form, with to many Call To Actions, no clear structure, lacking a proper hiererchy that would guide the user through the process.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store