Four design fundamentals for usability

Adapted from a presentation I gave in March 2019.

Many developers (and other non-designers) think of design as simply “making it pretty,” but the fundamental purpose of user experience (UX) and user interface (UI) design is actually usability. A UI is first and foremost something functional that is used to accomplish a task, and it’s a UX designer’s job to make sure that the interface makes that easier.

Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it. Jared Spool, UIEtips: Communicate Quick […]

Good usability means minimizing the user’s cognitive load in trying to navigate the interface so that they can focus on the task at hand. Cognitive load, a concept from cognitive psychology, refers to the amount of working memory resources being used, akin to mental effort. Much like computers and RAM, humans have a limited working memory capacity. If their cognitive load is too high, people are unable to process additional information—they feel overwhelmed and often make mistakes or mentally shut down.

So how can developers make their UIs more usable? Well, ideally, with a designer. But, if you’re on your own or just want to be more aware of usability, here are a few design fundamentals to pay attention to. Just remember that CASH is king. Consistency. Alignment. Spacing. Hierarchy.

For Example

We’ll use a simple example as we talk about each of these concepts: Google search results. At a glance, you already know what to scan, what to read, what to skip, and what to click.

Consistency

As someone begins to use a website or application, they start to build a mental model of how it works, internalizing the rules for how to interact with it. Once complete, they use this model to predict new site interactions and behavior.

When the rules of interaction are clear and consistent, a mental model can be built quickly and accurately, which minimizes the cognitive load, prevents unexpected interactions, and gives users a sense of confidence. They don’t need to expend mental effort trying to figure out what to click in order to proceed or why this happened when they clicked on that element.

Another thing to keep in mind is that people already have lots of interaction patterns internalized from using other apps and websites. Even if your website is internally consistent, if it runs counter to common interaction patterns, expect users to have trouble adjusting.

What if…

Google search results weren’t consistent in styling and structure?

Implementation Tip

Follow your style guide or design system. If you don’t have one, then use a CSS framework (like Bootstrap or Bulma) and come to a consensus on what elements to use and how to lay them out consistently.

Keep in mind that interactive elements should be obvious and distinct from elements that aren’t interactive, and elements that serve the same function should usually look and work the same way.

Alignment

Eyetracking research shows that the human eye does not take in an entire page at once, but moves around it in quick jumps called saccades to look for information and build a mental map. When content on the page is aligned to a grid, there are clear vertical and horizontal lines for the eye to follow in scanning the page. Without lines to follow, our eyes will wander around, uncertain where to look. Because the eye has a small area of focus, users might miss something important or become frustrated if they can’t find what they’re looking for.

For left-to-right languages like English, left edges are particularly important as we tend to scan down the left side. This is also why it’s more comfortable to read left-aligned paragraphs. When we read, our eyes jump from word to word, then jump from the end of the line to the beginning of the next. If the beginning of the line is always in the same place, our eyes can find it easily without having to search.

What if…

Google search results weren’t aligned along the left edge?

Implementation Tip

Use a CSS framework (like Bootstrap or Bulma) that has an easy grid system, and make sure that items in columns line up together along the edges. Many designers start with a base grid of 12 columns, since it can accommodate halves, thirds, quarters, and sixths that all line up together.

Also, when in doubt, left-align for reading and scanning comfort. (If your page is in a right-to-left language, however, right-aligned text would be more readable.)

Spacing

Spacing is important in showing relationships between elements. Gestalt theory describes how humans automatically perceive forms and patterns from visual stimuli. Among the many Gestalt principles is the one of proximity, where things that are closer together are perceived to be related. Ambiguous or inadequate spacing leads to higher cognitive load since users have to consciously figure out which elements are meant to be grouped together.

Using space to create and separate groups of related items is also important because it breaks the page down into smaller sections, or chunks, that are easier to scan and process. Users struggle when confronted with too much all at once, so having manageable chunks makes the page easier to navigate.

What if…

Google search results had too much ambiguous space?

Or too little space?

Implementation Tip

There should be more space separating groups of content (and less space within them) so that groupings are clear at a glance.

Use the squint test to check your spacing. If you squint your eyes so that the page is just blurry enough to be illegible, there should be clear groups of content and not one big blob.

Hierarchy

Having a clear visual hierarchy is another important way to make the page easier to scan. The Gestalt principle of focal points tells us that whatever stands out will draw our eye first, so whatever is most important on the page needs to stand out the most. If nothing stands out, then our eyes will wander, unsure where to look first.

With a clear hierarchy, the eye starts at the most important element, then scans around the page to other items of descending importance. This allows the user to understand the structure of the page and makes it easier to navigate.

Hierarchy also helps with chunking. Showing the hierarchy in a chunk helps keep them easy to process—users can scan them for important information without having to read every word.

What if…

Google search results didn’t have a clear hierarchy?

Implementation Tip

Use font size, weight, and color (or contrast between colors) to clearly delineate the levels of importance for elements on the page. Text or other elements that are larger, bolder, and/or in a brighter or higher-contrast color will usually be perceived as more important.

Use the squint test to check the visual hierarchy. If you squint your eyes so that the page is just blurry enough to be illegible, there should be obvious focal points and not a consistent blurry mass.

In Closing

There are many more design elements and principles, but this is a good starting point for usability. Note that these are rules of thumb, and there are exceptions to every rule. Everything is dependent on context, so as the context changes, your design decisions may need to change as well. At the end of the day, it all depends on the user.

Want to chat? Email me!