The Blog Usability Checklist

Sep 26, 2007

The Blog Usability Checklist
by Skellie

In light of the positive feedback received for A Beginner’s Guide to Making Your Site More Usable, I’ve composed a 19 point checklist that should be useful to any blogger looking for a practical way to evaluate (and improve) the usability of their blog. Many of the principles here will apply to websites, as well.

1. Does your site have an ‘About’ page?

The importance of this element is succinctly explained by usability expert, Jakob Neilsen:

It’s a simple matter of trust. Anonymous writings have less credence than something that’s signed. And, unless a person’s extraordinarily famous, it’s not enough to simply say that Joe Blogger writes the content. Readers want to know more about Joe. Does he have any credentials or experience in the field he’s commenting on? (Even if you don’t have formal credentials, readers will trust you more if you’re honest about that fact, set forth your informal experience, and explain the reason for your enthusiasm.) [Source]

2. Does your site have a ‘Contact’ page?

This page will be a first port of call for readers wanting to connect with you. Bloggers do tend to include contact information, but often as part of their ‘About’ page. This is quite counter-intuitive for the user. For example, if you wanted to ask someone for their email address, would you do it by asking: “Could you tell me about yourself?”

3. Are your headlines a meaningful preview of the article?

Vague headlines like “You Won’t Believe This” or “Some Thoughts on Politics” are bad usability and about as gripping as a waxed floor. Your headlines should encapsulate why a reader should pay attention to your article, and if possible, preview what they will find there.

4. Is the function of each element on your site obvious to your target audience?

An Alexa widget on a cooking blog is bad usability. In fact, Alexa, Technorati, and any other blogger/webmaster widgets are usability stumbling blocks on any site not about blogging/webmaster topics.

Two popular Wordpress plug-ins I think well-and-truly break this usability principle in all contexts are the Share This! social media plug-in and Popularity Contest.

Share This! is an incredibly ambiguous term. It could mean any number of things, and when a reader isn’t sure what clicking on something will do, chances are she will not do it. My advice would be to stick with specific buttons for each social media service instead.

The Popularity Contest plug-in sticks ‘Popularity: 3%’ or another low percentile at the bottom of each post, and is broken in two ways: it makes no sense to those who don’t have the plug-in, and secondly, no-one wants to see a positive variable and a low percentile (i.e. Honesty: 2%)

5. Is it clear where each link will lead?

Regular readers will know this is a habit I’m trying to develop over time. Even if you want to hyperlink the text ‘click here’ (a strategy Copyblogger has suggested will increase click-throughs) it’s important that the text leading up to the link explains where the ‘click here’ will lead. If you’re using keyworded anchor text it should serve as a mini-preview of what you’re linking to.

6. Is your text readable?

If you suspect visitors are not thoroughly reading your articles, perhaps because their comments indicate only a partial understanding of what you’ve written, it may be because your text is difficult to read. This is an endemic problem because many bloggers only read their posts as they’re composing them and not once they’re published. I’d suggest getting a few friends to look at your posts and describe whether or not it is easy to read for them.

If you’re using a small font, or a serif font (like Georgia, or Times New Roman) — two trends I’ve seen growing more prevalent in recent times — then your content may be difficult to read.

7. Do your posts contain whitespace or images?

It’s important to use frequent paragraph breaks in web writing. Images will also make your posts easier to read. Each post is a wall of text in its unformatted form. Your goal should be to break it up into a series of bite-sized chunks.

8. Are you making good use of sub-headings?

I don’t think we should ever settle for scannable content. Sub-headings work to signpost your logic, to give readers an angle to approach the following paragraph, and to lay out your sequence of ideas. Sub-headings don’t make it easier to scan — they make it easier to read. If you want readers only to scan your posts, don’t format them.

9. Do your posts fluidly allow readers to comment when finished?

This is as simple as adding a comment link to the bottom of your posts. Most blog designs readily accommodate this but I still encounter some that don’t. If your comment link is under your headline, it’s in the wrong place.

