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.
The benefit of understanding peoples’ mental model is that it helps you organize and structure information.
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.
Your goal is to make it feel effortless. Not necessarily frictionless.
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:
- Easy access to options
- Easy comparison of alternative options
- Consumes screen space
- Only effective for few choices that are fixed and small. Between 2 and 10
- Single Checkboxes are difficult to align with other screen controls as they often possess long descriptions
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
Stepper/spin button
- Consumes little screen space
- Permits either selection or typed entry
Cons:
- Difficult to compare choices
- Awkward to use
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:
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.
Why Radio Buttons and Checkboxes Can’t Co-Exist
Radio buttons and checkboxes have long been components that cause users confusion. These components are often used in the same context, but look completely different.
Why Infield Top-Aligned Labels Beat Floating Labels
Form field label alignment has evolved. It’s been five years since I first introduced infield top-aligned labels and its advantages over both top-aligned and infield labels.
Improve Your Sign-Up Form with Off-White Text Fields
When designing an app, most designers put all their effort into the content pages but overlook the sign-up form.
Why You Shouldn’t Use Solid or Underlined Text Fields
Text fields have evolved stylistically over the years. Designers are getting more creative with them, but sometimes a little too creative.
How to Make a Highly Converting Landing Page in 2020
20 years ago, we didn’t have much science on human behavior to back our design decisions. And let’s be honest, we designed based on our gut feelings. I was lucky enough to get a client very early in my career that knew what his customers wanted. He was skilled enough...
3 Simple Copywriting Formulas To Make Your Writing Faster and More Effective.
Where the hell do I start... This is a question you might have come across a few times? It happens to all of us don’t worry. I have good news for you, my friend! There are neat tactics to get rid of the writer's block once and for all. Copywriters use tried and tested...
7 Reasons Why Your “DIY” Web Copy Text is Failing
To be frank with you. I'm tired of reading boring, bullshit, copy text. I know that it's often a bit pricey to use a professional copywriter. And sometimes you have to put something on the air ASAP and there's no time to brief anyone. We all know that it is your...
The Comprehensive Guide To What Is SEO?
Everybody is talking about SEO (search engine optimization) and for a very good reason. It’s essential for your website to be among the first result pages when someone is looking for your content. SEO in a Nutshell SEO is a practice where you try to increase the...