Karen O'Sullivan

61 Merrion Square South, 
Dublin 2, D02 EW25, Ireland

Main Nav

<div class="paragraph-large">
With the amount of UX tips and tricks readily available at our fingertips, it&#8217;s hard to believe how many websites and other interfaces are still drowning in cognitive noise.
… but here we are.
</div>
In a misguided attempt to catch our attention, we still see interfaces that overburden the users&#8217; cognitive load (the amount of mental effort required by the user to absorb new information) by cramming way too much information and irrelevant visuals into any available real estate.
These additional and unnecessary elements are usually referred to as &#8216;cognitive noise&#8217;.
In this post, we&#8217;ll delve into the concept of cognitive noise and why it needs to be managed.
<h3 class="p1">Understanding Cognitive Noise:</h3>
Cognitive noise in UX design is the static that disrupts the smooth transmission of information from the screen to the user.
Think of navigating a website with excessive cognitive noise as similar to trying to read a book at a dance rave &#8211; the distraction would be overwhelming. You probably won&#8217;t be able to focus on the plot and will have to keep going back over the same sentence again and again, trying to absorb it.
Realistically, you’re not going to commit to this scenario for very long and are more likely to ditch the book and grab a glow stick.
Now, imagine reading that same book in a quiet library, with soft lighting and minimal disturbances. The experience is immersive, allowing you to focus on the narrative without the strobe light-induced chaos.
&nbsp;
<img loading="lazy" decoding="async" class="alignnone wp-image-14825" src="https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-250x111.png" alt="" width="744" height="330" srcset="https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-250x111.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-700x311.png 700w, https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-768x341.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library-120x53.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/01/reading-at-a-rave-vs.-at-a-library.png 1277w" sizes="(max-width: 744px) 100vw, 744px" />
<h6>&#8220;Navigating a website with cognitive noise is like trying to read a book at a rave.&#8221;</h6>
The point is, that a rave isn&#8217;t an appropriate atmosphere for reading a book and the surroundings don&#8217;t match the task at hand. The surroundings make it more difficult to focus by adding cognitive noise, like flashing lights, loud music, and people shouting.
The target audience for a rave isn&#8217;t people who want to read a book and it isn&#8217;t the task that the atmosphere is designed for. Whereas a library should be designed to be conducive to reading, after all, people come to a library to read.
<h3>Necessary Noise</h3>
There will always be some noise in a library, things that might distract but are part of its functioning like the phone might ring or there might be flyers on the table for an upcoming event.
These things will be considered. The phone will probably be on a low volume and the flyers will likely be in a neat pile. If not, the library could start to look and feel chaotic and noisy, and a lot of its target audience would probably stop visiting.
The same goes for interfaces &#8211; there is a level of noise that is unavoidable and acceptable.
But, if it&#8217;s just full of useless information and distracting visual elements, users will look elsewhere for a product that has considered their experience and has optimised the signal-to-noise ratio.
<h3 class="p1">Signal-to-noise Ratio</h3>
Generally, Signal-to-noise ratio (SNR) is a term used when referring to audio, but it can also be applied to measuring cognitive noise in UX/UI design.
It&#8217;s a measure that compares the level of a desired signal (the information the user wants/needs to complete a goal) to the level of background noise (anything unnecessary that distracts the user from completing that goal).
So for example, a website that prioritises visual distractions over intuitive navigation and relevant information has a low SNR. In contrast, a site that prioritises the users’ goal/journey and uses appropriate visuals to enhance that experience, has a higher SNR.
<h3 class="p1">The University of Terrible UX</h3>
<a href="http://UAT.edu">UAT.edu</a> (University of Advancing Technology) was for a long time held up as a shining example of bad UX design, until its redesign in 2020.
While the approach to the site&#8217;s navigation was certainly…innovative…it made for a horrible user experience.
&nbsp;
<img loading="lazy" decoding="async" class="alignnone wp-image-14818" src="https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-250x147.png" alt="" width="749" height="440" srcset="https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-250x147.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-700x412.png 700w, https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-768x452.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020-120x71.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/01/Uat.edu-2020.png 1519w" sizes="(max-width: 749px) 100vw, 749px" />
&nbsp;
Every aspect of the navigation was animated. To find the content you were looking for, you had 2 options, both of which were literal games of cat and mouse.
You could either:
A: Follow 20-ish images swirling around a man&#8217;s head, reading the text overlaid on each and trying to click the right one before it disappears behind him.
Or, B: If you are a very fast reader and incredibly patient, you could wait, ready to immediately click the menu options at the bottom of the page that randomly jump up into view for about 1 second at a time.
<h3 class="p1">The New and Improved University of Terrible UX</h3>
With all of that said, in 2020 UAT launched their new, redesigned website.
So, surely the overuse of animation and strange navigation patterns are now a thing of the past right?
Wrong.
The website has come up with a new and improved way of being incredibly distracting and difficult to navigate.
&nbsp;
<img loading="lazy" decoding="async" class="alignnone wp-image-14820" src="https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1-250x127.png" alt="" width="731" height="371" srcset="https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1-250x127.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1-768x391.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1-120x61.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/01/uat.edu-2024-1.png 1788w" sizes="(max-width: 731px) 100vw, 731px" />
&nbsp;
Now there is, at least, a clear call to action to choose what type of degree you want more information about, but it is overlaid on a looping video of students posing and flexing for the camera, with ever-changing colours that slide in and out while you try to read the white text.
Not to mention the annoying animated hover states on cards, the second irrelevant video of said posing students that twirl in and out of view and course a horizontal scroll that makes it easier than ever before to accidentally navigate to whatever webpage you were on previously.
While the new version of the site is, to be fair, easier to navigate than the old one, the design is still overly noisy, disorganised and distracting.
It&#8217;s a clear case of a low signal-to-noise ratio, which seems outdated for a university that teaches students to “innovate for the future”.
<h3 class="p1">Minimum clutter, maximum impact</h3>
If UAT is the rave from our initial analogy, then the University of the Arts London (UAL) is the library.
The homepage features a clean layout, with a simple, but effective colour palette. The strong, professional imagery of the students’ work gives the site its personality while also setting a professional tone and suggesting high standards of work.
&nbsp;
<img loading="lazy" decoding="async" class="alignnone wp-image-14831" src="https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-250x135.png" alt="" width="711" height="384" srcset="https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-250x135.png 250w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-700x378.png 700w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-768x414.png 768w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-1536x829.png 1536w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1-120x65.png 120w, https://www.api.friday.ie/wp-content/uploads/2024/01/Screenshot-2024-01-04-at-14.34.14-1.png 1790w" sizes="(max-width: 711px) 100vw, 711px" />
&nbsp;
Simple animations are reserved only for hover states, so there are no distracting moving elements vying for our attention, making it much easier to see what is available on the site.
This website has a high signal-to-noise ratio. It is much easier for a user to complete a specific task on this site or to even just browse because the navigation and information are forthcoming and not overshadowed by clutter.
<h3 class="p1">Cleaning Up the Clutter</h3>
In conclusion, the battle against cognitive noise is an ongoing challenge in the ever-evolving landscape of UX design.
Enjoyable and effective user experiences are created by embracing simplicity and decluttering digital spaces, rather than cramming as much as possible into a small space.
Design that balances intuitive navigation and minimal cognitive noise, while still portraying brand personality, is key to a successful interface. And if your design doesn&#8217;t achieve this, then it&#8217;s probably time for a spring cleaning to declutter for your users.
After all, less noise will translate to a better user experience, reduces your bounce rates, and increases conversion.
If you need help identifying the signal from the noise for an improved <a href="https://www.friday.ie/expertise/user-experience/">user experience</a>, <a href="https://www.friday.ie/contact/">get in touch</a> with our team.