10. Is your feed icon above the fold?

There’s a compelling reason to adhere to this standard: you will get more subscribers. Your feed button should be prominent, but it should never insult the intelligence of your readers: (I’ve occasionally seen feed buttons as big as a child’s hand!).

11. Does your header image link to your main page?

Many readers expect that clicking on your header will return them to your main page, and it’s become something of a web standard. If this is not possible with your design (for example, if your header image is the background for a cell), make sure there is a prominent link home near your header. Even if your header already links back to your main page, I think an additional text link is good usability.

12. Is there padding between your embedded images and text?

Text running into the sides of images is a nightmare for readers. Sentences are, after all, supposed to end in full-stops, not pictures of boats!

13. Are there wide margins around your posts?

Margins around text are fundamental to readability. If your blog posts run almost into your sidebar, or to the side of the screen, you should make your post column narrower.

14. Are your posts less than 2/3 a screen-length wide?

Contrary to popular belief, wide post margins are not good for readability. There is a reason newspaper columns are as narrow as they are. Compare, for example, the readability of Blogging Tips with that of Signal vs. Noise.

15. Are you making your best posts easily accessible?

Readers shouldn’t have to excavate killer posts from your archives. Further, I think any blogger who’s not highlighting their best stuff is selling short the long-term effort they’ve put into building their blog. A quick list of benefits: it shows readers your site is packed with value, it will ensure your best posts continue to generate comments and inbound links, and it will establish that the sum of your blog is more than just your most recent posts.

16. Are your color choices conducive to usability?

Black text on white is easiest to read, followed by black on light. Any writing on a dark background is hard to read, but worst is light text on a light background, or dark text on a dark background. James Reggio’s personal site is, in my opinion, an example of minimalism winning at the expense of usability. If each line of text was the color of the central two lines, it could be transformed into a usable and functional minimalist design.

17. Are your links easy to pick out?

A good practical tip to unsure this is to double format your links. They could be a different color to the plain text and underlined, or bold and underlined, for example. Often one form of formatting isn’t enough (for example, links only in different colors can be hard to pick out if the color is similar to that of your plain text. Underlined links not in a different color can look like underlined plain text, also.)

18. Are your images meaningful in their context?

Including images in your posts is not a good in and of itself. If they don’t relate, at least tangentially, or metaphorically, to your content, they will distract readers. Images should capture the essence of your content, or create an appropriate atmosphere for consuming it.

19. Are your essential navigational elements easily accessible?

The biggest culprit in breaking this usability principle is what I call the ‘footer ribbon’ (though perhaps designers have another name for it). It’s everywhere — even the ProBlogger redesign! The ‘footer ribbon’, if you have one, is just above your footer, beneath the content, and usually contains navigational elements, categories, and other important stuff.

To me, this is like throwing a party and serving finger-food under the table instead of on it. How many readers will look for important navigational functions in the nether regions of your main page? My advice would be to simplify your sidebar, move only those footer ribbon elements that are essential into your sidebar, and delete the ribbon.

Have I missed anything?

If I included every possible usability gaffe in this post it would be gargantuan, so I’ve tried to strip it down to the most essential principles. If you’ve got ticks next to all these, your site should have a good level of usability.

If I’ve missed anything important, or if you’d like advice on implementing some of these principles, please let me know in the comments section of this post.

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

rss feed

34 Comments, Comment or Ping

Jaosn

Thanks for the tips!

Sep 26th, 2007
cooper

I’m not sure how I arrived here, I think via a blog on my reader.

I’ve looked through the site briefly, as it’s after two in the morning. I don’t usually read blogs about blogging because I’m a personal blogger and I really don’t have a whole lot of use for them, as I don’t blog for profit. This was a great post however and I’m sure we can all learn something.

The blog also looks fantastic. I hope to come back when it’s not almost three in the morning my time.

