Post

Simple steps to reduce visual clutter

Posted Updated
By
2 min read

According to Joe Natoli

“Make all visual distinctions as subtle as possible, but still clear and effective.”

1. Increase negative space.

Negative space is NOT ‘blank’ space — it’s purposeful.

Negative space enables focus, improves scannability and readability and clearly defines boundaries and relationships between objects.

To boost signal and reduce the sense of clutter, we:

  • Increase container margins on all four sides.

  • Increase margins after each paragraph and line-height.

  • Increase padding inside containers, cells, fields, buttons and other enclosures.

2. Remove unnecessary rules and containers.

Every container ‘trapped’ by a rule obscures the most important elements and actions on the screen.

Most containers actually work against their intent of separating content and allowing a user to focus.

The extra contrast and trapped negative shapes that result actually pull the eye to themselves — away from the content or data the user is trying to focus on. So we further streamline the UI by doing the following:

  • Remove any unnecessary rules; use negative space and alignment to create visual groups.

  • Remove rules from existing enclosures with background colors.

  • Use color instead of rules where possible.

  • Visually separate navigation areas.

  • Lighten any rules that must be used.

3. Separate labels from content (tables & forms).

Content and data should “come forward” and be visually prominent, the darkest thing on the screen.

This creates maximum contrast, which allows the user to focus on the content.

Labels, however, should visually recede, and should be clearly, visually distinct from the content they refer to. This goes for button and navigational labels as well.

Here’s what we change in order to do that:

  • Change case and/or color of navigation menu items (e.g. all caps/lighter).

  • Change case and/or color of button labels.

  • Make field labels lighter than text inside fields.

  • Adjust contrast between heading and content container backgrounds.

4. Separate Primary, Secondary & Tertiary Actions.

When there’s no distinction between Primary and Secondary Actions, people make mistakes.

Sometimes that just means inadvertently changing something, but in some cases it can mean mistakenly deleting a great deal of work!

There are several ways we visually distinguish between Primary (most important) and Secondary Actions — and their distant cousins, Tertiary and Quaternary:

  • The Primary Action is always a high-contrast button, appearing to the far left.

  • Secondary or Tertiary Actions, when grouped with a Primary, should appear next, to the right, either as low-contrast buttons or text hyperlinks.

  • Contrast of Tertiary or Quaternary Actions should decrease gradually for items of less importance.

  • Unrelated functions should have a different visual appearance and be separated in proximity.

UI, Design
design ui
This post is licensed under CC BY 4.0 by the author.