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.

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. Designers and developers know the difference, but that’s because they learned it through their work. What about users who were never taught the difference?

The fact that users need to be taught the difference shows that these two components are not intuitive. Their appearance alone does not convey their slight differences in functionality. The visual cues themselves—a dot and checkmark—carry no specific meaning to users other than an option selection. Therefore, the existence of both radio buttons and checkboxes violates the UX principle of Consistency.

Designers and developers have never questioned their co-existence because it’s the way it’s always been. However, if their co-existence causes users confusion and violates a UX principle, it merits a logical analysis and rethinking.

A Violation of Consistency

The UX principle of Consistency states that components with similar functionality and same usage should have a uniform appearance. Radio buttons and checkboxes have a similar function and are used in the same context, but there’s nothing uniform about their appearance.

radio-checkbox-functionality

Radio buttons represent mutually exclusive selections, while checkboxes represent mutually inclusive ones. Both are commonly used together on forms to select options from a list. However, a radio button is a circle with a dot inside, while a checkbox is a square with a checkmark inside—two different visual cues.

Some might say that their functions are different, so they should look different. But to be precise, their functions are only slightly different, and they both have the same usage, which is not enough to justify a different appearance. Doing so presents an inconsistency that can perplex users.

Mutual Exclusivity/Inclusivity Is Not a User Concern

If you ask the typical user what a mutually exclusive or inclusive option is, they probably wouldn’t be able to tell you. That’s because they don’t think about mutual exclusivity or inclusivity when they use an interface. Only designers and developers think about this because they have to design the interface.

Users merely read the labels and select the options they want. They’re focused on what the labels say, not component functionality. Therefore, mutual exclusivity and inclusivity should be indicated in the labels they read, not the components themselves. Designers and developers are imposing their way of thinking onto the user.

How Users Know They Can Select One or Multiple

The label on the components often indicates whether users can select multiple options or just one. When users can select multiple options, the label is worded in plural form. When users can only select one option, the label is worded in the singular form. Make sure you use the correct noun form when you label mutually exclusive and inclusive components. It’s easy to forget about the labels, but they’re what matters most.

radio-checkbox-labeling

Label noun forms are a clearer cue for mutual exclusivity/inclusivity than a checkmark and a dot. A checkmark and a dot do not signify mutual exclusivity/inclusivity other than by convention that’s familiar to only designers, developers, and tech-savvy users. Regular users who see the different components used in the same context will wonder what the visual differences mean. The inconsistency isn’t severe enough to derail their task, but it certainly diverts their attention.

radio-checkbox-exclusivity

Use Check Circles Instead

Users need a component for selecting from a list of options that’s uniform and consistent. Instead of using radio buttons and checkboxes, use check circles instead. A check circle combines both the outer shape of a radio button with the checkmark cue of a checkbox.

check-circles

The checkmark is used because it’s a much stronger cue for selection than a dot. It’s universally known as the symbol for affirmation or “yes.” A dot is a weak visual cue that could hold any arbitrary meaning.

A circular outline helps distinguish itself from a checkbox. It also has the added benefit of being more appealing and easier to recognize, since most icons with a background are inside a circle.

When there’s a single component for selecting option lists, users are no longer distracted by the differences between radio buttons and checkboxes. They can focus more on the labels and choose options that fit them best. It doesn’t matter whether users can select only one or multiple options. They’re going to make selections based on what the label dictates, not the type of component.

Old Design Practices Evolve

Radio buttons and checkboxes have co-existed for a long time. Some may use their longevity to justify their co-existence. However, many old design practices of the past have since evolved due to a better understanding of UX. For example, reset buttons that clear forms, red asterisks on required fields, and password confirmation fields have nearly all faded away today. Radio buttons and checkboxes may soon do the same because, like most things in life, interface design continues to evolve.

Floating Labels vs. Infield Top-Aligned 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.

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. Many designers and developers have adopted them, but it seems many more have adopted its counterpart, floating labels.

This is unfortunate because infield top-aligned labels are far more usable and accessible than floating labels. The standard for label alignment should have a high level of usability and accessibility, or it’s not the best practice everyone should follow.

In this article, I’ll break down why and how infield top-aligned labels are more usable and accessible than its counterpart based on key UX form criteria. If you’re using floating labels, here are the reasons you should reconsider.

Active Field State

Floating Labels: Animation Woes

First, there’s the animation issue on floating labels. When users select a text field, the label transitions from a placeholder position to a top-aligned one with the animation. While this effect for the active state might look cool, it poses a problem for users with motion sensitivity.

floating-animation

Users with vestibular disorders need control over movement triggered by interactions. Non-essential animations can cause vestibular disorder reactions, such as distraction, dizziness, headaches and nausea (source).

If the floating animation only occurs on a few fields (short forms), it shouldn’t pose a problem. But when it occurs on many fields consecutively (long forms), the effects can compound and trigger unpleasant reactions on motion-sensitive users.

For non-disabled users, it poses a distraction problem during their task. It’s hard to predict whether the label will float or not float when they first encounter a field. When it does float, some users may be taken aback by the behavior. They may even play around with it, which takes time away from completing their task.

IFTA Labels: Simple Highlight

With infield top aligned labels, there are no unpredictable animations that surprise users. What you see is what you get. This static approach may not be as fancy, but fanciness isn’t needed as it adds little to no benefit for users.

Instead of using an animation to indicate the active state, it highlights the label and border with a color hue. The border also increases from 1 to 2 pixels for greater contrast. Any extra features would only distract users from filling out the form.

ifta-labels-states

Label Readability

Floating Labels: Tiny Text Labels

When floating labels transition from the placeholder to top-aligned position, the text label shrinks and becomes tiny. This tiny size makes the label hard to read when users need to check or correct their input. Low vision users will struggle the most to read the tiny text labels. As a result, they’ll have a hard time checking over the form before submission.

IFTA Labels: Readable from Start to Finish

Infield top-aligned labels don’t shrink on field activation. They stay at the same readable size as it started with. By not manipulating the text size, the readability remains consistent and there aren’t any sudden surprises to confuse users.

floating-ifta-readability

Recognizing Incomplete Fields

Floating labels: Placeholder Conflict

Floating labels start in the placeholder position of the field, which is the same place the user’s input goes. This placeholder conflict can cause users to mistake incomplete fields as complete because the fields are filled-in in both cases. It’s likely they could submit the form thinking every field is filled out and receive unexpected errors. Not only that, but any fields they skip or miss are hard to spot when they go back through the form.

IFTA labels: Filled-In States

There are no placeholder conflicts with infield top-aligned labels. The highlighted label displayed in the active state doubles as a filled-in state for recognizing incomplete fields faster. It does this by remaining highlighted after the user enters their input and leaves the field. If users need to find any fields they skipped or missed, all they have to do is scan the form for fields that don’t have a highlighted label.

floating-ifta-incomplete

Placeholder Hints

Floating Labels: No Room for Hints

An informative hint can help users out when they’re unsure of the proper input. Floating labels don’t leave much room for hints because the label occupies the placeholder space. Instead, the hint text has to go outside the field, which users can easily overlook. Not only that, but multiple hints would clutter up the form. The extra text would clash with the label and input text and make it harder for users to focus.

IFTA Labels: Room for Hints

Any fields that need hints have placeholder space on infield top-aligned labels. The hints are placed in a position where users can easily see them. They can read the label with the hint at the same time for faster processing. The hint text also won’t clash with the input text since it goes away after the user types in the field.

floating-ifta-hints

Distinguishing Input from Label

Floating Labels: Crammed Spacing for Two

Floating labels often make it hard to distinguish the input from label due to the lack of margin space separating them. The label and input are crammed so close that they tend to run together. Instead of reading it as two distinct lines of text, users see it as a blob of text.

The reason this happens is because the initial label and input are given prime spacing and vertically centered inside the field. As the label floats to the top on field selection, it becomes an afterthought and doesn’t get the spacing it needs. Not much attention is given to how the label would look when it floats.

IFTA Labels: Fitted Spacing for Two

Instead of cramming the label with the input, infield top-aligned labels require you to give equal attention to both texts from the start. When you design, you have to think about how the label and input will look together. This causes you to make sufficient room to fit both of them instead of one over the other. With fitted spacing, it’s easier to distinguish the input from label when users check over the form.

floating-ifta-spacing

Infield Top-Aligned Labels Win

floating-vs-ifta-labels
Infield top-aligned labels succeed in areas where floating labels fail. They may seem similar, but there are key differences that set them apart. Once you understand them, you’ll know why you should adopt infield top-aligned labels over floating labels.

