La fabrication d’April Zero

La fabrication d’April Zero

Partie 1

Voici le premier chapitre de la façon dont j’ai conçu le site April Zero d’origine. Je vais partager des croquis, des concepts abandonnés et de vieux prototypes pour expliquer comment il a évolué en chemin.

Si vous voulez l’utiliser vous-même, vous pouvez désormais vous inscrire à Gyroscope.

Mars 2014 : l’inspiration

Get your move on

J’étais sur le point de partir à Paris avec mon colocataire. C’est un photographe passionné, et quand nous partons quelque part, il construit d’habitude un mini-site sur notre voyage, plein de belles photos et vidéos en plein écran. Le précédent racontait notre aventure au Japon.

C’était toujours un plaisir d’y revenir quelques mois plus tard et de retrouver la chronique détaillée de ce que nous avions fait, avec de superbes photos et vidéos de chaque étape.

Pour ce voyage, nous avons décidé d’utiliser l’app Moves pour garder trace de tous nos déplacements. Je l’ai installée dans la file de sécurité à SFO, sans me douter que c’était le début de ce qui allait vite devenir une obsession.

Certains ont peut-être essayé Moves ou des apps similaires par le passé et rencontré des problèmes d’autonomie. Pendant longtemps, toutes les apps basées sur le GPS ou le mouvement (Nike, Localiser mes amis, Highlight, etc.) étaient épouvantables parce qu’elles vidaient la batterie en un rien de temps. Puis l’iPhone 5S est sorti. Mais avec la rumeur qui bruissait autour de la future iWatch, la sortie révolutionnaire du processeur M7 d’Apple est passée inaperçue pour presque tout le monde, moi compris.

D’un coup, il devenait possible de faire énormément de choses avec un impact minime sur la batterie. D’un coup, une masse de contenu riche était disponible en temps réel. D’un coup, toute une génération d’appareils de fitness devenait obsolète. Des problèmes de matériel devenaient de simples problèmes de logiciel. Moves était l’une des rares apps à vraiment en profiter.

Battements

À peu près au même moment, quelqu’un m’a parlé d’une app, Cardiio, capable de lire votre fréquence cardiaque avec l’appareil photo de l’iPhone. Je l’ai téléchargée surtout parce que je ne croyais pas que ça marcherait. Je me fichais complètement de savoir à quelle vitesse mon cœur battait.

Mais après quelques jours à jouer avec, j’étais obsédé. Ce qui était formidable, c’est que la mesure ne prenait qu’une quinzaine de secondes, peut-être 30 si on compte le temps de sortir le téléphone de sa poche, de le déverrouiller et d’ouvrir l’app.

Ce qui m’a vraiment accroché, c’est d’apprendre que les athlètes bien entraînés ont en général une fréquence cardiaque au repos plus basse. Plus bas, c’était mieux. Voilà une façon très simple d’obtenir une mesure objective de mon état du moment. Et c’était amusant.

Une semaine, j’ai remarqué que ma fréquence cardiaque était anormalement haute, autour de 80 ou 90 alors qu’elle tournait plutôt à 60. Étais-je stressé par quelque chose ? Je suis parti pour une longue course, puis j’ai revérifié le lendemain. De retour à 60. Fascinant…

C’était comme si j’avais installé New Relic dans mon corps. J’avais l’habitude de regarder des graphiques et de réparer des choses. Sauf qu’au lieu d’un serveur, cette fois c’était mon corps.

Courir pour la vie

Mon loisir précédent, c’était l’escalade en salle. J’habitais à quelques rues de Mission Cliffs, et le bloc y était devenu ma routine du soir. Mais c’est un sport assez exigeant et j’ai vite enchaîné les blessures à l’épaule.

Je me suis mis à courir à la place. Je sortais d’une grosse rupture et c’était une excellente façon de tenir le coup. J’avais utilisé l’app Nike Running de temps en temps, un mile par-ci par-là, sans jamais accumuler de vrai kilométrage. L’app avec GPS me tuait la batterie, donc ce n’était pas très agréable.

