Creating Sidebars That Work
Photo by pingnews
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.