Cutting Through the Clutter: Cognitive Noise in UX Design

The Three-Click-Rule is an unofficial usability heuristic that feeds into the notion that we should be counting clicks to measure usability. It states that if users don&#8217;t find the information they are looking for within three clicks, they will get frustrated and leave the website.
However, in recent years, the notion that usability can be accurately measured by the number of clicks needed has been widely debunked.
Yet, this myth still manages to pop up from time to time and presents a challenge for UX designers when advocating for intuitive navigation.
So, we are going explore the origins of the 3-click myth and shed light on why reducing clicks doesn’t automatically lead to a better user experience.
<h3 class="p2">The origin of the 3-click-rule</h3>
The origin of this ‘rule’ is fairly ambiguous, but the first apparent definition appears in Jeffrey Zeldmans’ book ‘Taking Your Talent to the Web’ (2001)
Zeldmans reasoning for this rule comes down to the users’ very real need for instant gratification. But, there’s no evidence to show that this rule even addresses that need. Zeldman himself says that it’s more of a suggestion than an ironclad rule. So, why he put the word ‘rule’ in the title is questionable.
<h3 class="p2">Applying the 3-click-rule</h3>
If we look at websites from 2001, when this ‘rule’ was in effect, we are confronted with sprawling navigation bars and pages full of text links. Somebody is clearly trying to get us from A to B in under 3 clicks (at the expense of aesthetics).
<div id="attachment_14505" style="width: 543px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14505" class="wp-image-14505 size-full" src="https://www.api.friday.ie/wp-content/uploads/2023/07/icq.png" alt="" width="533" height="342" srcset="https://www.api.friday.ie/wp-content/uploads/2023/07/icq.png 533w, https://www.api.friday.ie/wp-content/uploads/2023/07/icq-250x160.png 250w, https://www.api.friday.ie/wp-content/uploads/2023/07/icq-120x77.png 120w" sizes="(max-width: 533px) 100vw, 533px" />2001 homepage for ICQ.com</div>
But what happens when you have to fish through a load of options to find what you’re looking for?
It slows you down, you are overwhelmed with choices and you waste time searching for the right option. It&#8217;s known as the paradox of choice and it&#8217;s the perfect recipe for user frustration.
<h3 class="p1">The Paradox of Choice in Action</h3>
The paradox here is that while users are most attracted to the idea of having lots of choices, it’s actually easier to make a choice when faced with fewer options.
A study titled &#8220;When choice is demotivating: Can one desire too much of a good thing?&#8221; (<a href="https://psycnet.apa.org/record/2000-16701-012">Iyengar, S. S., &amp; Lepper, M. R.</a>, 2000) demonstrates this nicely.
In this study, researchers set up a tasting display of 24 different jars of jam in a supermarket. All of that selection appealed to a large number of shoppers, with 60% stopping to taste the options. They then reduced the display to 6 options the following day and attracted fewer people.
But there&#8217;s a plot twist.
Guess which display resulted in more sales than the other? Well, it turns out that people are 10 times more likely to make a purchase when presented with fewer options.
&nbsp;
<div id="attachment_14502" style="width: 762px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14502" class="wp-image-14502" src="https://www.api.friday.ie/wp-content/uploads/2023/07/jam-graphic.png" alt="" width="752" height="451" />The jam experiment results</div>
<h3 class="p1">The paradox of choice vs. The 3-click-rule</h3>
So how does all of this relate to the usability of a website, app or any digital screen?
Well, the 3-click rule suggests displaying all (or most) options upfront. But, now we know that this will overwhelm our users and lead to fewer conversions. So, it would be better to throw that rule in the bin and display only a few options at a time, allowing for a few more clicks.
It&#8217;s important to note, these extra clicks should be meaningful, they should lead the user down the path to their desired content. Also, we aren’t going to get rid of the rest of the options, we are going to categorise the options into 6(ish) logical groups.
Why 6? Because people only have the capacity to remember 7 pieces of new information at a time. So, we aim for 6 to make it as easy as possible, and it allows for an addition that may come at a later date.
So in terms of our jam metaphor &#8211; we might first let the user choose which fruit they want their jam to be made from, and then show them only the jams made from that fruit. This way the user can quickly narrow down their options to ones that are relevant to them and their goal.
But there are many categorisation options and their suitability for the job depends on the site, its purpose and its target audience. So, how do we choose the right categories?
Simple answer, we ask the user.
<h3 class="p1">User research for an intuitive navigation</h3>
Arguably the best way (but not the only way) to find out user expectations of content categorisation is through a card-sorting exercise. We can even use this to find out what they would expect the names of the categories to be.
We can then develop an information architecture based on these categories. After that, we can conduct tree testing to validate the new navigation and find areas that need improvement.
By including our users in the design process, we ensure that our navigation is intuitive and user-centric.
<div id="attachment_14504" style="width: 724px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-14504" class="wp-image-14504 " src="https://www.api.friday.ie/wp-content/uploads/2023/07/jam-cards.png" alt="" width="714" height="405" />Example of a card sort</div>
<h3 class="p1">Categorisation for larger websites </h3>
Categorisation for a larger website, with more content and pages, can be a bit more complex. In these cases, categorisation will likely require more levels. To explain this a bit better, I’m going to go back to our jam metaphor one more time.
On a jam company’s website, the primary user goal is to buy jam from an already limited number of options. So, naturally, the user should achieve their goal with a small number of clicks.
Finding the same jam on a supermarket website that stocks it among hundreds of other products is a different story.
On the supermarket site, jam is just a small piece of the information architecture puzzle. Here, we have to look at more layers in terms of parent, child and grandchild categories, as well as filters.
So the user flow to a particular strawberry jam might look like this:
Homepage &gt; Pantry &gt; Preserves and Spreads &gt; Jams &gt; Desired jam.
<h3>Meaningful clicks</h3>
The user now has at least 4 clicks to achieve their goal on the supermarket site, but each click is meaningful. They are on an intentional journey, narrowing their options and getting closer to the content they want, in the least overwhelming way possible.
If we applied the 3-click-rule here, we would get the user to a page displaying every brand and type of jam that the store has to offer, putting them in the exact situation we are trying to avoid, where only 3% of our website visitors will actually buy jam.
Now that might not seem like a big deal in terms of jam because people will probably buy the rest of their groceries and a sale will still be made.
But what about on a hotel booking website, where the user is there to make one single big purchase?
If we make users fish through every hotel in the world, in the interest of saving clicks, we are going to lose them to a more intuitive website.
And that is exactly why we should not be counting clicks as a measure of the usability of a website, app or any digital screen.
<h3 class="p1">What to keep in mind</h3>
If you take anything away from reading this, let it be this:
<ul class="ul1">
<li class="li2">The 3-click rule is a myth.</li>
<li class="li2">Users prefer to make a few extra clicks than to decode tonnes of information.</li>
<li class="li2">Stop counting clicks and start making each click count.</li>
</ul>
Also, if you like jam (or award-winning work), check out the experience we created for Follain at: <a href="http://www.follain.ie">www.follain.ie</a>.
If you&#8217;re interested in improving your websites <a href="https://www.friday.ie/expertise/user-experience/">user experience</a> through intuitive navigation, get in touch with <a href="https://www.friday.ie/contact/">Friday</a>

Author: Karen O'Sullivan

Cutting Through the Clutter: Cognitive Noise in UX Design

Counting Clicks: Why Fewer Clicks Doesn’t Guarantee Better User Experience