Creating Sidebars That Work

Mar 6, 2008

Creating Sidebars That Work
by Skellie

The humble sidebar is almost as old as the web itself, but its true importance is often underestimated. And, let’s face it, it’s very easy to do badly. In an effort to create a sidebar that does everything at once, many people end up creating sidebars that are hardly usable. Too much information causes information overload.

The problem hasn’t arisen because we’re all user-interface dunces. In truth, it’s a simple matter of perspective. As bloggers and webmasters, we created our sidebars and thus know exactly where to look for everything. Because we have important pages bookmarked and generally don’t pour over our own archives, we may rarely need to interact with what we’ve created.

Without being able to look at our design with the fresh eyes of a new visitor, it’s very hard to know what works and what doesn’t. In this post, I want to get inside the mind of a new visitor and prospective loyal reader, and explain how to create a sidebar that works.

The unwelcome side-effects of a B-grade sidebar

Your best content will probably remain largely undiscovered.
New visitors won’t be able to get an overview of what your site is about.
Prospective subscribers may not know how to subscribe.
Your categories list may be unusable.
Your useful elements may be hidden under a mountain of stuff that doesn’t really matter.

Luckily, it’s not too hard to avoid all those things. The remedy generally involves nothing more than a little adding and subtracting.

Your sidebar’s true calling

To make it as easy as possible for visitors to do exactly what you want them to do.

Let’s break that down a little bit.

First, the part where we make it as easy as possible.

Really long sidebars make things hard. Really dense sidebars make this hard. Over-full sidebars make it difficult to find and perform certain actions. A simple and lean sidebar is easy, a bloated sidebar built in epic proportions is hard.

But a lean and simple sidebar isn’t enough on its own. Less is not more if you’ve subtracted what’s important. A hard to find About page is better than no About page at all.

Second, the part where we get new visitors to do exactly what we want them to do.

For you, this could be:

See your most popular posts.
Subscribe to your feed.
Browse your categories.
Access your archives.
Find your About and Contact page.
Click on your ads.

Any aspect of your sidebar which doesn’t contribute to any of your aims is an obstacle to their achievement. It will funnel attention away from what’s important, and should be removed. A new visitor has a very limited amount of attention and it’s essential that you direct it wisely without wasting a drop.

To complete a sidebar that works, you need to make it really easy for a new visitor to interact with your sidebar in the way that you want.

Eye-tracking studies have shown that visitors fixate most of their attention on the top of your sidebar, with that attention dwindling as they progress further down. It makes sense to rank your sidebar’s priorities from highest to lowest, and translate that into its visual layout.

Let’s take the above bullet-pointed list of aims. I would probably rank those aims as follows:

Get new visitors to subscribe to my feed.
Have easy access to my About page.
Click on my ads.
See my most popular posts.
Interact with my categories at a glance.
Have easy access to my archives.

Which would translate into the following sidebar:

At the top, a subscription icon, followed by links to my About page and Contact page. I’d also include a tagline here if I couldn’t fit it in the header. I want visitors to know straight away what I have to offer them. They’ll give me a bigger chunk of attention if I do that.

Next up, I’ll place my ads in the above the fold area of the screen. They’ll get more clicks in this high-attention area. Below them, I’ll link to the blog’s ten most popular articles. After that, I’ll include a concise list of categories so visitors can get an idea of the topics I cover at a glance. Lastly, I’ll provide a link to my archives for those visitors who have finished the content on the main page and who want to explore the site more deeply.

Because every aspect of the sidebar contributes to my aims, I’m not wasting a single drop of attention. Every possible way a visitor can interact with the sidebar will contribute to my goals.

It is, however, surprisingly easy to make important elements unusable. Your category list will not communicate what you write about at a glance if it contains more than 20 terms or is presented in the form of a tag-cloud (these have the readability of a fridge covered in words assembled from alphabet magnets!). Your popular posts list will lose it’s punch if it’s over-stuffed. Your sidebars should link to your archives, not house them.

If you don’t keep your essential elements simple they’ll become difficult to use. You’ll need to make some tough decisions about what to include and what to leave out.

Finally, I want to encourage you to question some of the sidebar elements you might have previously considered useful.

Recent comments. If you look at this element from the perspective of a new visitor, “Name I don’t recognize” commented on “a post I haven’t read yet” is probably not the most captivating information your blog has to offer (you would hope!). I think a lot of bloggers feel this is a sign of authority, but any blog with five comments can fill out one of these widgets. Focus on increasing your per-post comment count and free up some attention by removing this element.

