How to Declutter your Design
Tips for a neat & orderly UI
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
Let’s be real here. While it’s nice to be able to work on landing pages (a hero, signup form and a few cards), this isn’t usually the case.
In Reality
There are many factors that add to the clutter of our design, Most “real world” Web apps require lots of space for information. There needs to be space for text, media, ads and multiple navigation areas (navbars, footers, sidebars and calls-to-action within the content). Often there are scenarios where we need to also find room for notifications, forms and less-relevant “sub content” for things like discussion threads, comments and metadata. This becomes more challenging in the new world of Progressive Web Apps.
How I Declutter
Just to clarify, when I say “declutter your design” I’m referring only to the visual and readability aspects of the design. There is nothing in here that is specifically intended to impact performance, bloat or SEO, although those may be after-effects.
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
Over time I’ve gained a lot of respect for whitespace. This is arguably the most important element of a minimal design. And what’s great about whitespace is that even if you have a sh*t ton of content you can still improve and make use of 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…
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.
As the layout becomes “busier” these whitespace improvements will make a big difference in terms of focus and readability.
2. Color
When considering a color palette, I’ve always heard that “simple is better”. Ideally 2 colors, and no more than 3 colors should be used on a Web page. I’m referring to the “accent” colors, and not neutral background colors (ie: white, gray, black).
But, HSB or color family is another factor. We obviously need to be more cautious with palette “C”…
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:
Decluttered:
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
Like anyone, I can get in the bad habit of thinking inside the “box”.
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:
Take out horizontal rules, and bring on the whitespace:
Consider switching borders with neutral background colors:
The recent redesign of format magazine is a great example of going borderless with a busy layout.
4. Required vs. extraneous (TMI)
This consideration for decluttering is also tied to UX, and usually requires more significant refactoring on the frontend. There are also many schools of thought on this from the standpoint of usability.
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.
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
Obviously broad design concepts, size and scale are similar in importance to the whitespace described before. Striking a balance is key.
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)
So here’s what I’ve learned, and the rules that a I loosely follow when thinking “declutter”.
- 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?
I’d be very interested to learn what de-cluttering tips & tricks other designers use. Here’s an interesting perspective from Jonas Downey who reminds us that sometimes clutter is a necessary evil. It might be something specific about the layout, or it might be something you always keep in mind during the iterative process of design. Thanks for sharing your ideas and comments.
Oh yeah, and should I have said “unclutter”?
