Simple StepS to reduce

4 -Step checkliSt for ui redeSign projec tS

introduction there ’s no such thing as small change

“Make all visual distinctions as subtle as

possible, but still clear and effective.”
EDWARD TUF TE

Everything a user sees onscreen does one of two things.

Each element either:

1. Illuminates the path to their desired outcome

and helps them get there easily, or

2. Serves as an obstacle standing between them

and what they hope to find and accomplish.

The difference between these two outcomes is heavily

dependent on the amount of visual clutter the person has to
contend with at each step.

What designers and developers often lose sight of is the fact

that to users, the UI is really just a means to an end — and
that end is infinitely more important to them than the methods
by which they arrive there.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 1
introduction there ’s no such thing as small change

In this case, the destination really does matter a great deal

more than the journey.

So if the destination matters most, then it’s up to us to make

sure the journey is clearly lit and well-marked. It’s our job to
make the path to follow — and the necessary actions to be
taken — made obvious and understandable.

The 4 steps outlined in these pages aren’t grand gestures.

There’s no overhauling the look and feel of the UI, no radical

changes to styling or layout.

Instead, what I offer you here is a series of small adjustments

that — when combined — make a monstrous improvement in
usability and user experience.

A sign I keep in my office bears the words, “there’s no such

thing as small change.”

I couldn’t agree more.

GIVE GOOD UX —

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 2
 s ay h e llo to o u r r e d e S i g n p roj ec t.

Here’s the interface we’ll be redesigning today. It’s a beautiful example of what
passes for state-of-the-art in enterprise software. And it’s riddled with visual clutter.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 3
1 i n cre a s e n eg ati v e S pace .

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.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 4
1 i n cre a s e n eg ati v e S pace .

Here’s an example of that work in action. Notice how much easier it is to quickly
identify and scan each section of the screen.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 5
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.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 6
2 remove unnecessary boundarieS and containerS.

Here’s our UI once again, with these modifications made. Notice how it’s starting
to feel a lot less “busy,” while the distinctions between sections remain clear.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 7
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.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 8
3 separate labelS from content (tables & forms).

Here’s how those rules affect our example. Notice how navigation items and
headings separate themselves from the content, because they’re in ALL CAPS.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 9
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.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 10
4 separate primary, Secondary & tertiary actions.

Here’s how those rules affect our example. Notice how navigation items and
headings separate themselves from the content, because they’re in ALL CAPS.

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 11
 small changes, big difference.

We’ve just reduced a ton of UI Clutter —

without a full-scale redesign.
When tackling a complex screen like the one here, the
number of visual problems to solve can seem endless. It
can seem like every component of visual clutter in the
UI is conspiring to work against you and your users.

And when time and/or budget is tight, it can seem like

an insurmountable task.
before
But as I hope you’ve seen here, it’s nothing of the kind.
You don’t have to fix or change everything — just the
things that matter most.

By focusing your attention to these 4 specific areas of

the UI, you’ll eliminate a great deal of visual clutter and
noise. That’s all it takes to cut out the stuff users typically
have to wade through in order to get to what they need
and care about.

Put these steps for removing visual clutter to use in

whatever you’re working on now, or in your next project,
and see for yourself just how powerful they can be! after

j o e n at o l i 4 simple ste ps to re duce v isua l clut te r ©2017 give good ux | t wofold llc. all rights reserved. 12
eaSily integrate ux into Scrum/agile
( and ensure your requirements give good uX )

“Seriously fantastic course — and so worth it. I was able to take my

choices and run them through Joe’s process to make decisions I’m really
confident about, and I’ve definitely quoted him or used his way of explain-
ing something to higher ups. It gives you everything... I went though this
course using a project I had to get done and it progressed perfectly.”

h e at h e r m ay b e

Save 30% today

when you enroll using this coupon code: givegood30

learn.givegoodux.com/courses/ux-requirements-made-simple

Change the way you, your team and your managers

see UX and product requirements. 4 lifetime access to 23 lectures
In the time it takes to watch a great movie, I’ll walk you through my time- special price
for uX fail 4 Q&a with Joe
tested methods for integrating user research, persona development and
readers

67
UX-focused requirements into an existing development process. With- 4 learn a simple way to get managers to
out asking for more time, more budget or more people, you’ll be able to: $ listen to your uX recommendations —
4 Convince executives and managers who think UX is a waste and act on them
of time and money to change direction and include UX all the save $30!
4 get a clear, solid sense of what users
way back at project estimating meetings.
really need — even if you have no
4 Deliver a massive increase in both the quality of UX and the budget for user research
efficiency of execution across sprints.
4 replace cumbersome, formal tools
4 Quickly figure out what tasks, features and functionality to with clear, simple exercises that
focus on (and what to ignore) and how to know when you’ve uncover true uX needs and get
got a handle on what people truly need. everyone on the same page
Proven, step-by-step methods
and clear, jargon-free advice
for working with teams, managers
and clients to deliver excellent
products and stellar UX.
Softcover and eBook formats available

R e a d e x c e R p t s + l e a R n m o R e g i v eg o o d u x .co m/ th i n k- f i rS t