Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
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) –  Marjan Venema May 30 '13 at 7:02

4 Answers 4

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

share|improve this answer
    
+1 great solutions –  obelia Jun 3 '13 at 3:50

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.

share|improve this answer
    
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 '13 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. –  Ganesh Pandhere May 30 '13 at 12:04

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.

share|improve this answer

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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