Mais avec le M7, mes genoux lâchaient bien avant mon téléphone. Les belles montres Garmin ou les Fitbit auxquelles je pensais n’étaient plus nécessaires. C’est facile de se trouver des excuses en disant qu’il manque un outil essentiel, mais tout ce dont j’avais besoin était déjà dans ma poche.

Publier les photos de mes courses sur Instagram m’a gardé motivé et m’a fait courir régulièrement une fois lancé. Ils avaient un système simple pour incruster la carte, la distance et le logo Nike sur une image. En la publiant avec le hashtag #nikeplus, on récoltait plein de likes d’autres coureurs du monde entier.

Cela réunissait trois de mes passions : la course, la photo et le fait d’attirer l’attention. C’était génial. C’était une belle époque pour être coureur : entre Runkeeper, Strava, Nike, etc., il y avait plein d’excellents outils et de communautés.

Voir toutes mes stats pour chaque sortie me donnait quelque chose à optimiser et à améliorer. Je pouvais maintenant me lancer des défis et me fixer des objectifs.

Mais presque rien d’autre n’avait un écosystème comparable. Je voulais ce genre d’informations et de motivation pour chaque aspect de ma vie, pas seulement la course. Ce n’était que de l’analytics. J’avais déjà construit de l’analytics. Il était temps de commencer à croquer.

Analyses de sang

Ma visite médicale annuelle était en retard. J’ai fait tous les examens habituels, et j’ai aussi demandé à recevoir une copie de mes analyses de sang par e-mail pour mes propres archives.

La semaine suivante, j’ai reçu un PDF très complet. Il contenait non seulement mes valeurs du moment, mais aussi l’explication des plages idéales pour chacune et une analyse de ma situation. J’ai été surpris de voir ma vitamine D si basse, et d’autres valeurs dans des plages pas idéales. C’étaient des données formidables, mais coincées dans une pièce jointe PDF au fond de ma boîte mail. Elles méritaient bien mieux.

Je fais des analyses de sang tous les mois depuis, en surveillant de près les changements. Les mettre dans un tableau de bord me rappellerait en permanence ce que je dois essayer d’améliorer. Je misais sur ma théorie : le simple fait de mesurer les choses permet de les améliorer. Et si ça ne marchait pas, au moins je le saurais et je pourrais forcer davantage.

Masse grasse

Dans The 4 Hour Body, Tim Ferriss parle des différents gadgets et tests qu’il utilisait pour se mesurer. L’un d’eux était un échographe USB portable pour mesurer précisément le pourcentage de masse grasse. Je me pesais déjà, mais connaître ma masse grasse me donnerait une bien meilleure compréhension de ce qui changeait.

La procédure d’échographie est un peu contraignante, elle prend quelques minutes et il faut utiliser un gel spécial, mais j’ai trouvé les données produites très précises et fascinantes à observer chaque jour. On pouvait littéralement voir à l’intérieur de son propre corps, jusqu’au nombre de millimètres de graisse, de muscle et d’os en dessous.

Je voyais la masse grasse grimper le week-end après des cheat days épiques, puis descendre encore plus bas la semaine suivante. Les données étaient excellentes, mais l’interface et la présentation de l’app ne l’étaient pas.

Je voulais voir le lien avec tout le reste de ce que je faisais.

Je croyais aussi à l’idée que le simple fait de mesurer quelque chose vous fait commencer à progresser. Connaître son état actuel et sa vitesse d’évolution permet de mieux décider, d’itérer vite et de comprendre ce qui marche vraiment et ce qui ne marche pas. Sans instrumenter tout ce qui compte pour vous, vous volez essentiellement à l’aveugle.

J’ai compris qu’il me fallait trouver le bon équilibre entre des mesures faciles et fréquentes, comme la fréquence cardiaque et le poids, et des données plus pénibles mais riches d’enseignements, comme ma masse grasse et mes analyses de sang. Ensemble, elles formeraient un très bon tableau de bord et raconteraient une histoire complète. Je parie aussi sur le fait que la technologie progressera vite, surtout quand tout cela deviendra populaire et que la demande augmentera. Si la version implant à micropuce sort sur Kickstarter, ou si Apple se met à mesurer tout ça avec l’Apple Watch, je n’aurai que quelques lignes de code à changer.

