What Is Design Clutter?
16 Choosing the parts of your site that a user sees is all about prominence. The more prominent something is, the more often it will be seen.
The problem with prominence is that it’s relative.
Simply giving something a bright background and a bigger font does not make it prominent. It must stand out in comparison with the rest of the design.
For example, the "Come On In. We’re Hiring" badge on Authentic Boredom may be very noticeable, but if you put it on this site, it would just blend in. They need a different method of getting attention.
The Cause of Clutter
Trying to draw the reader’s attention is the culprit.
As bloggers, we think that every part of our blogs are important. The problem is that most of your readers think differently. They want to see your headline and your content. Only a few of your more loyal readers are interested in your blogroll, social media buttons or anything else.
When every element is trying to draw attention, a visitor does not know where to look first. This visual confusion is design clutter. It feels messy, and it results in users not seeing what you want them to, or getting fed up and leaving altogether.
A clean blog is one in which the user’s eye is clearly guided around the page. They can read the page peacefully, and aren’t being distracted by less important page elements. This makes the reader much more likely to read a post from start to finish and the good will that your content has garnered can then be carried onto the other content (Like a related posts widget) that you have unobtrusively placed on the page.
The drawback of a clutter free layout is that certain things must be purposefully sacrificed. You have to be ruthless and realistic about what does and doesn’t deserve attention.
A visitor only has so much attention that they’re willing to spend on your page. You want them to spend as much as possible on the few important elements, and not waste any on deciding what they should focus on. Good design makes that decision for them.
This is the first post in a 3-part series. The next will be on how you can prioritise your content, and the third will be on how you can use design to show prominence.
Before I give my opinions though, I’d like to hear yours. When you look at your blog, what draws your attention first? Is it what you want the attention to be on?
Enjoy this post? You should follow me on Twitter!
I like this post. It is what has been on my mind for the past couple of months and in the last few days I decided to take action.
I felt that the ads on my pages were just cluttering up the posts or UGLIFYING them.
I decided to take out the adsense type ads and also the inline ads from Kontera.
My site looks less cluttered now and my readers can actually read my posts without all the clutter in there.
I think its important to note that a website can have lots of “stuff” but without being cluttered. The use of a grid based layout is a good way to help keep your website from being cluttered.
I second Danny Outlaw’s comment. A perfect example of a site that always has tons of “stuff” but looks visually clean due to its strict grid use is NewYorkTimes.com
I agree with what Michael said and I would like to add that those elements (like the badge example) are becoming identifiable with the site. I would like to mention that a site without an element like that has a big chance to be read through rss only.
Great post Michael. I strove to remove distractions and to channel my readers attention when I launched last month. But, I discovered that my design still needed a lot of work because I thought some ‘parts were important’ when they really were not.
I’m sure it still needs more work, but it needs content even more (and site tweaks can become a vicious circle consuming huge amounts of time).
@James, you were right to remove the adsense and inline ads. Unfortunately, the remaining ads still push down some important content navigation and the rss speech ballon ends up coming out of the affiliate classroom ad!
Easily the header. I don’t mind it being the first thing that you notice, it’s unique and I’ve received a lot of positive feedback about it. It’s also the same colour as the post titles, which I feel draws your eyes straight down to them.
I think after a bit of post the “Recommended Reading” buttons in the sidebar might draw some attention… I can’t decide if this is a bad thing or not. It will probably vary between posts and their formatting anyway.
James – I’m glad you took out inline ads! True what Aaron said about the RSS bubble – perhaps it shouldn’t have the little tag at the bottom? The first thing I see on your blog is the ad inbetween the header and first post – I’d be interested to know if that’s where you want readers’ attention to go.
The first focal point when I view my website is of course the header- and most of my web visitors also got the same result.
And yes, I do want their initial attention there, as the header explains what my blog is all about (I purposedly made them big).
I learned from your blog to use left-indent for my text. It definitely freed the clutter a little. I’m not sure whether there are space for ads though..i may need one in the future..
James – Ads are some of the worst clutter because they go out of their way trying to grab attention. Most blogs look a lot better without them. It was probably worth getting rid of them! :)
Danny – Grids are great, and yes, a site can have a lot of content, but there is a line. The best design in the world isn’t going to help you if you’ve filled the sidebar with 20 different widgets. :(
Elena – Absolutely. By trimming down the amount of content on the page, the content that remains gets so much more attention. It really draws focus to your logo and such as brandable elements.
Aaron – That’s the nice thing about designing for the web. You’re free to make those changes at any time. A theme is never just “done.” :)
Kristarella – The RSS icon is very noticeable at the minute (Because of the color), but yep, I would notice the featured images next. As far as sidebar content goes, that’s probably a good thing. :)
Black Zedd – If you might need ads in the future, there’s still no need to worry about it today. You want the best ad-free layout possible. When it comes to using ads, you can experiment with the design. If there isn’t enough room, you can sort that out at the time (eg. You could make the blog wider?). It won’t be much of a problem. :)
very truly said… a mistake most designers end up making – they start decorating while the focus should be just on designing the content
I hope, it would be the description or tagline above the fold first. Then they should do dive into the deeper.
Michael, did You try color contrast analyser/checker for this blog? How important is the color for Your blog design?
Hi….Heading and colour….easy on the eyes…then make it simple…. design…then the content’s…of what it has to offer…Great Post and good info… Thanks..
I used to have a lot of clutter on my website, so I started using tabs to place things better for people. By using site heatmaps I was able to learn more about what people used and what they never did. Also another problem with clutter is how it affect page load time by increasing the http requests.
Michael is correct. These are also the some of the guidelines that we follow in our offshore web developing company.
minent something is, the more often it will be seen.
Design clutter definitely is an issue that I see on all too many blogs. This article is a very nice, concise overview of the advice that we should be following as well as giving to any client who wants us to just add more and more things to their site. I will say, though, despite a nice overall design, this website could benefit from its own advice a bit :-)
This article is truly relevant to my study at this moment, and I am really happy I discovered your website.