How to Build Better Forms?

The web has become the main way of communicating with banks, insurance companies and all sorts of official personal matters. I often have to fill in various forms on the web and I’m not always impressed by the design. As a UX designer, I understand that the way I see things differs from the layperson. On many occasions, I see a simple lack of interest to make things smooth for the user. I admit that when I started as a web designer in the early days of the worldwide web, one thing I didn’t like was designing forms. And in return, the users didn’t like my forms either.

But the thing is. If you want to make the web a better place for all of us, start by making your forms a joy to fill in. Your users will love you for it. It’s not difficult, but it is a bit theoretical.

If you are someone who has to design forms, this article is for you. After reading my article, I hope you see designing forms in a new inspiring light. Never have a boring day at work again!

There are a lot of great examples of neat tricks you can do with your forms to make them stand out from the crowd. You can find those easily on the net if you are interested. In this article, I will show you simple rules for designing simple screens. Sounds simple, right? There is a lot of great content that I’m about to share with you, so let’s get right into it!

Conceptually we are now talking about Interaction design. We want to enable the user to achieve their objectives.

Mental Model

A mental model is a representation that someone has in their minds about an object they’re interacting with. The user’s mental model is based on belief, not fact. People often hold an incorrect mental model about the way a system works.

Let me explain. I play in a band and we practice once a week. I want to save my heating bill and I set the heat pump to 16 celsius during the week. As the practice starts, there is always someone who wants to heat the room up quickly. So they set the temperature as high as it gets! But the heat pump doesn’t work that way. I have noticed that there are two kinds of people. Some think the heat pump is like a tap. The further you turn it, the quicker it will warm the room. Others think of it as a switch. You set it to 19 celsius, and it stops once it gets there.

Conceptual Model

A conceptual model is the one we give to the user. It’s the design we think is best for our users. You won’t get it perfect for the first try. You must validate and iterate your design through testing directly with your users.

Ideas are often ahead of their time.

Remember the Zune music player Microsoft called the iPod killer? They were the first to offer a streaming music service before Apple Music or even Spotify. People wanted to own their music as they had before the digital era. Zune was the first device to adopt a ‘flat’ user interface. It was the first device to implement an OLED display. Zune was a superior device in many ways, but the sales didn’t reflect that. It didn’t fit the mental model people had at the time. But it was a great concept. 👏👏👏

So what is the point of all this conceptual model vs. conceptual model stuff?

You might design a perfect form, but it might not be the right solution. It all depends on how your design reflects the user’s expectations.

Now we are getting somewhere right! Are you now ready to dig some dirt, my friend, because it might get dirty? We will talk about skeuomorphic vs. flat design! Are you excited? I am!

When iOS was first introduced in 2007, they designed it to use metaphors to guide the user. In some cases, it went a little overboard, and it was therefore ridiculed as “skeuomorphism”. Apple responded in 2013 and changed the UI to a more flat design. Some say they went a little overboard on that as well. Maybe visual metaphors aren’t always useless decoration? Maybe we shouldn’t abandon these visual references just because they are not in fashion?

Metaphors

Which one interface looks easier to use in your opinion?

Good metaphors provide clues about how something works. It makes the user comfortable with the unfamiliar. And it may make the system more memorable. 

Designers Dilemma

Users need to have all the features and options to handle all of their special needs. But above anything else, users want simplicity! It’s difficult to choose between lots of options right… Obviously these two things act against each other. Progressive disclosure to the rescue!

Divide and conquer

Show users only a few of the most important options. Then offer a larger set of specialized options upon request. Now, most of your users can proceed without worrying about the added complexity.

Take away the burden of decision making from the user

If you think about software wizards, for example. They will simplify the form by asking the user to complete just one task at each page. Sometimes friction is beneficial to user experience. Your goal is to make it feel effortless. Not necessarily frictionless. Now hold that thought!

Hick’s law

Hick’s law (or the Hick-Hyman law)! British psychologist William Edmond Hick states that the more items you have to choose from, the longer it takes to make the choice logarithmically.

Progressive disclosure is an interaction design technique that helps maintain the focus of a user’s attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum information required for the task at hand.

