How to avoid poor navigation on websites and blogs

17th June 2014

One of my biggest pet peeves is websites that lead me on a wild goose chase, and that leave me horribly lost in a world of backwards and forwards links. I’m sure I’m not the only one who finds this irritating.

I was recently browsing BlogLovin’ to find new blogs, and I ended up on the website of a popular British blogger. I’m not here to name and shame, but they had almost 20,000 followers and the worst navigation on a website that I have ever seen. I was shocked to find that the site was filled with broken links and no access to the post archives. You’d expect better from a website that’s so popular.

I’ve compiled my top tips for improving the navigation on your website or blog that I hope you will find useful. I’m sure many of you are already familiar with these, but hopefully this will provide a helpful reminder.

Make your main navigation links clear and obvious

Your navigation links to your main pages (i.e. about, content, contact etc.) should be close to the top of the page so that the visitor doesn’t have to scroll to find them. They should also draw attention to themselves. Make them bold, larger than other text or give them a background. Keep the design tasteful but make the links obvious.

For example, my links are currently located just below the Empfire logo. They’re large, but not too large, and the background colours helps them to stand out a little more.

Improving navigation

Check for broken links

I’m not going to lie, it’s a tedious task, but entirely worth it, especially for SEO purposes. To avoid broken links in the first place, check them as you implement them. Also, try not to alter the permalinks to posts and pages in WordPress as any links using the old permalinks will no longer work.

Your main concern should be making sure that the links in your main navigation function. It is an absolute priority that these work, so check them!

You can check for broken links on this website. It will highlight if there are any broken links and where they are located.

Improving navigation

Don’t force the reader to click through a long series of links

The subheading doesn’t explain this well (sorry). I’ll show you an example of what I mean using a real life example from my old website:

Home > Visitors > Graphics > Icons > Musicians

That’s a lot of clicking to do just to get to the icons featuring musicians. Lots of clicking gets quite annoying after a while. Your visitors just want to get straight to the point without having to click their way through millions of links. Try to find ways to avoid this.

If you send them forwards, you’ve got to get them back!

Don’t leave your visitors stranded. If you do send them along a chain of links then make sure that they can get back to each previous stage again.

Let’s look at the example I used above once more. On the Musician page I would have a link that would return the visitor to the Icons page, and a link on the Icons page to send them back to the Graphics page, and so on. Make sure the visitors can also easily get back to the home page, either using a link within the header image or a separate link near the top of the page.

Access to a post archive is essential for blogs

Visitors may want to read posts that you have wrote in the past so make sure you provide easy access to your archive. This may be on a separate page with a link to it on the homepage (Clean Archives Reloaded is an excellent plugin for WordPress), or it might be located in the sidebar. If you are really organised you might want to use blog category or tag links in the sidebar to aid navigation further.

Improving navigation

‘Jump to top’ link for long pages

If you have particularly long pages, for instance if you have more than one post per page, a link which allows the visitor to jump to the top of the page might be helpful for your visitors. Nobody likes lots of scrolling.

You can use the following code to create a ‘Jump to top’ link:

<a href="#">Jump to top</a>

I hope you find these tips useful!

