Bubble Flow is an animated, two-dimensional graphical interface that allows users to browse and interact the entire tree view of a discussion thread within the width of the controlled space.
Into a graphical environment, the Bubble Flow is a graphical control element (a widget) that regroup into an extensible container several buttons and text boxes. Bubble Flow incorporates a line of tiny bubbles with the authors avatars that can be collapsed or expanded by a simple click and are aligned on a horizontal range for every level of depth of the tree. The messages are sorted vertically and we can only expand one at a time by level to read them. We can then browse from left to right on every level with the previous/next buttons.
Tree structure of a discussion
Traditionally, a discussion is represented as a tree structure with parent and child messages connected via the branches. The vertical top-down axis (read direction ) represents the time past and the horizontal axis represents the multiple answers (child messages) to a unique parent message. This is sorted from left to right in chronological order.
level 1 ___ message A ___
| |
level 2 __ message B __ message C __
| | | |
level 3 message D message E message F message G
|
level 4 message H
In discussion interfaces, the way to represent this tree can take many forms including the most common form: the flat/threaded discussion view.
Here is what a flat discussion view looks like:
Flat view of a discussion
level 1 message A level 2 message B level 2 message C level 3 message D level 3 message E level 3 message F level 3 message G level 4 message H
There is no indication at what level I’m on or who is specifically responding. The messages are only stacked up as they arrive.
And here is the same thing in an threaded conversation view.
Indented view (threaded) of a discussion
level 1 message A level 2 |__ message B level 3 | |__ message D level 4 | |__ message H level 2 |__ message C level 3 |__ message E level 3 |__ message F level 3 |__ message G
Notice that in this arrangement, the vertical chronological order is not respected. Indeed, if a new reply has come up, it will be inserted and the following discussion will shift down. This presentation has the advantage of clearly showing who talks to whom, but beyond a depth of 5 discussions, the required screen width becomes too large. Lastly, the space reserved for the message is sacrificed and user readability becomes progressively worse.
The invention of a new control element
The Bubble Flow (infinite horizontal accordion view)
In the Bubble Flow, each level only has one expanded message at a time enabling easier reading as well as the representation of the other posts of the same level by the avatar of its author in a mini-bubble. Thus displaying a single branch at a time enabling you to surf across the full tree of discussion.
Example of the message H opened branch
level 1 message A
|
level 2 message B, [C] >>
|
level 3 message D, [E], [F], [G] >>
|
level 4 message H
The advantage of Bubble Flow is that we always know who is talking to whom and we know exactly what level we are on. As always we are able to retain the maximum readability without occupying more width/space.
Example of the message F opened branch
level 1 message A
|
level 2 << [B], message C
|
level 3 << [D], [E], message F, [G] >>
Here’s what an interface looks like that uses the Bubble Flow component in the GraphComment discussion software.
The GraphComment interface is a responsive web design and is compatible on any Touchscreen.
At this time, the Bubble Flow component is used only by the GraphComment discussion solution and is the subject of a pending patent.
In the logical and user-friendly GraphComment solution, messages are not sorted in chronological order but in order of relevance. For this purpose Semiologic, the company that publishes the GraphComment solution, has invented Bubble Rank which is an algorithm of relevance. An article is dedicated to understanding how it works.