Facebook par iA, notre test grandeur nature

Three-pane interface

Fin 2006, début 2007, l'agence de design interactif Information Architects était en contact avec Facebook. L'objectif n'était ni plus ni moins que de reconcevoir, de redesigner le réseau social. Le projet n'aboutit pas. Fort heureusement, en mars de l'année dernière, iA décida de publier le travail réalisé. Seul l'habillage graphique fut remis au goût du jour, le concept derrière l'interface ne bougea pas :

C'était la première foi, à ma connaissance, qu'une three-pane interface était utilisée pour un réseau social. Une three-paquoi ? L'interface à trois volets, en bon français, est un standard pour les logiciels de messagerie. Même Google, pourtant farouchement décidé à ré-inventer l'UX email avec Gmail, l'a finalement adopté.

Le principe de cette interface est le suivant : trois volets liés entre eux et organisés de manière hiérarchique (Dossiers > Emails > Détails).

Dans le cas de Facebook par iA, il s'agit de trois volets verticaux, ce qui accentue la hiérarchisation du contenu. De gauche à droite, on trouve ainsi Filtres > Flux d'informations > Réactions.

Détail intéressant : l'architecture de l'information est directement visible dans l'UI.

Faire converger les communications

Quel intérêt y a-t-il à utiliser l'interface traditionnelle de l'email pour un réseau social ? Oliver Reichenstein de iA cite, entre autres, les avantages suivants :

• Il y a plus de place pour le flux
• Il y a plus de place pour la discussion
• Les éléments principaux de navigation sont regroupés
• La colonne de droite n'est pas le bazar habituel

Mais, ce qui nous a surtout séduit au moment de concevoir Réso-Nova (notre solution pour réseaux sociaux d'entreprise, RSE, et communautés de marque), c'est le lien fort entre email et réseau social, à l'origine même de ce design ("Our basic idea, to create an mail-application like interface", Oliver Reichenstein). Dans le contexte actuel d'infobésité, l'utilisateur souffre de la multiplication des outils de communication :  Où est le document ? Dans la knowledge base. Et l'explication associée ? Je te l'ai envoyée par email. Qu'en pense Victor ? Il a répondu sur Facebook.

Notre objectif avec Réso-Nova est de faire converger les conversations d'une communauté vers un outil central. Or, un premier pas dans cette direction est d'adopter une interface qui conviennent aux adeptes de l'email comme aux inconditionnels des réseaux sociaux.

De plus, nous cherchons à doter notre utilisateur d'un outil de lutte contre l'infobésité. Or, le flux facebookien est plus long à parcourir, les réactions y étant intégrées. C'est la double peine de l'information non pertinente : non seulement l'utilisateur la voit apparaitre dans son flux, mais elle / il est obligé(e) de passer les réactions avant d'arriver à l'information suivante. Dans un flux comme celui imaginé par iA, on choisit de déporter son regard sur la droite pour lire les commentaires. Le parcours rapide du flux est alors possible, de la même manière qu'on filtre ses emails à partir de la boite de réception avant d'afficher le détail de certains.

Enfin, nous avons bâti Réso-Nova autour de groupes thématiques. Notre architecture d'information est claire et colle parfaitement à celle de Facebook par iA : Groupes thématiques > Flux > Réactions.

J'entends des voix qui s'élèvent pour dire : Twitter a déjà adopté ce type d'interface ! En effet, la dernière interface, dite New Twitter, ainsi que Twitter pour iPad ont été inspirés par le travail d'iA. Néanmoins, le choix a été fait sur le web de n'avoir que deux volets (sur iPad, la fine colonne de gauche s'apparente au volet de filtres). De plus, la structure de l'information de Twitter est bien particulière. Les tweets sont limités à 140 caractères et beaucoup de réactions prennent la forme de retweets. Ainsi, le volet de droite renvoie souvent des meta-données (liens vers les utilisateurs cités, utilisateurs ayant retweeté, etc.), plutôt que d'afficher une conversation. A tel point que le formulaire de réaction n'y est pas présent. C'est le même lien que celui présent sous le tweet et qui ouvre une pop-up.