Sep 26th, 2007
Meg

Hi Skellie

Just wanted to say that this is a great checklist (which prompted me to create a separate “contact” page). Lots of valid points, thanks.

Sep 26th, 2007
martinsc

great list
printed it out and will go through my blog and see what i can change
thanks

Sep 26th, 2007
Natasha

This is a great post… I’m just starting out with my first ‘non-personal’ blog, and you’ve given me a lot of things to keep in mind as I go forward.

Thanks!

Sep 26th, 2007
Web design mumbai

i think you have pointed out nice points and we should keep these points in mind for better response from our blog
Amitav Roy

Sep 26th, 2007
Diane

Thanks very much - very useful tips - I shall add a contact page pronto!

Sep 26th, 2007
Ben Clapton

Great post. I’ve bookmarked it to come back later this evening to go through what I’ve got on my new blog (which is also my first non-personal blog) to make sure it works on the useability side. I think most of what I’ve done is pretty good, just need to make sure it works.

Am thinking I need to modify my wordpress engine to try and add in the H1-H6 tags so that I don’t need to go into code to enter them (which I don’t mind doing, but find it a bit of a hassle.

Sep 26th, 2007
AL

when a reader isn’t sure what clicking on something will do, chances are she will not do it

Couldn’t possibly agree more. This is one of the greatest pitfalls that slips past people involved in web design. You really have to question every single element in the design and say: would the average joe get what this is about? If not, then don’t ever think there’s a chance they will click it. It’s very unlikely.

A common example of this is the RSS feed icon which is unfortunately not understood by most people yet. Having helpful text next to it or a link that takes a user to a page that explains what it’s about might be more helpful than just throwing big orange button in their face. That’s of course unless your blog’s niche are mostly tech-savvy individuals.

Sep 26th, 2007
Tammy

Another great post, Skellie, thanks.

Following on your comments about comments: I discovered recently that a number of folks who read my posts via email didn’t know to click back to the blog to leave a comment. So they just skipped it.

It shouldn’t have surprised me, since I might assume that the folks who subscribe via email are less tech savvy than those who use RSS, but it did surprise me. So now I’ve started to link the comment reference to the post page, as a hint there’s something there if those folks want to click through.

Sep 26th, 2007
Hans

Hi Skellie!

Another great post!

I really like your style… so I post your blog as a suggested blog on my own blog. I hope it could help you!

Sep 26th, 2007
ChrisB

I never thought of Time New Roman font as hard to read until you mentioned that. I tried Verdana on a post and was shocked at how much more comfortable it is to read. Thanks for these great tips!

Sep 27th, 2007
Mohsin

Done! I think I got 100% marks!

Sep 27th, 2007
Mason Hipp

Hi Skellie,

This is an excellent checklist. Really good stuff, and well organized.

I wanted to respectfully disagree on the “Footer Ribbon” being bad for usability. I think that it is very important to the usability of a website, and I think it would be a grave omission if it were not there. It is such a common design element that people very frequently look there for things like contact us pages, return policies, and other useful links. Leaving it out is, in my opinion, similar to not having your header image link to your home page. People simply expect it to be there.

It’s also been shown that people read to the bottom of pages and are very prone to clicking on links down there.

All of that being said, your tip was titled “Are your essential navigational elements easily accessible,” and at the end of the day that’s what’s most important. Though the footer is (in my opinion) very important, it is much more important that those critical links also be above the fold.

Thanks for a truly great article,

- Mason

Sep 27th, 2007
skellie

Hi all, sorry I haven’t been able to respond to comments earlier — yesterday was pretty hectic!

I appreciate all the kind words, and I will pick out a few points to respond to:

@ Tammy: That’s really interesting. I’ve set up my feed so that there’s a link to comments at the bottom of each post, and now I’m glad I did! As for RSS, I agree with you. I think on most sites it’s wise to have a little page explaining what it is. I don’t do it for this niche because I’m pretty sure most visitors here are probably sick of hearing about RSS!

@ Hans: I appreciate it!

@ ChrisB: Just checked it out — looks good!

@ Mason: Thank you for respectfully disagreeing, because I respect your opinion :).

