Lessons in minimal web design: Would you click on this?
Today we welcome guest post author Glen Stansberry. Glen writes about creative web design and web development at Web Jackalope. You can also follow him on Twitter.
It seems like nearly every day, I go to a popular website and see examples of how not to design a site. And the number one no-no that all of these highly-trafficked sites commit is that their designs have too much thoughtless clutter.
The worst case is when a seemingly clean site has a random patch of cluttery buttons in the corner somewhere. I took this screenshot yesterday of a popular dictionary site.
Apparently the makers of the site decided to cram as many social networking site buttons into the upper-right corner of the webpage, in hopes of getting attention on social sites.
Would you click on any of those buttons? I know I wouldn’t. Aside from placing those buttons in the last place they’ll be seen on the site, they just add clutter. The buttons have effectively taken attention away from the core section of the site (the definitions and dictionary look-up), and are digitally waving their hands and screaming “look at me! look at me!” in the nose-bleed section of the layout. I think it’s safe to assume that those buttons have a really, really low click-through ratio.
If I was going to use one of these buttons, I’d have to take about 20 minutes to scan through all the buttons just to find the bookmarking service I wanted. Also, the buttons feel like they were hastily added, as an afterthought. It’s as if some big-wig in the company read about social networking in the newspaper the night before, burst into the designer’s cubicle and demanded the designer increase their “social media whatchamacallit” NOW.
Would I Click This?
Every element should pass the “would I click on this?” test. When I’m laying out a design and want to add something (like a button or a link) outside of the content, I always ask myself if I would click on it as a visitor. If I won’t, then visitors probably won’t either.
Every ounce of space is precious. When you have a great minimal design like Unclutterer has, every tiny thing you add to the layout is going to be seen. Especially if the element is added thoughtfully and tastefully.
Take Unclutterer’s new “Subscribe on Twitter” link. Erin mentioned yesterday that the Unclutterer Twitter account had received a ton of new followers last week, probably due to the recent addition of a simple link and button to the sidebar. Compare these two implementations and ask yourself which you would rather click on:
this
or this
When it comes to design, every bit, every piece, every ounce must be weighed and thought through. Adding even a tiny thing dilutes the rest of the design, but if added carefully and thoughtfully, can actually enhance the overall design.
21 comments posted
Posted by Rue - 04/08/2009
While I do agree that the social-networking buttons look cluttery, they serve their purpose. If someone’s too lazy to log into their actual account to post the link, all they have to do is click one of those buttons.
All in all, I think if something’s really worth sharing then it shouldn’t be a big deal to open a new tab, login to your site, and cut/paste the link. That being said, as long as the buttons on the site aren’t interfering with things I actually want to look at, it doesn’t really bother me that much.
I do agree with the overall message of this post, though. Web design doesn’t have to be anything fancy – it just needs to have the things a user will want in an easy-to-find layout.
Posted by Eli - 04/08/2009
WordPress allows rolling categories into a drop-down box to save on ‘sidebar’ clutter.
Posted by Bren - 04/08/2009
I so agree. Having a bunch of buttons where most people don’t even know what most of them mean just doesn’t have much of a point.
Which reminds me that I just can’t get over how cluttered the Unclutterer “categories” list is. Are those 4 entries on “celebrities” really worth their own category? 3 articles on “moving”? 5 on “bedroom” and 6 on “food”? I really think it would be worth re-thinking the categories. It’s the same as with e-mail folders or labels — have too many and you won’t be able to find anything. A few well-chosen ones are much more worth your while.
Posted by Kristen @TheFrugalGirl - 04/08/2009
Eli, I did that with my categories, and I love how much space it freed up in my sidebar!
Thanks for the link to Jakob Nielsen’s research…that was an interesting read!
Posted by Erin Doland - 04/08/2009
@Bren — Unfortunately, once a category is created, you can’t get rid of it. People link to the categories, so if we got rid of them we would be breaking those links. We’ve talked about the issue a great deal internally and have just decided to leave them. A couple thousand broken links is more clutter than redoing them … or at least that is our current wisdom on the matter. There may come a point when we say “screw it.”
Posted by whyioughtta - 04/08/2009
Couldn’t agree more about those buttons polluting everything these days. Shouldn’t a rule of thumb be that a button have at least enough space around it to be apparent as a separate button? In your example, it just looks like one litter-strewn item.
I also agree with Bren about the Categories sidebar…maybe broader categories (e.g. Home, Work, Inspiration, Travel) would be better. In general, there’s something cognitively hard about navigating categories that aren’t mutually exclusive.
Posted by Danny - 04/08/2009
The NYTimes has a fairly simple solution to the cluttered “Share” links on all of their article pages.
Clicking once on the “+ Share” button pulls up a small box with all the networks they support, from which you pick the one you want.
It keeps the overall view of the page clean, without limiting the user’s options.
Posted by Lori Paximadis - 04/08/2009
The little icons don’t bother me much, as long as they aren’t plastered all over multiple places, but I have to admit that I don’t know what most of them are for. If I were one of those people who were inclined to use the little icons for whatever they are supposed to be used for, having them there might make my life easier.
Re: cateogories, you can alway make them into a drop-down, like my (currently sad and somewhat neglected) website has (waaaaaay down there at the bottom, in the footer). They’re still there for the one person who might want to find something that way, but they don’t take up precious real estate.
Posted by Erin Doland - 04/08/2009
@Lori — Drop down menus require a script to run. The more scripts you have on a page, the more likely a page will have problems rendering in some browsers. Right now we have a handful of scripts running on the page (the Share links, ads, and Feedburner) and they’re constantly causing us woes. Trust me, whatever anyone will recommend, we’ve already discussed it. We spend eight to 10 hours each day working with this site … we know its limitations and problems very well. We are unbelievably grateful that you all overlook these woes and continue to come back every day.
Posted by Dallee - 04/08/2009
For anyone interested in this subject, the absolute gold standard article is:
Art and the Zen of web sites
http://www.tlc-systems.com/webtips.shtml
Read it and you will never forget the principles it outlines. It is also just a magnificent and enjoyable piece of writing.
Please read it! You will be grateful that you did.
Posted by Lori Paximadis - 04/08/2009
Makes sense, then, to have the list. Some coder should run with the idea of being able to create subcategories…
Posted by Catherine Cantieri, Sorted - 04/08/2009
Excellent points about how simplicity draws clicks. One of my favorite sites eventually lost my readership because they had a mega-button for social networking just above their “view comments” link. Whenever I moved my mouse to view comments, I’d inevitably mouse over the mega-button and accidentally unleash pop-up windows and other assorted crap. Eventually, it became easier not to visit.
Posted by Karyn - 04/08/2009
I don’t think the categories list is cluttered. It’s not exactly hard labor to skim an alphabetized list on the sidebar to look for a topic of interest. If you were to be too “minimalist” about categorizing, the categories would be too broad, and hence useless. If I want to find tips on, say, moving, it’s much easier to narrow it to a few posts tagged “moving” than to sift through dozens of posts lumped in a broader “home” (or whatever) category.
Cluttered, to me, is when a web site is drowning in so many ads, graphics, and gizmos that I have trouble finding the main content. The little buttons in a corner thing is hardly a mosquito buzzing by, compared to some of the Las Vegas style gaudy-fests I’ve seen on the web. And Unclutterer, true to its name, is very streamlined and easy to navigate.
Posted by disconnect - 04/08/2009
@Erin, just because you have 50+ categories doesn’t mean you have to display them all. You have a “Featured Posts” section, why not a “Featured Categories” section right underneath? (with a link to “All Categories” at the bottom)
Posted by FilterJoe - 04/08/2009
I couldn’t agree more with the main thrust of this article – get rid of the clutter from we sites, and make them readable above all else. I recently wrote 2 posts that would be of interest to people who liked this post:
“Filters for Reading on the Web” describes simple steps (readability bookmarlet and F11) for reformatting the main article on a cluttered site into pure text with no distractions.
“Site Design for Reading” discusses a number of steps one can take to make web sites more readable.
I tried to design my site to be very readable and one of the comments in this article (the “+” idea) gave me an idea for a further improvement – at the bottom of my articles I do have a row of social icons (though I didn’t consider for a second putting them at the top).
Posted by Clare K. R. Miller - 04/08/2009
Oh Lady… as an employee of that same popular dictionary site (but a low-level one–I have nothing to do with web design!), I am suitably embarrassed. I have noticed that weird, cluttery corner myself.
But if you do come upon it, I encourage you to click on the language forums; they’re a lot of fun.
Posted by K - 04/08/2009
I’ve learned to associate cluttered, blinking pages with spam. As long as the text is front and center, and either I can use Firefox to make the clutter and blinks disappear or there IS no clutter or blinks to begin with, I’ll visit the site. If I can’t, then buh-bye to that website.
Posted by MJ Ray - 04/09/2009
I hate to call the site owner wrong in the comments, but drop down menus don’t require a script to run. They’re do-able in CSS if you’re clever. Here’s a wordpress plugin for them: http://wordpress.org/extend/pl.....down-menu/
This plugin fixes permalinks – http://wordpress.org/extend/pl.....wordpress/ – but I don’t remember whether it can do categories too. Worst case, it’s a line in your .htaccess to redirect each removed category to a new one.
There is no excuse for website clutter except lack of time. There is very little that good web software can’t do for a good webmaster. If you’ve not got time to be a good webmaster, but you have money, hire one… my co-op has webmasters for hire, for example.
Posted by Erin Doland - 04/09/2009
@MJ Ray — You are correct, it can be done with CSS and not a script. However, what I want done needs a script. I should have been more specific.
Unfortunately (fortunately??), I am the editor-in-chief of the website and not its publisher. What I want isn’t always what happens — and that is usually for the best since I am a writer and professional organizer, not a programmer nor designer
The amazing Glen Stansberry who wrote this article, however, is.
Posted by The Thrifty Renovator - 04/09/2009
This advice could NOT have come at a better time for me. I am a longtime lurker and new blogger, and can use all the help I can get!
Posted by Andy - 11/21/2009
I have to say for a site that advises on clutter free websites, there is no need to look further than this site for criticism. Sorry but Im researching cluttered sites hence arriving here and wow.. I design websites for small and medium size businesses and clutter free designs are eseential for impact redemption. However, some companies have numerous USPs (Unique Selling Points) so in some cases a lot of information has to be shown. If anyone out there wants a website or to sort their existing out in order to increase business feel free to contact me. uptonic at hotmail dot com.
Comments are closed for this entry.