Customizing WordPress themes for Usability

2007/05/25 · 19 comments

What is Usability ?

Usability is about how people use your blog. Usability is also about how people can find your blog, navigate your blog and about how they can find relevant information on  your blog.

How does themes help ?

WordPress and other CMS (Content Management Systems) comes with fantastic default themes. But regular features built-in to those themes may not be enough. Especially from the usability point of view. Here I will describe how you can customize your blog theme to improve the usability.

Which Theme to choose?

WordPress is an open platform. Many other CMS too are. Finding a theme to suit your blog is not difficult. See the following WordPress theme resources.

Official WordPress themes Archives
83 Beautiful WordPress Themes
Best Minimalist WordPress Themes
Top 10 WordPress Themes

One important thing to note is to choose a theme which renders the post-body first and others next. Prefer a theme which has bigger readable/adjustable fonts. Make use of the screen size. 3 column themes are good at it. Give more importance to the white space on the page. Having good amount of white space improves readability. Have lesser icons. Also change the DIV tags of your picture holders to allow text to wrap around it. Having blank wasted spaces next to the images are non-intuitive.

How people land on your blog? Measure, analyze and evolve.

Use a Web Stats package. You have to :-

  1. Install a Web Stats Package plugin.
    1. Ultimate Google Analytics
    2. Reinvigorate
    3. Automattic Stats
  2. See what are the keywords people use to land on your page
  3. See which are the most ‘found’ pages
  4. See the Visit Duration
  5. Measure the Visit Depth
  6. Measure average time/page

Some of these stats packages requires you to paste JavaScript on your theme files to enable statistics tracking.

Think about How to increase that 12.50% share of 5-15 minute users and increase the pageviews. They may have left because they could not figure out how to navigate or when they cannot find any other relevant information. They may also have left blinded by your theme color! 

 

Let people know about you and your blog
Create an ‘About’ page. That page should preferably contain a welcome message. Your professional/personal profile is also welcome. An interesting short description about what your blog is all about is essential. But try to keep it short. You may also keep a contact form to keep in touch – on the ‘About’ page. To create a contact form you can use the following wordpress plugins:-

  1. WordPress Contact Form with Spam Protection
  2. cForms

Some people also prefer to keep a ‘About’ section on the home page instead of a separate page. That is also effective.
You may also opt to show some site statistics screenshots on the about page.


Let people Read your content

  1. Keep your Post titles descriptive as you can. Avoid very short titles
    • Use dynamic title plugin. This helps on SEO and also helps easy access to your page.
  2. Use SubHeadings for long post. As I am doing here.
  3. Give importance to white space
  4. Avoid distracting icons within the content. Contextual ads within the content is permissible even from a usability point of view. Those who are avert to ads anyway uses Ad blockers.
  5. Properly organize your posts in to categories and tags. Understand the difference between Tags and Categories.


Let people find relevant information

  1. After the post content, always show other related information.
    1. Use this related posts plugin. This will show other related posts on your blog.
    2. You can also use SpotBack and SphereIt plugins to show content recommendations.
    3. Showing a Tag Cloud along with your content also helps.
    4. Make sure that your theme shows the relevant category information for each post.
  2. Provide Search options on your blog
    1. Always keep the main Search box near the top right corner. That is where people expect it to be.
    2. Have additional search options near the related information & content recommendations. This helps people search beyond your recommendations.
    3. Avoid wordpress ‘Live Search’ -  as it is slow to respond.
    4. Apart from the default Search Box of your theme, you may also consider using Google Coop based Custom Search Box. Use the Mighty Search plugin to show the search results within your blog.
  3. Showcase your best and popular content
    1. Use Top Posts plugin to show most viewed content. You may also append some of the posts which you consider are best.
    2. Use Comment Analysis to show the most commented posts
    3. You can also show the Recently popular posts using Comment Analysis plugin
    4. Use Latest Comments plugin to show the readers where the conversations are busy.
  4. Have an Archives page
    Most of the users immediately go to Archives section to see the posts by category and by date. Crafting a specialized archives page using ELA plugin is very effective. There are other ways to show archives using Smart Archives and CAR. You can also use a category List drop down list on the sidebar.
  5. Have a sitemap Page
    1. Make an XHTML Archive using this plugin and link it in sitemap page.
    2. Links and Describe all your pages
    3. Show Monthly and Topical Archive pages
    4. The sitemap page should also enlist the Feed types and respective links.

