3

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?

2
  • Do you need to support a large number of 'steps', or would you limit that to 2-3 or similar?
    – Yisela
    Commented Oct 10, 2013 at 3:49
  • @Yisela yes I do need to support about 10 steps
    – kas-kad
    Commented Oct 10, 2013 at 7:58

1 Answer 1

2

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

5
  • 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
    Commented Oct 10, 2013 at 9:32
  • 1
    @JonW i just edited up. And cleaned the mess :) Thanks, by the way.
    – kmonsoor
    Commented Oct 10, 2013 at 9:43
  • OK, that makes much more sense now!
    – JonW
    Commented Oct 10, 2013 at 9:46
  • @kmonsoor just playing with some ideas: d.pr/i/K7OK
    – kas-kad
    Commented Oct 10, 2013 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
    Commented Oct 10, 2013 at 13:32

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.