How to display comments on a web page
TL;DR Comment replies should be collapsed by default!
Since their invention in 1998 (source: Wikipedia), comments sections are everywhere on the web.
This is great!
It makes the internet open and every user a potential content editor, which is a strong value of the Web. For publishers, this is also a way to engage the audience and to get some feedback.
As commenting is about discussing, it also feels very natural to let a user to reply to another.
Another feature that appeared few time later (thanks to StackOverflow?) is voting for comment pertinence.
This is also great!
The web is so full of noise that bringing hierarchy in content is essential.
But in many cases, comment replies are wrongly hierarchised, which makes useful content much less readable. It is time that we all agree on this now.
Take the comment section of one of the most popular website: Reddit.
Here’s the order of display:
Comment #1 is above
Comment #2 because is has been more upvoted (or is more recent).
Reply #1 of comment #1 is above
Reply #2 of comment #1 for the same reason.
But I don’t understand why does
Reply #1 of comment #1 appears above
Those two are not comparable in terms of:
- Content: replying to a comment may have nothing to do with the initial content
- Votes: replies get voted for their pertinence as a reply, not as a comment
Let me take a typical example: this Hacker News post is about sharing developers tips. I want to have a quick overview on those tips in case some interest me.
- Comment 1 is a tip
- Then there are 4 replies of Comment 1 I don’t care about (since they are not tips but reactions)
- Comment 2 is another tip
- Then there are 3 replies of Comment 2 I still don’t care about
- Comment 3, a tip
So the actual content I want to check is completely drawn among a lot of noisy replies.
What should be done is actually quite simple: Replies should be collapsed by default.
Then, the user would see:
If currious about replies of
Comment #1 or wants to take part of the discussion, the user clicks
► to uncollapse and sees:
And so on.
- Content is correctly hierarchied
- User does active action of taking part of a discussion
- Trolls (which are often in response to comments) are hidden by default
There are tons of popular websites that do this mistake:
- the aforementioned Reddit
- the also mentioned Hackers News though the whole website seems to enjoy providing the worse UX
- Twitter, though they do have an opaque strategy on which discussion to expand or not
Ironically, even Disqus, the Comments-As-A-Service provider I use on this page also does the same. Hopefully they will eventually read this article and consider adding the feature of collasping replies by default.
The good kids
Fortunately, not everybody’s wrong!
Facebook and Youtube do a great job at collapsing replies by default. Of course, the social interactions are at the heart of their product so there are good chances that some billiant UX designers have been thinking this through.
Ain’t this enough of an argument that every website embrace this solution?
If you agree, please share to start fixing the web UX!
Developers often have a thing against designContinue →