Curating Comments Threads

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

Long comment threads on blog posts are a mixed blessing. It is great to have stirred up such great community discussion. But anything beyond, say, 20 comments is beginning to get beyond what anyone is willing to actually read. What likely happens is people read the article, read the first few comments, then start just scanning them (at increasingly swift rates) until they hit the bottom, then read the last one or two. At least, that’s what I do.

WordPress automatically appends a class name to individual comment <li> tags for the author (“bypostauthor”) and a variety of other similar things. Many themes use these hooks to apply special styling. That way author comments stand out a bit and someone scanning down the article can pause to read author comments, which are presumably of greater interest than the others.

That’s a good start, but we can do more to curate comment threads to make them more readable for our visitors.

The tools we have now

There are some design patterns that have emerged for dealing with comment threads in the past few years.

  • Replying / Threaded Comments
    Threaded comments are when comments have “reply” buttons next to them so other commenters can click that to continue that specific sub-conversation. This seriously helps the readability of conversation threads keeping each conversation contained rather than reading a comment 20 comments down that was a response to a comment 20 comments up.

    I like limiting the “depth” of threaded conversations to only a few deep, as personally I find it more confusing when trying to follow a nested thread more than 3 deep.

    This can also be potentially abused, with people replying to other comments just to appear higher in the comment list.

  • Author / Admin Comments
    Chances are, when the author of a post (or other site admin) chimes in on a comment thread, it is of particular interest. That sounds a little pompous to say like that… but I generally find it to be true on the other blogs I read. Highlighting these comments can be useful to those scanning the comment thread. As I mentioned at the start of this article, WordPress makes this easy by automatically applying class names like “bypostauthor” to comment list elements.

    Extending this idea: regular commenters or commenters with reliably quality insights could be treated in the same way. Intense Debate sort of does this with “reputation”.

  • Voting
    In a large enough community, allowing the readers to vote on comments is a way to naturally allow curation of comment threads. The big flaw I find here is that the more controversial the original material, the more people will vote based on which side of the fence they sit on rather than the quality of the comment. The less controversial the material, the less motivated people are to vote.

    Asking people to vote soley based on the quality of another persons insights is, I feel, a lot to ask.

  • Pagination
    If the site in question is commonly in the hundred of questions, you might consider pagination the comments if for nothing else, to help with bandwidth (the scrolling itself, is no big deal).

    Personally, I hate paginated comments. No way I’m going to read a page comments, click over to page 2, read those, click over to page 3. Just not gonna happen.

    Above is Nick La’s Web Designer Wall. Nick is a killer designer who is facing the problem of abundant comments. He probably has his reasons for pagination, but in any case, no way am I going to read all those that way.

  • Moderation
    The topic at hand here is “curation”. As I mentioned above, one way to do that is elbow grease. Remove comments that are pointless, off topic, or rude. This alone goes a long way in making a comment thread more readable.

A New (Sweet) Solution for WordPress

I was looking for a different solution, something simpler, where I could curate a discussion thread myself. I posted it as one of my WordPress Wishes on Digging Into WordPress. Just a day later, a developer named Utkarsh Kukreti emailed in with a version 1.0 to a Feature/Bury Comments plugin for WordPress. Here is the plugin in the repository and here is Utkarsh’s announcement post.

What this brand new plugin does (WP 2.9 and newer only, by the way) is add new clickable options when viewing comments in the Admin area:

These options are also available when viewing an individual comment. You can feature, bury, and of course UNfeature and UNbury.

Clicking Feature or Bury applies that comment meta data to the comment, and then is output with the rest of the class names like this:

Class name applied to comment output.

That is literally all it does. It gives you class names to work with. Hooks, my friends. Hooks that you then use to apply unique styling to target with JavaScript to appropriately “feature” or “bury” them as you find necessary for your site.

I am still thinking through exactly how I want to handle this on CSS-Tricks, but I’ll show you what I have so far. When I feature a comment, I just turn it a blue color. Very simple little change, but remember our only goal here is to set the comment apart a little bit to catch the eye of a visitor scanning through.

CSS uses the class hook here to simply change the color of the featured comment to blue.

For buried comments, I hide the text and user Gravatar of the comment, as well as fade it down with opacity. The comment isn’t gone, it’s just just basically a ghost when the page loads. If someone wanted to read the comment, all they need to do is click it and it will expand to a normal view.

Why bury and not delete? Well I’ll still do some deleting, especially for rude comments, but some comments aren’t rude they just don’t add anything to the conversation. Stuff like “nice post!” (when it’s clearly not spam), is something I would bury.

The ghosting stuff in jQuery:

$("li.buried").each(function() {
  
    $el = $(this);
    
    $el.find(".avatar").hide();
    $el.find("p").hide();
  
  }).click(function() {
  
    $el = $(this).animate({ opacity: 1 });
    
    $el.find(".avatar").slideDown();
    $el.find("p").slideDown();
  
});

…and again, I’m not sure this is the best possible solution or how long I’ll keep it around, but I definitely like the feature/bury system and intended to keep that around. It’s just the visual design part of it I’m still thinking through. One problem is that the ghosted comments don’t indicate just how to expand them. I’d rather not have text explaining it (preferring something more natural) and I’m not sure I want to give it a rollover state either. Maybe just a pointer cursor, I dunno.

Those who have came before…

People have been thinking about curating online conversations since online conversations began. Here is some other thinking and other work that has come before.

Milemarkers

Jason Santa Maria wrote about “Cultivating Conversations” and summed up the problem nicely in the opening statement:

I go to a website and read an article. Man, that was really great. I’d like to comment and ask the author a question. I scroll down… 384 comments. Ugh. Screw this.

He suggests a “milemarker” idea. Quick bits of text to summarize what happened and what is head. Great idea, but makes for quite a bit of work.

Jason Santa Maria’s “milemarker” example

Inspired by

Dunstan Orchard had some ideas seven years ago about adding some meta information to comments about who inspired the comment and what other comments this one inspires. It’s a similar concept to threading only without the threads. I’m not sure I like that idea very much (well, I do sort of, but I think it adds too much visual clutter).

Dunstan’s other idea though was to put a checkbox option when replying to a comment to “Alert (Original Commenter) to your comment”. This would send the original commenter and email to let them know their comment has been responded to.

Dunstan Orchard’s idea for inspired/inspired by comments, plus option to notify original commenter.

I do like this idea, as I think it’s fairly universal that people want to know when their ideas are responded too. There would need to be some kind of opt-in system for this though, since there are definitely some people that wouldn’t appreciate it.

Digg

Digg has tried to better their comment threads by using a microcosm of the Digg model itself. Users can digg individual comments up or down. Comments with too many down votes are hidden from general browsing, unless a reader explicitly chose to view them. A pretty decent solution, but that puts a lot of weight on the users of the site. Not to mention you need to have a pretty huge audience for it to work at all.

Presumably, the comment in the middle here wasn’t worth reading, as determined by other Digg users. I think this probably helps Digg comment threads, but they are still pretty terrible.

Comment aggregators

Comment systems like Intense Debate and Disqus (above) offer a similar system. People can “like” comments in Disqus or thumbs up/thumbs down them in Intense Debate, then sort by different options including the Best Rating.

Elbow grease

If you want to curate a conversion, one way to do it is to roll up your sleeves and curate it. Roger Ebert does this by moderating his own comments and chiming in when needed.

Roger Ebert chimes in in the comments on his blog (example) by just appending his own bold text to comments. Simple but surprisingly effective. I remember Smashing Magazine used to do this as well, back when.

Of course, please chime in here with your thoughts and ideas regarding curating comment threads. The following conversation will be curated =)