Facebook par iA, notre test grandeur nature

Bookmark and Share
Jeudi 10 novembre 2011

Facebook par iA, notre test grandeur nature
Il y a des designs qui marquent. Et par design, j'entends la définition de Steve Jobs. Certains ont été marqués par le presse-agrume de Starck, d'autres par l'iPod ou, plus récemment, par Flipboard.

Étonnamment, l'un des designs qui m'a le plus marqué n'a jamais passé le stade du prototype. Enfin, jusqu'il y a peu. Chez Novius, nous l'avons fait passer à l'étape suivante.

 

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 :

Facebook par iA

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).

Three-pane interface pour l'email

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.

Three-pane interface pour Facebook

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

Facebook par iA - 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.

Réso-Nova UI

 

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.

Réso-Nova UI

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.

2 commentaires
  • Commentaire par Sébastien
    Mercredi 16 novembre 2011 15:50
    Une piste intéressante adoptée par google reader (lecteur de flux RSS) pour la lecture est dans le choix donné à l'utilisateur dans le mode d'affichage.

    Par défaut, Google Reader affiche les flux en grand, comme l'image ci dessous :
    http://postimage.org/image/ih8xcqbsx/

    Mais il est possible, via les boutons d'interface, de choisir un affichage en mode liste :
    http://postimage.org/image/enfh3kugx/

    Si l'utilisateur veut lire le flux affiché, il clique sur ce dernier, et le flux trouve sa taille orignale :
    http://postimage.org/image/4emzxr6f5/

    Il peut ensuite miniser le flux à nouveau ou passer directement au flux suivant. Les flux non lus sont facilement différenciables de ceux qui sont lus :
    http://postimage.org/image/ti42hr41t/

    Le tout peut se faire via 4 boutons en partie supérieure :
    http://postimage.org/image/c0vd8wdvl/
  • Commentaire par Antoine Lefeuvre
    Mercredi 16 novembre 2011 17:14
    Merci Sébastien. C'est en effet une piste intéressante, que Google est en train de généraliser à une bonne partie de ses sites (Reader donc mais aussi Gmail, Buzz, etc.).

    Par contre, les commentaires étant particulièrement mis en avant dans FB par iA, reste à voir comment les intégrer à un item qui se limite à une seule ligne de haut.

    Il faut que j'essaie ça à l'occasion, je vous tiendrai au courant.
Laissez votre commentaire :