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.

Perhaps we have great website with articles, news etc. As we all know, people love to comment things so much, quoting each other, starting dialogs and discussions in comments section. Anyway in the end we have the following stairs of messages:

example#1

or even this! example#2

these discussions more or less convenient to read on computer displays, but what can we do if our client wants these threaded discussions to be available in mobile version of the website or mobile application. How to make these discussions readable and convenient to participate in on small screens?

share|improve this question
    
Do you need to support a large number of 'steps', or would you limit that to 2-3 or similar? –  Yisela Oct 10 '13 at 3:49
    
@Yisela yes I do need to support about 10 steps –  purrrminator Oct 10 '13 at 7:58
add comment

1 Answer

I cannot propose you the complete UI. But i can give you some brevity tips.

At first, you have to check what will the contents of most stairs (aka user's responses)

  • if it's mostly like tech-user-forums, each response will be -- mostly text (opinion and/or code snippet), -- occasionally image or snapshot. And, -- user's signature(...)

You can easily strip off signature. And visually compress the UI to only meaningful response like this.


SUBJECT .. .. .. .. .. .. PageNav

Date.Time UserX response snippet .. details link

Date.Time UserY response-reply snippet .. detail's link

Date.Time UserZ response-reply snippet .. detail's link

Date.Time UserX response-reply snippet .. detail's link Date.Time UserX response-reply snippet .. detail's link

SUBJECT PageNav


  • There should be no gap between the lines

  • UserX name can have some subscripted rank indicator (colored depending on rank)

  • if consecutive responses have same date, then date should be omitted for subsequent response.

  • button can be something like "..." & on-click should pop open the response details text and image link

  • response-reply snippet text color can be gradient-ed from black to grey for added clarity.

  • The pageNav button can be very intuitive e.g. Like time selector on Android alarm app

share|improve this answer
    
I've edited your post somewhat as stack exchange uses Markdown for displaying text and you've used some html elements, some markdown styling items etc that messed with the formatting of your answer. I have no idea if my edit is actually what you expected it to display as so can you check it is correct? Also have a read of the Markdown Syntax Advice for how to use markdown if it's not something you're familiar with. –  JonW Oct 10 '13 at 9:32
1  
@JonW i just edited up. And cleaned the mess :) Thanks, by the way. –  kmonsoor Oct 10 '13 at 9:43
    
OK, that makes much more sense now! –  JonW Oct 10 '13 at 9:46
    
@kmonsoor just playing with some ideas: d.pr/i/K7OK –  purrrminator Oct 10 '13 at 12:57
    
@purrrminator i checked that. But if you keeping to make fonts smaller, after couple of levels, all text will be unreadable. –  kmonsoor Oct 10 '13 at 13:32
add comment

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.