SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

How To Design Readable Comment Threads

June 25, 2015 by Jake Rocheleau

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.

kotaku gawker comments ui

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.

cbs news website comments area

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.

yahoo news collapsable comment threads

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.

the verge comments collapsed

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.

digg v3 2008 design comments

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.

aol redesign comments section

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.

reddit threaded comments design

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.

4chan /gd/ comments design

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

Filed Under: UX Tagged With: tips, trends, ui design, web design

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022