Avril 2014 : premiers jets

Une grille de données

J’aimais l’idée et la simplicité de ce design en modules, avec une belle grille et des éléments interchangeables que je pourrais améliorer plus tard. La plupart pouvaient être alimentés à 100 % par des API, et les rares saisies manuelles, comme ma dernière séance d’escalade, ne prendraient que quelques minutes.

Même si je devenais paresseux ou très occupé, le site ne se figerait pas pour autant. Je continuerais à courir, à écouter de la musique ou à publier de nouvelles photos sur Instagram !

L’importance du croquis

Je passe l’essentiel des premières phases d’un projet à dessiner et à réfléchir. Que je crée des designs ou que j’écrive du code, croquer les choses d’abord me permet de penser plus clairement.

Travailler au crayon sur papier est puissant parce que cela permet d’aller vite. C’est sans doute le seul support où l’on peut enregistrer les idées aussi vite qu’elles arrivent. Cela permet de se présenter des options visuelles au lieu de simples idées dans sa tête, puis de prendre des décisions de design mieux éclairées. Souvent, poser deux options sur le papier, même très grossièrement, rend évident laquelle est la meilleure.

Tablette Wacom

Après le papier, j’ai vite esquissé cette idée dans Photoshop pour vérifier qu’elle tenait encore debout en numérique. Beaucoup de designs semblent bons sur papier, en petite vignette, mais ne fonctionnent pas une fois numérisés. Le style du croquis a quelque chose qui peut rendre chic et raffinée même une mauvaise idée. Sur un tableau blanc ou sur papier, il est très facile de tricher sur l’échelle, de faire tenir un texte là où il ne rentre pas, ou de donner à des éléments bien plus de place qu’ils n’en prendront réellement.

J’aime parfois garder un style croquis pour les premières maquettes. Cela permet de continuer à penser comme sur le papier et de travailler une variable à la fois. La mise en page et le contenu venant d’être fixés, je pouvais ajouter la couleur et vérifier que le contraste et l’échelle tenaient toujours. La texture, la typographie, les images de fond et les autres détails chronophages seraient traités plus tard, si le projet était validé.

Cette itération semblait plutôt correcte, alors je l’ai envoyée à des amis. Ils étaient assez enthousiastes, j’ai donc continué dans Photoshop pour créer des maquettes plus réalistes. Il y avait du potentiel.

J’ai passé quelques jours de plus à nettoyer les détails et à essayer des variations. J’étais très enthousiaste sur le contenu et l’architecture de l’information, toujours le plus important, mais le style et la mise en page ne me coupaient pas le souffle à chaque fois que je les regardais.

C’était un design solide et utilisable, mais pas le meilleur du monde.

Le styleguide April Zero

C’était l’avenir. Pouvoir analyser et partager comme par magie tout ce qui vous concerne est à peu près aussi fantastique que le vol humain ou l’électricité. Je voulais que ce soit aussi futuriste que ça l’était réellement.

Quand je construis une marque, je monte d’habitude un moodboard pour prototyper rapidement plusieurs styles et repérer les éléments nécessaires pour installer une ambiance. Les morceaux peuvent être n’importe quoi : extraits de films, photos, affiches, captures d’autres apps, etc. Je puise souvent beaucoup d’inspiration dans le motion design et la publicité, qui ont de gros budgets et des artistes formidables. On trouve aussi énormément de belles choses sur Dribbble et Behance.

Il existe beaucoup d’exemples d’interfaces holographiques réussies et de choses qui font futuriste, mais il me fallait resserrer sur un sous-ensemble plus précis. Comme pour la plupart des décisions de ma vie, je me suis demandé : que ferait Tony Stark ?

Les éléments qui revenaient étaient : des surimpressions holographiques, des cercles concentriques, une perspective isométrique & des traits fins. Les intégrer à un produit sans sacrifier l’ergonomie serait difficile, mais c’était un excellent point de départ.

