When I was a kid, terrestrial radio was pretty much our only option for listening to music on the go. Small, portable transistor radios (like the one you see in the picture) were essentially the blueprint for iPods and today’s smartphones.
And if you were a music fanatic like me, the hallmark of this traveling listening experience was the need to be ever vigilant — because at any moment the signal might grow weak and that favorite song you’d been waiting to hear for the last three hours would be mercilessly attacked by static and hiss as you drifted further from the source of the signal.
So you’d frantically change the position of the radio, throwing your arms out and contorting your body in different combinations and positions, hoping against hope to bring the signal back before the song ended.
To the uninformed observer, I imagine it looked like I was being attacked by a swarm of invisible bees.
Sometimes it worked, much to the chagrin of your friends or your parents; you’d insist on staying in that exact position on that exact spot until the song ended.
The point here is that nothing — and I mean nothing — was more important than maintaining and maximizing the signal. And in doing so, minimizing the noise.
Good UI design is all about the signal.
This same principle applies to good user experiences driven by equally good UI design: the degree of quality is determined by the ratio of relevant information (signal) to irrelevant information (noise) that appears in the UI. Noise reduces clarity, usability and value; it dilutes useful information with useless information.
Noise is the five self-congratulatory paragraphs on a website’s home page that starts with, “As one of the leading companies in the nation, we’re you’re best partner because we understand your unique challenges you face blah blah blah.” All you want to know is what the hell they DO and whether or not that will help you.
Noise is the six splash screens in the app with no skip option, still yammering on and on about how cool it is and how awesome your life will be when all you want to do is just get STARTED already.
Noise is the granular data detail that you don’t care about, because all you need to know is whether or not the sales trend for the last three months is good or bad.
Noise is visual clutter, like those piles of paper on your desk you have to move every time you need to find something else.
Not that I’m one of those people.
Noise comes from places you least expect it; those overlooked, seemingly unimportant areas of the UI that the majority of designers and developers rarely pay attention to (but absolutely should).
Noise is all the stuff you feel like you have to wade through in order to get what you need and care about — and if we’re talking UI design, that’s a long list. If you’re not careful, nearly every component in your interface can work against users (and you) if each is not designed properly.
God, as the saying goes, is most definitely in the details.
Explaining and identifying every cause of noise in the UI is much more than this humble article will allow, so if you want real-world examples of what to watch out for — and how to make simple changes without the need for a full-scale redesign — click here to download my UI Checklist: 4 Steps to Reduce Visual Clutter. It’s absolutely free.
This visual clutter taking up every square pixel of the screen is usually the product of a client, stakeholder, designer or developer who believes that more is the equivalent of better.
(hint: it’s not.)
Look, when a user launches the app or lands on the first screen of the system, she already knows what she wants from it. She’s coming in with an expectation of what she’ll find, how it’ll work and what that will do for her. But of all the features and functionality she’ll encounter in that instance, it’s a safe bet that only 20% at best is actually useful and actionable to her.
I’ll give you an example: awhile back I was asked to evaluate the UX of a financial services reporting application for insurance agents. While this isn’t an actual screenshot of the existing system (client confidentiality), it was every bit as complex, layered and multicolored as what you see here:
I ask you: How much of this do you think is noise?
How much of it do you think is signal?
How much of this information do you think the viewer actually needs in order to take the very next step?
I’ll give you the answer — they need THIS much:
That screen was designed for an analyst whose sole responsibility is to deliver a daily report across five (5) specific categories of data. What we learned is that the only figures he needed to include in that report were the totals of each of the five categories. While he occasionally needed to see the underlying details of each total, everything else on the screen was completely irrelevant to him.
So while we needed to provide a way to get to that detail for him (and for people in other roles), we didn’t need to surface it in this screen. This is the same approach I am advocating here: focus on the core elements, the 20% of information and interaction your user really needs on any given screen. Your UI design work should answer this question, which you should always be asking:
How much information does this person need in order to take the very next step?
This is the primary information and action they need. Everything else is a distant second. Give them access to more if it’s necessary – but move that “more” out of their way.
This approach, by the way, comes directly from what I consider to be the single-most important principle of good UX and UI design:
Progressive disclosure.
Progressive disclosure is absolutely critical to good UX — because it helps people manage complexity without becoming confused, frustrated, or disoriented. If this term is new to you, I strongly suggest you check out my article on the topic, The Power of Progressive Disclosure. I routinely tell clients and teams that if they forget everything else I tell them, they absolutely, positively MUST learn, integrate and apply the principle of progressive disclosure!
It really is that important.
Boosting Signal in the UI: What, How and WHY
So how do we minimize noise? By removing unnecessary elements, and simplifying representation of necessary elements.
Here’s one of my favorite examples. Enterprise apps and systems are filled to the brim with grid- or table-based data. Going on close to three decades now, I have yet to see a system that displays this information in a way that maximizes signal.
You heard me right — not one good example in my 26 years doing this.
In general, the rule for grid- or table-based presentation is this:
Content should come forward and be visually prominent. That means content/data should be the darkest thing on the screen; all text describing that data should be solid black. This creates maximum contrast, which allows the user to focus on it without distraction.
Labels and borders, however, should visually recede. At a glance, they sound be instantly, clearly distinct from the content they refer to.
Let’s look at an example where there’s no clear separation between the two:
Notice how much visual and cognitive effort you have to expend to distinguish the labels from the data, or one column or row from the next. Your eye bounces back and forth between them, even if you don’t want it to. And in many cases, you may not even be aware that this is occurring. This happens for three reasons:
- Size, contrast and visual “weight” of every element is identical. The labels, content and table/cell borders are all the exact same weight and color. Without significant, contrasting visual differences between elements, the brain has trouble distinguishing between them and prioritizing them. Which means it also has trouble grasping the relationships between them.
- Boundaries are inconsistent, and trapped negative spaces are distracting. The solid black cell borders, as I mentioned above, compete with the text for attention. Not only are they the same visual weight as the text, the high contrast and centered vertical alignment in the cells causes the baselines (bottom edge) of the text to be misaligned across each row, from left to right. The brain is built to notice and fixate on these visual differences and decode them, which is how it differentiates signal from noise. But if all our energy is spent decoding, there’s very little left for understanding.
- Column alignment changes from label to text. The column labels at the top are center-aligned, while the text is left-aligned. That prevents the eye (and the brain) from making a quick association between the two. Once our vision locates a starting point, the instinctive response is to move in a straight line, either horizontally or vertically. We track along an edge, and we do that faster and easier when that edge is consistent. When that reflexive visual flow is interrupted, so is the cognitive understanding of the relationships depicted. In other words, it becomes noise.
With some very minimal changes, we can make this a lot easier to scan quickly, increasing a user’s ability to focus on the content without the eye being dragged back to the label (or other UI components). Notice how both the table header, the column labels and all borders recede, and the signal — the content the user is here to see and absorb — stands out.
Everything in solid black is signal, so it all comes forward in the visual field. It’s the first thing you see, it’s where the eye is automatically directed. Notice that we’ve also divided the signal as well, in order to clarify relationships: by making the type of report bold and the rows that refer to it regular weight, it’s clear that one describes the other.
And while the labels themselves aren’t noise per se, we treat them as if they were. They are points of reference that further define what we see, nothing more. They aren’t nearly as important as the data itself, so we treat them as such.
This approach applies to more than just table-based data as well. One of the failures of “big data” — despite the continuous media hype the topic receives — is the fact that in most organizations, it’s grossly under-utilized.
Why? because the data presentation is usually so poor and so complex that no one can make sense of what they’re seeing, much less act on it.
What’s frustrating here is that, in most cases, improving and simplifying data design doesn’t have to be a hurdle. If you’re a designer or developer working with data charts and graphs, the rules I lay out in Simplify Data Visualizations — in 7 Simple Steps can show you how to make charts of any kind simpler, more understandable and infinitely more useful.
A word of caution: don’t go too far.
It’s also worth noting that this ruthless approach to minimize noise can be taken too far.
Flat design, in particular, has evolved into a bit of a monster, where designers are removing the visual cues people actually need in order to use what they design.
These minimalist, flat approaches to UI design often leave out the necessary visual cues and guidance that prevent everything on the screen from blending together. Everything is the same size, same weight, same font, same degree of visual importance.
And when everything is equally important…nothing is important. Visual hierarchy is destroyed.
In other words, it’s all noise.
This leads users to confuse button text with body text, navigation menu items with page titles and labels with the content or data they describe. No matter how beautifully minimalist the UI design may be, it doesn’t work — because users can’t tell the difference between elements that are interactive and elements that aren’t.
Here’s a perfect example I saw in a blog post recently:
The previous, next and add to cart buttons here…don’t look like buttons. Because they extend horizontally in both directions and match the edges of their containers, their shapes are indistinct. The brain expects to see a specific boundary of negative space that defines button, that signals interaction.
Instead, these interactive elements look like decorative headlines with color behind them. Every element here is too visually similar to every other element.
The result? Say it with me now:
All noise.
That’s happening because the design choices here hinder pattern recognition. Pattern recognition is a core cognitive process that matches information from what we see onscreen with information retrieved from memory. For example, pattern recognition is the reason you can recognize specific words and letters across different font styles, no matter how decorative or abstracted those fonts may be.
Let’s look at another example of visual clutter. When you decide to use a slew of icons without — or instead of — text labels, you do the same thing: it’s all equally important, all competing for our attention. And if those icons are too abstracted, the volume of noise increases even more.
Designing properly with icons is a lot harder than it sounds, because without a text label, that icon has to speak volumes — usually to a fairly wide range of people with very diverse backgrounds, experiences and preconceptions about what those icons mean.
Snapchat, for example, is confusing to just about anyone who isn’t a teenager (possibly on purpose, but that’s another story). The main culprit: a lack of guidance or instruction on the home screen, combined with icons that aren’t universally understood.
In the first screen, only three of the seven icons here are recognizable from experience with other apps: camera rotation, chat and the photo button. The others are ambiguous, speaking a visual language that only they know. Even the flash icon isn’t the standard icon used in pretty much every other app in existence.
Of course, as I alluded to above, this may be the point: to some degree, my teenage kids don’t want me understanding or speaking their language 😉
Regardless, it’s still a great example. This removal of obvious identifiers — easily recognizable icons or descriptive text labels — results in users having to work very hard to figure out what these icons mean and what they do.
The more mental work you ask a user to do, the more likely they are to abandon the task at hand. And that costs you: the app doesn’t sell, the home page is abandoned before signup, the cost savings expected via automation never materializes.
For just about every other app other than Snapchat (who seems to be doing just fine), that’s failure. And that failure is the result of this sameness, this visual clutter in the UI, that impedes cognition and obscures understanding. And the culprits in many cases are these inside jokes masquerading as icons.
Don’t get me wrong here — I’m not suggesting that icons are inherently bad in some way. On small screens where real estate is limited, they’re essential components of good UI design. But the icons you choose have to be the right icons for the job. They have to take into account your users’ inherent understanding and prior experience. It just so happens that I wrote an article on how to do just that; it’s called The RIGHT Way to Use Icons in Your UI.
If you’ve ever wondered what icon you should be using where (or if you should use one at all), check it out.
How to spot — and remove — visual clutter.
I have two kids in high school right now, and a third on her last year of middle school. As you might imagine, my wife and I spend a fair amount of time monitoring their progress. Specifically, their grades.
The good news is that the school provides a portal for parents to access their kids’ grades. The bad news is that it’s the most ridiculously difficult thing to use ever invented. Imagine the complexity of an airplane cockpit, with none of the logical intelligence behind it.
Yes, it’s that bad.
The problem with anything this complex and ill-conceived is that — even if you’re armed with insights like those we’ve covered here — it’s damn hard to figure out where and how to apply principles of good UX and solid UI design. That’s why, when I work with teams, we walk through the screens together and we learn by doing; by breaking down problems as we find them and uncovering all the other things that are affected by visual clutter.
Put another way, seeing it and doing it is usually a lot more useful than just talking about it.
The education portal I’m harping on is a living example of everything I’ve discussed here. So if you think it would be valuable for you to walk through its core workflows with me, screen-by-screen, to find and fix UX/UI issues, I’ve got a way we can do that.
My 90-Minute UX Audit + UI Redesign course — part of my NEW UX 365 Academy — is structured to mirror the work I do daily with designers, developers and product teams. We walk through every screen of the site’s core workflow from a user’s perspective, with you essentially looking over my shoulder.
Check out UX 365 and the 90-Minute UX Audit + UI Redesign >
What you’ll witness is an untold number of rather inventive examples of visual clutter, across every screen in the workflow. During the course of the class, I call out these issues, explain why they’re a problem and show you how to properly redesign them.
And while this is a web portal specific to education, the problems here are universal. They occur in every app, site or system you will ever be asked to redesign. This means that you’ll be able to apply what you learn here to anything and everything you work on, now or in the future.
It’s kind of like those ‘hidden image’ illustrations: once you see it, you can’t stop seeing it.
So if you’re interested in getting some real-world, practical advice on how to spot and fix these kinds of issues, I invite you to preview the course at my new UX training website, the UX 365 Academy.
I also encourage you to download my FREE UI Checklist: 4 Steps to Reduce Visual Clutter. It’ll show you how to boost signal by removing visual clutter in the UI — without the need for a full-scale redesign. These 4 simple categories of change will make a huge difference in simplifying your redesign work, whether that be an app, website or enterprise system.
And finally, I want you to always remember that when it comes to UI design, more is almost never better.
It’s just more.
. . . . . . . . . . . . . . . .
If you’d like to get more advice from me every month on topics like this — in the form of training videos, full-length courses, e-books, downloadable templates and more — check out my NEW online school, the UX 365 Academy. Every month I publish new content, and you also have access to every course, book and training video I’ve ever created — some of which have never been published online before now.
