The Threaded view as a visual design pattern

If you are designing some software product with a social aspect, sooner or later you’re going to face the challenge of representing conversations visually. The conversation metaphor has risen meteorically to the pantheon of top ideas in software due to its power of bringing people together. In this post I take you through a visual tour of the Threaded View, one of the visual design patterns to represent conversation.

WordPress comment system. Strikes a good balance between expressiveness and complexity. Indenting helps track the progress of a conversation. It is limited to three levels, though, to ensure users don’t get lost.

Gmail. The grandaddy of threaded email, Gmail is a power user UI. While complex, it fully explores the widgets needed to manage the different gestures that threads elicit.

Facebook. Facebook’s Wall tries to walk a fine line between the river of conciousness metaphor and threaded view. In this case, the thread is two-levelled, the original item takes the leftmost justification and all the other comments have the same indentation level. This seems mosts appropriate for short lived conversations. It’s a tradeoff we see also in blog comments.

Rebelvox. When you move to the mobile realm there is the added challenge of dealing with the small form factor. Rebelvox’s cartoon bubble centric UI is an evolution of the iPhone / iChat threaded IM and SMS view with the added twist of multiple media (text and voice) and their secret time shifting audio recipe. More on Rebelvox on their blog.

Slashdot. It has been around since ’97, had to very quickly come to grips with managing conversation, and their UI is an attempt at highlighting the interesting bits in a flood of messages. They currently have a couple of interesting UI elements, the notion of scoring, which controls the degree of folding, and a double draggable slider bar that changes the viewable items and gives a count of what’s hidden

Threadsy. Threadsy brings together email, facebook, twitter.. in what it calls your “Bound” and “Unbound” communication. It also makes it possible to cut across media to create context

Some key takeaways:

• While threaded views have been around for over a decade, there are no established best practice guidelines, and there is still a great degree of experimentation going on.
• There is a tradeoff between expressing the relationship of messages in the conversation and visual complexity.
• As conversation depth and participants increase, a moderation/scoring system can be used as a heuristic for simplification
• Conversations cut across different media and synchronizing them can lead to interesting results.