Rethinking usability in Wordpress Comments

Figure 1. Can you accept the merge of comments and blog entry as one?

Rethinking how we read comments in blogs

Unlike conventional designs which segregate the blog content and the comments left by readers, what I am trying to achieve here is to further integrate the readers’ comments so that it becomes an extension of the blog article itself.

Naturally, the first thing to do is to omit any unecessary information such as number of comments, gravatars or even the default ‘xx Comments, so far’ placeholder. A good example is the one above, notice how I have ended the blog entry with a question to the readers, and see how it flows to the comments naturally without any visual distractions.

The comments are designed to save space which would allow visitors to have a quick glance without the need of scrolling across the screen. They follow a simple visual hierarchy whereby the highlighted comment author (different colour if by blog owner. More on how to do it here.) which leads the eye towards the comment text. The date is kept short though a tooltip mouseover can reveal the full date and time of the published comment.

Figure 2. What do you think of the numbers?

Rethinking how we leave comments in blogs

Quite aware of the fact that many of you would be wondering about the actual usefulness of the number figures. Let me explain the rationale behind it. After spending countless hours figuring out how to best implement the comment form, I settled with a horizontal version instead of the much-used vertically aligned comment form. Pssst. Check out this article by Luke Wroblewski on Web Application Form Design. You can buy his book here from Amazon.

In a nutshell:

Vertical version — our eyes scan from top to bottom. On the other hand, the horizontal version — our eyes scan in a ‘N’ shape manner; rather awkward to say frankly.

Hence, it hit me early this morning that the incorporation of number figures serve as a visual guide for the brain to tell you which orientation it should go. I’ve tried alphabets as a substitute but numbers seem to work best.

By the way, the code behind it is still a bit messy so pardon if it doesn’t look the same on your browser. Sadly, it is only best viewed with Safari. But do leave me a comment if something looks out of place.

Sharing the code

I’m sharing the code publicly just so you can modify or adapt the comment box into your own Wordpress blog. Of course, I’ll be glad to help if you have any questions—but don’t expect a speedy reply.

The commentbox.zip contains the html page, images and css style which I’ve used. Download it here.

Wordpress comment box with improved usability by Chan Hin Ching is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at hinching.com