Enjoyed this post? Why not share it...

  1. Rachel Handley

    All very sound advice! I’m really annoyed with one teeny tiny part of my blog at the moment. On the pages tabs bar the border on the right is a tad thicker than on the left. Really I need to replace it with my own code (rather than the template one) but I don’t know enough about code to do this.

    • Holly

      I can understand your frustration. I’ve had issues like this before. Sometimes the simplest of problems can be the most complicated to fix. Have you looked at your CSS file to see if any of the borders have different widths? For example the right border might be 2px while the left might be 1px. Sorry I can’t be more helpful!

      • Rachel Handley

        It’s .5px that would solve my problem, but the template isn’t having it. I’ve removed the dark border instead so the problem has been made invisible. Thanks anyway!

  2. I like your tips about making the navigation more better. As long as the navigation links are not blending in with the text, people should be able to easily depict it unless they’re paying no attention to details.

    There’s a plugin for WordPress users called “Broken Link Checker” that checks for all links on your site and gives you anything that’s broken. You can fix it from there or do it manually. It does the job for you buuuut it can slow your site down a bit while it’s scanning (considering how it’s going through a bunch of links, from your posts to commenter’s URL), but it’s worth it :).

    That jump to top link would be useful for people viewing your page on mobile!

    Thanks for sharing these tips 😀

    • Holly

      Believe me, I’ve had people saying that they can’t find my about page. I mean it’s not like there is a link titled “about” right at the top of every page!

      Oh awesome. I will have to give that a try. Thanks for sharing. 🙂

  3. Elena

    This is a really useful post! I don’t have that many pages on my blog but I feel like I should try to organize my archive and categories better. But I’m using a theme someone else has made I’m not sure if I want to mess to much with the coding. I want to try and make my own theme soon though,I just never seem to have time for it.

    I really like your new theme btw! I love how wide, organized and simplistic it is. There are no crazy distractions and it makes it easy to read your blogs, haha. Oh, and I hope you had a great time in Italy. I have not been much online so I don’t know if you wrote a post about it or not (I’ll be checking after posting this comment!)

    • Holly

      I use the WordPress plugin “Clean Archives Reloaded” for organising my archives automatically. However, I made my own categories and tags page because I have way too much time on my hands at the moment!

      Aww thank you! I never really feel happy with any layout I code but I’m getting lots of great feedback on this one, which is a good sign.

      Yeah, I had an amazing time in Italy. I just want to go back to Venice so badly. 😛

  4. Tim

    Along these lines of thinking, what are your thoughts on having links referenced in a blog post pop to a new window? I personally feel not having the new link pop to a new window causes your reader to have the potential not to come back to the site. With that said, I could also understand that if there are many links in a blog post, it could also create an overwhelming amount of tabs that open in a browser.

    • Holly

      Good question! I think that if the links are internal then they should open in the window as the visitor is till staying on your website. However, if the links are external then they should open in a new tab/window. But I can see both the positives and negatives of using this method. Personally, if I see a link in a blog, regardless of whether I know if it will open in a new tab or not, I will right click and open it in a new tab. That’s just how I roll. 😛

  5. Great tips, thanks!

    I am still putting my blog design together, piece by piece, and this article is really helping me to clarify what to link to and where – there is so much to it!

  6. Agent Q

    Pretty good reminder for those who are trying to create their own theme. I think in the future, I will cut down on some content to make organization slightly easier. It makes managing so much easier as well. Gosh, I think I’ve been a bit too spoiled by WP. xD

    But yea, your tips are pretty easy to follow and are very logical. All bloggers/web designers should take these to heart.

  7. Krystal

    This reminds me…there’s a few little things I’ve been meaning to fix on my own blog. I’m being so so lazy though!

    Anyways great tips!

  8. Amy

    I’ve seen so many websites where the navigation doesn’t seem to exist or doesn’t work, and it’s so irritating. What annoys me most is when people don’t have ‘previous’/’next’ links AND don’t have an archive, so you can never actually see any of their old entries. Although this may be intentional, it’s really irritating when you like someone’s writing and can’t see anymore of it!

    I’m hiding my head in shame because one of my old websites was separated into about a thousand different sub-sections. At least people stayed on my website for hours just trying to find something (haha!!).

    Good post !


  9. Sam

    Oh man, I know exactly what you’re talking about. I used to have a site like that… back in like, 2005? LOL I don’t even know how long ago, but it was pretty LONG ago and I’m glad I don’t confuse people with my navigation anymore 😉 It’s ridiculous, though, that people still make blog sites with navigation that confuses the hell out of people. Making the visitors run in circles to find their way around a blog site just shouldn’t be. It should be simple!

    This is a great reminder, I wish everyone would read this just once. Maybe twice if they can’t get it through their heads haha 😀

    • Holly

      I think good navigation is key to a good blog/website. It should be obvious but I guess some people need a gentle reminder. 🙂

  10. “If you send them forwards, you’ve got to get them back!” This just sums up your post so simply and perfectly! Sure, there’s the back button in the browser, but sometimes users need a clear indicator that they came from a certain section or page. In terms of your old icons on your website example though, if you did have billions and billions of icons, using a breadcrumb navigation exactly like how you displayed your example would be useful. 😀 And even just in general.

    Sometimes if a website is really huge I also appreciate a site map. One example of a huge website would be like my state’s transport website, or other government websites that are bound to have a lot of links/pages. I used to have a site map on my blog but I think I have far fewer pages to really need one now. xD

    • Holly

      I also find site maps really useful, but I’m the same as you in that I don’t have many pages here any more. 🙂