Maintenant que j’avais resserré à la fois le contenu et le style, il était temps de reprendre la planche à dessin…

Version 2

Je voulais garder la modularité et l’architecture d’avant, mais sans une mise en page aussi ennuyeuse. J’ai décidé de tout découper en « mini-apps » pour présenter les données autour de thèmes précis. Les deux premières pouvaient s’appeler « Sport » et « Explorer ».

Ramener chaque section à un seul contexte permettrait de raconter une histoire cohérente, au lieu de jeter au visiteur un tas de stats et de chiffres.

Et à l’avenir, je pourrais lancer de nouvelles sections sans avoir à refaire les précédentes. Voici quelques idées qui m’enthousiasmaient :

« Aviation » : consigner chaque vol pendant que je passais ma licence de pilote

« Underwater » : consigner mes plongées pendant que je passais mon brevet de plongée

« Digital » : ce que je faisais devant mon ordinateur (design, code, screencast, etc.)

« Finance » : habitudes de dépenses, barre de progression vers le premier milliard

« Love » : quantifier ma vie amoureuse, etc.

Certaines parties auraient sans doute besoin d’un mot de passe…

Concevoir Sport

La section Sport rassemblerait tout ce qui touche à la forme et à la santé, avec les analyses de sang du moment et les progrès de performance dans le temps.

La première itération était un fil des différents types d’activité. J’aimais beaucoup l’affichage des analyses de sang, mais je trouvais le fil trop difficile à parcourir d’un coup d’œil. Je ne voyais que les derniers événements, ce qui ne donnait pas une bonne vue d’ensemble.

Je voulais pouvoir voir une année de données d’un seul regard. Pour cela, il me fallait plus de données agrégées et rendre l’ensemble plus compact.

C’était une meilleure mise en page, mais elle ne faisait pas très avancée. Un problème que je pourrais résoudre pendant le développement, en ajoutant des animations discrètes et des détails subtils.

Voici la version statique codée. Les colonnes latérales plus sombres donnent un peu plus de contraste et font le lien avec la page d’accueil en décalant la colonne de contenu.

Je voulais que tout soit explorable et interactif. Survoler un élément devait en dire plus sur lui : il y avait énormément de données sous le capot qui pouvaient être révélées.

Le spinner

Un comportement que j’avais remarqué en regardant les statistiques de mes sites précédents, c’est que la plupart des visiteurs consultent une page ou deux, puis s’en vont. Même s’il existe tout un monde de contenu formidable, la plupart n’y arriveront jamais. Cliquer sur quelque chose est un engagement, et explorer chaque section de fond en comble, ça ne se fait tout simplement pas.

Je voulais créer un nouveau type d’interface, où l’on n’avait pas à s’engager en cliquant au début, mais où l’on pouvait simplement bouger la souris et explorer, avec des micro-interactions légères, faciles et amusantes.

C’est ainsi qu’est né ce spinner. Je voulais créer quelque chose d’aussi amusant et révolutionnaire que l’iPod d’origine.

Cela permettait aussi de s’éloigner des mises en page rectangulaires et ennuyeuses. Le moodboard était plein d’éléments circulaires et mobiles : ces détails pourraient exister naturellement dans l’interface.

Une fois que j’ai eu une maquette qui m’emballait suffisamment, il était temps de coder ! J’avais déjà une base Jekyll issue d’une précédente expérience de blog. J’ai créé une branche et j’ai commencé à coder le spinner.

Premiers prototypes de code

Voilà un bon exemple de situation où il est très utile de savoir à la fois designer & coder un problème. Que la page soit belle comptait, mais la façon dont elle réagissait & bougeait comptait tout autant. Pour cela, j’ai bricolé un prototype de base avec un peu de JavaScript, tournant dans le conteneur Jekyll que je destinais au départ à mon blog.

