Before you use a checkbox on your interface, you got to ask yourself a couple of questions. Is a checkbox the right component to use in this context? If it is, what’s the most usable way to display them?

Many designers fail to ask these questions and automatically use checkboxes without much forethought. As a result, they create usability issues by using them in the wrong context.

Not only that, but many designers are lazy and expect native checkboxes to do the job instead of a custom checkbox design. …

Content cards are one of the most common ways for apps to organize their content. They allow users to consume bite-sized samples while they browse before clicking on one to get the full-sized meal.

Using content cards isn’t enough to create a great browsing experience. You also have to optimize the readability of them. Optimal readability isn’t only a measure of whether users can read the text and make out the words. It’s also a measure of whether they can scan and process the text efficiently.

Many content cards are inefficient to scan when different text types on the card clash with each other. As a result, users can’t scan the text types in the order that makes the most sense. Instead, their eyes scatter back and forth with unnecessary movement, making the information harder to process. To fix this problem, you have to apply scan control by adding the appropriate amount of visual emphasis to each text type. …

When users navigate an interface, they have a need for speed. The faster it is for them to find what they’re looking for, the more time they’ll save on their task.

A common navigation pattern that needs speed is the three-level menu. You’ll often find it on dashboard interfaces and desktop applications. The way to increase the navigation speed of a three-level menu is to use the optimal layout.

A research study ( A comparison of three-level menu navigation structures for web design) has shed some light on which layout is fastest to navigate. …

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. …

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 form criteria. …

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.

Image for post
Image for post

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. …

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. …

Every interface has a subset of users that make up the majority and minority. The majority of users usually have normal vision, while the minority have some form of visual impairment.

There’s a big difference between what normal-visioned users see versus what color blind and low vision users see. These users tend to experience blurry text and faint elements when text sizes and color contrasts are too low.

The goal of accessibility is to meet the needs of the minority because they’re often forgotten. But what happens when meeting the needs of the minority ends up failing the needs of the majority? …

Setting the record straight on some common misconceptions and the nuances of accessibility guidelines

Image for post
Image for post
Photo: Richard Drury/Getty Images

There’s a growing demand for designers to make their interfaces accessible to all users. It’s important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people.

They often parrot these myths to discredit a design, without understanding in which situations a color contrast standard applies. Not only that, but they assume an interface is inaccessible whenever color contrast is used to convey information.

Because of this, designers often feel the need to obsess over accessibility, and are misled into believing their interface isn’t accessible when it actually is. …

What interface component would you use for selecting options from a large list? For most designers, checkboxes come to mind. But a long list of checkboxes looks intimidating to users and can cause them to abandon your form. Not only that, but checkboxes aren’t efficient or easy to use because they take up space, offer small tap targets, and increase the number of visual elements to manage.

A better component for option selection is toggle tokens. Toggle tokens conserve screen space, so you have room for more content, and users don’t have to scroll. Checkboxes require vertical stacking, but toggle tokens allow for both vertical and horizontal stacking. …


UX Movement

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience.

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