Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 7 down vote favorite
1

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 :-)

share|improve this question
You might get some insights checking the way popular commenting systems do it (they're designed specially for this), eg. Disqus and Livefyre. – Marcos Ciarrocchi Aug 1 '12 at 9:13

3 Answers

up vote 9 down vote accepted

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

share|improve this answer
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 '12 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 '12 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. – Andrew Leach Jul 31 '12 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. – Nathan Greenstein Jul 31 '12 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. – Nathan Greenstein Jul 31 '12 at 23:48
show 2 more comments
up vote 1 down vote

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.

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
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 '12 at 21:24

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.