La première version n’avait rien d’impressionnant. La version 1 (ci-dessus) était très rudimentaire. Faire tourner et aligner correctement chaque élément était un peu délicat, alors j’ai utilisé des cercles de couleurs vives pendant la construction et le débogage.

La version 3 (ci-dessous) ajoutait les anneaux et le JavaScript pour plus d’interactions, comme faire tourner le cercle quand on survolait le texte.

La version 5 ajoutait une animation d’entrée, plus compliquée que prévu puisque j’essayais de lancer des transitions sur des éléments qui étaient déjà en train de s’animer.

La version 8 introduisait une animation de sortie avec des réglages différents de l’entrée, pour que cliquer sur quelque chose soit plus gratifiant.

Chaque itération corrigeait un problème précis ou ajoutait une fonction pour rendre le tout un peu meilleur. J’ai été agréablement surpris de voir à quel point c’était devenu amusant à utiliser. Cela confirmait mon intuition : il y avait là quelque chose qui valait le temps passé. Avec encore quelques améliorations et détails de design, cela pouvait devenir une très belle expérience.

Alors j’ai continué, passant des heures par jour à rafraîchir la page pour rendre les animations plus fluides, plus intéressantes, mieux rythmées.

J’aimais beaucoup ce que je faisais, mais il me fallait plus de validation pour être sûr qu’il n’y avait pas de problème de design. Je travaillais alors dans divers cafés, alors j’ai recruté des inconnus pour jouer avec le site.

Je ne leur donnais aucune consigne à part « essayez ça » avant de leur tendre mon portable, en observant de près ce qu’ils faisaient. J’ai repéré quelques problèmes, surtout des clics sur des parties de l’interface qui n’étaient pas des liens. J’ai vite élargi les zones cliquables pour inclure les endroits souvent visés, et ajouté des effets de survol pour renforcer l’idée qu’on pouvait cliquer. Très vite, mes volontaires n’avaient plus aucun mal à naviguer ni à comprendre le site.

C’était finalement aussi intuitif que je l’espérais. Plus important encore, ils avaient l’air de vraiment prendre plaisir à survoler et à cliquer sur les sections, un peu surpris et ravis par toutes les animations qu’ils déclenchaient.

Satisfait du design de fond de la page d’accueil, il était temps de m’attaquer à la partie du site qui me faisait le plus peur.

Explorer

Beaucoup de problèmes techniques allaient entrer en scène. Les sections précédentes étaient assez faciles à croquer et à maquetter dans Photoshop avec des données bidon, mais pour celle-ci il me fallait du vrai contenu. J’ai créé une clé d’API et j’ai commencé à importer mes données depuis Moves.

Après quelques semaines à San Francisco, j’ai compris qu’il me fallait un jeu de données plus varié. J’ai donc pris mon MacBook et mon passeport et je suis parti à New York pour faire des recherches. Il fallait vraiment que je me mette dans un état d’esprit d’exploration et d’aventure si je voulais faire passer cette sensation dans la section.

Il fallait maintenant trouver comment afficher les vols, les changements de fuseau horaire, les courses à Central Park et le compte des pizzas englouties. Ce voyage a été une excellente idée, car j’ai vite rencontré une foule de problèmes dans la façon dont Moves gérait les fuseaux horaires, qu’il fallait prendre en compte. Si j’étais resté à San Francisco en comptant sur les vieilles données de Paris pour tester l’international, tout aurait implosé au voyage suivant.

Sur le vol du retour, j’ai commencé à traiter toutes les données de Moves et à les disposer sur une chronologie basique. C’était un fouillis à peu près illisible, mais ça marchait avec les vraies données de mon voyage !

L’une des plus grosses décisions de design a été de rendre les chronologies horizontales, avec les journées empilées les unes sur les autres.

Presque tous les designs comparables les disposaient verticalement, ce qui évitait commodément le problème de chevauchement de texte que je rencontrais. Mais j’étais convaincu que pouvoir comparer toutes les journées entre elles était essentiel. Je voulais que chaque jour soit un axe capable d’accueillir plus tard beaucoup de données riches. Le problème de l’affichage des libellés devrait se régler autrement.

