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 être 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 cet arbre peut prendre plusieurs formes 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
Dans cette disposition, l’ordre chronologique vertical n’est plus respecté. Si une nouvelle réponse arrive, elle va s’insérer et décaler les réponses 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; l’espace pour le message est sacrifié et la lisibilité est détériorée.
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
Exemple de la branche du message F ouverte
niveau 1 message A
|
niveau 2 << [B], message C
|
niveau 3 << [D], [E], message F, [G] >>
Avantages
- Le lecteur sait en permanence qui parle Ă qui et sait exactement Ă quelle niveau il se trouve.
- Conserve une lisibilité maximale sans occuper plus d’espace en largeur.
Exemples
L'interface de GraphComment utilise le composant Bubble Flow dans son logiciel de discussion[1].
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[2].
Références
- « GraphComment veut dépoussiérer les commentaires »(Archive.org • Wikiwix • Archive.is • Google • Que faire ?), sur MediasSociaux.fr, (consulté le )
- « Qu'est ce que le Bubble Flow ? - GraphComment » (consulté le )
Liens externes
- Le Bubble Flow en utilisation réelle Exemple de site web utilisant le composant Bubble Flow
- Bubble Flow Interface Demo du Bubble Flow