Let people navigate

  1. Restrict the number of home page posts to 3 or 4
  2. The Post titles should be clickable. Readers have no patience to search for the “Read the rest of the entry” link.
  3. Avoid the bottom-of-the-site navigational systems. They should be on the right or left or on either side of the post content.
  4. Some people advocate for avoiding a Home page link as it breaks the navigation. But I differ and recommend having it.
  5. You can create a Next and Prev post link above or after the post body.
  6. Make sure that your category and tag cloud entries are all clickable entities
  7. Always think about the existence of the Browser back button during the blog design
  8. The comment box should be immediately visible after the post
  9. Avoid paged comments. If you have to use, have a minimum of 20 comments per page.
  10. Have a threaded comments section.
  11. Let them make corrections on their comments.
  12. Don’t open new window for any of your external links.
  13. Put visitors in control.


Let people rate, discuss and followup

  1. Never auto-enable the comments subscription checkbox. Visitors can choose.
  2. Give or Suggest them better options to followup the discussions.
  3. Use cookies to suggest subscription options.
  4. Use social media tools to rate and recommend user generated content.
  5. Show the number of RSS readers , to generate confidence on prospective RSS readers.


Think about Language

  1. Provide Translation tools to assist non-english readers.
  2. AnswerTips enabling your site is highly recommended.


Think about mobility

Prospective users are all over the Mobile Web too. Creating a customized simplistic version of your website is of high priority. You can use the following plugins to enable mobility for your wordpress blog.

  1. WordPress Mobile
  2. WordPress Mobile Edition

 

In addition to the above, frequent usability testing &  reviews with friends and readers are highly recommended to continuously improve the usability aspects of your blog.

{ 13 comments }

Douglas Karr May 26, 2007 at 8:09 am

Thanks for the mention re: the Contact Form with Spam Protection. More to come!

ReviewSaurus May 27, 2007 at 8:51 am

Hey Vinod,

It’s actually a very nice post with some really good points :)

2 BROS BLOGGING May 28, 2007 at 10:49 pm

Great post, I will be implementing some of these as soon as the blog is has enough posts.

Robert Irizarry May 31, 2007 at 7:32 am

I really enjoyed this article. I have an interest in usability and ergonomics and one of the mistakes I made early on in my blogging was not taking these into account with regard to the blog itself. I’ve since incorporated a number of these but I’m always seeking out ways to improve the site. Thanks for the ideas!

Vinod Ponmanadiyil May 31, 2007 at 12:37 pm

I am so glad all of you like it.

Brad June 1, 2007 at 7:54 am

Hey,

Great post. This should be at the top of some social bookmarking sites.

I just made a theme based on Usability strictly for wordpress. I think it may be the first of its kind ever.

Swing over to http://www.fulltimerblog.com to see it in action.

-Brad

Vinod Ponmanadiyil June 1, 2007 at 12:08 pm

Brad.. I am impressed with the true functional simplicity of your site.
If you like this story please submit to the social bookmarking site of your choice.

Nirmal June 5, 2007 at 9:02 pm

Nice post! I developed my first theme for my blog. Do check it and let me know your comments. :-)

Zath June 9, 2007 at 3:44 pm

Some very good tips here Vinod, some I’d read before and currently use, but others are new to me and have started trying out some new stuff on my blog.

Thanks again, keep up the good work!

Vinod Ponmanadiyil July 10, 2007 at 12:47 am

Thank you everyone. I am glad many of you could pick up some new things here :)

Amado August 22, 2007 at 1:32 am

Interesting …

ITrush March 15, 2008 at 7:48 am

Very informative, thanks for sharing the links.
Stumbled and Bookmarked.

nhick

Kathy Cook June 28, 2010 at 10:58 pm

Hello
this is great, very simple and informative. Your recommendations reflect very similar conclusions I came to in a usability study I’ve just finished on blogs.
Best wishes,
Kathy

Comments on this entry are closed.

{ 6 trackbacks }

Previous post:

Next post: