I'm working on a project that involves displaying a text-only conversation between anywhere from two to ten or more people. The reader will be either zero or one of the participants.
The main UI will be web-based, but native clients may appear in the future.

For a two-person conversation I would show one person on one side of the screen and the other person on the other side, as most chat and IM apps do. If the reader was one of the participants their messages would be highlighted.

But, as computer screens are generally limited to two dimensions, the above doesn't scale well for a conversation between more than two people.

So, what's the most user-friendly way to go about displaying conversations between more than two people? The ability to scale with varying numbers of people would be a huge bonus, as would be the ability to handle cases where the reader is one of the members of the conversation.
If there's a take on the conventional 'speech bubbles' pattern that works, great, but I'm also not wedded to that and happy to consider completely alternate options.

Note: No, I'm not making another chat app. The world has enough of those already :-)

  • You might get some insights checking the way popular commenting systems do it (they're designed specially for this), eg. Disqus and Livefyre. Aug 1, 2012 at 9:13

3 Answers 3


Perhaps you could use a balanced tree-like structure that grows outwards at the sides (alternately) as more people join the conversation.

Colour code it in vertical strips which each start as a new voice enters - like a piece of colourised vertically annotated choral music (a fugue?). You could maybe tail off a strip once that voice has had its last say so that the tree collapses inwards again.

Only a picture can explain this!!

It's food for thought - not a design specification.

You could add extra little big details like gradually reducing the thickness of a track as more time passes without input from the corresponding voice...

enter image description here

  • Nice idea, although I'd say it's a bit hard to see which comments came from the same user, especially in long threads. Perhaps have the links connecting the previous comment from that user, rather than the previous comment in the thread (as it's all linear anyway so comment 2 will always be directly below comment 1, making the link slightly redundant).
    – JonW
    Jul 31, 2012 at 20:54
  • 2
    esp. if you did this on the spot, it's brilliant. I always tell people, color is the third dimension (eg. heatmaps, if timelapse isn't an optio n), but you also realized, that modern messaging apps in fact dedicate (overlapping) columns to the participants, of which you could both unite. That said, the only thing remaining is an icon and a nickname, which, given the arbitrary alignment, shall be inside or right next to the message bubble as opposed to the edge of the screen.
    – Aadaam
    Jul 31, 2012 at 21:22
  • 2
    I like this. But I'm not sure it has to be alternating as people are added. It could be useful to add only on the right (in an LTR language) so the left-most "stream" is always the earliest. +1 anyway. Jul 31, 2012 at 22:20
  • 1
    This is an awesome idea, thanks! I'll play around with the alignment and adding avatars/names, and maybe even try a version without the lines between messages (things don't need to be threaded in my specific case, just sequenced). If the user is one of the people speaking, that could easily be shown with a stroke or stronger coloring. Jul 31, 2012 at 22:34
  • 1
    Ok, here's a rough mockup with my take: i.imgur.com/WTXiP.png I added names inside the bubbles, aligned things left, removed the lines, and added a light stroke and dots outside the boxes to mark the reader's part. I think I'll go with something like this. Thanks again. Jul 31, 2012 at 23:48

I know that you specifically mention that you're not making another chat app, but I think that's the place to start for this type of problem. Chat apps deal with conversations among lots of people and they work.

One way of better visually distinguishing between people involved in the conversation could be background colors or speech bubbles behind/around the text of each different user (sort of multi-colored zebra striping).

User icons next to the user name could add some visual weight, too.

Honestly, current messaging apps do this pretty well. Take a look at a few popular messaging apps and see what you can glean form them for your specific project.


On a large screen, you could divide it up, and give each person their own little "area".

Each area would have to have scrolling capability, of course, so this could get messy after 4-6 people.

For more than that, I think you're limited to one screen listed chronologically, with the speaker identified on the left-hand side -- preferably with a large picture or unique avatar.

  • you mean, like a forum I guess for the latter? - the former one reminds me of the talk / ytalk era (which I loved, as typing speed and rhythm is really personal, it brings a touch, but it was insanely inadequate to keep conversation flow esp. with more than 3 people
    – Aadaam
    Jul 31, 2012 at 21:24

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.