Qu’est ce que le Bubble Flow ?

Le Bubble Flow est une interface graphique animée en deux dimensions qui permet de naviguer et d’interagir dans la totalité l’arborescence d’une discussion (fil de discussion) tout en restant dans un espace limité en largeur.

Dans un environnement graphique, le bubble flow est un élément des interfaces graphiques (un widget) qui regroupe dans un bloc extensible plusieurs boutons et zones de saisie de texte. Il comporte une rangée de mini-bulles avec des images d’avatars qui peuvent êtres repliés  ou dépliés au clic et sont alignés sur une rangée horizontale à chaque niveau de profondeur de l’arbre. Les messages eux sont superposés de manière verticale et on ne peut en déplier qu’un seul à la fois par niveau pour le lire. On peut ensuite naviguer à de gauche à droite dans chaque niveau avec des boutons précédent/suivant.

Structure de discussion en arbre

Traditionnellement, une discussion est représentée sous forme d’une structure en arbre de messages parents et enfants reliés par des branches.  L’axe vertical du haut vers le bas (le sens de lecture ) représentant le temps qui s’écoule et l’axe horizontal représentant les multiples réponses (messages enfants) à un même message parent avec traditionnellement un classement de la gauche vers la droite par ordre chronologique.

niveau 1                        ___ message A ___
                               |                 |
niveau 2                 __ message B     __  message C __ 
                        |                |        |        |
niveau 3             message D     message E  message F  message G
                        |
niveau 4             message H

Dans les interfaces de discussion la manière de représenter cette  arbre peut prendre plusieurs forme dont la plus utilisée est le fil de discussion à plat ou indenté.

Voici à quoi cela ressemble un fil de discussion à plat (flat thread)

Fil de discussion à plat

niveau 1          message A
niveau 2          message B    
niveau 2          message C
niveau 3          message D   
niveau 3          message E
niveau 3          message F
niveau 3          message G      
niveau 4          message H

Rien n’indique à quel niveau je me trouve ni à qui répond précisément. Les messages ne font que s’empiler à mesure qu’ils arrivent.

Et voici la même chose en fil de discussion indenté (indented thread)

Fil de discussion indenté

niveau 1          message A
niveau 2             |__ message B    
niveau 3             |      |__ message D
niveau 4             |             |__ message H   
niveau 2             |__ message C
niveau 3                    |__ message E
niveau 3                    |__ message F      
niveau 3                    |__ message G

Vous remarquerez que dans cette disposition, l’ordre chronologique verticale n’est plus respecté. En effet, si une nouvelle réponse vient à arriver elle va s’insérer et décaler les suivantes vers le bas. Cette présentation a le mérite de montrer clairement qui parle à qui mais au delà d’une profondeur de 5, la largeur d’écran nécessaire devient trop importante et finalement c’est l’espace pour le message qui est sacrifié et alors la lisibilité devient de plus en plus mauvaise.

Fil de discussion accordéon (Bubble Flow)

Dans le Bubble Flow, dans chaque niveau on ne déplie qu’un seul message à la fois pour faciliter la lecture et on représente les autres messages du même niveau par l’avatar de son auteur dans une mini-bulle. Ainsi on visualise une seule branche à la fois et on peut se balader dans tout l’arbre de la discussion.

Exemple de la branche du message H ouverte

niveau 1                    message A
                               |
niveau 2                    message B, [C] >>
                               |
niveau 3                    message D, [E], [F], [G] >>
                               |
niveau 4                    message H

L’avantage c’est que l’on sait en permanence qui parle à qui et on sait exactement à quelle niveau on se trouve. On garde aussi toujours la lisibilité maximale sans occuper plus d’espace en largeur.

Exemple de la branche du message F ouverte

niveau 1                    message A
                               |
niveau 2            << [B], message C
                               |
niveau 3       << [D], [E], message F, [G] >>

Voici à quoi ressemble une interface qui utilise le composant Bubble Flow dans le logiciel de discussion GraphComment.
L’interface de GraphComment est en responsive web design et est compatible sur écran tactile.
Pour l’instant ce composant n’est utilisé que par la solution de discussion GraphComment et fait l’objet d’un dépôt de brevet en cours.

bubble-flow

Dans la solution GraphComment, les messages ne sont plus classés par ordre chronologique mais par ordre de la pertinence. Pour cela, la société Semiologic qui édite la solution GraphComment a inventé un algorithm de la pertinence dénommé Bubble Rank. Un article lui est consacré pour mieux comprendre comme il fonctionne.