Emphasis

Emphasis is all about context

In design reviews, a lot of the feedback I provide focuses on these decisions of emphasis. I try to understand the true hierarchy of the content, ask questions about that, and then review the appropriateness of the subsequent design choices. The problem is that there’s usually not a single right or wrong way to provide emphasis. There are only solutions within a range of appropriateness. What constitutes “appropriate” is an interesting discussion for another essay. It revolves around things like brand standards, a particular design’s place within a larger landscape of related design, function, accessibility, usability, art direction, and possibly (usually) other factors. For many designers, it can be hard to keep all those factors in mind, as they’ve already got a million things to think about. This is where peer review becomes important: you get an outside-in perspective. You get a chance to zoom out and forget about those million things, and look at the work with fresh eyes.

Once you have a feel for this context, emphasis-related design decisions become easier to examine. One of the most common bits of feedback I’ve found myself giving to designers over the years is that we tend to overemphasize things. This leads to a cascade of emphasis-related issues, as overemphasis of one thing leads to underemphasis of others, for which we then try to compensate. Imagine a billboard advertisement. You’ve been asked to “make the logo bigger”. Doing this emphasizes the logo, but de-emphasizes the headline. So you compensate by adding emphasis to the headline, careful not to de-emphasize the logo. But now your photo is de-emphasized. And so forth. Every application of visual emphasis changes the relationships between pieces of content. It changes the way people see and interpret what’s important. You can’t emphasize everything. If you don’t make clear choices, your message won’t be clear to the viewer.

Additive vs subtractive design

Years ago, I wrote a conference talk about what I call the “Zero Interface”. I even named a business after it. The Zero Interface is a thinking exercise. It’s kind of zero-based accounting applied to design: what happens if we start from zero, and build things up again from there, only adding what’s necessary and leaving our former design baggage behind? What decisions might we make differently, and can we use those decisions in the current work?

When you start thinking this way, it changes everything. All design decisions can be questioned, and none are taken for granted. It’s critical thinking, it prefers simplicity, and it’s refreshing. I based my responsive design approach on the same principle: gradually building up a user interface from carefully examined and appropriately structured content.

I liken this to additive sculpture. Additive sculpture involves starting with nothing and gradually adding material. This contrasts with subtractive sculpture, which involves starting with a mass of material and gradually removing parts to create the end result. This is why I have a different perspective than many popular thinkers on simplicity: their focus is often on removing things to make them simpler. I prefer not to add those things in the first place.

And so it goes with emphasis. Given a zero-based scenario in which nothing has relative emphasis, very little emphasis is needed to be effective. Take the following grid of dots as an abstract example:

Here, nothing has emphasis. We can emphasize a particular dot in many ways. For example, by color:

Or we could put a box around it.

We could put a shadow under the box.

We could add a background color to the box.

Now, what have we got? Overemphasis! Why? Because one of these treatments would have been enough. In this case, we’ve used an entire toolbox to do a single tool’s job: color, background, border, box-shadow. The hole that you’re digging yourself into becomes apparent when, for some reason, another dot needs more emphasis than the first. That’s when the fun begins and the design starts showing cracks. (Note that here, we’re talking about visual emphasis. For the sake of accessibility, you’ll often provide emphasis in more than one way. For example, a bit of text might be displayed in a bold font, while at the same time using the HTML <strong> element behind the scenes. There are multiple ways to infer meaning and some of these are non-visual)

But there are more options. Why is everything a dot? Could everything except for the dot be a line? Do they represent the same thing? Color might not be enough from an accessibility standpoint. So do we go with a border, or does the dot need to be solid like the others? Could it appear on its own grid row? Can we use space to visually separate it from the other dots? Most importantly, can we do only one of these things and still emphasize the dot appropriately?

How to emphasize the right things

Let’s look at the principles behind the above example in a real-world situation: the overview screen of the app. We recently made a relatively small change: we introduced proper section headings, both technically and visually, to denote sections of the overview. Here’s how it looked before:

What we see here are small bits text with “Betalen” (Payments) and “Sparen” (Savings). These are existing elements in our design system, so some might consider this “correct”. But let’s deconstruct this screen and list some considerations:

1. The screen is an overview. It’s not about one thing, but many things. There is no single “theme” to it. Because of that, it’s safe to say that visual emphasis should support differentiating between logical chunks of content, rather than to give a particular chunk the most attention. (This consideration would change if users were able to customize the overview. In that case, we would want visual emphasis to support the user’s choices.)
2. One might say, “But payments are the most important section and need emphasis!” This is arguably true in this case. Yet, we don’t need to use any visual treatment to emphasize that, since the linear format of the app does this for us. It’s the top section of content. Thus, it already gets more attention than the other sections.
3. The tiny “headings” are not technically marked up as headings, which introduces an accessibility issue for people who aren’t able to see the visual styles. In fact, the “card” (the white box each section is in) is more important to differentiating the sections than the heading.
4. We have an existing style for second-level headings in our design system. We’d like to introduce consistency in heading usage.

I could list more considerations, but you get the idea. The gist of it is: for this screen, differentiating sections of content is the most important thing we should support. This will allow users to more quickly scan the screen. When we also consider accessibility and system consistency, it becomes clear that we could try simply using the existing second-level headings from our design system. This is how the screen looks at the time of this writing:

Regardless of your opinion about the typography (font, size, color, and weight, which are set to be changed in the near future), the emphasis is objectively more appropriate: 80% of surveyed users preferred the clearer headings. The reason for the preference? It was easier to distinguish the different sections. Ultimately, a “simple” change to headings helps people scan the page, is more consistent with our design system, and introduces better accessibility. This is emphasis doing its job.

So, how can you apply additive design for appropriate emphasis? Start from zero. I even recommend putting the content of your screen into a word processor. If your content were all in Microsoft Word and you had to get your message across, how would you do it? What would be the order of content? What are the headings? The subheadings? What’s italicized? Why? If you could only emphasize one thing, what would it be? Looking at your content structurally rather than visually will start to reveal what’s important. And in the end, that’s what emphasis does: it highlights the important.

How simple can you make keep it?

You don’t work with dots. You might have primary vs secondary actions. Headings vs body text. Captions vs form labels. Alternating bits of form elements and prose. Illustrations and photography. Your job is to present these in such a way that the user retains a low cognitive load. Such that their brains are able to parse and process the structure and relative importance of each chunk of content as quickly and as effortlessly as possible. This is seldom achieved by buffeting your UI with visual devices. Emphasis works not only because of what you do to a given element, but also by what you don’t do to others.