There’s one reason you may want to use floating labels, though. Floating labels are fancy and fashionable due to its animation and Material Design’s adoption of them. So, when you’re designing a form, you got to ask yourself a question. Which is more important: a usable form or a trendy one? Trends tend to fade over time, but a true standard lasts a lifetime.

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.

When designing an app, most designers put all their effort into the content pages but overlook the sign-up form. What users end up getting is a form that’s visually unappealing, stale, and clinical. A white background, plain text fields, cluttered text, and harsh black outlines everywhere doesn’t motivate users to sign up. If your form looks like this, there’s room for improvement.

clinical-form

Some users who want to use your app are likely to sign up regardless of how your form looks. However, others who are undecided are likely to pass once they see your clinical sign-up form. You could be losing many potential users on the first impression. By making your sign-up more usable and appealing, you’ll push those undecided users over the edge.

Visual Appeal Motivates Users

A research study found that first impressions of interfaces are influenced by visual appeal. Users tend to judge interfaces with low visual appeal as uninteresting and hard to use. This finding infers that users are likely to perceive unappealing forms as difficult and time-consuming, which deters them from filling it out.

Making your form less clinical and more appealing can motivate users to take action on it. However, there’s a limit to how much visual appeal it should have. Making it too attractive can distract users from their task at hand. At the same time, the form needs to have high usability. Luckily, there’s a way you can achieve both by following a simple technique.

Off-White Text Fields

The technique that’ll make your sign-up form more usable and appealing is to make your text fields or their background an off-white color. Off-white is a shade of white mixed with a pale hue. When you apply it to your form, it’ll turn the stale, clinical appearance into a fresh, stimulating one. Not only that, but it’ll also strengthen the visual cues on your text fields and reduce the visual noise around them.

off-white-text-fields

Off-white text fields draw attention to each field quickly so users can interact with them right away. They also provide a clearer focus on the input so users can type, check, and correct them easier. Clinical text fields, compared with off-white ones, produce more visual noise. Any text outside the fields will clash with the input text and make it harder to focus.

off-white-background

An off-white background also provides a clearer input focus. It does this by accentuating the white space in each field and diminishing the text outside them. The results are stronger text field cues and more clarity on the input.

Brand Theming Your Form

When choosing an off-white, you don’t want to use any random color. You want one that’s consistent with your brand so that your form looks professional. To get the right off-white, take your brand color, and adjust the brightness and saturation levels.

brand-theming

Increase the brightness close to 100% and decrease the saturation to around 5%. Lowering the brightness a few degrees below 100 will add a tinge of gray to the color. Reducing the saturation will lessen the hue in your off-white. You can also add a slightly darker off-white for the field border to give it more depth.

Freshen Up Your Form

Sign-up forms don’t always have to look stale and clinical. A clinical appearance will turn most users off and away. Adding more visual appeal doesn’t require a lot of time or advanced design skills. By choosing the right off-white color to enhance your fields, you can freshen up your form and get more sign-ups than before.

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.

Text fields have evolved stylistically over the years. Designers are getting more creative with them, but sometimes a little too creative.

One particular style that’s caught the eye of many is the underlined text field. Its novel and minimalist appearance may attract you in using it, but when you understand how it affects user behavior, you’ll think again.

Underlined text fields are hard for users to recognize and tap. If they have trouble recognizing and tapping your fields, they won’t be able to start your form nor finish it. These issues lead to user frustration, form abandonment, and lower conversion rates.

underlined-fields-example

Not every user has trouble with underlined text fields. Tech-savvy and normal-visioned users can often figure them out, but many elderly and visually impaired users have a hard time. They’ll usually land on a form and wonder where the text fields are to begin their task. When all they see on the page are text headings and content dividers, they get confused and leave.

Text Field or Content Divider?

Users are most familiar with horizontal lines used to divide content. When you use underlined text fields, it’s easy to mistake them for content dividers. The underline looks like a content divider, and the field label looks like a heading. Sometimes the placeholder text inside the field can even look like body text.

content_divider-underlined-text_field

Users can also mistake them for content lists. A content list isn’t what they expect to see when they land on a form, which can make them think they’re on the wrong page and leave.

content_list-underlined-text_field

Not only that, but underlined text fields are also hard to tap because the edges of the tap target are missing. When the top and side borders are open and invisible, the target becomes a thin and faint one-pixel line. A smaller and less visible target to aim at decreases the user’s tap accuracy and causes mistapping.