J’ai commencé à bricoler un algorithme pour répartir joliment les libellés sur 4 niveaux. Il analysait l’écart de temps entre les lieux et s’assurait qu’il y avait toujours assez de place pour afficher le texte.

La version 9 était sur fond clair, mais pour la version 10 je suis passé à un fond sombre pour faire ressortir les lieux et coller au style du reste du site.

J’ai décidé de n’afficher au départ que les lieux importants, le survol révélant plus de détails sur la journée et faisant apparaître le texte plus petit. J’ai aussi atténué l’affichage des lieux récurrents comme la maison ou les hôtels : ils étaient moins intéressants que les autres, même si j’y passais bien plus de temps.

Puis un jour, j’ai décidé de travailler dehors, au parc. La section s’appelait Explorer, après tout.

Et… je n’arrivais à rien lire.

La version d’origine sur fond blanc fonctionnait très bien, mais la nouvelle, avec sa palette sombre améliorée, était totalement inutilisable en plein soleil.

C’est pour cela qu’utiliser son produit en situation réelle est extrêmement important. Plus vous en êtes éloigné, même de façons qui semblent insignifiantes, plus vous risquez d’être pris de court ou d’avoir des défauts de conception. C’est pour ça que j’aime travailler dans les avions, dans les cafés, à l’envers, et de toutes les façons qui attirent les regards. Cela ouvre l’esprit à d’autres perspectives et révèle des problèmes qui passeraient sinon inaperçus.

Il fallait maintenant trancher : je gardais le fond sombre parce que c’est ce qui rendait le mieux en intérieur pour 95 % des gens, ou cela valait-il la peine de tout refaire en clair ? Si cela m’était arrivé, cela pouvait arriver à quelqu’un d’autre, et surtout, cela pouvait m’arriver encore.

Parfois, quand on bloque ou qu’on bute sur un obstacle, il faut simplement continuer et forcer le passage, en jetant des heures sur le problème jusqu’à ce qu’il cède. Dans d’autres cas, mieux vaut changer de vitesse et l’aborder sous un autre angle. J’ai fait une version sombre (11) et une version claire (12) pour les archives, et j’ai décidé de passer à d’autres problèmes.

Représenter les voyages

La première version mettait les déplacements et les lieux sur la même ligne. Je voulais essayer de rendre cela plus intuitif, en représentant plutôt les trajets d’un point à un autre comme des sauts.

Statistiques agrégées

Je voulais garder la carte du monde en haut avec ma position du moment, mais aussi ajouter des statistiques globales à la page, pour un résumé rapide sans avoir à parcourir 30 chronologies. J’ai décidé d’ajouter un niveau de structure et de tout découper par mois. Chaque mois aurait ses propres statistiques et on pourrait les comparer entre eux.

C’était fascinant de voir mes habitudes changer d’un mois à l’autre : certains mois se passaient en voyage et dans les aéroports, à d’autres moments je grimpais beaucoup ou je passais mes journées dans des cafés. Les restaurants italiens ont vite chuté après mon retour de New York, remplacés par les burritos.

Passer au responsive

Quand j’ai commencé à travailler sur la version responsive, les choses se sont gâtées. La chronologie horizontale qui marchait très bien sur ordinateur ne tenait pas sur un petit écran. Il fallait la passer en vertical, mais je ne voulais pas sacrifier les fonctionnalités de tout le site pour la version mobile. J’ai commencé à refactoriser le code pour qu’il gère les deux orientations et bascule proprement au redimensionnement de l’écran.

Le code permettant d’avoir une version mobile distincte sans casser le bureau fonctionnait. Je pouvais maintenant concevoir pour le mobile en repartant de zéro, au lieu d’essayer de faire entrer la grande version dans un petit espace.

Je commençais à me lasser de jouer avec les mêmes vieilles données. Le design avançait, mais il lui manquait encore quelque chose. J’avais besoin de changer de décor et de perspective.

Je travaillais dans un café (le Coffee Bar, le 6 mai) quand un ami m’a écrit.

Le timing parfait.