Recent posts. Unless you’re displaying incredibly long posts on the main page, it’s a lot easier for visitors to get an idea of your recent posts by scrolling down rather than reading the small links in your sidebar. Big headlines are easier to read and you can learn a lot more about a post by viewing it holistically than you can from its headline alone.

Multiple feed icons. Anyone who uses a feed reader can recognize the orange universal feed icon and knows how to easily extract a feed from this. Clicking on it will usually link up to their feed reader of choice. It’s really not necessary to display a range of icons.

Complete blogroll and archives. By all means, have them, but link to them from your sidebar rather than housing them there.

Concluding thoughts

The eye and brain interact in unusual ways. When confronted with a ‘busy’ scene, it becomes difficult for our eyes to focus on any one thing. Too much stimulation results in a blur. If your sidebars are over-full you can expect your visitor’s eyes to trigger their standard defense mechanism: blindness to detail. Simple, distinct and useful sidebars will do a lot to prevent this.

A sidebar that works can lead to more subscriber uptake, more views of your most popular posts, and more clicks on your ads. Optimizing your sidebar is a relatively straightforward task with considerable benefits if done properly.

Skelliewag features daily discussions on content creation, great ideas you can use, and design tips. Join the community by subscribing!

rss feed

39 Comments, Comment or Ping

Dave Shaw

Great post - very thought provoking and made me question why I have things on my sidebars. I’ll be removing the recent posts part.

Skellie, I’d like to know your (and others) opinions on having a ‘Most popular post’ section?

Is there really any point having this? If you don’t have it, how will people find the best content on your blog?

Mar 6th, 2008
Kettlebell Training

Articles like this are why I continue to read this site. I wish I actually found the time to implement MORE of what I read here… You have no idea how much time I’ve spend agonizing about side navbars on many of my sites.

Vic

Mar 6th, 2008
Coqui

Excellent post on designing a sidebar layout. Agree with all the points. In wordpress at any rate, it’s not that hard to configure the sidebar to make it less cluttered and to display sections in a particular order.

One thing to do, is to ask someone you know to view your site and to test out the navigation:
can they find areas of your site easily
are they able to subscribe without issues
is there anything they would change

I well pleased with my current site design and the sidebar and have seen my subscribing numbers increase, since I moved to this latest design. Still have a long way to go though…

I have also noticed that page views per visit have increased, so the design must be doing something right.

Thanks Skellie

Mar 6th, 2008
Monika Mundell

One thing that has always bothered me is if I can’t find the archives on people’s blogs. You wouldn’t believe how often I have to search for this simple thing to see more what the blog has been publishing in the past.

This is easy enough to do with a Plugin for WordPress users and should be an absolute must.

Mar 6th, 2008
Coqui

Re - recent posts section.

What about if someone has found a post and they are viewing that single post page - having a recent post section in the sidebar, gives them a chance to view your most recent work.

Maybe it could be coded to appear, just on a single post page or archives page and not the home page/main page?

I also like the idea of a ‘most popular’ section as again it gives the reader a pointer to other posts. I agree it should not be too long and should probably be updated every so often. I have it on my latest design (was not on the previous design) and it seems to aide in readers seeing more posts.

Mar 6th, 2008
cool dad

I’ve been meaning to update our sidebar lately. This is finally the push I need!

This would probably draw gasps from many, but i just removed our ads. No one was clicking on any, so I think that space can be used more effectively. When our reader base increases, maybe we’ll put them back up.

Mar 6th, 2008
Craig McGinty

I am a big fan of clear design and whilst this article refers to a newspaper website, I thought people might find it interesting to think about what it says on questioning “perceived wisdom”:

http://markmedia.blogs.com/markmedia/2008/02/design-good-bad.html

I would add I’m caught between two minds, but you can’t hide from the facts - maybe I need to do some split testing…

Mar 6th, 2008
PT

Loved this post. Confirmed some of the feelings I was already having about “recent” sections…

Thanks for sharing.

Mar 6th, 2008
CatherineL

Thanks Skellie - I am still trying to work out what works with my new theme and I think I’ll remove the recent comments.

The thing I really hate about it is the fact that if a spammer comments that shows up in there immediately and it looks really cheap.

Mar 6th, 2008
squawkfox

Which metrics should one consider when determining the most popular post? Number of page views, number of comments, incoming traffic, votes on external social media (for example digg), incoming links, etc. How does one define popular on the internet?

Mar 6th, 2008
Hunter Nuttall

Lots of good tips here. I despise overly cluttered sidebars.

You suggested removing the recent posts section because readers can see them on the main page. But I never spend any time on someone’s main page.

