10 tips to improve navigation on your blog

Posted by Ben on April 29, 2009 | Permalink | Hits: 1134 
Tags: navigation, usability, design

< 10 important design tips for your blog | Design | 10 reasons why blog clutter is a bad thing >

Image by Storm Crypt.

Navigation is something your readers shouldn't have to think about. If they do, they won't be able to find their way around. Do your readers a favour - improve the navigation on your blog with these 10 top tips.

1. Use breadcrumbs.

Breadcrumbs look like this:

Home Page > Category > Post Title

They show the path through the site from the top down to the page you're currently visiting. This can help your readers to find a post in future, as they can just follow the links. It can also get people to move between the different areas of your site, especially if your site goes a few levels deep. Like this:

Home > Music > Rock & Pop > The Beatles > Reviews > Abbey Road

So if you're reading the review of Abbey Road, you can click the links in the breadcrumbs to find other reviews, more content about The Beatles, more music in Rock & Pop, more music-related content, or everything (the home page). This is a very useful way to find similar content.

If you use WordPress, there is a handy post at Nice2All about Breadcrumb Navigation. If you use Injader, breadcrumbs are built-in.

2. Provide page numbers for category navigation.

Imagine you're reading a blog with lots of posts on search engine optimisation (SEO). All of the posts are stored in an "SEO" category. However, there are a lot of posts (you don't know how many), and only 5 are displayed per page, with the full content displayed on the category page. You want to read the oldest post first. How do you get to it?

On a standard WordPress blog, the previous/next links are a really painful way to navigate through pages and pages of content. You could use the date-based navigation if you knew the date of the first post in that category, or if you just wanted to find the first post on the site. But in this situation, wouldn't it be easier to jump straight to the last page of content in this category?

If you use WordPress, read the post at Nice2All on WordPress Pagination. If you use Injader, page numbers are standard.

3. Include previous/next links for post navigation.

Although I'm keen on page numbers for navigating through a category, previous and next links do have their uses. One thing you can use them for is to aid readers in finding the next post in a series or category. If a reader finds your site by clicking on a link to one of your posts, they might want to read the next (or previous) post on your site to see if they're all as interesting as that one.

For WordPress, check out the Next and Previous Links guide. It's quite possible this is already in your theme. In Injader, it's built-in.

4. Comment jump links.

If you're reading the full content of a post on the home page or one of the category pages on a blog, but you're not viewing the post itself, it can be very useful to have a "Comments" link. It will usually show how many comments have already been posted, if any, but it should also jump directly to the comment form instead of going to the top of the post.

I've seen a few blogs where they have a "Comments" link, but it doesn't jump down. If I really want to leave a comment, I'll scroll down, but it is annoying to have to do that. Some readers won't bother to scroll and may be confused if the link doesn't go straight to the comment form.

For WordPress, the following may help: Jump to Comments. In Injader, guess what? It's built-in! To be fair, it is possible to remove this code from Injader, in fact this applies to the previous points too - it all depends on your theme. Some WordPress themes have the code built-in, too.

5. Be consistent with your navigation links.

Some sites use one layout for their home page, and a different layout for their posts. That's fine, and it's something I do at Top Ten Blog Tips.

What doesn't work so well, though, is when you have multiple layouts and the navigation links are not always in the same place. On the home page, you might have some links across the top and some more links across the bottom. But when you view a post, the links across the bottom are now down the side. All this does is confuse your readers as they have to learn two different link placements for your site.

6. Use styles to distinguish the navigation from the content.

If your navigation links look like your blogroll links, or they blend in with your content, they will be harder to find. Use a different background colour for navigation links, including a horizontal navigation bar or your sidebar. This will help readers to see where the content ends and the navigation begins.

7. Don't have too many sets of links.

I've seen blogs with a navigation bar at the top of the page, then a banner, and one or two navigation bars that sit underneath. Then they have more links down the side, and still more links in a large box at the bottom. This seems like overkill to me.

How many navigation bars do you need? How many of them contain some of the same links? I don't think it's wise to repeat links, as your readers may wonder if each link serves a different purpose. Why have an About link at the top as well as the bottom? Is it just to ensure people don't miss out? If you must do that, use different text for each of the links. Perhaps one could be "About" and the other could be "About the author". I'm still not sold on repeating any links, but this is more about keeping the number of links to a minimum.

8. Don't hide your main navigation links.

Some ad networks, or even individual advertisers, may require you to put their ads very high up on your page. All very well, but don't lose sight of what's important: your content, and helping your readers to find it.

It's not just whether certain sites want their ads up the top - it seems a lot of blogs fill their sidebars with every widget under the sun while the navigational links get pushed all the way to the bottom. What's the point in that?

9. Remove the default links.

WordPress blogs start out with a few "Meta" links that should really be removed. Bookmark the Admin link, but unless you're running a group blog, nobody else will need it other than you. If a link is of no use to your readers, there's not much point displaying it on the blog.

10. Tidy up your categories and tags.

Categories and tags are a very handy way to navigate a blog, but they are much more useful if you organise them carefully. Depending on whether or not you display them, tags are less of a problem, but you should keep your categories organised. Don't create a new category for one post and then never post in it again.

It's a slippery slope - you can quickly end up with dozens of categories, maybe even 100 or more. This just makes your blog a nightmare to navigate and it looks really messy because you have too many links in the sidebar.

What do you think? Can you think of any other ways to improve the navigation on your blog?

Comments on 10 tips to improve navigation on your blog

3

Ben | May 02, 2009 | 190 comments

Lyndi - not sure about skip navigation links, but one other use is a mobile device with a small screen - on the few occasions I have tried to browse the web on a phone, "skip navigation" was incredibly valuable.

Rarst - I think if the path is literally "Home - Post Name" then it's certainly not as useful as if it goes through the hierarchy of the site. However, I see breadcrumbs as a way to show where a page sites within the hierarchy, rather than where you clicked to get to it. I can see the benefits of both approaches, but if you came via a search engine, I'd expect to see the path to the page I'm viewing in the breadcrumbs.

5

Ben | May 08, 2009 | 190 comments

Happy to help, Ken! :)