This is part of the How to Design Good Products series

We all know “simplicity” is a golden rule for any design discipline. But what does it really mean for product designers? How do we apply it in our designs?

First off, why do we need simplicity in product design? Product design is about form and function, and simplicity benefits both aspects.

1. Simply designed UIs are more aesthetic, which means your product will be more pleasant to use.
2. With a simpler interface, the user has less to process (aka “reduced cognitive load”). Their focus enhances. They can find information and get things done faster.

So how do we design simple interfaces? What does it really mean in practice?

In product design, simplicity be achieved via both the visual elements andthe information presented. When designing, keep these two rules in mind:

1. Minimize the amount of visual styles and elements

2. Minimize the amount of information you need to get the point across (the point being the task you ask the user to do).

Let’s illustrate with examples.

Minimize number of visual styles

In the left screen, there are in total 2 font sizes (title and body) and 3 text colors (primary, secondary, and accent).

However, the right screen has at least 8 font sizes (2 typefaces, varying casing) and at least 6 text colors (primary dark gray, secondary lighter gray, secondary brown, purple, orange, beige)

Both are complex screens, but it’s not hard to tell which one is visually simpler and more aesthetic.

Simplify information

At a glance this screen on the left is simple enough. But let’s examine the value added by each element more closely.

In the header

1. The “Good morning” message takes up precious content space, but doesn’t add a lot of value to users.
2. Divider line doesn’t add value either, so it just becomes an extra element that adds visual noise.

In the cards

Textual information

1. For location, state name can be abbreviated if you’re in your home country.
2. Country name is unnecessary too — these card suggestions are based on real-time location. People probably know which country they are in.
3. “6.4 mi” is clear enough on its own. The word “Length” doesn’t add clear value.

Visual information

1. The two glyphs (bookmark and download) have different styles and are placed in opposite corners. Grouping them be next to each other with the same style can simplify.
2. Do people really need to download the map while browsing suggestions? Downloading seems more relevant when the user taps into the trail details screen.
3. Injection the label and star rating row into textual content breaks the visual balance. Group visual elements together if possible.

Before & After Simplification

After simplification, the cards are much easier to read with more visual balance. We also deliver more user value by having more space for content.

Like they always say, “less is more.”

Follow me for more hands-on product design tips. If you don’t want to miss updates, subscribe to the newsletter here.