Blogs and Content Management Systems (CMS) usually allow readers to leave comments on articles. Most bloggers and webmasters are concerned about comment spam, follow/nofollow links and much has been written about the technical aspects of user comments - this article will look at the visual and functional design of comment creation and display.
Comments are creating using forms and much has been written recently about styling forms using CSS (like these excellent articles), but there are a number of variations when dealing specifically with user comments.
Nested Or Linear?
Nested comments allow users to reply to other comments (as used to good effect by community sites like Slashdot, Digg and Reddit) whilst typically blogs created with Wordpress, Movable Type or Blogger only allow users to reply to the original post.
When comments are linear, commenters will often try to get around limitations by adding "Re:" to their comment titles or using block quotations of the original comment in their text.
The limitations of linear comments are obvious, when a large number of comments are associated with an article, it is difficult for discussion to flow between commenters and comments are often posted in a fire-and-forget manner with few commenters checking back to look for replies.
In contrast when nested comments are used, the comments can often take on more importance than the original post. This is particularly evident on Slashdot where posts are intended to kick-start discussion, not be authoritative.
Where nested comments generate a great deal of discussion, they are usually associated with a voting system so that abusive, foolish or repetitive comments get buried when votes against them reach a certain threshold. Additionally, commenters with a large number of positive votes gain status amongst the site's readers, sometimes making the activity of gaining points an addictive game.
Editing & Deleting
Very few sites allow comments to be edited or deleted by the original commenter (b3ta is one that does) because comments can be edited long after their creation to completely change their meaning, making any replies look stupid.
Similarly, deleting a nested comment must delete all replies, wasting the efforts of those who bothered to respond. On b3ta, deleted threads are met with howls of protest.
Subscribing To Updates
Blogs sometimes allow users to request notification when a new comment is posted. With nested comments, this may be restricted to replies to that user's comment but with linear comments, users are notified of any new comment against the article.
These notifications are almost always provided by email, meaning that fast moving threads can fill up the user's inbox making them less likely to subscribe next time they comment (if they ever do so again).
A more appropriate technology is RSS, although few blogs use it (Ajaxian is one). RSS gives the user a choice of subscribing to the whole blog, an article or replies to a specific comment.
Some blogs use AJAX or DHTML technologies to dynamically render the comment form when requested without loading a new page. This has the advantage that the commenter can read the original article and comments whilst adding his own contribution but the form does not take up screen real estate for the majority of readers who do not comment.
What Data To Capture?
Where comments can be added anonymously, the comment forms usually ask for:
- A username
- An email address
- Optionally, a homepage
- The comment text
You can be sure that the commenter's IP address is logged as well.
Another potentially destructive form of comment vandalism is page-widening. This is the act of posting a comment with an unbroken string of text that is wider than will comfortably fit in the area reserved for comment display. This can break the layout unless specifically catered for.
It can be unintentional - posting a long URL or line of code can cause it to happen. These cases dictate that it is undesirable to simply truncate long words, instead the CSS style
overflow: auto should be used to cause a horizontal scrollbar to be displayed when words cannot be wrapped.
Most comment forms use HTML textarea widgets for entering the comment text. Very few enhance these widgets to provide WYSIWYG editors using technologies like TinyMCE or FCKeditor. Providing such editors would help less web-savvy users create better posts and would be less off-putting than a textual note below the widget like this:
Some HTML allowed:<a> <em> <strong> <cite> <code> <ul> <ol> <li>
The size of the textarea widget also provides an important visual clue for commenters as to how large their comment should be. Although the textarea might allow for 50000 characters, if it only shows 4 rows of text at a time commenters are unlikely to write lengthy comments.
Some comment forms have low limits on the number of characters allowed and will show a dynamically updated count of the number remaining.Ebay feedback is an example where this works well. It is unnecessary where the character limit is high and the textarea size is small.
The design aesthetics of displayed comments are too often overlooked by web designers due to the disconnect between web design and web development.
Comments must display a significant amount of information in usually a small space. Typically, this information might be:
- The name of the poster
- The status of the poster (member, moderator, points, number of posts etc.)
- The poster's homepage
- The poster's avatar
- The date the comment was made
- The title of the comment
- The text of the comment
We can think of the title and text of the comment as being the content and all other items as being the comment’s metadata.
There are two approaches to displaying the meta data, it can be shown with the comment (above, below or on the left hand side) or abstracted to another page. In the latter case, the commenter must typically be a member of the site and would have a page displaying his/her user profile.
Use Of Colour
Some blogs use colour to distinguish comments by the article author from the comments of random web-surfers. This is a useful approach as the reader's eye is drawn to the difference, making the author's comments stand out as more authoritative, like this example.
Distinguishing between successive comments can also be achieved using colour by alternating between subtly different shades for the background, or by placing a contrasting line between them.
This is an effective approach for linear comments, but breaks down when applied to nested comments. In the case of nested comments, a strong design for the comment title is more effective at emphasising the start of a new comment, as shown to good effect at Slashdot.
Good webdesign makes much use of whitespace to separate elements on the page. Comments should be separated from the article by effective use of whitespace and box borders.
Separating comments using lots of whitespace can cause pages to become excessively long when an article attracts hundreds or thousands of comments. Some blogs employ pagination to show comments in blocks of 10, 20 or 100. This can often mean that greater prominence is given to earlier comments as they are shown first - users are morely likely to scroll down to read more comments than they are to click to read another page full of them.
Good web design should give careful consideration to readers’ comments. Reader interaction should be encouraged and rewarded, and a well designed comment form coupled with a layout that makes your readers’ comments look good will pay dividends.
Blogging tools have an array of plug-ins and options for styling comments so use them and the design principles of a blog can be consistent with user contributions.
Most of all, the design of a comment system should reflect the aims of the site owners and add value for readers.