Blog comments design considerations

Blog comments design is one of the important parts of blog design, but often overlooked. In this article, I will try to identify the most important aspects of designing comments that should be taken into consideration and provide some of examples that I like.

1. Conversation flow

One of the most important aspects of comments is conversation flow. There are many ways to break the flow, but there are also many ways to keep it. Readers who comment on an article usually read existing comments and often comment not only on the particular content in article but also reply to other readers. And in those cases it might be difficult to follow the flow.

Chronological or threaded view? Or…?

Blogs usually have simple, chronological views that are easy to read if you just scroll down the page. However, comments won't always be just "Thank you for the tutorial". You might have to respond to several comments and readers might respond to each other. A real discussion can occur and if that happens it might not be that easy for a reader to catch up with all the comments.

One of the solutions is to have the so called "threaded view". This means that comments are not being shown only in a chronological order. Instead, replies to a specific comment are being shown under that particular comment (or under that "thread"). In this way you can easily follow related comments because they are simply visually grouped. I like the comment section on Line25 blog ran by Chris Spooner. It is very neat and easy to follow.

Nettuts+ also has threaded view. The interesting thing here is that replies have different layout.

But to have easy-to-follow comments you don't need to implement threaded view. There are some simple, easy to implement but also effective solutions. Guys from UX Booth created an interesting solution: they added a reply button on the right hand side of each comment. By clicking that button you get a link to that particular comment with the name of the author you replied to. By clicking on the link readers get scrolled up or down to the related comment.

Emphasize authors comment

Readers often ask questions and debate with the author. By emphasizing author's comment it becomes simpler to scan and look for author's replies. The simplest and the most often used way to do this is to set a different background color for author's comment.In the example below, on Ordered List blog, author's comment has slightly lighter background.

Separate comments and trackbacks

Keeping trackbacks and comments together is a a good way to break the flow of comments and many blogs still keep them together. It is not that hard to do such a modification in your blog engine. Some time ago I wrote an article on this subject and showed how to do it in BlogEngine.NET. The image below shows comments and trackbacks on Handycons2 article.

2. Layout

Although there are numerous different comment designs out there, following layouts are most widely used.

A. Simple layout

This is the simplest and probably the most common layout. Reader's name is emphasized and followed by comment date and the comment itself. This can vary in the way that date can be placed on the right of the name, or both can be placed under the comment.

B. Two colum layout

 

The left column contains either an author's name or gravatar and the right contains the comment. If used without gravatar, author's name is usually followed by date. And if gravatar is present it can be followed by author's name. These also have large number of variations. 

C. Three column layout

The last one is divided into three columns. On the very left is a gravatar, followed by the author's name and finally the comment on the right.

3. All comments visible?

It is very common to list all comments in same page as an article, just below the article itself. This is how I list comments as well :) But there are some other options that can be considered here.

Tabs

24 days blog has a very interesting concept of showing comments under separate tab (not to mention that this blog design and usability are just awesome!). They have comments tab on the top and bottom of each article so it is easy to switch between article and comments. It might be difficult to switch back and forth if some comment refers to a specific paragraph in the article, and you want to take a look at it. But, on the other hand, you would normally have to scroll up and down, isn't it?

Paging

Although not widely used, paging could also be a good choice, especially if blog has a large number of comments. Just imagine a hundreds of comments together with article, like WebDesignerWall has? Here are two good examples of paged comments on Tutorial9 and WebDesignerWall.

4. Use a Gravatar or not?

Another thing you would probably ask yourself is whether to use a gravatar or not. I would say yes, for one simple reason – it could be a good motivation factor for users to get involved and comment on your articles. Gravatar simply enables readers to be seen to promote ther blogs or their businesses; and people just like to be seen, it's normal. Gravatar can also add value to your design and make it richer. You can combine different elements with gravatar images to enrich comments, use things like balloons and borders, for example. To learn more about gravatar visit gravatar.com. Here are a few examples:

Of course, if you choose not to use gravatars it doesn't necessarily have to be a bad decision. You have a lot of options and combinations to choose from, like different layouts, colors and/or backgrounds. One great examples Snook.ca blog. 

Be more creative for users that don't have gravatars

Speaking of gravatars, one of the things that is almost totally overlooked is, what I will call, no-avatar image. Many blogs use default no-avatar image which is too generic. It is especially common for wordpress users, so you are probably familiar with this image:

You can make your blog comments recognizable and more interesting if you create unique no-avatar image. Here are just some of the examples of a good practice.

5. Showcase

Finally, let's have a look at some great solutions. It's amazing how much this simple element in blog design can be done in so many creative ways.

Blog.spoongraphics

Design Reviver

Fuel Your Creativity 

Psdvibe

Komodomedia

 

Outlaw design blog

Tutorial 9

 

Veerle's blog

 

WebDesignerWall

 

Freelance Folder

Bartelme design 

 

Dark motion

Snook.ca

Avalonstar

Jason Santa Maria 

 

Ordered list

 

UX Digest

Do you have any other important consideration? Do you have a blog with great comment design? Share it!