Proposed tweak to comment UI for long threads

Question

I've been working with Stéphane on some slight changes to the way we display comment-related elements on posts with long comment threads. There are a few problems we're trying to solve:

1. It's not very obvious when comments are hidden, which could lead to a user missing out on important context or other information about the post.
2. When there are hidden comments, we have a single button to accomplish two tasks: add a comment, and show hidden comments. We've toyed with doing a bigger overhaul on comment UI, but it's difficult right now for us to have a sense of what users are intending to do with comments. Splitting these two actions into two separate buttons will help us get a better understanding of user behavior, and be less confusing to the user. (If you click "add a comment" in the new version, it will still expand any hidden comments; we still want you to read what's there before posting your own thoughts :) )
3. Single-line comments take up two lines, which leads to more scrolling / fewer posts visible above the fold. This is particularly problematic for comments on questions – the more space comments take up, the farther down the first answer gets pushed, and most people viewing a question page are there to find an answer.

Proposal

---

Current Version, for comparison

The key changes:

• There's a new double-lined horizontal rule between the last comment and the add / show buttons. We hope this draws a bit more attention to the fact that there are comments hidden, without overemphasizing the comment area as a whole.
• "Add a comment" and "show N more comments" are two different buttons, but close together so you notice them both. "Add a comment" is the more likely desired action, so it's a bit more eye-catching.
• Single-line comments will now take up only a single line. Rather than having the upvote arrow and flag icon stacked vertically, they'll be shown horizontally on hover.

What do you think?

Answer 1

For particularly long comment threads I kinda want to know where the invisible comments are before clicking the "show all comments" and, frankly, I often don't want to re-read all the comments when I'm following up on a topic, just recent/new comments.

So I'd go a little further and propose that you put ellipses between comments where there are hidden comments, both to reinforce the position of the shown comments in the comment hierarchy, and so you can expand just a section or two of hidden comments, rather than the whole thing:

Probably make them the same gray used for the buttons/actions below. It would immediately alert readers that some comments are hidden, and clicking on one set of ellipses would expand that section alone, giving users a greater degree of control over their reading.

While I'd be tempted to replace the ellipses with more information, "2 comments hidden by splattne and Jon Skeet"^* I'd resist that temptation - the point of hiding them is to avoid information overload and provide ease of use for the most important comments.

Of course I'd still suggest expanding all when adding a comment, and the shortcut to expand all would probably still be used more.

^* _{Jon Skeet here used as an example. In practice, Jon Skeet's comments are never hidden.}

Answer 2

Rather than "Show x more comments" please consider "Show all y comments".

A lot of dynamic web pages now use "Show x more items", but don't mean to show you all items, merely more than you're currently viewing.

"Show all y comments" is much more clear about the purpose of that link.

Answer 3

Thoughts so far:

• Separate actions should prove interesting in terms of how folks actually interact with the UI, but I'm concerned that the inconsistent styling will skew the results here; that button sticks out a lot more than the link does. From a practical standpoint, an option that expands comments without opening the form would be really nice on mobile, where currently expanding the comments also opens (and puts focus in) the entry form, thus opening the keyboard and making it harder to read the comments you've just expanded!

  Interestingly, the mobile app already has two separate actions for expanding and commenting:

  

  Note that it also makes "add" a button and "expand" a link, but puts the link first - I tend to like this more, but whether or not this serves to influence interaction, I would recommend following this style purely for consistency's sake.

• Collapsed voting buttons are nice in terms of saving vertical space; my only concern here is that it may become even easier to hit the wrong button (especially on mobile, but this has been an occasional issue even on the desktop). No way to know until we see it in action; just something to be aware of.

  As Adam notes, aping the mobile app here might be a good solution for the mobile site; I tend to think this is overkill for the desktop though.

Answer 4

What about such design instead?

• Fixed height for the comments container, even when there are 100 comments
• "add comment" still always visible