How To Design Readable Comment Threads

Comment sections are built for user interaction. Websites are mostly about consumption and comments are a way for readers to share their thoughts with others. But not all comments are created equal, and certain techniques are more favorable than others.

In this post I’d like to cover some helpful tips for building readable comment threads. As a designer your focus should primarily be on the user experience of comments. The methods of handling responses and comment threading are varied but follow similar ideas.

Focus on the Content

A comment’s design should be about the comment’s content. Not the user, date/time, or relationship to others. While this extra information is important, it shouldn’t take center stage.

Visitors want to read comments in an expected layout style. Consumption should be quick and easy without a lot of runaround. Your job as a designer is to create interfaces that property reflect content. As such, you need to maintain consistency with comment sections and keep a uniform feeling throughout the page.

It’s certainly possible to include avatars and a link to the commenter’s profile. But it’s also a good idea to keep this stuff tucked away & off to the side. Don’t let metadata overpower the comment itself.

A good way to do this would be to separate the comment’s body from the header/metadata info. Create a colored bar that sits above the content with a timestamp and user information. This is a simple procedure but may require more time than you’re willing to give.

In this case Disqus can be a great free alternative. It’s easy to setup and even has plugins for common CMS engines like WordPress and Drupal.

Since most visitors are familiar with Disqus they’ll already trust your comment section. A third party alternative is sometimes the best choice when you just need to launch a website quickly.

Another serious consideration is the commenting experience for mobile users. People browsing your site on their iPhone may or may not want to leave a comment – but they would more than likely want to browse the comments. Make sure your design pays attention to the needs of all users.

Collapsable Threads

Threaded comments are broken down into threads with individual replies. Some threads have their own permalink and lead to a unique page with further comments. These threads are designed with purpose to organize the conversation into bite-size chunks.

Take for example the Yahoo! News design. Their comments are built to auto-collapse threads. Comment replies need to be opened manually. Some visitors may not like this feature but it’s designed to keep the interface clean and simple.

Whether comment threads are opened or closed by default isn’t really a sticky topic. You just need to consider how comment threads should behave, or if your comment section even needs threads. Heavily trafficked websites that garner hundreds of comments will certainly benefit from threaded replies.

But if you run a simple blog it may be easier to just leave individual comments as they are. Disqus supports threads by default so the functionality is there if needed.

Another point to mention is that collapsing comments should feel natural. Comment interfaces aren’t meant to be confusing, and they shouldn’t be. Just follow your instincts to find the best methods for comment interaction.

Most visitors relate to the plus/minus icon as a toggleable item. You might also choose a small triangle icon that rotates for collapsed comments. Either way stick to something that’s ubiquitous and easy to recognize.

Ranking Comments by Votes

Social media has offered a proven mechanism for voting, sharing, and ranking our favorite content. The user really has more control than ever before.

If this can be done on Facebook and Twitter then why not your own comments? User votes are a good way to push up the most liked ideas toward the top while hiding offensive comments, unpopular opinions, or spam.

Voting isn’t always needed but it can offer more user interaction. For example, the voting on Digg v3 practically made their comment section what it was. Back in Digg’s heyday many users were fascinated by the unique comments and really got involved in the community.

However the problem with voting is that it can create an echo chamber. Comments voted below a certain threshold get auto-hidden from sight. Readers need to manually click and read these comments for themselves.

Auto-hiding spam is definitely a great idea. But it’s a problem if a comment is silenced just because it contains a divisive opinion on a certain topic. So think carefully before you implement a comment voting system.

One possible choice is to use a voting method that doesn’t include downvotes. This way great comments are praised and others are just left alone. It’s a happy middle ground between no voting and strict point-based voting.

Sub-Comments & Quoting

When threading becomes a default feature you need to consider how replies are managed. Top-tier comments can have 2nd-tier replies, but what about further replies? How far down are you willing to go?

On websites like Reddit there is no limit. You can just keep replying further and further without restraint. The responses continually indent slightly to visibly convey a parent/child relationship. Once the comment thread gets too small for the page it breaks into a permalink with further comments hidden on a new page.

This is too extreme for most websites but it demonstrates that deep threading is possible. Most blogs or online magazines limit 3-5 sub-replies in any given thread.

Another alternative can be found on the 4chan imageboard. This method gives each comment a unique ID which can be quoted. Then somebody responds to the comment by quoting the ID which actually links back to the original.

Hovering over this link displays an inline view of the original comment. This method is less organized than Reddit but it’s also simpler. You don’t need to worry about threads or nesting. Plus 4chan comments don’t have any votes, so there is no user-voted hierarchy.

There are other means of handling quotes & responses but these two are unique and provide a structure for your own ideas. Take a look online at other communities to gather some different ideas.

Designing your own Comments

To craft your own readable comments you’ll want to follow in the footsteps of others. Learn from great websites and study how they design their comments. Work on your own ideas and learn how to merge concepts together. By studying other websites you’ll pick up on social traits and be well on your way to designing thrifty and usable threaded comments.

If you like these tips then you’ll love our other articles:

How and Why Design Impacts User Decisions

50 Inspirational Web 2.0 Websites and Social Networks