I immediately click on the first post, because I want to read one thing at a time, and have access to the comments. Sometimes I bypass the main page completely because of the Comment Luv plugin.

Mar 6th, 2008
Scott Marlowe

Thanks for the excellent advice. I’ve already removed the “recent comments” section as a result of your comments above and will re-eval the need for the “recent posts” also.

Mar 6th, 2008
Bob Younce

Amazing analysis, Skellie.

I’m glad you’re out here doing this legwork. I’ve always struggled with site design, and this is the kind of thing that I find most useful.

Mar 6th, 2008
Vlad

I really hate it when I see sidebars 2x longer than the actual content, or sidebars with font that seems to be 5px… don’t know what those bloggers are thinking - that someone will scroll down that much to click on a link or that somehow their users have developed super-sharp vision to be able to see those squiggly lines?

I try to keep it simple, save space while maintaining readability and only put up what’s necessary. Your sidebar(s) is/are a tool to be used wisely…

Mar 6th, 2008
Pat R

Thanks Skellie - some insight and good information that I can use but looks like the information is more geared for Wordpress users. I use Blogger and some of the features you’re talking about are more difficult to accomplish (contact page, linking to archives, etc) as Blogger appears to be limited with built-in page elements and widgets to choose from where you create your sidebar. And maybe it’s my design in Blogger that is limiting. I know my tech knowledge is not there yet.

Thank you

Mar 6th, 2008
Evan

One piece of information from memory research that is probably relevant - called the magic number plus or minus two. The magic number is seven. Between five and nine pieces of information is what most people can remember.

For a sidebar - or other lists - cluster them into five or seven items at most. And each sub-part divide into five to seven items at most. More just looks confusing.

I never look at recent posts, most popular comments or so on. I just go to the posts and look at the comments if I want to. For me they just add clutter - but I am a very content driven person.

Mar 6th, 2008
Andy

Great post. 2 questions:

1. Is it better (astethically) to have side bars on the left or right of the content section? I have 2 sidebars on either side. While it allows me to have more links/ads without scrolling, it does make the site a bit more cluttered.

2. You have very few ads on your sidebars - why is that? Is it better to have ads on the sidebars on in post?

Andy.

Mar 6th, 2008
Mrs. Micah

Indeed. I’m working on this, since I just moved to a new theme…want to clean things up in general. What I’d like is to be able to have a rotating blogroll of just a few at a time, but blogrolling.com’s code looks out of place on my blog.

Condensing categories is a pain. It would have been easier if I’d been a minimalist when I started.

Mar 6th, 2008
skellie

@ Dave: I do think it’s important to ad it, though I haven’t yet done this over at Anywired — the blog is still young, but it’s mostly out of laziness! I do think it’s very important though, because it gives people who find your blog posts via search engines or social media somewhere to go. It’s a lot more enticing than clicking back to the main page in the hope that something is there. If they like the headline chances are they’re going to like the article.

@ Coqui: I’d rather show social media/search visitors my most popular posts rather than my most recent posts. The popular posts list shows them the best of the best — I think it performs the function you’re talking about. But I do agree — giving searchers and SM visitors somewhere to go is important.

@ Sqauwkfox: I’ve never done statistical analysis on any of the posts I feature, I guess I just think: “That post did exceptionally well,” and I know it’s a popular post. But I think page views would be the best metric if you were going to measure it like that. Just make sure to exclude time-sensitive posts which have had their day.

@ Hunter: Ah, but if you liked the blog, you would if you had to. When you simplify options you can’t cater to everyone, but if it’s not too much of an inconvenience, most people will make do.

@ Evan (Wellbeing and Health): Ah, very cool — I had no idea. That’s definitely something to think about.

@ Andy: I generally favor content on left, sidebar/s on right. Don’t take my word as gospel — that’s personal preference — but I do find that readability goes down when the content is surrounded on all sides. But I do think it’s actually preferable to having an ultra-long sidebar… though if you’re de-cluttering properly, you shouldn’t have to :-).

Re question 2, there are actually no ads on this blog. The picture links are links to my most popular posts, but a few people seem to confuse them with ads… which is kind of sad that anytime we see an image with text on it we think “Ad!” But I guess that’s the internet’s fault. On my other blog I have ads in my sidebar and ads at the bottom of my posts. Your ads will always get clicked more if they’re in areas people look at intensely (probably in content), but a lot of people also find that very annoying… so you have to weigh up the pros and cons.