I still think that important elements should be raised as high as possible in the site design, but I suppose that’s the taste of the individual designer. In most cases the footer ribbon is sorely neglected and essentially used to ’shove things under the rug’ rather than remove them. I think on a short-length site they might have some use, but I don’t think any site owner should expect their user to scroll for yonks to reach key navigational functions.

Sep 27th, 2007
Glennette

Skellie,

I have enjoyed many of your posts as both a designer and a blogger. I am just getting started in the blogging world and I have found your posts and tips extremely helpful and insightful.

Thanks.

Sep 27th, 2007
Michael Martine

I’ve just recently switched from Georgia to Verdana in the body text and it’s much more readable. A bit of background: Times New Roman and Arial were both designed before the age of computers and neither read very well onscreen (unfortunately, Google thinks Arial should be used for everything). Georgia and Verdana have been shown to be at least 25% more readable onscreen.

Here is something under the hood of your blog that may be important for usability: the unit of measurement your blog’s stylesheet (css) is using for sizing fonts. If fonts are set for pixels, Internet Explorer will not allow for text resizing through the view menu, which some people depend upon to read better. If you set your fonts for ems or other relative sizes, the text resizing will work. Not a big deal in the grand scheme of things, but, depending on your blog’s audience, perhaps important.

Sep 27th, 2007
skellie

@ Glenette: Thank you! I’m very glad Good to see you with a tumblelog, too!

@ Michael: I always appreciate the readability concerns you bring to discussions of usability, particularly when it comes to catering for the vision impaired. It’s an area I have little knowledge in and it’s a perspective I don’t consider enough.

Sep 28th, 2007
Tim Broder

Thanks for the tips. I think another one is not having too much glitz IE javascript or images that will slow down the load times. Granted this isn’t an issue in some feed readers but something to keep in mind.

Sep 29th, 2007
Elliott Cross

Another aspect for usability is the site map. I might have missed you discussing it, but for usability, it ranks up there with having a search feature on your site as one of the best mechanisms to improve usability.

There are several site map creators for Wordpress as plugins, but the thing to remember is you want it to be “google” friendly.

Great tips!

Oct 9th, 2007
Jo

Skellie,
you’ve nailed down some important points here, some of which many people completely ignore. I also believe that white-space (in the form of margins and padding as well as paragraphs) are a very important element to increase readability. Although I have thought about most items on your list before, it is great to see them all in a list like that.

PS: Good one about the footer ribbon. I noticed you’ve got one as well and I think it works great on your site since it’s just a repetition of the header one and it shows up nicely when someone gets to the comment section…

Oct 10th, 2007
OnlineGoddess

Hi Skellie, thank you for the wonderful tips. Like several other commenters, I think I’ll be adding a contact page shortly. I never really thought about doing it before as I didn’t imagine anyone would actually want to get in touch with me outside of the comments system.

A couple of other suggestions - I really appreciate a comments system that allows me to receive email notifications when a new comment is made. I’ve installed a subscription function on mine that allows this even if a reader hasn’t commented.

Also, you’ve already covered the double-formatting to make links more obvious, but I’d like to point out that this is also useful to colour-blind people for whom a simple colour difference may not stand out. I hope people take this on-board when designing their general site colour scheme as well, especially if they rely on colours to indicate the status of something on their page.

Oct 27th, 2007
Durkin

Great Tips. I’m just using some of them on my site now…

Feb 4th, 2008
rosie

This is such a timely post. I am currently reading a book called “Don’t Make Me Think” by Steve Krug and your post is insightful and right on time. I will never be bored as I attempt to revamp my blogs, websites and start new blogs and websites keeping these principles in mind.

May 3rd, 2008