Je pense donc que Réso-Nova est une mise à l'épreuve du concept de iA plus fidèle, mais peut-être me trompé-je ?

4 mois plus tard

Voilà quatre mois maintenant que la beta de Réso-Nova motorise notre réseau social interne. Pendant cette période, 1500 contributions ont été publiées générant plus de 4000 commentaires, pour l'entreprise de 35 personnes qu'est Novius. Nous n'avons pas mené d'A/B testing pour comparer l'efficacité de notre flux iA à un flux facebookien classique. 35 utilisateurs, c'est bien peu pour une étude quantitative. Par contre, notre proximité avec les utilisateurs, nos collègues, nous permet de vous livrer cette analyse qualitative.

Ce qui a posé problème

L'aspect le plus problématique de ce design est l'adoption. Réunir email et réseau social dans une même interface est forcément un compromis, un entre-deux. Ceux à qui on présente un réseau social d'entreprise s'attende à trouver un réseau social, c'est-à-dire Facebook. Le lien avec la three-pane interface de l'email est rarement fait, les trois colonnes ressemblant finalement assez peu à Outlook. L'utilisateur n'est donc pas dans un environnement familier et la prise en main de l'outil s'en ressent.

Ce qui a fonctionné

Ce design est un fantastique appel à la réaction. Pour une résolution de 900px de haut, on affiche quatre contributions et autant de formulaires pour commenter. Réagir n'a jamais été aussi facile et rapide. En octobre, la moyenne de commentaires par utilisateur a été de 34. Et c'est sans compter les +1, que nous avons voulu très en avant, à la manière d'un digg-like.

Points de design

Je continue à m'interroger sur plusieurs points concernant ce design. La gestion du lu / non lu, par exemple, s'est révélée compliquée. Faut-il un système à la Google Reader qui enregistre les lus au-fur-et-à-mesure du parcours du flux, sans autre action de l'utilisateur que le scroll ? Ou alors limiter le flux aux seuls sujets à l'image des emails pour obliger l'utilisateur à cliquer pour lire ? Pour le moment, nous avons décidé que seules les actions conscientes de l'utilisateur déclenchent le lu : nouveau commentaire, +1, ouverture d'une pièce jointe, visionnage de tous les commentaires, etc. Malgré cela, pour de nombreux utilisateurs, les non lus s'accumulent de manière anormale. La solution est-elle dans plus d'automatisation ? C'est à tester.

Autre question en suspens, la hauteur des items du flux. Contrairement à Twitter, les informations publiées sur Réso-Nova sont à géométrie variable, du message court semblable à un tweet à un long article pareil à celui que vous êtes en train de lire. Pour ne pas empêcher le parcours rapide du flux, la hauteur des items est fixe. C'est donc un résumé, une information tronquée qui est affichée par défaut dans le flux. Il faut alors ouvrir l'information pour la voir en entier (c'est la même action qui affiche tous les commentaires). Or, certains utilisateurs préféreraient ne pas avoir tant à ouvrir et fermer les informations, et que la hauteur réflète mieux la longueur. De nouveau, des tests s'imposent.

Dernier point, l'ordre des commentaires. Quand l'information est résumée, les derniers commentaires et le formulaire de réaction se trouvent directement à côté.

Par contre, dès que l'information est ouverte, les voici tout en bas. L'ouverture provoque donc une saute, qui n'est pas des plus ergonomiques.

Une solution serait un affichage antichronologique des commentaires, mais le remède ne serait-il pas pire que le mal ?

Vous l'aurez compris, il nous faut encore itérer et itérer pour affiner ce design. Malgré les points bloquants ou sans réponse, je reste un fervent partisan du travail d'iA. Et pas simplement comme designer ; Antoine l'utilisateur a publié 200 commentaires le mois dernier.