Ilies AllaliUn arbre de famille qu’on lit sans mode d’emploi
Un parchemin de dix planches, près de 400 personnes, et une famille qui doit pouvoir tout lire et tout compléter sans qu’on lui explique.
Ma mère tenait l’arbre de la famille au crayon sur un parchemin de plusieurs mètres. L’arbre commençait à avoir beaucoup de monde, c’était la seule qui arrivait à le lire et chaque branche ajoutée l’obligeait à tout redécouper. J’ai conçu Parenthèse pour que toute la famille puisse le lire et le compléter, du cousin de 8 ans à ma grand-mère beaucoup moins à l’aise avec l’informatique. J’ai tout mené, de la recherche au code en production.
- étoiles sur GitHub
- 88
- personnes ont ouvert la démo
- 1 231
- pays
- 47
- vues sur Reddit
- 15 000
Pour qui
Avant de dessiner quoi que ce soit, j’ai essayé les outils existants avec ma mère. Ce qui m’a frappé, c’est qu’ils sont faits pour des chercheurs. Les interfaces sont vieillottes et très dures à lire, pas faciles à partager, et les gens ressemblent plus à des dates dans un tableau. Ma mère veut garder la photo de son grand-père, la voix de sa tante et l’histoire qui va avec. J’ai posé une seule règle, n’importe qui dans la famille doit comprendre l’écran sans qu’on lui explique.
Une carte plutôt qu’un tableau
Un arbre en tableau se lit bien mais n’est pas très avenant. Je voulais que ce soit beau et facilement compréhensible. J’ai choisi une carte dans laquelle on peut se déplacer et explorer, quitte à perdre la vue d’ensemble. Pour compenser ça, l’arbre se cadre tout seul à l’ouverture et se dessine génération par génération, pour qu’on comprenne sa structure avant de zoomer. Le détail change avec le zoom, de loin on voit des familles, de près des visages, des dates et des souvenirs.
Des portraits, pas des cases
J’ai fait en sorte que chaque personne ait un cadre tiré au hasard, polaroïd, rond ou rectangle avec une légère rotation. Seule une photo nettement horizontale ou verticale va imposer sa forme. Ça rend les portraits beaucoup plus humains et ajoute du dynamisme à l’arbre, comme si quelqu’un avait posé les photos lui-même. Les souvenirs, photos, vidéos et voix, volent autour du portrait. On voit qui en a sans ouvrir la fiche, et ils poussent le visiteur à découvrir les portraits.
Ce qui brouillait la lecture
Plusieurs cas rendaient l’arbre illisible. Certains enfants placés loin de leurs parents, dans le cas d’un mariage avec un cousin éloigné par exemple, tiraient un trait qui traversait tout l’arbre. Dans ce cas, c’est automatiquement remplacé par deux pastilles cliquables, « Voir les parents » sur le portrait et « Voir » suivi du prénom sous le couple. Aussi, un conjoint sans parent ni enfant dans l’arbre prenait une place entière et ça alourdissait énormément l’arbre. Sur l’arbre de ma famille ça concernait 56 personnes, qui sont maintenant un petit portrait collé à leur partenaire.
Placer près de 400 personnes
L’arbre complet de ma famille compte près de 400 personnes, 138 unions et quinze générations. À cette taille le placement ne ressemblait plus à une famille, un enfant se retrouvait en médiane à 394 pixels de ses parents. J’ai monté un banc d’essai et comparé treize variantes de cinq modèles, sur l’arbre réel plutôt que sur un jeu de test. Le modèle retenu traite un couple et ses enfants comme un bloc, avec les parents centrés au-dessus par construction. La distance médiane tombe à 294 pixels et le calcul reste à 9 millisecondes.
Une DA chaude plutôt qu’un fonds d’archives
Pour la direction artistique, je voulais quelque chose d’humain et de lumineux qu’on ouvre en famille, loin des logiciels de généalogie qui ressemblent à des registres. La terracotta s’est imposée comme le choix évident. Elle ne porte jamais de texte, sa version profonde sert aux liens avec un contraste de 7 pour 1, et tout le reste vit sur un fond crème presque blanc. Newsreader pour les noms et les souvenirs, une serif de lecture qui donne de la chaleur aux prénoms, DM Sans pour l’interface. Le logo pose le nom entre deux parenthèses en serif, épaissies pour tenir le trait du nom. Le rond au centre sert aussi d’indicateur de chargement, il se divise en trois points qui respirent puis se referme.
Regarder la famille s’en servir
Une fois l’arbre partagé, j’ai regardé les enregistrements de session. Tout le monde ouvrait les fiches et les photos, personne ne touchait au crayon qui permet d’envoyer une contribution à l’arbre. J’ai énormément facilité la contribution et j’ai passé beaucoup de temps à accompagner l’utilisateur à chaque étape, pour que même ma grand-mère puisse participer.
Un produit entier
Au-delà de l’application, je voulais que Parenthèse soit un vrai produit, pour que d’autres familles puissent elles aussi faire leur arbre gratuitement. J’ai passé du temps sur le SEO, la landing, les parcours d’inscription et des articles pour accompagner les utilisateurs. J’ai ouvert tout le code sur GitHub, pour que n’importe qui puisse héberger son propre arbre sur son serveur et rester maître de ses données, au lieu de confier toute l’histoire de sa famille à un inconnu sur internet.
