UI DESIGN TIPS
Decluttering in UI design
The most important balancing act
The most important balancing act
How to remove or hide everything that’s just noise at a given point of the user flow, and at the same time, keep or display all the content and functionality that’s needed.
Our goal
- help users achieve their goals by focusing their attention
- reducing users’ cognitive load
and ultimately, provide a better user experience.
How to declutter
- Hide / remove the parts that are not needed at the given point
- Reduce visual noise (e.g., use less colors, modify harsh shadows, apply less borders, use consistent icons, limit the number of typefaces, add more whitespace, simplify elements)
- Use progressive disclosure (don’t show everything all at once, and at the same time, suggest that “there is more”)
- Establish a clear visual hierarchy
- Prioritize content
- Remove unnecessary text (better UX writing)
- Support scannability (e.g., group related content together, apply headlines and subheadlines, use bullet points instead of wall of texts)
However, this is why it is a balancing act: if you remove or hide or simplify too many things, it might result in a wors user experience.
Keep what’s relevant (or makes the users’ experience better):
- Keep in mind that there is a concept called “interaction cost”, e.g. if you have less than 6 items, you shouldn’t apply a drop-down, instead, show them right away
- Serve both the information needs and functional needs of your users
- Always provide meaningful feedback to the users (e.g. showing the system status, communicating errors)
- You can’t create a meaningful visual hierarchy without styling elements differently
- Navigation shouldn’t be hidden or hard to find (at least in most cases)
- You should add labels to many of the icons (e.g. menu items)
- Progress indicators are good additions in many cases
- Apply useful empty states (instead of just leaving the screen blank)
It depends.
And of course…
It depends (designers’ favorite answer :) )
There is no one right way to achieve this balance. Here are some factors to consider:
- Is it a landing page (other website) or a web app? (What the product is.)
- First-time use or mastery? (~you should gradually reveal elements)
- Is it acomplex form or a content-heavy site?
- There are also cultural differences (e.g. read Bas Wallet’s excellent article)
- And naturally, a lot depends on who your target audience is
On the top of all that, this is a never-ending balancing act. You should conduct research. Then iterate. Then measure again. And so on. Always consider what the main user goals and business goals are at each step.
Some examples
How’d the decluttered version look like? Is it too much decluttering? Decide for yourself:
And what do you think about this screen? How’d you redesign it to make it more scannable?
Do you know about other good examples of this balance? Share in the comments!
Do you like my sketches? Support my work!
If you like my sketches, you can buy me a coffee to support my work! Thanks, I really appreciate your encouragement! 🙏
My Sketching for UX designers course on Udemy
If you like my sketches, check out my Sketching for UX Designers course on Udemy, use the coupon code SKETCHFORUX202402 to get 81% off! Click here to apply the code.
You can subscribe to my Sketching for UX newsletter to get early access to my newest UX Knowledge Piece Sketch (and receive it directly to your inbox each month). I also share my favorite design and visual thinking links.
Get my Sketching for UX Designers Workbook here for free (and you can choose to support me by paying a couple of dollars, I really appreciate your support!)
You can also grab a copy of my 100-day Long UX Visual Library Building Challenge book (also on a pay-what-you-want basis).
💬Please let me know what you think, I always appreciate you feedback!