@ Mrs. Micah: You might try highlighting just a few main ones on the main page manually by extracting the category URL and linking to it. A lot easier than changing the categories on every single post. If you use multiple categories per post you might find that there are actually a few which are pretty constant throughout all of your writing, so they’re natural choices. Yes, not all your posts will be available via categories, but that’s what archives are for.

Mar 6th, 2008
Evan

Whether the side bar is on the left or right depends on what you want to highlight.

Our eyes tend to go first to the upper left of a page (maybe because of the way English is written and we are habituated to reading). Put the thing you want your reader to look at first in the upper left. This can be minimised by in other ways - making colours bolder, text bigger and so on.

So it depends on if you want them to see the side bar first. If not and you want it on the left, make it smaller, maybe paler colours and so on.

Mar 6th, 2008
Jos

Thanks Skellie - This is hard, I’ve grown attached to my sidebar…. anyway, managed to get a third into a post. Can’t just yet bring myself to get another third squared away.

Mar 6th, 2008
shelley

Dave Shaw:
I think the ‘most popular post’ section is great - because there are things there that I keep coming back to see and refer to.

I think I’ve come back to this website hundreds of times just to refer back to my favourite articles - I know that they are easily found.

Mar 6th, 2008
Karen JL

This may be a dumb question, but what is the easiest way to put a ‘popular posts’ section in your sidebar on a Wordpress blog?

Is there a special plug-in for it? With the widgets I have, it doesn’t seem like I can do it easily. Or maybe I’m just not getting it.

If anyone can help, I’d appreciate it.

Mar 6th, 2008
Scott Marlowe

I don’t use Wordpress, but I did come upon this link:

http://damieng.com/blog/2008/02/11/my-favourite-wordpress-plugins

The last item mentioned I believe is what you want. Good luck.

Mar 7th, 2008
Squawkfox

Skellie: Thank you for answering my Q.
Karen JL: I don’t think your Q. is “dumb” at all as I had the same Q.
Scott: I’ll take a peek at this plugin!

Mar 7th, 2008
Anthony Lawrence

There’s no reason to guess if your sidebar is working - you can see actual user clicks by using the “Site Overlay” feature in Google Analytics. CrazyEgg.com goes much farther than Google, letting you see “heat maps” of users click activity.

I watch EVERYTHING about my sidebars and top bars.. if a feature I think is better than sliced bread turns out not to get used, out it goes.. well, unless I want it for my own use which is sometimes the case.

Mar 7th, 2008
Karen JL

@ Scott - Thanks for that link. Your link goes to another link which has even more plug-ins. It just seems that one you’re referring to may create the list automatically, while I might want to create customized list…such as “if you’re new here, read these first”. But I’m going to check those out further.
@ Squawkfox - thanks…I guess someone else is always thinking the same thing you are, right?

Mar 7th, 2008
Ralph

I will bookmark your side in my rss-reader, because the content of your articles is my style for my own blog in future. In my own blog i will wrote in the deep of one topic like you

Ralph

Mar 7th, 2008
Barb McMahon

Great post! Seems so simple, once you lay it all out…

Now I’m off to see how mine stack up!

Mar 7th, 2008
Mandy

I think it’s so important to get the sidebar right, but so difficult to decide what comes out or in! It’s a real balancing act.

I love what you said about linking to the blogroll and archives from the sidebar, that would definitely de-clutter it.

But my next question is how do you do that?

Mar 8th, 2008
Jaden @ Screenwriting for Hollywood

Great tips as always!
I’m glad that you mentioned some things that really bother me when I go to other sites. Hopefully they will read this and take note.
Your site here is clean, navigable, and enjoyable.
Your advice has been my best source of guidance in this new venture.
Thank you. I truly appreciate it.

Mar 9th, 2008
bugsy

fantabulous post!!

Mar 10th, 2008
MonkMojo

Just the extra push I needed to hammer out my site description and put it on my sidebar.

Thanks!

Mar 11th, 2008
Marta Goertzen

Great post! I am creating a blog for my business wanting to do it right from the start! You gave some great thought provoking tips and helped me realize what has bothered me on other blogs layout. Now I know.

Thanks

Mar 11th, 2008
Mario Sanchez

Thanks Skellie: I’m glad I didn’t score that bad with your sidebar recommendations. Good point on the recent comments. I also find it useful to display one or two award banners for credibility, at least during the first six months of the blog’s life. They can be removed later, and relegated to the About Us section.

Mar 12th, 2008
Simple Mom

Truly helpful advice. Your blog is one of my new favorites for writing tips and inspiration - wish I discovered you eons ago. I’m off to tweak my sidebar!

Oh, and nice theme, by the way…

Mar 22nd, 2008