In some cases, they may accidentally trigger an adjacent text field when aiming for their target. Without clear target boundaries, it’s easy for the finger to land in the wrong area.

underlined-textfields

Tappable Appearance

Text fields should appear tappable so users can start the form right away and tap through each field quicker. Instead of opening the borders, keep them closed on all sides. Doing this will make your text fields look like tappable objects with larger targets.

It’s also beneficial to round the corners of your text fields to enhance its tappable appearance. Research has discovered that humans innately perceive rounded, contoured objects as friendly, and sharp, angled objects as threatening (source). This finding suggests that users have a positive bias toward rounded corners, which draws them to interact with those objects.

tappable-textfields

Text Field or Disabled Element?

Along with a tappable appearance, your text fields should look fillable, not filled. Many designers make the mistake of filling the inside with a solid gray. Solid text fields are an improvement from underlined ones, but they’re still not the best practice.

solid-disabled-text_field

The solid gray fill makes text fields look like they’re in a disabled or inactive state. It causes users to wonder whether they should interact with them or not. Sending these mixed signals confuses them before they start the form.

When text fields look like disabled elements, users are less likely to interact with them right away. They’ll first scan the page for regular text fields. When they realize those are the only elements that resemble a text field, they may interact with them then. This cognitive effort is taxing and slows down their form completion time.

On top of that, solid text fields make input and placeholder text harder to read. When you have gray text on a gray background, the color contrast isn’t strong. Many low vision users will have a tough time reading the text and could abandon the form as a result.

distinguish-disabled-text_fields

Overlooking and reading solid text fields isn’t the only problem. Users could also have trouble distinguishing any text fields that are in an actual disabled state. If your form has a mix of regular and disabled fields, low vision users will have difficulty noticing the difference. Usually, the only difference with disabled fields is a fainter text label.

solid-textfields

Fillable Appearance

The ideal experience is when users recognize your text fields and begin filling them out immediately. This immediate reaction only comes when they contain white space for a fillable appearance. The white space is a clear cue of emptiness that prompts users to fill the space with their input.

To achieve a fillable appearance, keep the inside of your text fields white and empty with closed borders. Darken the borders just enough for users to liken the outline to an empty box. Outline text fields may look plain, but they attract attention and are easy to recognize, which is what users need.

To enhance the fillable appearance of your text fields, place them on an off-white background. An off-white background color makes the white space more prominent and provides the clearest cue for a text field. Not only that, but it makes any disabled fields on the form easier to distinguish.

off-white-text_fields

With this approach, it’s quicker for users to notice filled and unfilled fields when they’re checking the form. The brightness of the white space gives the input and placeholder text higher contrast for better readability. Any text placed on the off-white background remains readable, and won’t visually clash with the input or placeholder text.

fillable-textfields

Google Got It Wrong

The popularity of solid and underlined text fields originated from Google’s Material Design system. It’s novel approach to text fields garnered the attention of many. However, this led designers to sacrifice usability for trendiness—a move that doesn’t pay off in the long run.

Even Google realized their mistake when they changed the underlined text fields on their Gmail login form to outline text fields. From the enormous amount of Gmail users, they got feedback that many were having trouble logging in.

google-gmail-text_fields

They’ve further addressed the issue of underlined text fields in a study that found “enclosed text fields with a rectangular shape performed better than those with a line affordance” (source). Although they still promote the use of solid text fields, they’ll soon realize that this is also a mistake.

Usability First

A novel and minimalistic style for text fields has no use if it’s not easy to use. Before you consider changing the style of your text fields, make usability the requisite. Ensure your text field style is easy to recognize and tap for normal-visioned and visually impaired users.

It’s okay to make your form components attractive and fashionable, but not at the expense of usability and accessibility. Don’t follow trends because everyone else is. Question whether they meet user needs first. Not doing so won’t just hurt the user experience, but also your conversion rate and bottom line.

The Bulletproof Case

Still not convinced? Need to convince your boss or colleagues to follow these best practices? Send them this video or watch it at your leisure. This video makes the most compelling case that will convince others to change their ways.

It contains more in-depth insight and examples than the article. You’ll get the video, slides of the video presentation, and a best practices cheatsheet—the perfect package for making the bulletproof case.

bulletproof_case-solid-underlined-fields

Buy Bulletproof Case