So how do you know what to show and what you should hide from the user?

There is no definite answer to that question. I’m sorry. It depends on the task at hand. Only testing with actual users you’ll find out. Use A/B testing or paper prototypes.

Design Choices

The most common mistake that people make is that they use these controls in the wrong way. The easiest one for a developer to implement is a text field, so it might not come as a surprise that it’s the most commonly made mistake.

You should use the type of control that works best with the data structure in your system

For example, if you need to know how many cats your user has. Maybe you need to know if the user has: one, two, or more than two cats. The text field could return all types of answers that you manually have to sort out. A drop-down menu would give you only the correct data. Three radio buttons would be easiest to use and still give you only the correct data. Stepper box would feel an ideal option, but I personally think it’s a bit awkward and difficult to use.

Wait a sec! This feels too easy an example? Well… I wanted to make a point here. Sometimes it is good to think about what data really serves a purpose. If you want to give an option to answer up to 50 cats because there sure are some cat ladies out there that have that many… But that would make the drop-down more cumbersome to use and completely eliminate the radio button option. If you don’t use any data that exceeds two cats, don’t ask. Even if it would make those cat ladies happy to brag about their 50 cats…

Let’s look at some of the most common interface elements. Why we may want to use them or why consider replacing them with something else:

Radio buttons

• Provides easy access to and comparison of choices
• Allows a textual description to be added to each choice item

Cons:

• Only effective for few choices that are fixed and small. Between 2 and 10

Drop-down menu

• Unlimited number of choices
• Reminds user of available options
• Conserves screen space

Cons:

• Requires an additional action to display the option list
• May require scrolling
• The list may be ordered in an unpredictable way, making it hard to find items
• Bad mobile experience

CRAP

(contrast, repetition, alignment, and proximity)

Ok, it’s not really called a crap, it’s called CARP. But now that I have your attention, let’s dive into the most hand-on section of this article. Aesthetic usability! It probably won’t come as a surprise to you that people consider visually more appealing designs as easier to use.

Contrast

The purpose of contrast in visual design is to create focus. Organize the page and make it more appealing. Contrast is what we notice and where our eyes go first.

Negative space or “whitespace” creates contrast. If you don’t have any whitespace, you don’t really have a contrast. It’s ok if your form has spots that don’t have content.

Alignment

The purpose of alignment is to unify and organize the screen. Every item should have a visual relationship with the other elements on the page. Good alignment helps create a clean sophisticated and professionally made look.

Repetition

The purpose of repetition is to create consistency and to add visual interest. We want to create a design that feels like part of a larger whole. Repeat your visual element, such as colors, fonts, shapes, sizes, textures, line thickness, etc.. so they became part of a “family”.  The consistent feel throughout the UI creates a feeling of value and trust.

The big difference here is the repetition. Similarly, formatted input fields look more appealing in general but it also offers a better user experience. More on that in the next chapter.

People often wonder if they should put the ‘submit’ button to the left or right-hand side of the form. I tend to favor the right-hand side. There is no data that shows what is the right answer. Just be consistent and you are fine. If you use the pre-populated web form, the reset button might have some value. People tend to only click them accidentally, so it’s ok not to use them.

Optional instead of required

If you only have one optional text field, don’t clutter the form with ‘*’ to mark every field mandatory. Optional sound more optimistic. If the user still makes an error, you can show that on the next screen. Talking about errors… I often see a red asterisk. Users associate the color red for negative and errors only.

Note: In user testing situations, not all users know what the asterisk means when used in form labels. A simple solution is to show them the optional fields instead. Better yet… If you have a text field you don’t need, don’t ask!

Gaze Plot

Right-aligned labels work better than left-aligned labels. But they both behave quite similarly in eye-tracking situations. Up-aligned labels offer a better experience, but Google material design offers an even more compact and effective alternative in my opinion. Label inside the input field with an animated label. You can look for more information here.

Heatmap

Here’s a tip for you! If you don’t own an expensive eye-tracking device, you can do what I do. Blur the image to see a guestimate how the heatmap might look like. Look at the “heatmap” and try to visualize the gaze plot. Neat ha! 

