Usability in Blog Design

I was thinking of overhauling the design on this site for a while before I jumped in. One of the things I try to think about when designing any site is how the visitors will interact with it. I've thought about the usability of a blog each time I've re-designed and this time was no different. Usability as a subject interests me and I've read Steve Krug's Don't Make Me Think! It's a good book, better still -- it's short -- I'd recommend it.

How do people use my site?

First off I started by thinking about how I use the blogs I visit. If it's a site I am fond enough off to check regularly, I subscribe to their RSS feed and read it in a feed reader, only clicking through for links that I want to read (typically I scan the article in the feed reader and, if it takes my fancy, open it in a tab and move on to the next item, once I have done that for all of the feeds I work my way through the tabs and close it once I have read it). So in this case I jump straight to the relevant page. I don't go to the home page at all.

If it's a site I read regularly it's also unlikely I will click around, possibly I may look for similar articles but I find clicking on tags or categories rarely gets me there and so prefer to use the search box, sometimes even reverting to a Google site search if the one on the site is useless/non-existent. If it's a link out to another site (the original source perhaps) I will read directly on the site and I may have a look at the related links, but typically not.

If I'm looking for something or want to read more on the topic I tend to start at Google (aka my search engine of choice -- side note, who are the people who don't start there but use Bing, Yahoo, Ask, etc? No one I know). I check the results and click the links to the site's pages direct. I'll then decide if it's worth staying and read if so, if I'm interested in other articles by the author I may click to look at their tag/category archives (as far as I'm concerned tags and categories are the same things on most sites). If they reference an earlier post about the subject I want to check out I may glance at any related posts if they're listed, otherwise it's back to search as I've found trawling through category pages a waste of time.

Looking through my web stats the feeds come fairly high in most common pages, there's plenty of direct links to pages, the archive index makes it into the top 20, the home page does well too. I used to just have one post on the home page, or excerpts, so people had a quick, fast page with little scrolling. Now I show the last five posts in their entirety so people can get a good taste of the content and then choose to continue or not (though with the length of this post I may ask people to click through in order to read it all). I quite like the idea of a 'popular posts' section, but how do you measure that; based on visits, comments, what metric? I don't get many comments, so that would generally be old posts. Visits can easily be skewed by a bot or any number of other things. Something to think about perhaps.

Page Design

So the key things to look at were my home page and the individual article pages. I wanted to make content king, and the site clean and easy to read and use (most of my sites are clean in design, to make them load fast and keep the site out of the way). So on the single pages you get the article up front and centre, no two-column layout competing for attention. The navigation forward and back and links to related/recent posts are all below the main content. I did put the post date up top, I like to know how old the content I'm reading is to give me an idea of freshness and relevance.

The home page is much the same, only with five articles and none of the gumpf. I started with a two-column design but it just didn't work for me (along with many of the other ideas, I have much more respect for sites that rely on typography, especially serif fonts, for layout).

I stuck with the simple idea of colour/underline for links and font size for importance. Most of my pages are single column, though some are two where it felt appropriate. The biggest page of them all in the archive index, a beast with links to every single post on the site.

Comments

As I said, I don't seem to get many comments, not sure why. Doesn't stop me making an effort though, so I took some advice from some of the usability sites out there and dropped the commenter's details boxes below the comment text box. I assume this is so the commenter can get on with their comment first then worry about the boring stuff after. It seemed to make sense.

My comments also let you preview before you finally submit, partly to stop typos etc (though you can edit comments for a limited time, something I wish more sites would allow) and also because I have found it to be one of the best ways of stopping spam ever invented, only Akismet beats it, but I don't busy it too much as most comment bots seem to only hit submit on the first form.

Clicking vs Searching

Part of the way through the re-design I found my way over to Google's Let's make the web faster page. There's some interesting articles and from there I found the link to the Google Tech Talk called 'Don't Make Me Click' by Aza Raskin. I'd never heard of him before. Generally it's an interesting video but I have to say I didn't agree with his thoughts on going to the extreme of having one hugely long page.

For me there's a balance to be struck on web pages between having as much information as I need on the page and having too much. I agree content should be as few clicks away as possible, but putting it all on one page doesn't save me, it just turns clicking into scrolling, which is more annoying. Take this site, for example, which has 724 posts at this point (soon to be 725!), now let's assume each one takes up just 1" of screen space, that means 724 inches of potential scrolling. That's 60 feet!

In his mind I just use CTRL-F and do a search down the page for what I want. In reality what happens is:

1. I load the page, maybe have a quick look at the top of the page to see if the content is there, if not I hit CTRL-F to search it




2. I type in my search term and hit enter




3. I hit the first instance of the search term, I scan around the text, if it's not the content I want, I hit enter again




4. I find the next instance of the search term, I scan around the text, if it's not the content I want, I hit enter again




5. Rinse and repeat until I find the right content or I amend my search term

You can see an example of this both at his Humanized blog and on Rad Geek's projects page (as Rad Geek has a plugin available to do this in Wordpress).

There are limitations to CTRL-F though, you can only search for exact phrases, you can't put in a couple of keywords. If you type games sonic it won't search for text that contains both games and sonic, it'll search for the exact phrase games sonic. Normal search tools look for both.

Another thing he mentions is that the page won't load all at once, it'll load content as a user hits the bottom of the page using an Ajax call. So now not only can't you find more than one keyword, not all of the content will be on the page for you to search anyway, so you now have to search, scroll, search, scroll, etc.

Now what about a more traditional model, with clicking:

1. I load the blog page, I check to see if the content is on the first page, if not I scan around for the search box




2. I type in my search term(s) and hit enter




3. A list of search results is returned, I scan the titles (and possibly an extract of the content), if I see one that looks promising I click it




4. If that's my content, voila, a page with nothing but that on




5. If not, I hit back and look at the titles again, click and review




6. Rinse and repeat until I find the right content or I amend my search term

It doesn't appear much faster except for four things:

1. I can use multiple search terms in my search, making it much more powerful




2. I can review the article headlines and differentiate between content, hopefully meaningful titles/extract will let me rule out articles about computer games when the sonic I searched for relates to audio




3. I can jump around chronologically, CTRL-F just searches in two directions: up and down. I can skip articles if I choose, lots of them




4. If I have visited before and I remember the title or my browser remembers the links I visited, I can easily see which links I clicked on as they should stand out, CTRL-F forces me to search down the page every time

That's not to say I don't think I should make users click down and down into the bowels of the site. As I've already mentioned, I made sure there was a nice big, easy to find search box on every page.

Hopefully you find the site more visually appealing and easier to use. If you have any suggestions, please leave a comment, or get in touch.