Posts Tagged ‘usability’

Content And Usability Before Blog Promotion

Monday, September 8th, 2008

I occasionally come across new bloggers who are eager to generate traffic to their blog.  They become focused on blog promotion and SEO before their blog is ready. I applaud their efforts, but I think it’s a mistake to promote your blog to prematurely.

Photo by Kelly Asmodee via Flickr

A good web site should serves a purpose.  For instance, a commercial site’s purpose might be selling some sort of products.  Without a well designed site, catalog of products, easy-to-use navigation, and secure eCommerce system, there’s no point in promoting the site because all the effort will be for naught.  Likewise, your blog serves a purpose — may be you want it to tell your story, share your interest or your expertise.  The commonality is that all blogs need some kind of content; as such, you should have at least a few good posts on your blog before you even attempt to promote it. And don’t even worry about SEO until you have sizable number of posts.

In addition to content, you should also design the blog for usability.  In general, blogs are well designed out of the box, but there are a few things you could do to improve it further:

  • Choose a professional looking theme
  • Navigation is clear and consistent
  • Feed subscription button is clearly visible, preferably above the fold
  • Search box is available and easy to find
  • Archive is easily accessible (I prefer a simple link in the navigation bar that links to a full archive page)
  • There is no unfinished posts
  • All links are working

By focusing on your content and usability first, you are giving your visitors good reasons to become readers, and hopefully, they’ll come back in the future.

This article was featured in:

How To Design A Usable Reader-Centric Blog

Thursday, February 28th, 2008

One of the most common design issues associated with web sites, and especially with blogs, is clutter. It’s so easy to fill the sidebar with links, widgets, and clicklets. So easy that even the most ardent minimalists have to stop and unclutter their sites from time to time. So, how do you decide if something should be displayed on your blog? Here is an easy to follow process to help you unclutter your blog.

Look and appeal

Photo by Kelly Asmodee via Flickr

Four steps to design a more usable reader-centric blog:

1. Look through your readers’ eyes

Put yourself in your readers’ shoes by visiting a few blogs. For each, go through a few pages and answer the following questions:

  • Which elements did I interact with?
  • Which elements did I ignore?
  • Which elements did I find helpful?

Do you see any common theme emerging? Are you consistently interacting with the same elements, but not others? Most likely, your readers are doing the same. Another great way to do this is to invite a few friends over and watch them interact with your blog (better turn off AdSense while you are doing this).

What is the purpose of this whole exercise? It’s designed to desensitize you. You are different from the typical blog readers. Things that you take for granted are not as obvious to them as it is to you.

2. Review you blog with reader-centric mind

Now that you are more sensitive to what the readers are looking for, take a look at your own blog. You should be able to put each element into one of these 4 buckets (your classification may differ from mine):

  • Essential — the blog wouldn’t work very well without them. For example:
    • navigation bar
    • link to individual posts
    • search box
    • comment box
    • etc.
  • Valuable for readers — these are things that are useful for readers, but your blog would function fine without them. For example:
    • Content
    • Related posts
    • Popular posts
    • Archives
    • Categories
    • RSS feed links and logos
    • etc.
  • Valuable for your blog — these are things that the majority of readers ignore, but may be useful for your blog. For example:
    • Advertisements
    • Stat counters
    • Blogroll
    • etc.
  • Useless — these are things that don’t help your readers, you, or your blog. Why is it even there in the first place?
    • WordPress meta links
    • Calendar
    • Advertisements or affiliate links that doesn’t make you any money
    • How much is your blog worth? widget
    • Spam counter
    • You comment, I follow logo
    • numerous other widgets and clicklets

3. Unclutter!

Now remove anything that you marked useless. Then give your elements some white spaces, or lines of separation, to make it look clean and organized. For text blocks, you can use justified text alignment make them look clean. While you are doing this, there might be some opportunities to shorten, reduce, or eliminate unnecessary text, headings, and graphics.

If you are looking for specific suggestions to unclutter your blog, I highly recommend Skellie’s 50 Tips to Unclutter Your Blog.

4. Rearrange for Optimum Placement

Congratulation you completed the first step toward cleaner better blog. However, there’s still room for improvement.

Based on your judgment in step 2 you should move essential elements toward the top of the page; follow by most important and/or most frequently used items; and least important and/or least used should be toward the bottom.

Moreover, you can utilize heat maps like the one from AdSense, or ones that customized for your site — e.g., Crazy Egg, Google Analytics, etc. — to further optimize your blog. You may find that certain things perform better on the right side of the page as opposed to the left or the middle. You may find that elements you though we’re important or frequently used by your users are really aren’t.

For more articles about uncluttering your blog:

Want to be a Good Blogger? Be a Good Reader

Wednesday, February 20th, 2008

One of the most important concepts in producing successful creative works is to know your audience. If you know what they want, and what will encourage them to do what you want, then you know what to produce.


Photo by delgaudm via Flickr

In blogging, once you get going, you can know your audience by their comments. But what about the early stages, before your blog has many commentators? The simple solution is to become your audience — read widely in the niche that you want to write in, and then think about why you act on them in the way that you do.

Ideas to Try Out

Subscribe to a few blogs in your niche

Check out any link roundups, and think about whether you want to subscribe to the blogs linked. Use Social Media sites, vote up and down based on what you like.

Go to actual blog sites in your niche