By left aligning the headline ‘application’, we could decrease eye travel and make the form even more streamlined and frictionless. But remember what I have stated earlier. It doesn’t have to be completely frictionless, you can use contrast to your advance. By breaking the alignment works similarly to whitespace. It makes the form feel less cramped. 

We tend to put a lot of focus on how fast you can fill the form compared to the previous iteration. It’s because it’s easy to measure speed. Speed doesn’t tell us if our form is easy to use. Measure how many more people have completed the form, that is what you really want. More people to fill out the form.

These forms are speed-sensitive:

• Login & registration
• Newsletter subscription

These forms are somewhat speed-sensitive:

• Purchase order
• Payment checkout

These forms are not speed-sensitive:

• Price request
• Ticket reservation
• Room booking
• Survey
• Donation

Button Label Hack

I have written a lot about copywriting and even gave you some formulas to try out. Happens to be that there is, of course, a formula for creating text for your buttons as well. And it couldn’t be more simple than this! Just write what you want to do:

I want to ____

I want to join free for a month. Now leave the ‘I want to’ portion off. Your button text is ‘Join free for a month’. 

Choosing the right words on button labels

Choosing just the right word for your button could improve your form considerably. But how to choose the right word? 

Use action verbs

Tell your user what the button will do. People have a short attention span and they are lazy. They will often skip reading the support text and they will press the wrong button if you don’t tell them what the button will do. Instead of labeling the button ‘OK’, use action specific label.

Users can take action even when there is no supporting text.

Be aware of the specific connotation

The wrong choice of a word might end up costing weeks of work for some poor soul. The words ‘delete’ and ‘remove’ for example behave completely differently.  ‘Delete’ removes the files from your disk and ‘remove’ take your files out from the group. Not a minor detail.

Users want to know what the heck they are doing

Generic labels are uninspiring and vague. They don’t give precise information about what will happen next. Use task-specific language and your users will understand.

Use sentence case

Sentence case is easier to read. That alone would be enough, but it’s also easy to remember because there are no rules involved. Every button is a sentence case button and that’s it. Easy for you and easy for the user. Case closed.

• Easy to read
• The tone is friendly
• Easy to spot proper nouns
• No writing rules

No Design is Secret

Your users will tell you if your forms work or not. Build, measure and learn. Iterate until your users tell you it’s right.

If your design looks nice, it doesn’t tell you it’s the right design. If your team is pleased with the design, it doesn’t mean anything. The only thing that matter, is that people use the forms you designed. Never neglect the user’s opinion even if you disagree!

Do you get the desired results?

No design is secret, because you might lose business, contacts, whatever you want to achieve by using an inaugurate type of forms. Think about how much business you are willing to lose? I bet you don’t want to lose one single sale.

Paper Prototyping

You might have heard of paper prototyping, but have you seen anyone actually using them? In smaller projects, feedback from customers is fine. If you handle hundreds of customers daily, even a small increase in performance could have a dramatic effect. Finding those small details could be tricky tho. Forms are the one area you can use paper prototypes to test even your wildest ideas with a tiny cost. You might be familiar with the term ‘fail fast’. Well, this is it!

A paper prototype is good if you want to test:

• Concepts and terminology
• Content
• Functionality
• Workflow

All you need really is a paper and a sharpie. But hey, there are many awesome paper prototyping tools to choose from, so of course, we use those. But in user testing, you can print these to paper so you can add notes to them directly and so on.

Heres a list of prototyping tools:

1. Figma
2. Adobe XD
3. Balsamiq
4. Justinmind
5. proto.io

Conclusion

Designing forms is not a sexy task for a designer. But it might be the most important for the business owner and here the designer has a chance to make a difference.

If you managed to come this far, congratulations are in order. I’m sure you see forms in a different light for now on. Thank you for reading, see you in the next one!

BOOK RECOMMENDATION

Non-Designer’s Design Book

Some of the theories mentioned in my article were borrowed from this book. CARP (contrast, alignment, repetition, and proximity) concept is invented by Robin Williams. Not that Robin Williams! Author Robin Patricia Williams.