8

Websites such as Reddit have tiered comments. In tiered comments, a response is indented one step past its parent comment. How can tiered comments be adapted for the mobile screen? I forsee the following problems from transferring this website idiom directly to mobile:

  • The narrow screen width limits the depth of conversations.
  • The narrow screen height limits the user's global mental map of the conversation. That is, the user may lose track of who is responding to who when the originating comment is not visible on the screen.
  • The indentation is ostentatious use of white space on mobile screens. Are there other ways to show hierarchy without using vast amounts of white space?

iphone reddit

1
  • 3
    Limit the depth of the tree. Limiting the depth to one or two levels seems to be the norm nowadays. Our Jeff Atwood has some thoughts on it. And if you google ux.stackexchange.com for "conversation threaded flat", you will get plenty more posts about this issue (ie enter site:ux.stackexchange.com conversation threaded flat in the google search box) May 30, 2013 at 7:02

4 Answers 4

6

You can use background color to represent going deeper in the hierarchy and avoid using too much indentation.

If you do not want to color the entire background of the post, you can do just highlighting the edge with a color.

In any case, I would still have the tiniest amount of indenting because it is a much stronger visual cue. You can compensate the thin-ness by adding color as a secondary layer of differentiation.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

0
1

You can use Expand / Collapse on click of their headers. It will eventually help you to use whitespace perfectly and also be interactive for end users. It will look like multi-level accordion ( for example : http://sower.com.au/demo/accordion.html) so that the user won't be loosing the track of what they are reading or commenting on.

3
  • This might work OK for short threads, but if a comment has a comment that has a comment that has a comment...... you'd end up with a screen full of the accordion headers which I imagine would get pretty cluttered pretty quickly.
    – JonW
    May 30, 2013 at 10:39
  • @JonW I agree on what you are saying but there can be chance that you can distinguish between multiple comments using color codes. As the current scenario implies no limitations for its hierarchy, this is what I felt that would work. You can have a look at bulletinboards.com/message.cfm?comcode=isp for the reference. May 30, 2013 at 12:04
  • link is broken.
    – Magne
    Nov 22, 2023 at 16:25
0

Make them Auto-collapse and use good to read/understand titles for each expandable part. http://ui-patterns.com/patterns/AccordionMenu

Look at that it is really clear and easy to use on mobile devices.

Maybe this is helpfull too:

http://www.mobile-patterns.com/lists

Hope it helps.

0

One trick (and the one that popular Reddit mobile client Alien Blue uses) is to indent the first few comments, then after indenting as far as is appropriate prefix subsequent item bylines with increasing numbers of dots:

A screenshot of Alien Blue for iPhone showing comments prefixed with dots after a fixed number of indents

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.