What are you drawn to, how have they structured their information, what interests you, do you want to subscribe, and if not, why not? what do you want to know on your first visit? do you want to comment on a post? did you actually leave a comment? how do you find new blogs?

Using your experiences, look at your own blog as you were a first time visitor

Click on all the sidebar links and check that they go where you want them to. Think about where someone would naturally look to contact you, find out more about you, or read more posts. Look at how your commenting is set up. Compare your content to other people’s content that you like in your niche.

Real Life Examples

Social Media

Normally, I’m not a very visual person, and when I started blogging I didn’t really use any pictures. As I became involved in StumbleUpon, I noticed that one of the features that encouraged me to read the post were the pictures at the top of the posts. After a while, text all looks the same, whereas pictures are much more eye-catching. Since then, I’ve started using pictures more and more on both of my sites.


I started blogging because I started commenting. I used to read a lot of great posts, but would always be put off when you had to log in to comment. I felt like the writer was telling me that I wasn’t important enough to be allowed onto their site, and I didn’t register on a single one of those sites. When I started my blogs, I made it as easy as possible for someone to comment — there’s no registering and no default captchas.

Technical Stuff

When I first started Plonkee Money, I didn’t know anything about RSS, other than that it was a good thing to have. So, I burnt a feed at FeedBurner and then collected some HTML code to add to my blog. Unfortunately, I generated code that linked not to my feed, but to the FeedBurner home page by mistake. It stayed like this for at least month.

I may never have realised that I done this if I hadn’t looked at my own site as a first time visitor might and clicked on all the buttons. Once I realised what I’d done, it was very easy to fix, but no wonder I didn’t have any subscribers for a long time.

If you want to be a good blogger, become a good reader.

How to Find the Right WordPress Theme

Tuesday, February 5th, 2008

Whoa, is there such a thing as the wrong WordPress theme? Sadly, the answer is yes. There are literally thousands of themes out there. There are some really good ones, and inevitably, there are some bad ones too.

Moolanomy Theme

Where to find WordPress themes

Before I show you what make a theme bad, I would like to share some resources where you can find WordPress themes:

10 Signs of Bad WordPress Themes

This is not a hard and fast rule, and certain flaws are worse than others — also, some could be fixed with relative ease. Note that my theme doesn’t pass all the tests either, but I know where the problems are and I am working on it. In other word, you may have a tough time finding the perfect theme that passes all these 10 points.

  1. Ugly — I know beauty is in the eyes of the beholder. So you have to decide on this one. If it’s ugly, move on and don’t even bother.
  2. Doesn’t stand out — Another design problem is using a theme that looks the same as everyone else’s. Worse, you have a theme that look very similar to the more popular blogs in your niche. Your theme is an important part of your brand, so it’s worth investing a little time to make yours stand out.
  3. Bandwidth hog — Some themes have too many images, large CSS file, add-on JavaScript files, and large HTML files. Make sure that what you are getting is worth the bandwidth usage. To check your theme bandwidth efficiency, check out Web Page Analyzer from Web Site Optimization. If you use Firefox, try Firebug and YSlow add-ons combination (awesome!). Some tips on reducing bandwidth usage:
    • Reduce the number of images, scripts, and external CSS file (each image takes at least 1 HTTP request)
    • Optimize images to make them smaller
    • Reduce the size of CSS file — i.e., using Clean CSS — or you can do it on your own by stripping out comments, extra spaces, reduce long-hand coding to their short-hand equivalents, etc.
    • Eliminate unnecessary clutters from your blog — i.e., links, text, images, widgets, clicklets, etc.
  4. Database hog — Some themes can make a lot of unnecessary calls to the database. For example, Tigopedia Reloaded uses only 2 database calls compared to its predecessor that uses 30+ calls. Other than that, judicious use of plug-ins will also help reducing database usage.
  5. Invalid HTML — This is probably one of the easiest problems to fix. Unfortunately, some theme designers don’t even take the time to validate their code. To check if your theme validates, try the W3C Markup Validation Service. You can use the “show source” option to help you track down and fix problems.
  6. Invalid CSS — This is similar problem to the HTML validation. To check your CSS validation, try the W3C CSS Validation Service.
  7. Poorly optimized for search engines — There are many articles about how to optimize WordPress for search engines, but when it comes to theme, we are dealing mainly with location of content relative to other code, use of headings, and use of links. In general, good theme has the following characteristics:
    • Present main content first and sidebar(s) afterward
    • Use only one H1 heading for the post title (some may argue using H1 for blog title, but I think it’s more advantageous to use H1 for post title)
    • Use links sparingly and link directly to the post title
  8. Poor separation of content and design — Good theme should make good use of id and class attributes. It should have very little style declaration inside the template files itself. Also, CSS and JavaScript code should be in separate files and not included with the main HTML page.
  9. Inflexible (hard to modify) — Code should be clean, well formatted, and strategically commented. I have tried several themes in the past and there are some that are so hard to work with, I simply stop using them.
  10. Portable — One of the common problems I see when visiting blogs through a portable device (e.g., a blackberry) is bad rendering. Occasionally, I will see blog showing broken CSS code before I can get to the content. If you have an opportunity, check your site through a portable device and see for yourself. To get an idea on how your blog appears on text only or portable device, try Lynx Viewer.

I hope this post help you find your next theme. Before I go, I also want to share a really cool plug-in called Admin Theme Preview. This plug-in let your blog runs uninterrupted, while you can work on a new theme in the background.