How to Declutter your Design

Tips for a neat & orderly UI

Carol Skelly
Jun 30, 2016 · 7 min read
Image for post
Image for post

I’ts been said that “simplicity is an art form”, and in the case of UI design nothing could be more true.

As designers, we’re often faced with use cases that require us to pack a lot of information into what should be a lean Web design. I often find it difficult to strike a balance between conveying relevant stuff to the user, and keeping the UI clean and minimal.

When there’s too much “stuff” in the UI, user’s can be overwhelmed or distracted — — yep, that’s poor UX.

In a Perfect World

In Reality

How I Declutter

Some of the approaches I use are during the layout and protoyping phase, while others are clean-up tasks I perform when the design in almost complete. Like and part of the design process, decluttering is iterative.

1. Whitespace

Many web designs make good use of horizontal whitespace. Consider the fixed-width page container with that allows for a lot of whitespace on the left and right. However, this may not be an option on smaller mobile displays like smartphones.

Horizontal whitespace on the sides helps to declutter, and makes our main content more readable by drawing focus…

Image for post
Image for post
Whitespace on the sides of main container

I happen to prefer a centered container because I think the user’s eye is naturally drawn to the center of the screen. The horizontal whitespace between elements is also important.

Vertical whitespace is also important and often overlooked. Look at what happens when we increase our margins after each paragraph and the line-height.

Image for post
Image for post
Increase vertical whitespace using margins, paddings or line-height

As the layout becomes “busier” these whitespace improvements will make a big difference in terms of focus and readability.

2. Color

But, HSB or color family is another factor. We obviously need to be more cautious with palette “C”…

Image for post
Image for post

Frequency & proximity of the colors are also significant.

By frequency, I mean how often a color is used within the viewport. By proximity, I mean when an accent color is nearby another color. Consider the frequency & proximity of colors as a means to declutter the viewport…

Cluttered:

Image for post
Image for post
Bad: color use makes the viewport look too busy

Decluttered:

Image for post
Image for post
Better: consider semantic purpose, frequency & proximity of colors

We keep the sidebar elements yellow. The blue is now consistently used for the main navigation in the top navbar and links. The red elements are near each other.

3. Borders & lines

At first, it seems that clear borders and boundaries will help to better define content sections. When you take a step back, you’ll see that too many borders and lines can add to the visual clutter…

Horizontal lines & borders can make it look busy:

Image for post
Image for post
Bad: borders and lines can add to the clutter

Take out horizontal rules, and bring on the whitespace:

Image for post
Image for post
Better: remove the lines

Consider switching borders with neutral background colors:

Image for post
Image for post
Best: remove the lines and borders

The recent redesign of format magazine is a great example of going borderless with a busy layout.

4. Required vs. extraneous (TMI)

But, when our focus is decluttering, we think about ways to collapse extraneous information, or reduce calls to action. Initially show required content, and hide content that is only necessary when the user calls for more detail.

Prioritizing the contextual importance of content bits will help you to determine if the user always needs to see an element.

Usually sub-navigation and content metadata are examples of content bits that can be initially hidden to the user.

Image for post
Image for post
Bad: Lots of metadata & actions create clutter
Image for post
Image for post
Better: remove metadata where possible & create a single call-to-action

This can also be taken a step further by showing information based on user interactions. As of late it’s being called Progressive Disclosure. I think of it conceptually as a sequential “wizard”. Display content to the user based on a workflow.

You may be able to declutter by simply moving less relevant content into a detailed drilldown (ie: modal, tab or collapse panel), or separate page. Modality is often used to re-focus the users attention.

5. Size & scale

For the sake of decluttering the browser viewport, remember that the range of viewport sizes (screen widths) is much larger nowadays. On the progressive Web there is now everything from small smartphones screens, to huge high-res desktop monitors and everything in between.

One way to manage size & scale for the plethora of devices is responsive design. Now that you can use EM sizing and media queries to scale elements accordingly, make sure you take advantage of this when decluttering your design.

Size & scale are especially relevant to text size. If you find all of the fonts look about the same size, you may want to reconsider text size & scale. Try to find a happy medium with 2–3 font sizes at each responsive breakpoint. Of course you’ll want to apply those sizes semantically for headers, sub headings and normal text. Only use 1 or 2 typefaces, as different font styles can also add to the clutter. You may also want to consider the boldness of text. Less contrast for less important textual content.

Some obvious points here for size & scale...

Important stuff & calls-to-action are big

Extra stuff (sidebars, metadata, sub-nav) is smaller

Decluttering rules to live by

(Loosely)

  • Keep whitespace on the sides of the main content area (except on mobile devices).
  • Increase horizontal & vertical space between sections (ie; text blocks, cards).
  • Increase line-height of paragraphs.
  • Control use of accent colors in terms of frequency & proximity to other colors.
  • Keep contrasting borders & lines to a minimum.
  • Establish must-have vs. extra info (content), and then show/hide accordingly.
  • Try to simplify, or prioritize calls to action.
  • Consider size & scale of everything, including must-have vs. extra content.

Generally speaking, the results of decluttering will be subtle, but you should see improved uniformity and consistency.

I haven’t yet mentioned the benefits of decluttering because I think they are very apparent. Here are a few that come to mind:

  • Improved readability and eye focus
  • Improved usability and UX
  • Improved conversion rate and ROI
  • Decreased bounce rate

How Do You Declutter?

Oh yeah, and should I have said “unclutter”?

WDstack

Tools, apps & insight on design + development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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