For many blog posts, the comments section – where the discussion occurs – is as important as the post itself. This is where the original idea or technique gets tested, refined and extended, questions are answered, and other options to it are presented.
Consequently, it’s worth taking the time to make your comments section as user-friendly and as attractive as the rest of your site. Here are some tips to bring the design of your comments section up a notch or two:
1. Break Up Comments
Clearly separate each comment by putting a border around it, using a light colored background or adding a dividing line between each.
2. Differentiate Comment Meta Data
Differentiate the comment’s meta data (commenter name, date posted, permalink, etc) from the comment by styling it differently. Use some combination of a different font, font-size, font color or background.
Or, try putting the meta data off to one side, so that it doesn’t get in the way of the comment flow.
3. Alternate Colors
Alternate comment background colors to make them easier to tell apart.
4. Number Comments
Add a number to each comment so that other commenters can easily refer to it.
5. Make Author Comments Stand Out
Differentiate author comments so that readers can easily see your contribution to the discussion. Try using a different background and border and/or adding something like “Author Comment” to the meta data.
6. Add Personality
Add gravatars to your comments to spice them up and to give your commenters a little more ‘name recognition’.
Add a permalink to each comment so that other people can link to it – either from within the discussion or from other sites.
Add some graphical interest to your meta data by using icons – for example, a speech bubble icon for the posting date and a user icon for the commenter’s name.
9. Show Total Number of Comments
Say how many comments have been posted in your comments header. For example, “9 Comments Posted. Add Yours”.
10. Live Comment Preview
Add live comment preview to your comment form so that commenters can see how their comment will read as they type it. This is especially helpful in making sure that links work correctly.
11 (bonus). Subscribe to Comments
Add the ability for readers to subscribe to comments by email or RSS.
Looking for a good place to start? Try my blog comment design showcase for some great examples of good comment design.