Le Baby - l'interface

Observations, astuces, échecs et changements de cap : voilà ce que vous trouverez au fil cet article détaillant par le menu la conception de Le Baby, cette application absolument indispensable aux jeunes parents de nourrissons sur laquelle Amadour Griffais et moi travaillons depuis quelques années.

En résumé, l’article explique comment les observations faites sur le contexte des parents ont informé la composition des écrans, puis comment les transitions visuelles et certains choix formels participent au confort de l’app. Sans trop de jargon, il devrait être accessible à toute personne curieuse de comprendre comment les objets qui les entourent prennent la forme qu’ils ont. Ayant beaucoup appris en lisant ce type d’article, j’espère pouvoir ici retourner l’ascenseur et participer à ce corpus d’amélioration collective. Un article précédent a décrit le cadre plus général de ce projet d'app iOS indépendante, et d'autres seront publiés dans les prochains mois (publication sur l'App Store, outils, communication). Au programme pour aujourd'hui :

1. Le contexte
2. Collecter et restituer
3. Le manque de sommeil
4. Une seule main disponible
5. 24 heures sur 24, 7 jours sur 7
6. Continuité visuelle
7. Les fonctions esthétiques
8. Ce que deviennent les données

Let's start with the context

Ce couple ne dort que par tranche de 2 ou 3 heures au mieux depuis 11 jours maintenant. Leur espace de vie habituellement soigné reflète le lâché prise qu’ils ont fini par s’accorder. Ça déborde de partout: le linge, la vaisselle, les couches ; les émotions aussi. S’habiller correctement n’a plus vraiment de sens, et les repas sont réduits à leur apport de calories. Leur bébé va merveilleusement bien, il leur fournit depuis sa naissance ce spectacle unique dont ils n’arrivent pas à décrocher : celui de la vie qui s’éveille. Ils sont enchantés, désarçonnés, et complètement rincés.

Si vous avez déjà accueilli un nouveau né à la maison, cette description devrait vous sembler familière. Et si vous aviez l’intention d’avoir des enfants, ne changez pas d’avis. C’est en tous cas le contexte d’usage typique de Le Baby. Son but est de permettre aux jeunes parents qui le souhaitent de noter les événements liés à l’alimentation, au sommeil et à la croissance de leur bébé, et de les consulter plus tard en cas de doute, par curiosité, ou lors d’une discussion chez le pédiatre (si cela vous parait suspicieux voire futile, cet article pourrait vous faire changer d’avis). Voici par exemple comment noter un changement de couche qui a eu lieu il y a 15 minutes, et un biberon de 120 ml que le bébé vient de vider :

Cette présentation rapide montre que Le Baby n’a pas été construit en utilisant les éléments natifs d’iOS. Chaque partie de l’article l’expliquera, dans un ordre qui ne reflète pas la chronologie de la conception : la prise en compte du contexte n’a pas précédé l’intégralité des choix ergonomiques, le langage formel n’a pas attendu que l’ergonomie soit finalisée pour être exploré. Tout s’est tissé en parallèle, chaque proposition étant évaluée sous différents angles et comme solution convenable aux différents points du cahier des charges.

Si vous avez un appareil iOS à disposition, je vous invite à installer Le Baby (gratuitement) pour avoir entre vos mains le sujet de cette lecture. Les captures d'écran qui suivent sont pratiques pour illustrer le propos, mais rien ne vaut l'original. La version de l’app à la publication de cet article est 3.4.1, et vous pourrez lire dans l’historique des versions ce qui aura changé depuis.

Collecter et restituer

Comme indiqué plus haut, Le Baby est fondamentalement un aide-mémoire. C’est un outil pour enregistrer de l’information, qui n’offre aucun autre contenu que les notes ajoutées par ses usagers. Chaque ouverture de l’app doit permettre d’emblée d’ajouter une nouvelle information à mémoriser, ou de passer en revue ce qui a été noté dans les heures/journées précédentes. On ouvre l’app pour noter la couche qu’on vient de changer ; plus tard, pour voir combien de temps s’est écoulé depuis le dernier biberon. Il n’y a pas de prépondérance de l’une de ces tâches sur l’autre, il faut pouvoir les réaliser toutes les deux dès le lancement de l’app, sans avoir à naviguer. C’est pourquoi l’écran d’accueil a été séparé verticalement en deux zones : le haut pour la collecte d’informations et le bas pour leur restitution.

Collecter l'information

Deux possibilités existent pour ajouter une information à mémoriser : l’un des deux boutons de raccourci en entête, ou le bouton (+) qui ouvre le menu donnant accès à tous les types d’entrée disponibles. Un réglage du journal concernant l’allaitement modifie le rôle des boutons d’entête :

Quand l’allaitement est activé dans les réglages, ces deux boutons deviennent un chronomètre permettant de mesurer le temps passé à chaque sein par le bébé. Cela permet de s’assurer que le bébé mange suffisamment en cas de doute, ou d’avoir un aperçu plus clair de son rythme d’allaitement. Il est accessible dès le lancement de l’app, indiquant par la taille des boutons quel sein donner à la tétée suivante (il est important d’alterner d’une session à l’autre). Son fonctionnement est détaillé plus bas.

Quand l’allaitement est désactivé dans les réglages, ces deux boutons sont des raccourcis vers les entrées de sommeil et de biberon. À terme, il sera possible de personnaliser le type d’entrée de chaque bouton.

Le bouton (+) donne accès à tous les types d’entrées disponibles :

Leur disposition a été définie en fonction de leur fréquence d’usage : dans la première page du menu se trouvent les entrées les plus utilisées, dans le deuxième les plus occasionnelles. La fréquence d’usage a aussi indiqué le classement vertical dans le premier écran pour que le pouce puisse tomber naturellement sur les plus fréquentes. Dans la beta de la v1.0, le menu avait un arrangement circulaire et les boutons n’avaient pas de libellés. J’avais choisi cette disposition car elle permettait une transition d’ouverture plaisante depuis le bouton (+), et n’avait pas ajouté de libellés car ils me semblaient redondants des icônes. Un échange d’email avec un Design Evangelist d’Apple plus tard, j’étais un meilleur designer qui avait compris qu’une composition comme celle-ci n’était pas performante, le bénéfice d’organiser les icônes en fonction de la fréquence d’usage, et la nécessité de libeller les icônes dans un tel contexte. Il a fait bien d’autres commentaires pertinents, dont beaucoup ont été pris en compte dans le produit que nous avons aujourd’hui. Conseil rapide : si vous avez l’opportunité d’échanger avec cette équipe d’Apple, faites tous les aménagements nécessaires dans votre emploi du temps pour qu’elle puisse avoir lieu.

Dans cette même perspective de réduire au maximum le nombre de manipulations pour ajouter une nouvelle entrée, certaines entrées présentent par défaut la dernière valeur enregistrée plutôt qu’une valeur fixe. C’est très utile pour les biberons qui sont souvent du même volume quelques jours d’affilée : il n’est plus utile d’ajuster la valeur quand on en ajoute un.

Ca va vraiment très vite, 3 secondes, car le pouce reste au même emplacement pour sélectionner le biberon et valider l’entrée dans la foulée. Quand on sait que c’est aussi facile de noter un biberon, on est plus enclin à le faire tout de suite plutôt que de le reporter à un plus tard avec le risque d’oublier que cela comporte.

Restituer l'information collectée

Dans la partie basse de l’écran principal, la liste des dernières entrées ajoutées répond à la question “qu’est ce qu’il s’est passé dans les dernières heures ?”, souvent initiée par une première “mais pourquoi ces pleurs ?”. Le fil du temps est représenté verticalement, démarrant du bouton (+) représentant le présent, et descendant jusqu’aux informations de naissance. Le nombre d’entrées visibles d’un coup d’œil au lancement de l’app dépend de la hauteur de l’écran offerte par l’appareil utilisé : 4 pour les écrans de 4,7 pouces, jusqu’à 7 pour les écrans de 6,5 pouces.

Il est possible de se plonger complètement dans la consultation des entrées en donnant une légère pichenette vers le haut. Elle amène l’entrée la plus récente tout en haut de l’écran pour qu’il soit rapidement et facilement possible de voir un nombre maximum d’entrées dans la hauteur de l’écran, et facilite le passage en revue des dernières heures pour les usagers qui ouvrent l’app pour ça.

Amadour avait suggéré ce comportement qui m’a surpris et dérangé dans un premier temps ; il est possible que vous ayez aussi cette réaction en l’essayant. Une gêne similaire à celle que l’on peut avoir quand une page web ne défile pas comme attendu - les pages de présentation des produits Apple en sont un parfait exemple. C’est moins dérangeant une fois qu’on a appris à l’anticiper, ce qui arrive rapidement avec une haute fréquence d’usage comme c’est le cas pour Le Baby. Ajoutons le bénéfice d’accéder rapidement à un détail plus complet des derniers enregistrements, et ça devient même agréable. Ce sujet est un très bon exemple de pourquoi il faut toujours questionner la gêne qu’on peut éprouver devant une proposition, et s’appliquer à expliquer l’origine de cette friction. C’est une habitude difficile à prendre, car elle est en concurrence directe avec le soucis d’efficacité qui nous fait appliquer des règles simples et efficaces acquises par l’expérience. Être conscient de ce qu’on éprouve, pouvoir en faire le tour, et savoir l’expliquer. Et être prêt à changer d’avis.

Lorsqu’une journée s’achève, les entrées sont rassemblées dans une carte de résumé quotidien présentant la somme des valeurs enregistrées. Au bout d’une semaine, un résumé hebdomadaire rassemble les sept jours passés et montre la valeur moyenne journalière des entrées enregistrées. Il est bien-sûr possible de passer des cartes de la semaine à celles des jours puis au détail des entrées, et inversement.

Le manque de sommeil

La perte de qualité de sommeil a pour les jeunes parents des conséquences très concrètes : la concentration et les capacités de réflexion sont affectées, alors qu’ils ont beaucoup à faire, beaucoup à apprendre. Peut-on dire qu’il ne faut pas trop leur en demander ? Oui. Pour être efficace, l’app doit exprimer succinctement et clairement ce qu’elle a à dire, et ne doit pas être exigeante sur le niveau de concentration requis pour être manipulée.

Signalétique et habitudes

Dans la taille d’écran offerte par un smartphone, et le contexte de fatigue des usagers, le cahier des charges est assez serré : il faut être explicite tout en optimisant la lisibilité des informations que l’usager recherche. Cela implique une taille de texte et des zones de réserve généreuses.

Utiliser des libellés pour être explicite implique une répétition contre-productive (biberon 90ml, biberon 110ml, couche mixte, sommeil 2h20, couche humide, biberon 110ml, biberon 70ml,…).
Pour éviter la présence d’une signalétique abondante, répétitive et donc peu utile pour une app utilisée plusieurs fois par jour⁽¹⁾, chaque type d'information présente à l'écran prend une forme distincte. Une entrée de biberon n'a pas la même apparence qu'une entrée de poids. Le bouton d'accès au menu n'a pas la même forme que le bouton d'accès aux réglages du journal.

Simplifier l’apparence du produit pour en optimiser l’usage quotidien et répétitif nous a semblé plus important que de le rendre parfaitement explicite à sa découverte.

Demander à l’usager de prendre un peu de temps pour se familiariser avec l’app permet de la rendre beaucoup plus légère visuellement que d’autres apps concurrentes présentant le même contenu. Cette légèreté visuelle a un impact très positif sur la lisibilité des informations affichées, mais aussi sur la perception émotionnelle du produit. Les commentaires laissés par les utilisateurs sur l’App Store⁽²⁾ mettent souvent en avant cette simplicité comme point fort de l’app. Ils indiquent aussi régulièrement la trouver intuitive. Ce sont des notions qui ont beaucoup de valeur dans ce moment où beaucoup de choses paraissent, et sont parfois, compliquées.

Néanmoins, il est essentiel de permettre aux personnes qui l’essaient de se rendre compte rapidement qu’elle est pratique à utiliser. Ces personnes sont fatiguées et n’ont pas que ça à faire. Pour construire ce pont entre perception initiale et efficacité au quotidien, un guide de démarrage en 8 étapes s’affiche en tête de journal au premier lancement de l’app, et peut être parcouru de façon asynchrone. Il est important de laisser à l’utilisateur la possibilité de progresser à son rythme, d’être interrompu (par un bébé demandant de l’attention par exemple), et stabiliser sa progression dans les étapes tout en lui permettant d’utiliser l’app. Les guides qui imposent leur consultation et leur complétion pour être fermés ne sont clairement pas indiqués dans ce contexte.

La première version de l’app n’avait pas de guide, mais un lien d’aide qui les amenaient vers une page de notre site. Les visites sur cette page étaient fréquentes, et quelques tests utilisateurs auprès de jeune parents nous ont fait comprendre qu’il fallait faire mieux. Dans notre quête de minimalisme - pour des questions de principe, mais aussi pour réduire l’effort de traduction - nous avons d’abord animé le bouton d’accès au menu - animation qui est toujours présente aujourd’hui. Il s’agite comme pour dire bonjour avec la main ; « c’est par ici que ça se passe ». Cela nous semblait suffisant pour mettre les parents sur la piste de l’ajout de leurs premières entrées. Erreur. Les tests utilisateurs suivants nous ont montré que nous étions trop optimistes, sans doute trop fiers d’avoir trouvé une solution maline à notre problème. C’était très pénible d’observer ces personnes rester sans rien faire devant cet écran qui nous semblait évident, mais qui pour eux était inhabituel, vide, atone, malgré ce petit bouton d’ajout central s’agitant devant eux. Une personne fatiguée et/ou pressée n’a pas le loisir de faire l’effort d’une interprétation conceptuelle aussi astucieuse soit-elle, et un libellé bien dimensionné dont les mots ont été choisis avec soin reste autrement plus efficace. C’est comme ça que le guide est arrivé dans l’app, et nous avons fait appel à des traducteurs pour l’adapter aux neufs langues que nous proposons.

La première version du guide était uniquement textuelle, et comportait 17 étapes. Nous les avons réduites à 8 et avons ajouté des illustrations pour le rendre plus agréable à consulter. Si besoin, il est possible de l’afficher plus tard depuis l’écran des réglages du journal.

Structure des écrans

L’autre décision qui a permis de favoriser la sensation de simplicité a été de donner aux écrans d’ajout d’entrée une structure constante : en haut la valeur de la nouvelle entrée, au centre la manipulation de cette valeur, et en bas la modification de l’heure, la validation de l’entrée ou son annulation. Dans ces écrans qui sont manipulés très régulièrement, favoriser la mémoire musculaire permet d’accroitre leur confort d’utilisation avec le temps.

Autant la régularité de structure aide les usagers, il est aussi crucial pour eux qu’ils soient bien distincts visuellement. En cas d’erreur de sélection d’item dans le menu - quand on est fatigué, cela peut arriver - on s’aperçoit immédiatement qu’on a pris le mauvais chemin et qu’il faut faire marche arrière. C’est la zone dédiée à la manipulation de la valeur qui joue ce rôle de distinction, tout en participant à renforcer la personnalité de l’app. Là aussi, l’expression visuelle des types d’entrée est la plus simple possible, sans trop de détail pour préserver la légèreté perçue lors de l’utilisation.

Valeurs arrondies

Dans le souci d’apaiser l’interface et de réduire le bruit visuel, les valeurs enregistrées sont arrondies dans la limite de l’acceptable quant à la qualité du suivi. Lorsque l’heure de l’entrée est modifiée pendant la saisie, la granularité offerte par défaut est de 5 minutes. Les heures aux incréments de 5 minutes sont plus rapides et confortables à parcourir dans une liste que celles où ils sont d’une minute.

Pour l’allaitement et le sommeil, les secondes ne sont pas prises en compte car elles sont marginales pour le suivi. Dans le chronomètre d’allaitement, les secondes passées à chaque sein sont toutefois affichées : leur défilement est une confirmation visuelle du bon fonctionnement, et elles peuvent s’additionner significativement quand le bébé passe plusieurs fois d’un sein à l’autre lors d’une même session.

Pour le biberon, le volume est arrondi à 10ml (0.2 fl oz) par défaut. Il est toutefois possible de l’ajuster au millilitre (0.1 fl oz) en tapotant de part et d’autre du curseur. Une interaction qui n’est pas évidente à découvrir, et dont nous avons prévu d’améliorer la mise en avant (la gestion de la roadmap sera abordée dans un futur article concernant les outils et les méthodes utilisées dans ce projet).

Des boutons de taille généreuse

Mises à part les apps Réveil et Téléphone, il n’y en a pas beaucoup qui doivent pouvoir être opérées avec succès immédiatement après un appel non sollicité au milieu de la nuit. Une app de suivi de bébé en est une autre. Pour augmenter les chances de réussite d’un ajout d’information dans ces moments là, la taille des boutons a été augmentée autant que possible, en équilibrant trois contraintes : le respect de la hiérarchie sémantique à l’écran, l’adaptation aux appareils de petite taille (4 pouces), et l’harmonie esthétique.

Sont particulièrement concernés les boutons de raccourcis ou de chronomètre d’allaitement, les boutons du menu, et les curseurs de valeurs. Ce principe d’agrandir au plus la zone active est accentué dans les écrans de saisie du biberon, de la température et des mensurations, où toute la zone centrale est interactive. Peu importe où le doigt se pose à proximité du curseur, ça marche.

Une seule main disponible

Ce sujet provoque régulièrement un malentendu que j’aimerais écarter immédiatement : non, l’idée n’est pas de faciliter l’usage de Le Baby au point que les parents en négligeraient la sécurité de leur bébé. On imagine trop vite un parent marchant le regard vissé à son écran, alors que son nouveau né glisse doucement de son épaule sans qu’il ne s’en aperçoive.

Ceux qui ont été parents il n’y a pas longtemps le savent bien, et les hormones des autres ont effacé ce souvenir pour que l’espèce humaine puisse se perpétuer : un bébé demande une attention quasi constante, un contact physique presque permanent, et c’est normal. La conséquence pratique est qu’un parent n’a pas très souvent les deux mains libres, l’une d’entre elle étant occupée à rassurer le bébé. Quand on conçoit un objet qui s’utilise avec les doigts, c’est une contrainte qu’il peut être intéressant de prendre en compte.

Nous en avons fait un des fondamentaux de Le Baby : il fallait qu’une personne dotée de petites mains et d’un grand écran puisse utiliser les fonctionnalités principales de l’app avec le pouce, que ce soit de sa main préférentielle ou de l’autre. Le placement des interactions sur l’écran et la taille des zones actives sont le reflet de cette volonté.

La navigation, c'est en bas

Quelques années avant que la barre d’adresse de Safari et sa liste d’onglets ne soit déplacée au bas de l’écran, dans une avalanche de tweets outragés, les actions de navigation de Le Baby y avaient pris leurs quartiers.

À l’ajout d’une entrée, trois boutons se trouvent sous le pouce : annuler l’ajout, accéder à la modification de l’heure, valider l’ajout.

Dans l’écran principal, lorsqu’on affiche le journal sur toute la hauteur de l’écran, deux boutons s’affichent en bas : celui de droite permet d’accéder aux graphes qui seront détaillés plus bas, et celui de gauche permet un retour à l’état initial du journal sans avoir à toucher la status bar (les premiers millimètres du haut de l’écran contenant l’heure, le niveau de la batterie et la qualité du réseau). Lorsque des résumés journaliers ou hebdomadaires déployés sont affichés à l’écran, ce bouton s’adapte pour permettre le repli des objets jours et semaines. Une fois que tout est replié, ou que les cartes déployées ne sont plus en vue, il revient à sa fonction initiale de retour vers le haut du journal.

Si vous souhaitez voir ces résumés fonctionner, voici un journal échantillon contenant plusieurs semaines de données que vous pouvez importer dans l'app⁽³⁾.

Improving time edits

Avant d’expliquer pourquoi nous avons proposé une solution faite maison, je prends quelques lignes pour rendre hommage au composant natif d’iOS permettant l’entrée de dates et d’heures : ces petites roulettes verticales qui sont présentes depuis la première version. Malgré le peu d’affection qu’elles suscitent, elles sont à mon avis une des interfaces les plus réussies d’iOS. Elles offrent la possibilité de modifier les dates et les heures dans tous les formats internationaux existants dans la surface d’une demi-carte de visite, disponible pour toute app qui en aurait besoin. Quinze ans plus tard elles sont toujours là, dans une apparence régulièrement mise à jour certes, mais avec le même fonctionnement sous-jacent et la même modularité leur permettant de s’adapter à de multiples situations. Elles sont un excellent exemple de compromis : accepter quelques défauts en terme de maniabilité (il faut parfois s’y prendre plusieurs fois avant d’arriver à la valeur souhaitée) pour assurer une couverture fonctionnelle qu’on peut raisonnablement qualifier de vaste. Bravo à vous les roulettes, et à l’équipe qui les ont fait naître.

Notre contexte d’usage amène à devoir modifier l’heure plusieurs fois par jour, parfois suite à un réveil non sollicité : ces roulettes, aussi géniales soient-elles à l’échelle du système, nous ont semblé mal adaptées. Elles demandent trop de précision gestuelle, alors que l’usage le plus fréquent est un ajustement de quelques minutes, plus rarement de quelques heures.

Notre solution devait proposer la zone active la plus généreuse possible pour que la modification de l’heure puisse s’initier sans beaucoup de précision. Il fallait aussi que l’on puisse atteindre l’heure désirée avec le moins de gestes et de contrôle musculaire possible. Le format d’une frise continue a permis cela. Son échelle a été calibrée pour que l’on puisse se déplacer d’environ deux heures en déplaçant le pouce sur la largeur de l’écran. Sa célérité au déplacement a été finement ajustée par Amadour pour qu’il soit possible de se déplacer rapidement dans le temps en donnant des pichenettes vers la droite.

Initialement, nous n’avions pas donné la possibilité de choisir une date dans le passé avec un calendrier. Ce n’est pas le cas d’usage nominal, et nous avions beaucoup d’autres fonctionnalités plus essentielles à mettre en place. Pour ajouter une entrée plusieurs jours dans le passé, il fallait exécuter autant de pichenettes vers la droite que nécessaire. Amadour a fait en sorte que la vitesse de remontée dans le temps augmente avec le nombre de ces glissés, si bien que se déplacer de plusieurs jours était faisable, occasionnellement. Nous avons reçu le message d’un utilisateur qui nous faisait part de son inconfort à enregistrer les premières entrées faites dans une autre app. Apprendre que quelqu’un abandonnait une autre app pour la notre était une incroyable nouvelle, mais réaliser que nous ne faisions rien pour le faciliter l’était beaucoup moins. Le sélecteur de jour s’est soudainement retrouvé en tête de notre feuille de route. La date précisée au milieu de la frise est devenue un lien affichant un calendrier flottant natif. Beaucoup plus confortable, et ce sera également utile aux parents qui souhaiteront enregistrer à posteriori les différentes mensurations que nous venons d’ajouter.

Accès au menu

L’accès au menu des entrées est l’élément de l’écran d’accueil le plus en contradiction avec le propos de cette partie de l’article. Impossible pour le pouce d’une main de taille normale tenant le téléphone d’aller toucher ce bouton. Heureusement, il suffit de tirer le journal vers le bas pour faire apparaître le menu.

Là encore, le comportement n’est pas celui de l’actualisation des informations attendue lorsqu’on a devant soit une liste d’entrées classées chronologiquement, ce qui peut surprendre. Mais le bénéfice vaut vraiment le désagrément des premières manipulations, et l’usage répété fait rapidement entrer ce comportement dans le cadre du « normal » chez les usagers. Un peu comme le problème de la barre d’url de Safari dont on entend plus vraiment parler, finalement.

24 heures sur 24, 7 jours sur 7

L’usage de l’app à la suite d’un réveil inopiné a déjà été évoqué plus haut, donc vous l’avez sans doute déjà compris si ce n’est expérimenté : pendant plusieurs semaines, les pleurs du bébé peuvent retentir à tout instant et demander aux parents d’interrompre leurs occupations. Leur sommeil souvent, mais aussi une douche, la préparation du repas, une conversation téléphonique, une réparation de vélo. Bref, on n’est pas toujours préparé quand Sa Majesté vous somme d’arriver au plus vite. Cela veut dire qu’on a parfois pas la possibilité d’allumer la lumière, ou d’enfiler ses lunettes alors qu’elles nous sont nécessaires pour lire.

Sans lunettes

Étant porteur de verres correctifs depuis mon enfance, c’est un sujet auquel il m’a été facile d’être sensible. Pour ceux et celles qui ne le sauraient pas, lorsqu’on ne porte de pas ses lunettes de correction, un flou général d’installe ; les lignes fines disparaissent, les lettres des textes trop petits deviennent impossibles à distinguer les unes des autres, et les détails des formes se noient dans une masse approximative. Sans ses lunettes de vue, la plupart des apps deviennent inutilisables, mais il est possible d’arranger ça.

Deux tâches peuvent être amenées à être accomplies par les jeunes parents dans la précipitation, ne pouvant pas attendre de retrouver l’endroit où on a posé ses lunettes de vues en les retirant : lancer le chronomètre d’allaitement après avoir identifié le sein à donner, et consulter les toutes dernières entrées du journal. Savoir qu’un change ou un allaitement a eu lieu il y a quelque temps donne une première indication sur l’origine possible des pleurs du bébé.

Dans l’écran principal, l’indication du prochain sein à donner par le chronomètre d’allaitement est toujours perceptible malgré un fort niveau de flou. Toute l’utilisation du chronomètre est possible sans y voir correctement : les deux seins sont identifiés par leur emplacement dans l’écran, celui qui est en cours d’enregistrement aussi puisqu’il vient se placer au centre, et l’état de pause est identifiable par le bouton de validation qui s’affiche alors au-dessous.

Pour aider à l’interprétation des dernières entrées du journal, deux choix ont été faits : différencier les types d’entrées les uns des autres par leur forme, et distinguer par une couleur de fond plus contrastée les entrées d’alimentation. Il est donc possible d’obtenir un premier niveau d’information sans même avoir lu la valeur enregistrée ou l’heure précise de l’enregistrement : un biberon a été donné, et juste avant une couche a été changée. Affecter une couleur différente à chaque type d’entrée aurait été très efficace, mais il aurait été beaucoup plus compliqué de produire des thèmes de couleurs différents, qui jouent un rôle important dans certains cas d’utilisation intense (voir plus bas).

Les icônes de types d’entrée ont été dessinées pour que les parties denses en aplat de couleur ne soient pas situées aux mêmes endroits d’une icône à l’autre. Il est possible de les distinguer les unes des autres lorsqu’elles sont floues.

Une personne ne les ayant jamais vues ne pourra pas les comprendre en les voyant comme ça, et c’est très bien comme ça. Le but est plus qu’une personne les ayant déjà souvent vues puisse les identifier de mémoire et choisir celle dont elle a besoin. Et si l’utilisateur venait à se tromper d’icône, la composition distinctive de chaque écran de saisie lui permet de se rendre compte qu’il n’est pas là il le souhaitait.

Le Baby offre la possibilité de modifier le thème de l’interface (détaillé plus bas), et l’un d’entre eux a été conçu en maximisant le contraste, le rendant plus adapté à ceux et celles d’entre nous qui n’ont pas la chance d’avoir une vision correcte.

Dans le noir

Dès la version 1.0 nous avons proposé un mode nuit dont le rôle est de minimiser la quantité de lumière émise par l’écran lorsque l’app est utilisée dans une pièce sombre. Premier bénéfice : l’utilisateur évite de s’éblouir alors que ses yeux s’étaient adaptés à la pénombre. Deuxième : l’autre parent qui dort éventuellement à côté a moins de chance d’être réveillé (si le bruit ne l’a pas déjà fait). Et troisième : le bébé n’est pas distrait par la lumière qui éclaire vers le haut le visage de son parent (il y a ici un potentiel de traumatisme visuel qu'on apprécie peut-être pas assez) et le plafond quand il se nourrit.

Comment est ce que ça fonctionne ? iOS ajuste en permanence la luminosité de l’écran en fonction de la luminosité ambiante détectée par l’appareil. Nous nous servons de cette fonctionnalité pour déclencher le passage en mode Nuit lorsque la luminosité de l’écran tombe en-dessous d’un certain seuil.

Initialement, il n’y avait que 6 thèmes de couleur différents, et un seul thème de nuit. L’introduction du Dark Mode avec iOS 13, un an après la publication de notre v1.0, aurait pu nous amener à ne plus proposer ce mode nuit, et le proposer en tant que variation Dark Mode de chaque thème. Mais les usages ne sont pas tout à fait les mêmes. Le Mode Sombre peut être activé automatiquement aux heures tardives de la journée, mais aussi toute la journée par préférence esthétique : il faut donc garantir une lisibilité de l’interface en Darl Mode dans un contexte lumineux. Cela demande d’utiliser des contrastes qui augmentent l’émission de lumière, ce qui ne respecte pas la promesse de notre Mode Nuit. La solution fut plus de travail, et proposer pour chacun des 12 thèmes un mode lumineux, un mode sombre, et un mode nuit.

Nous en avons profité pour optimiser le Mode Nuit en réduisant encore la quantité de lumière émise par l’écran. C’est l’un des aspects de l’app que je vous encourage vraiment à essayer par vous-même si vous le pouvez, en manipulant la luminosité de l’écran. La représentation faite ici ne peut pas traduire son fonctionnement réel. Vous pourrez constater à quel point la quantité de lumière émise par l’écran en Mode Nuit est faible, comparé à l’affichage du Mode Sombre dans Mail ou Notes par exemple.

Continuité visuelle

Dans Le Baby, la navigation d’un écran à l’autre s’accompagne de transitions visuelles. Ces fondus permettent de faire de l’app un ensemble cohérent, réactif et organique, dont les écrans semblent s’articuler les uns aux autres. Le parcours dans l’app étant visuellement continu, les utilisateurs s’en construisent une image mentale plus facilement, ce qui accroit leur confort d’utilisation. Ces transitions jouent le rôle que peut avoir une reliure pour un document imprimé: elle fait d’une série de feuilles libres un objet fini, ordonné et articulé.

Si vous n’avez pas la possibilité d’essayer l’app, voici une vidéo (avec son) de deux minutes qui vous donnera un meilleur aperçu de la relation existante entre les différents écrans :

En architecture d’intérieur, pour faire comprendre subtilement que deux espaces distincts font partie d’un même ensemble, on leur applique un ou plusieurs attributs similaires ; cela peut être une hauteur de plafond, le revêtement des murs ou du sol, une palette de couleurs, la nature et/ou la disposition des accessoires, une qualité lumineuse, une ambiance sonore,… En passant d’un espace à l’autre, même par une porte fermée, on comprend que deux espaces qui nous étaient inconnus sont liés entre eux. Sans ces similitudes, on interprèterait ce passage comme une rupture, comme celui du hall d’un immeuble à une boutique.

La charte graphique d’une app est un outil qui au-delà de son rôle d’identité visuelle, rassemble une série d’écrans dans un ensemble cohérent. Aussi déterminante qu’elle soit, c’est une méthode statique héritée de l’impression qui ne tire pas profit de la dimension temporelle des interfaces numériques pour produire du sens. Le comportement qu’il est possible de donner à certains éléments comme les boutons ou les blocs de contenu met en œuvre cette troisième dimension pour exprimer la relation à une unité : un bouton peut plus ou moins rebondir, un texte arriver en se déplaçant d’une certaine façon. Mais cette expression se limite aux contours de l’écran unique, et malgré leur présence, passer d’un espace à l’autre offre la même expérience visuelle que de passer d’une chaine de télé à une autre avec une télécommande. Certes, c’est réactif et immédiat, mais c’est un peu sec.

Au niveau du système, iOS opère une transition visuelle entre l’icône d’une app et son interface lorsqu’on la lance, et inversement lorsqu’on la ferme. Cela aide à mieux percevoir d’où on vient et où l’on va. À l’échelle de l’app, Photos fait de même lorsque vous passez de la pellicule à un cliché. Le parcours dans les apps Réglages et Mail utilise des transitions d’opacité, de position et d’échelle opérées entre un écran de départ et un écran de destination. Mais cela reste une approche très légère par rapport à notre expérience des espaces physiques et de notre perception d’une continuité de l’un à l’autre. Il y a une raison à cela : c’est bien plus difficile à mettre en place dans une app que de poser une moquette ou un modèle d’applique au mur.

Travailler avec Amadour Griffais a été déterminant pour que le parcours entre les écrans puisse exister tel qu’aujourd’hui dans Le Baby. Il faut posséder plus que des capacités techniques pour affronter la complexité qu’impliquent ces transitions et se lancer dans leur mise en place. Il faut aussi une bonne dose de patience, de rigueur, de méthode, et avant tout une réelle sensibilité à ce sujet. Il faut être convaincu de l’importance qu’ont ces transitions dans l’expérience d’une app pour mobiliser son savoir-faire et employer son temps à les mettre au point. De mon côté, au-delà d’avoir eu l’envie de voir ces écrans évoluer de cette façon, je n’ai fait qu’illustrer des intentions à l’aide de transitions entre diapositives dans Keynote. Rétrospectivement, il est fort possible que ces idées soient restées à l’état de maquettes et que Le Baby n’ait jamais vu le jour si je n’avais pas croisé Amadour dans mon parcours professionnel.

C’est un fait dont peu de designers parlent, en tous cas dans les lectures que je peux croiser : sans ingénieur capable de construire ce qui est esquissé, de mettre en place les conditions techniques pour qu’elles puissent être exécutées, les maquettes que nous faisons, aussi léchées soient-elles, ne sont que des lettres au Père Noël. Sans données propres et structurées, impossible de présenter la bonne information au bon moment, ou de s’adresser de façon pertinente à l’utilisateur. Sans un développeur sensible aux apparences et au comportement d’une interface, doté d’un minimum de culture graphique, il est très compliqué - coûteux en temps et en nerfs - d’avancer dans un chantier à la vitesse requise par les attentes des usagers. Sans temps laissé au développeur doté de ces sensibilité de s’occuper des ces aspects, il n’est pas possible de les mettre en œuvre correctement.

Voici d’autres exemples de ces transitions au ralenti. Rien de très compliqué visuellement parlant, mais les développeurs iOS parmi vous auront sans doute un autre ressenti (tout est en Objective C).

Au delà de l’apport de sens et de confort à l’app par leur présence, ces transitions rendent particulièrement plaisantes la cinématique d’arrivée des entrées dans le journal. Lorsqu’on valide une nouvelle entrée, c’est la valeur qui vient d’être ajustée qui se dépose dans le journal, où un espace lui a été préparé juste avant. Il n’y a pas de « retour » vers une liste enrichie d’un item apparu en douce, depuis une modale de saisie comme c’est en général le cas (l’app Calendrier d’iOS par exemple). On progresse vers le journal enrichi avec la valeur de l’entrée qu’on a choisie comme fil conducteur visuel. Lors des premières minutes d’utilisation, ce fonctionnement informe l’organisation antéchronologique du journal.

Un autre exemple où la continuité visuelle est mise au service de l’usage : le chronomètre d’allaitement. Précision pour celles et ceux qui ne seraient pas au fait : il aide les mères qui allaitent à faire le suivi du temps total passé au sein pour s’assurer que le bébé mange suffisamment, et à se souvenir du sein où le bébé a passé le plus de temps à la dernière tétée - c’est important d’alterner pour que la production de lait se maintienne.

Les transitions aident à mettre en avant le côté en cours d’enregistrement en le déplaçant au centre de l’écran. Tout comme le bébé se déplace d’un sein à l’autre, le chronomètre déplace ses boutons lors de son fonctionnement.

Les fonctions esthétiques

Jusqu’à maintenant, les explications sur l’interface de Le Baby n’ont concerné que la disposition, la taille et le contraste des éléments qui la composent. Des aspects quantifiables et tangibles qui s’argumentent objectivement. Mais sa perception et son usage sont aussi informés par ses attributs esthétiques qui peuvent être plus subjectifs.

Placer d’un côté les choix “rationnels” et d’un autre les choix “émotionnels”, voire donner plus d’importance à l’un qu’à l’autre, n’a pas de sens puisque les deux s’influencent réciproquement dans le produit final, qu’on le veuille ou non. Je vous laisse extrapoler sur ce que je peux penser de la distinction qu’on nous impose depuis des années entre deux pratiques soit disant distinctes du design qui commencent par un U et finissent par un X ou un I.

Les attributs formels d’une interface vont susciter des émotions, souvent subtiles, qui vont associer chez l’usager le produit à un univers culturel identifié, qu’on l’ait anticipé ou non. Loin de moi l’idée qu’il soit possible de prévoir tout ce que les utilisateurs vont ressentir en manipulant un produit. En revanche, en étant conscient des choix d’ordre formel, il est possible d’anticiper les rapprochements à des univers émotionnels donnés, ou en tout cas de ne pas favoriser les associations à ceux qu’on préfèrerait éviter. On pourrait tout à fait prendre le cahier des charges détaillé jusque maintenant et faire de Le Baby une app surf, cyberpunk ou baroque. En étant moins caricatural, il serait possible de donner un caractère traditionnel, enfantin, médical, technique, ou encore kawaii à une app de suivi de bébé pratique à utiliser. Mais ce n’est pas ce qui a été fait. Les intentions pour Le Baby étaient d’exprimer la douceur, la simplicité et l’harmonie.

Douceur

Dans l’univers des bébés, la rugosité se vend mal. Tout ce qui touche au bébé est doux, et il serait risqué de ne pas s’inscrire dans cet univers là. Les parents font face à suffisamment de friction au quotidien pour qu’on leur en épargne quand c’est possible. C’était donc important que l’app exprime autant que possible le calme et la sérénité, pour que les parents puissent en recevoir une petite dose de temps en temps.

Dans l’interface, la douceur est exprimée avec le choix des couleurs pastel (plus de détails dans la partie dédiée à l’appropriation ↓), avec les lignes organiques du dessin des icônes, avec le réglage des animations, et aussi par le traitement visuel des graphes.

Simplicité

C’est l’une des lignes directrices du projet, et la promesse fonctionnelle de l’app ; cela semblait pertinent qu’elle fasse partie de son apparence.

Le peu d’éléments à l’écran induit déjà l’idée de simplicité, qui est renforcée visuellement par l’utilisation de lignes géométriques dans les objets fonctionnels de l’app. Boutons, délimitations de sections, icônes de service sont dessinés en utilisant des cercles et des rectangles aux coins arrondis, avec le moins possible d’interruptions et d’angles aigus.

La police de caractère utilisée dans une app a une influence majeure sur la perception émotionnelle qu’on peut en avoir. Au démarrage du projet en 2014, j’avais sélectionné Avenir comme fonte pour l’interface. Son dessin clair, moderne et généreux correspondait à ce que je voulais véhiculer. Et faisant partie des fontes installées par défaut dans iOS, avec six variantes de graisse, elle permettait une belle marge de manœuvre dans l’expression graphique, sans que le poids de l’app n’ait à en souffrir.

Lorsque nous avons repris le projet en 2018, San Francisco avait remplacé Helvetica Neue comme police de caractère par défaut d’iOS. Elle était à ce moment la seule fonte native offrant la possibilité d’adapter à peu de frais la taille des textes d’une app en fonction des préférences définies dans les réglages système. Nous avons donc abandonné Avenir pour San Francisco. Ni l’une ni l’autre ne sont à mes yeux la fonte idéale pour Le Baby, mais elles ont été celles qui s’en sont le plus rapprochées. Cela illustre bien le contrôle relatif qu’un designer peut avoir sur la matérialisation d’une intention esthétique. Là aussi, savoir faire des compromis est essentiel pour avancer.

Harmonie

Comme évoqué en introduction, le quotidien des jeunes parents est souvent sans dessus-dessous dans les premières semaines. Le Baby leur permet de clarifier le déroulement de leurs journées, en présentant un reflet ordonné de ce qui s’est passé. Les événements y sont explicites, distincts les uns des autres, énoncés dans leur chronologie.

Cet espace de référence où l’on vient chercher équilibre et harmonie serait moins convainquant si ces notions n’étaient pas perceptibles visuellement. La composition en symétrie axiale de la plupart des écrans participe à évoquer ce sentiment. Au niveau des couleurs, seules deux teintes sont utilisées dans les écrans : la principale pour presque toutes les couleurs, et une autre pour l’accent. Utiliser cette palette restreinte, qui plus est très largement pastel, participe à faire de Le Baby un espace calme et équilibré.

Appropriation

J’ajoute un dernier point avant de conclure cette partie dédiée aux choix formels. Très tôt dans le projet nous avons offert aux usagers la possibilité de choisir la couleur principale de l’app. Un choix formel (limité, certes) laissé à la discretion de l’utilisateur, où sa préférence personnelle peut s’exprimer. Le thème présenté par défaut quand on installe l’app a cette couleur qu’on appelle souvent “nude”, notion toute relative.

C’est une teinte souvent utilisée par les services ou produits liés à la grossesse, la maternité et la petite enfance. Elle me paraissait donc être une bonne référence de départ. Personnellement, je ne suis pas très fan, et c’est sans doute pour ça que j’ai pensé à proposer quelques variations.

Tous les écrans sont composés avec neuf couleurs : noir, blanc, principale, claire, sombre, foncé, plus foncé, très foncé, et accent. Un exercice de contrainte qu’avec le temps j’ai fini par regretter car il me limite énormément le champs des possibles lorsque je travaille sur de nouveaux thèmes. En effet certaines références sont utilisées à la fois en aplat et pour des textes, ce qui rend très compliqué de proposer des thèmes qui soient plus dynamiques et plus contrastés que ceux qui sont disponibles aujourd’hui. Le nombre de ces références et les éléments auxquels elles sont associées fait qu’on ne peut pas vraiment faire autre chose que des thèmes pastel. J’ai retenu une leçon, et depuis je commence toujours mes projets d’interface avec une large palette de variations dans laquelle piocher ensuite.

L’existence de ces thèmes permet aux parents de jumeaux et de triplés de les différencier immédiatement au lancement de l’app, que ce soit en mode jour, en mode sombre ou en mode nuit.

Ce que deviennent les données

Le Baby affiche les données collectées par les parents à deux endroits : dans le journal et dans les graphes. Le journal leur donne à voir facilement ce qui s’est passé à l’échelle de la journée. Les graphes leur offrent une vue synthétique des enregistrements sur une plus longue durée. Les données demeurent privées, même pendant la synchronisation entre plusieurs appareils.

Vie privée

C’est une notion qui n’a pas de présence physique dans l’interface, mais qui a une empreinte importante sur la nature de l’app, et qui influence son usage.

Amadour et moi sommes depuis longtemps convaincus que le respect de la vie privée est aussi important dans les produits numériques qu’il peut l’être dans notre environnement physique. Dès le début, nous avons considéré que nous n’avions aucun droit de regard sur les données que les parents ajoutent au journal de leur enfant. Nous avons souhaité que, par défaut, Le Baby se comporte comme un carnet de notes en papier, où ce qu’on y écrit ne peut pas être lu par son fabricant. Les données sont enregistrées sur l’appareil de l’utilisateur, et n’en sortent qu’avec sa participation active. Il y a trois possibilités pour les données enregistrées de se retrouver en dehors de l’app : un export sous forme de fichier CSV, une sauvegarde automatique dans l’espace iCloud de l’utilisateur, et la synchronisation avec un ou plusieurs autres comptes iCloud.

La réputation des apps est aujourd’hui telle que malgré les arguments de protection de la vie privée présents sur le site l’app et sur sa page de description sur l’App Store, nous avons découvert en échangeant avec des utilisateurs que certains restaient a priori méfiants du devenir des informations qu’ils confiaient à Le Baby. Exemple : ne pas avoir ajouté la photo du bébé au journal par crainte de perdre le contrôle de sa diffusion. Nous n’avons pas eu de retour sur les notes écrites précisément, mais en extrapolant il est probable qu’une partie des utilisateurs de Le Baby ne les utilisent pas ou les utilisent moins qu’ils le souhaiteraient, anticipant qu’elles puissent être exploitées par nous ou d’autres. Il faudra sans doute que nous exprimions plus clairement dans l’app que c’est un espace strictement privé où les utilisateurs ont la liberté d’ajouter ce qu’ils veulent.

Graphes

Initialement, je ne souhaitais pas ajouter de graphes dans Le Baby, pour deux raisons principales. Premièrement, je trouvais qu’ils déshumanisaient la relation entre un jeune parent et son bébé. Représenter les habitudes d’un nouveau-né en abscisse et en ordonnée comme on le fait pour les résultats d’une campagne marketing me semblait aller à l’encontre de l’objectif de l’app qui est de rappeler aux parents ce qui s’est passé pour qu’ils calibrent leur ressenti et finissent par avoir confiance en leurs observations. Deuxièmement, je redoutais que certains parents soient tentées de se fier aux courbes plus qu’à leur ressenti pour prendre leurs décisions quant aux soins à apporter. Les graphes peuvent induire l’existence d’une norme, d’un objectif à atteindre, alors que chaque bébé a son propre rythme, et qu’il est important pour son bien-être de le respecter.

Amadour était beaucoup plus enthousiaste que moi à l’idée d’ajouter les graphes : les informations collectées sont dans le journal, les parents ont fait l’effort de les collecter, pourquoi ne pas les représenter de façon plus digeste et ainsi les rendre encore plus utiles ? Presque toutes les apps concurrentes en proposaient, et quelques utilisateurs nous les demandaient. Nous avons fini par les ajouter, mais il était important pour moi que l’accès ne se trouve pas au premier plan, et que leur rendu soit aussi peu scientifique, précis et froid que possible. Naviguer entre le détail des entrées et les graphes est un vrai plaisir, ces deux représentations parallèles étant synchronisées. Ce spécimen de journal vous permettra d’en faire l’expérience vous-même si vous le souhaitez.

L’année dernière, nous avons ajouté les graphes de routine qui permettent d’observer ensemble et d’un coup d’œil l’évolution des habitudes de sommeil et d’alimentation du bébé. Petit à petit, on voit les nuits s’installer et le rythme des repas gagner en régularité. Voici un exemple tiré d’un vrai journal qu’un utilisateur qui nous avait contacté a accepté de nous partager :

Une vue hebdomadaire de ces graphes est là pour qu’il soit possible d’observer des tendances dans la largeur d’un iPhone. Ces vues n’ont pas été faciles à dessiner, tant du point de vue visuel que du traitement de la donnée. La composition des thèmes de couleur a imposé l’utilisation des formes et de la transparence pour différencier les types d’entrée, et non de la teinte. Ensuite, représenter une activité moyenne pour une heure donnée de la journée nous a demandé d’établir des seuils et de décider de ce qui était négligeable. Je ne vais pas rentrer dans les détails, mais nous avons essayé pas mal de recettes avant celle qui se trouve aujourd’hui en production.

Derrière cette image se trouve une histoire, des moments intenses. Malgré son apparence analytique, c’est une représentation d’un vécu que les parents verront sans nul doute avec beaucoup de nostalgie dans quelques années. Le risque que ces graphes tentent certains à nourrir leur bébé à une fréquence donnée pour une quantité donnée existe, et reste pour moi un problème à résoudre. Mais ils offrent aussi un aperçu pertinent des premières semaines avec un bébé impossible à obtenir autrement. Finalement, je suis plutôt content que nous les ayons ajoutés.

Partage du journal

Quand les parents se passent le relais dans les premiers jours, être à la page sans avoir à déranger l’autre leur est très très utile. C’est ce que permet la synchronisation du journal entre différents appareils. Initialement absent de notre feuille de route, il est rapidement devenu un sujet déterminant pour le futur de l’app. Cette omission initiale peut s’expliquer très simplement : mettre en place une synchronisation de données est un chantier technique majeur, long, et toutes les solutions sont un compromis à multiple facettes entre protection des données, fiabilité, facilité de mise en place, et effort de maintenance. Annoncé en septembre 2021, iOS 15 a apporté un lot de nouveautés à iCloud qui nous ont permis de proposer une synchronisation simple à mettre en place par les utilisateurs, chiffrée de bout en bout, et nous offrant le luxe de ne pas avoir à gérer de serveurs nous-même. Le compromis est que lorsque ça ne fonctionne pas normalement, nous n’avons aucun levier d’action - nous venons de le vivre avec iOS 16.3 qui a introduit un bug dans la résolution de conflit. La mise en place n’a pas été clé en main pour autant, et a demandé un effort considérable car la documentation n’est pas encore exhaustive. Mais lorsque ça marche, c’est un vrai coucou suisse.

Du point de vue de la conception d’interface, le partage est assez transparent : seule une petite icône sur la droite du prénom indique qu’une synchronisation est en cours, ou a échoué. C’est l’exemple parfait de ces fonctionnalités où le nombre d’heures de développement est inversement proportionnel à l’empreinte en pixels sur l’écran. L’occasion aussi de rappeler que le design d’un produit va au-delà de son interface. Le bénéfice pour les usagers s’est assez rapidement et clairement exprimé dans les commentaires, particulièrement pour les parents de jumeaux.

Conclusion

Aussi long que cet article a fini par devenir, il y aurait encore beaucoup de précisions à apporter et d’aspects à creuser pour parcourir vraiment l’ensemble des décisions prises sur ce projet. L’app est encore loin d’être finie avec quelques points faibles à retravailler, donc il est possible qu’il y ait une suite à cet article. Ceci étant dit, si vous souhaitiez avoir plus de détail sur un aspect en particulier, n’hésitez pas à prendre contact, je ferai de mon mieux pour répondre.

Les retours des utilisateurs de Le Baby est globalement plutôt bon. Sur l’App Store, la note est de 4,8 sur 5, et les commentaires sont positifs. Les critiques sont centrées sur ce qu’il manque, plutôt que sur des défauts de fonctionnement de ce qui est proposé pour le moment. Lire qu’un usager trouve de la valeur et du plaisir à utiliser ce que vous leur avez mis à disposition est une vraie récompense.

Chaque projet est l’occasion d’apprendre de nouvelles choses. Avant de commencer à travailler sur Le Baby, je savais qu’un observation attentive du contexte d’usage peut amener à des nouvelles idées et de bonnes solutions. Ce projet m’aura appris beaucoup de petites choses, mais voici les deux principales que je retiendrai ici : les problèmes d’accessibilité peuvent être temporaires pour les usagers, et rester concentré sur une poignée de principes forts initiaux permet d’accomplir un bon travail. J’espère que cet article vous aura permis de faire quelques découvertes et qu’il aura été digne du temps que vous avez passé à le lire. Le prochain article sur Le Baby que je publierai ici parlera de son identité graphique, suivi par un autre sur les outils que j’utilise pour ce projet.

1. Dans les 30 derniers jours, les statistiques d’usage qu’App Store Connect nous transmettent indiquent de 10 à 15 sessions (d’au moins 2 secondes) par jour, avec une moyenne à 13.↩
2. La grande majorité de nos usagers sont en France pour le moment, malgré le fait que l’app soit traduite et présentée sur l’App Store, copies d’écran pour 4 tailles d’écran, en 9 langues. Donc la plupart des commentaires laissés sur l’App Store ne sont visibles que par les personnes ayant un AppleID français.↩
3. Une fois le fichier csv ouvert, accéder à la feuille de partage. Le Baby devrait être listée dans les apps compatibles. Touchez l’icône, et vous devriez ensuite voir un écran de validation d’import dans l’app.↩

Le Baby - interface

Observations, failures and changes of mind: this article details the design process of Le Baby, an essential app for parents with newborns which Amadour Griffais and I have been building and growing for a few years now.

The article will explain how observations of the parents context led to many layout decisions, and how animated transitions between screens contribute the app's ease of use. Without too much jargon, it should be accessible to anyone curious about why and how objects take the shape they have. Having learned a lot from this type of articles, I hope to return the favour here, and participate in this body of collective improvement. A previous article described our perspective on this independent iOS app project, and others will follow in the coming months (App Store publication, tools, communication). On the agenda for today:

1. Users context
2. Add and review
3. Considering lack of sleep
4. Using just one hand
5. This app is on call 24/7
6. Visual continuity
7. Aesthetic functions
8. What happens to all this data

Let's start with the context

This couple has been sleeping in 2 or 3 hour naps at best for the past 11 days. Their usually well kept living space shows something more important has taken over. It's overflowing everywhere: laundry, dishes, diapers; emotions too. Dressing properly has been declared dispensable, meals are reduced to a necessary calories intake. Their baby is doing wonderfully well, and since her birth she has provided them with this unique spectacle from which they cannot tear themselves away: life blooming. They are enchanted, bewildered, and completely drained.

If you've ever welcomed a newborn into your home, this should sound familiar. If not, there is no reason to change your mind. This is the typical context of use for Le Baby. The app's purpose is to allow new parents who wish/need to do so to record their baby's feeding, sleeping and growth events, so they can review them later if in doubt, out of curiosity, or when visiting the paediatrician (if this seems suspicious or even futile to you, this article explains why this is useful). For example, here is how to record a diaper change that took place 15 minutes ago, and a 120 ml bottle feeding that the baby just had:

This quick presentation shows that Le Baby was not built using native iOS components. Each section of this article explains why, in an sequence that does not reflect the process chronology: all context considerations did not precede all the ergonomic choices, the aesthetics did not wait for the ergonomics to be finalised before being explored. Everything was woven together in parallel, each proposal being evaluated from different angles and as a suitable solution to a succinct brief.

If you have an iOS device at hand, I encourage you to install Le Baby (for free) so you can experience what will be discussed. The following screen captures do their best to illustrate the different topics, but nothing beats observing the real product. The version of the app at the publication of this article is 3.4.1, and you can read in the version history what has changed since then.

Add and review

As mentioned above, Le Baby is essentially a memory helper. It's a tool to record information, and doesn't display other content such as parenting advices. Each time you open the app, you should be able to quickly add new informations you want/need to remember, or to review what you added in the previous hours/days. You open the app to note the diaper you just changed; later, to see how much time has passed since the last bottle feeding your baby had. There is no prevalence of one of these tasks over the other, and you should be able to do both at app launch, without having to navigate. This is why the home screen has been divided vertically into two areas: collecting informations at the top, and reviewing it at the bottom.

Collecting informations

There are two ways to add information: using one of the two shortcut buttons at the top, or the (+) button which presents the menu of all available types of entries. A preference in the journal settings changes the role of the header buttons:

When breastfeeding is switched on, these two buttons become a timer to monitor time spent at each breast by the baby. This helps parents make sure that their baby is having enough to eat when they're unsure, or to get a picture of their baby's current breastfeeding pattern. The timer is at hand as soon as the app is launched, indicating by button size which breast should be given at the next feeding (it is important to alternate from one session to the next). Its functioning is detailed below.

When breastfeeding is switched off, these two buttons are shortcuts to the sleep and bottle feeding entries. Eventually, we'll make it possible to customise the input type of each button.

The (+) button gives access to all available input types:

Their arrangement is defined by their usage frequency: the first page has the most used entries, and the second the occasional ones. Frequency has also informed the vertical placement in the first screen, so that the thumb can naturally fall on the most frequent entry types at the bottom. In the v1.0 beta, Le Baby’s menu had a circular layout and no button labels. I made it circular because it animated well when opening from the (+) button, and didn’t add labels as they seemed redundant. An email exchange with a design evangelist at Apple later, I was a better designer who now knew about the inefficiency of such layout, and the benefit of organising icons for usage frequency, and the necessity of adding labels to icons in this context. He made a lot of other very relevant comments, much of them ending up in the product we have today. Quick advice: if you get the opportunity to have a discussion about your product with a design evangelist at Apple, make every arrangement you can to have it.

To further reduce the number of taps needed to add a new entry, some entries default values are based on the last recorded one, rather than on an arbitrary fixed one. This is very useful for bottles that often have the same volume for a few days in a row: declaring the value each time can be repetitive and feel dumb.

It's really fast, 2 seconds, because the layout allows for the thumb to stay in the same position (bottom right corner of the screen) to select the bottle entry and to save it. Knowing it's so easy to enter a bottle makes you more inclined to do it right away rather than postpone it, with the involved risk of forgetting about it.

Displaying records

The main screen’s bottom part lists the last entries, answering the question “what happened in the last few hours”, often initiated by the “why is my baby crying” question. The thread of time is represented vertically, the present being the (+) button, progressing down to the very bottom with a birth card. The number of entries visible at a glance when launching the app depends on device’s height: 4 for 4.7 inches screens, to 7 for 6.5 inches screens.

From this initial state, a slight flick upwards will hide the “add entries” top part of the screen to only show entries, with the most recent snapping to the very top. It makes it easy to switch to a review only mode when this is what the user is launching the app for.

Amadour had suggested this behaviour, which initially surprised and disturbed me; you may have this reaction as well when trying it. It’s similar to the one you have when a web page doesn’t scroll the way you would expect it to - Apple’s current product presentation pages are a perfect example of this behaviour highjack. It’s less annoying once you have learned to anticipate it, which happens quickly with multiple daily use. An added value - in our case the benefit of having three more entries to review at a glance - makes this initial negative perception disappear even more rapidly. This situation is a very good example of why one should always question the eventual discomfort they feel in front of a new proposal, and try to track down the origin of this friction. This is a difficult habit to develop, because it is in complete opposition to our quest for efficiency, which makes us apply simple and effective rules acquired through experience to a situation. But I think it’s critical for anyone working on new objects to be aware of their feelings, to be able to describe them, and identify their source(s). And be ready to change their mind.

Back to our entries: when a day ends, a daily summary card displays the sum of the recorded values. At the end of a week, the seven days collapse in a weekly summary card and shows the entries average values for that week. It is of course possible to expand a week card in daily summaries, and daily cards in detailed entries (and vice versa).

Considering lack of sleep

Anyone who’s been a parent will very well know that loss of sleep quality has very concrete consequences: concentration and reasoning skills are affected, while parents have a lot to do, and a lot to learn. Can we say that we shouldn’t expect too much from them? Absolutely. To be effective, the app has to express succinctly and clearly what it has to say, and must not be too demanding in terms of focus required to be handled.

Way finding and frequent usage

Between the screen size of a smartphone and the almost constant fatigue of users, offering a great experience isn’t an easy task: we have to be very explicit while optimising the readability of the informations the user is looking for by using a generous font size and large safe zones around elements.

Labelling every entry in order to be explicit implies a counter-productive repetition (90ml bottle, 110ml bottle, mixed diaper, 2h20 sleep, wet diaper, 110ml bottle, 70ml bottle,…).
To avoid the presence of abundant, repetitive and therefore not very useful signs for an app used several times a day⁽¹⁾, Le Baby uses a distinct shape for each elements on the screen. A bottle entry does not look the same as a weight entry. The menu access button has not the same shape as the journal settings access button.

Simplifying the look of the product to optimise its daily and repetitive use seemed more important to us than making it absolutely explicit upon discovery.

By asking users an effort to get familiar with the app, we were able to make it visually much simpler than other competing applications showing the same content. This visual lightness has a very positive impact on readability, but also on the product’s emotional perception. Comments left by users on the App Store⁽²⁾ often highlight simplicity as a big plus of the app. They also regularly use the term “intuitive”. These notions are very valuable at a time when many things seem, and sometimes are, complicated.

That being said, making people who try Le Baby quickly realise they have a very practical app in their hands is critical. They’re most likely tired and have a lot on their hands already. To bridge initial perceptions with daily efficiency, a short and asynchronous getting started guide is displayed just below the (+) button when the app is first launched. It lets the user progress at her own pace, be interrupted (by a baby demanding attention, for example), and allow her to use the parts of the app that are already well understood. Guides taking over the whole interface and needing completion to be closed are clearly not appropriate in this context.

The first version of the app had no guide, only a help link that took users to our website. Visits to this page were frequent enough that we did some user testing with young parents, and realised we needed to do better. In our quest for minimalism - as a matter of principle, but also as an effort to reduce translation costs - we first animated the menu access button, an animation that is still present today. It moves as if it was waving the hand to say “come here, this way please”. At the time, it seemed enough of a hint to put parents on track to their first entries. Wrong! Subsequent user testing showed us that we were too optimistic, probably also too proud of a supposedly smart solution to our problem. It was very painful to watch these people standing idly in front of this screen which seemed obvious to us, but which to them was unusual, empty, clueless, despite this little central (+) button swaying in front of them. A person who is tired and/or in a hurry does not have the leisure to put in the effort of a conceptual interpretation, however clever it may be, and a clear indication with well-dimensioned set of words remains way more effective. That’s how the guide came to be in the app, and we asked translators to adapt it to the nine languages we offer.

The guide was initially text only, with 17 steps. We have reduced them to 8 and added illustrations to make it more pleasant to browse. If needed, it can be displayed again from the journal settings.

Screen structure

Another decision increased the feeling of simplicity: giving the same structure to all input screens. Top to bottom are the value to record, a large area to control the value, and buttons to access time edition, cancellation and validation of the new entry. As these screens are manipulated very regularly, the consistent structure helps building up muscle memory, which increases comfort of use over time.

As much as layout consistency helps users, it is also crucial to make input screens as visually distinct from each other as possible. Selecting the wrong item in the menu can happen, especially with lack of sleep. We’re helping users realise they’ve taken the wrong path quicker by not requiring them to read labels to do so. Each type of entry input has a distinctive visual design related to its nature, serving as an immediate navigation feedback, while also participating in building the app’s personality. And again, the visual expression is as simple as possible, without too much detail to preserve the perceived lightness.

Rounded values

In the same vein of smoothing the interface and reducing visual noise, the recorded values are rounded within an reasonable range for tracking quality.

When editing the time of the entry, the default granularity offered is 5 minutes. Because it’s easier to parse a list of times set with 5 minutes increments than the same list set with regular 1 minute steps.

For breastfeeding and sleeping timers, seconds are discarded as they have close to zero value in monitoring a baby’s habits. In the breastfeeding timer, however, the seconds spent at each breast are displayed: their ticking is a visual confirmation of active recording, and they can add up significantly when the baby switches from one breast to another and back during the same session.

For bottle feedings, the volume is rounded to 10ml (0.2 fl oz) by default, as this is what bottle graduations display most of the time. However, it is possible to adjust it with 1 millilitre (0.1 fl oz) steps by tapping above or below the cursor (especially important for premature babies). An interaction that is not obvious to discover, and which we plan to improve (roadmap management will be discussed in a future article about the tools and methods used in this project).

Generously sized buttons

Beside the alarm clock and the Phone app, there aren’t many interfaces that are supposed to be successfully used right after an unsolicited wake-up call in the middle of the night, with users not as sharp as they can be. A breastfeeding timer like Le Baby’s is another one. To increase the chances of success of adding information in these muscular coordination challenged moments, the size of the buttons has been increased as much as possible, balancing three constraints: respect for the semantic hierarchy on the screen, adaptation to small devices (4 inches), and aesthetic harmony.

This is particularly true of the shortcut buttons, the breastfeeding timer, the menu buttons, and sliders. This principle of enlarging the active area as much as possible has been emphasised even more in the bottle, temperature and measurement entry screens, where the whole central area is interactive. No matter where the finger lands around the cursor, it will work.

Using just one hand

This subject regularly leads to a misunderstanding that I would like to clarify right away: no, the idea is not to get parents the use Le Baby at the expense of their baby’s care. It’s easy to imagine a parent walking around staring at their screen, while their newborn gently slides off their shoulder without them noticing.

Those who have been parents not too long ago know it well, and the hormones of those for whom it’s been a while have erased this memory so that the human species can perpetuate itself: a baby requires constant attention, almost permanent physical contact. The practical consequence is that a parent does not often have both hands free, one of them being busy with reassuring the baby. When designing an object that is used with fingers, this is a situation worth considering.

We made it one of the fundamentals of Le Baby: a person with small hands and a large device had to be able to use the main functionalities of the app with one thumb, whether it was their preferred hand or the other. The placement of the interactions on the screen and the size of the active areas reflect this goal.

Navigation happens at the bottom

A few years before Safari’s address bar and tabs were moved to the bottom of the screen, in a flurry of outraged tweets, Le Baby’s navigation actions had taken up residence there.

When adding an entry, three buttons are under the thumb: cancel the entry, access time change, validate the entry.

In the main screen, when displaying the full height journal, two buttons appear at the bottom: the one on the right gets you to the charts (more below), and the one on the left allows a return to the initial state of the home screen without having to reach for the status bar (the first few millimetres at the top of the screen containing the time, battery level and network quality). When expanded daily or weekly summaries are in view, this left button adjusts its icon and role: tapping it will fold the day and week elements into cards. Once all entries are collapsed, or when the expanded summaries are no more in view, the button reverts to its original function of navigating the journal to the present.

If you want to see for yourself how these summaries behave, you can import this journal sample containing several weeks of data into the app⁽³⁾.

Improving time edits

Before explaining why we decided to go with a custom solution, I’d like to express my appreciation of the native iOS component for selecting dates and times: those scrolling wheels, which have been part of the system since v1.0. Despite their lack of affection, from what I gathered, they are in my opinion one of the most successful iOS interfaces. They offer the possibility of setting date and time in all existing international formats in the footprint of a half business card, available for any application that needs it. Fifteen years later they are still there, regularly updated but with the same underlying functionality and modularity allowing them to adapt to multiple situations. They are an excellent example of compromise: accepting some shortcomings in terms of handling (you sometimes need a few swipes and taps before getting to the desired value) to ensure a functional coverage that can reasonably be described as vast. Congratulations to you, wheels, and to the team who made you.

Users have to edit time several times a day, sometimes in the middle of the night: these wheels, as brilliant as they are at the system level, didn’t seem well suited for the situation. They require some amount of gestural precision, whereas the most frequent use is an adjustment of a few minutes, more rarely of a few hours.

Our solution had to offer the most generous active zone possible so that time modification could be initiated without much finger precision. It was also necessary to reach the desired time with the least amount of gestures and muscle control. A large horizontal timeline revealed when needed allowed this. Its scale was calibrated so that one could go back about two hours by moving the thumb across the width of the screen. Its celerity has been finely adjusted by Amadour so that it is possible to move quickly in time by flicking left and right.

Initially, we did not give the possibility to pick a date in the past using a calendar view. This is not the nominal use case, and we had more pressing features to implement. To add an entry several days in the past, users had to flick right as many times as necessary. Amadour made it so that the speed of time traveling increased with the number of these swipes, and moving several days was doable, occasionally. We received an email from a user who told us how cumbersome it was for him to add the entries he made in another app before switching to Le Baby. Learning from someone considering switching was fantastic news, but realising how the app was preventing this to happen more often was a downer. The calendar picker suddenly bubbled up the roadmap. The date displayed in the middle of the timeline to display the current day became a link to access a native date picker. Much more comfortable, and it will be useful for parents who will want to catch up on the growth entries we just added (height and head circumference).

Menu access

You might have already noticed that the (+) button location on the screen is in full contradiction to the need for essential buttons to at easy reach. It’s impossible for the thumb of a normal-sized hand holding the phone to extend and touch this button. Fortunately, pulling the journal down from anywhere on the screen will display the entries menu.

Here again, the behaviour is different from what is now widely expected when pulling down and releasing a list of chronologically ordered items. Repetition and the added benefit of an effortless access to all the entries makes this behaviour seem “normal” after a few practices. Just as Safari’s URL bar doesn’t seem to be a problem for anyone, in the end.

This app is on call 24/7

Making the app ready to use just after being woken up has already been mentioned above, so you have probably already understood it, if not experienced it yourself: for several weeks, a baby can sound the siren at any moment. Sleep is just one of the many activities a baby can interrupt: taking a shower, preparing a meal, talking on the phone, or fixing a bike tire. What I try to convey here is that we’re not always prepared when Her Highness summons us. In some of these situations, it can affect how the app is used: you sometimes don’t have the possibility to turn on the light when you’re in the dark, or to put on the glasses you need to read.

No glasses

I’ve had to wear prescription glasses since I was a child, so this topic was an easy one for me to consider, and test for. For those who are not familiar with it, not having your glasses on means a general blur sets in; fine lines disappear, letters of texts that are too small become impossible to distinguish from each other, and details of shapes drown in a approximate mass. Without your glasses, most apps become unusable, but there are ways to mitigate that.

Two of the app’s tasks can be more urgent than grabbing your glasses from where you took them off: checking the latest diary entries to get clues about these sudden alarming cries, and for breastfeeding mothers starting the timer after identifying the breast to feed the baby with (it’s important to alternate).

On top of the main screen, the next breast to be given is indicated using size. The difference between the two sides is still perceptible despite a strong level of blur. The timer remains fully functional despite this degraded visual experience: the two breasts are identified by their left or right location on the screen, the one that is being recorded is placed in the center, and the pause state is recognisable by the validation button appearing below.

Two design decisions are helping users not wearing their glasses to interpret the latest journal entries: differentiating types of entries using shapes, and singling out feeding entries from the others by using a more contrasted background. This way, it’s possible to obtain a first level of information without even having read the recorded value or the precise time of the recording: a bottle has been given, after a full diaper has been changed. It would have also been effective to use a different color for each type of entry, but it would have been much harder to produce multiple color themes for the app, which serve a pretty intense use case (see below).

When designing the menu icons, I made sure that the dense area of solid color was placed differently in the circle from one icon to another. This makes them distinguishable from each other even with a blurred vision.

A person who has never seen them will not be able to understand them by seeing them like this, and that’s ok. The goal is more that a person who is somewhat used to them is able to distinguish them from memory and pick the one she needs. And if the user happens to go with the wrong one, the distinctive composition of each input screen will tell her quickly it’s not where she wanted to get to.

As I hinted to earlier, Le Baby comes with different color themes to choose from (detailed below), and one of them has been designed to provide the highest contrast, making it more suitable for those of us who are not lucky enough to have perfect vision.

In the dark

From version 1.0 we proposed a Night Mode, which role is to limit the amount of light emitted by the screen when the app is used in a dark setting. First benefit: the user doesn’t get dazzled after his eyes have adapted to darkness. Second, the other parent who might be sleeping in the same room is less likely to be woken up (if sound levels have not already done the damage). And third, the baby doesn’t get distracted when feeding by the light shining upwards on his parent’s face (there’s potential for life long trauma here, now that I think of it) and the ceiling.

How does this work? iOS constantly adjusts the screen brightness based on the ambient light the device senses. We piggyback on this feature to trigger the switch to Night mode when the screen brightness drops below an empirically defined threshold.

Initially, the app offered 6 color themes, and one night theme. The introduction of Dark Mode with iOS 13, one year after the release of our v1.0, could have led us to drop the Night Mode, and offer a darker interface as a Dark Mode variation for each theme. But uses are not quite the same. Dark Mode can be activated automatically in the late hours of the day, but also all day long for aesthetic preferences: for these situations, it was necessary to guarantee the readability of the interface in a bright context when in Dark Mode. This required the use of contrasts that increased light emission overall, which does not fulfil the promise of our Night Mode. The solution was more work, and providing for each theme a Night Mode, a Dark Mode and a Light Mode variation.

While we were at it, I took the opportunity to further reduce the amount of light emitted by the Night Mode. This is one of the aspects of the app that I really encourage you to try for yourself by manipulating the screen brightness in a pitch dark room, as the representations made here can’t reflect its real life effectiveness. Compare how much light is emitted from the screen in Dark Mode in Mail or Notes to Le Baby with Night Mode.

Visual continuity

Navigating from one screen to the other happens with animated visual transitions. They make of Le Baby a coherent, responsive and organic whole, with screens seemingly articulated with each others. As the journey through the app is visually continuous, it’s easier for users to build a mental image of its landscape, which increases their comfort of use. These transitions play the role that a binding can have for a printed document: it makes a series of loose sheets into a finished, ordered and articulated object.

If you don't have the possibility to try the app for yourself, here is a 2 minutes walkthrough video (with sound) that will give you a better feel of how the different screens relate to each other through these transitions:

In interior design, to subtly convey that two distinct spaces are part of the same whole, one or more similar attributes are applied to them; this can be a ceiling height, wall or floor material, a color palette, the nature and/or arrangement of accessories, a lighting quality, a sound ambiance,… By passing from one space to another, even through a closed door, we understand that two spaces that were unknown to us are linked. Without these similarities, we would interpret this crossing as a frontier, like that of the hall of a building to a store.

The graphic style guide of an app is a tool that, beyond its role for visual identity, brings together a series of screens in a coherent whole. As important as it is, it remains a static method inherited from printing that does not take advantage of the time dimension of digital interfaces to produce meaning. The behaviour that can be given to certain elements such as buttons or content blocks uses this third dimension to express unity: buttons can have the same way to bounce when tapped, content can be appearing in a certain way. But this expression is limited to the contours of a single screen, and moving from one space to another often offers the same visual experience as switching from one TV channel to the next with a remote. Sure, it’s responsive and immediate, but a little terse.

At the system level, iOS performs an animated transition between an application’s icon and its interface at launch, and vice versa when you close it. This helps to better perceive where you are coming from, and where you are going next. At the app level, Photos does the same when you switch from film roll to a shot. Navigating the Settings and Mail apps uses transitions of opacity, position and scale operated between the start and destination screens. But this is still a very light approach compared to the continuity cues we pay attention to when browsing physical spaces. There is a reason for this: it is much more difficult to implement than fitting a carpet on the floor or hanging a fixture on the wall.

Working with Amadour Griffais was instrumental in making screens transitions a reality in Le Baby. It takes more than technical ability to apply them through the whole app. You also need a good dose of patience, method, and above all a real sensitivity to this subject. You have to be convinced of the importance of these transitions in the experience of an app in order to mobilise your know-how and to spend your time working on them. For my part, beyond having the desire to see these screens evolve in this way, I only spent some time in Keynote to sketch them with Magic Move transitions. In retrospect, it’s almost certain that these ideas would have remained mock-ups and Le Baby would never have seen the light of day if I hadn’t crossed paths with Amadour in my career.

It’s a fact that few designers talk about, at least in what I read: without an engineer capable of building what is sketched, of setting up the technical conditions so that it can be executed, the mockups we work on are just letters to Santa Claus, however polished they may be. Without clean, structured data, it’s impossible to present the right information at the right moment, or to address the user in a relevant way. Without a developer who is sensitive to the appearance and behaviour of an interface, and who has a minimum of graphic culture, it is complicated - and costly in terms of time and nerves - to move forward with a project at the speed required by user expectations. Without time for the developer with these sensibilities to deal with these aspects, it is not possible to implement them properly.

Here are some examples of these slow-motion transitions. Nothing very complicated visually speaking, but the iOS developers among you will probably have a different opinion (everything is in Objective-C).

Beyond the meaning and comfort they bring to the app, these transitions make the kinematics of how the entries land in the journal really pleasing. When a new entry is saved, the value element on top of the screen hovers into the journal which fades in, and where room has been made for it. There is no traveling back from an input modal to a list enriched with an item that has appeared on the sly, as is usually the case (in the iOS Calendar app for example). There is a progression towards the journal where we witness the value of the new entry being added. During the first minutes of use, this mechanic informs the ante-chronological organisation of the journal.

Another example where visual continuity is put to use: the breastfeeding timer. For those who are not familiar with the topic, breastfeeding mothers need to remember which breast the baby spent the most time on at the last feeding - it is important to alternate to keep the milk supply going. They also may want to keep track of the total time spent nursing to ensure that the baby is getting enough to eat.

The transitions are enhancing the visual feedback telling which side is being recorded by moving it to the center of the screen. Just as the baby moves from one breast to another, the timer shifts its buttons position as it operates.

Aesthetic functions

Up to now, explanations about how Le Baby’s interface design process were about objective and tangible topics. But its perception and use are also informed by its aesthetic attributes, and the emotions they initiate.

To have on one side the “logical” choices and on the other the “emotional” ones, or even to give more importance to one than to the other, does not make sense since both influence each other when we experience a product, whether we want it or not. It’s important to consider both at the same time when building a new product. I’ll let you extrapolate on what I can think of the distinction that has been imposed on us for years between two so-called distinct design practices that start with a U and end with an X or an I.

Visual attributes of an interface trigger emotions, sometimes subtle, which make users associate the product with a cultural universe or a passed experience they had. This happens whether designers anticipate it or not. I’m not saying they’re able to prescribe the entirety of what users will feel when using a product, this is nonsense. But by making deliberate and informed formal choices, it is possible to anticipate associations with cultural universes, to prevent association with those to avoid. All the specifications detailed so far for Le Baby could be shaped in a nineties, cyberpunk or baroque app. With more nuance, it would be possible to give a traditional, childish, medical, technical, or kawaii character to this practical baby tracking application. But it’s not what was done. The intentions for Le Baby were to express softness, simplicity and harmony.

Softness

In babies land, roughness doesn’t sell. Anything that touches a baby has to be soft, and it would be risky for this app to avoid this rule. Parents face enough friction on a daily basis to be spared of them when possible. So it was important that the app expresses as much calm and serenity as possible, for parents to get a little glimpse of it from time to time.

In the interface, softness is expressed with the choice of pastel colors, with the icons organic shapes, with the animations settings, and by the visual treatment of graphs.

Simplicity

This is one of the guidelines of the project, and the functional promise of the app; it seemed appropriate to reflect it visually.

The scarcity of elements on the screen is already doing a lot of work to convey the idea of simplicity. It’s reinforced by using geometric lines in the functional objects of the app: buttons, containers, cursors and administrative icons (cancel, ok,…) are drawn using circles and rounded rectangles, with as few interruptions and sharp corners as possible.

The font used in an app has a major influence on the emotional perception of it. When the project started in 2014, I had selected Avenir as the font for the interface. Its clear, modern and generous design corresponded well to what I wanted to convey. And being one of the fonts installed by default in iOS, with six variants, it allowed a nice leeway in graphic expression, without the weight of the app having to suffer for it.

When we resumed working on the project in 2018, San Francisco had replaced Helvetica Neue as the default iOS font. At the time, it was the only native font that offered the ability to inexpensively adjust an app’s text size based on system settings. It was close enough to Avenir in terms of aesthetics that we gladly went with it. Neither of these two fonts are in my opinion the ideal one for Le Baby, but they’re the closest. Font choice is an area of interface design demonstrating that we really have a relative control over the incarnation of an aesthetic intent. Knowing how to compromise is, again, key to move forward and build.

Harmony

As already mentioned, young parents’ daily life is upside down in the first few weeks. Le Baby helps them get a clearer picture of the day’s course, by presenting an orderly reflection of what has happened. Events are explicit, distinct from each other, and stated in their chronology.

This space of reference where balance and harmony are sought for would be less convincing if these notions were not visually perceptible. The axially symmetrical composition of most of the screens helps to evoke this feeling. As for the colors, only two tints are used in the screens: the main one for almost all the colors, and another for the accent. Using this limited palette, which is largely pastel, helps to make Le Baby a calm and balanced space.

Appropriation

I’ll add one last point before concluding this part dedicated to visual choices. Very early in the project we offered users the possibility to choose the color theme of the app. A choice (limited, of course) that let the users express their personal preference when setting their baby’s profile. The theme presented by default when installing the app has this color that is often called “nude”, as relative this notion can be.

It is a shade often used by services or products related to pregnancy, maternity and early childhood. So it seemed like a good starting point. Personally, I’m not a big fan, which is probably why I thought of offering a few variations.

All screens are composed with nine colors: black, white, main, light, dark, darker, very dark, and accent. An exercise of constraint that with time I ended up regretting because it greatly limits possibilities when I work on new themes. Some references are used in solid colors and for texts, which makes it very complicated to propose themes that are more dynamic and more contrasted than those available today. The number of these references and the elements to which they are associated means that we can’t really do anything other than pastel themes. Lesson learned, I always give new interface projects a large palette of variations to choose from.

The existence of these themes allows parents of twins and triplets to differentiate them immediately upon launching the app, whether in day, dark or night mode.

What happens to all this data

Le Baby displays the data collected by parents in two places: in the journal and in the graphs. The journal provides an easy way to review what happened in the past hours. The graphs give them a synthetic view over a longer period. The data is stored either on the device, or on iCloud servers. It remains private, even while synchronising between multiple devices.

Privacy

It’s a notion that has no manifestation in the interface, but has an important imprint on the app’s list of features, and influences its use.

Amadour and I have long believed that privacy is as important in digital products as it is in our physical environment. From the beginning, we felt that we should never have access to the informations parents add to their baby’s journal. We wanted Le Baby to be like a paper notebook, where what’s written in it can’t be read by its manufacturer. By default, the data recorded by users is only stored on the user’s device. It will go elsewhere only if the user decides so. There are three ways for records to end up outside the app: a CSV export, the iCloud backup, and sharing the journal with one or more other iCloud accounts.

The reputation of apps today is such that despite the privacy protection arguments we added on the App Store description page and marketing website, we discovered that some users were suspicious of what happened to the informations they added to Le Baby. For example, some did not add their baby’s picture to the baby’s profile. We have not had any feedback regarding the text notes specifically, but it is likely that some users do not use them, or use them less than they could, anticipating that they might be read by us or other third parties. We may need to make it clearer in the app that this is a strictly private space where users have the freedom to add what they want.

Charts

Initially, I didn’t want Le Baby to have graphs, for two main reasons. First, I felt that they de-humanised the relationship between a parent and a baby, and would prevent parents to learn trusting their guts. Plotting a newborn’s habits like a marketing campaign results seemed to defeat the purpose of the app, which is to remind parents of what happened so they can calibrate their feelings and gain confidence in their observations. Second, I was concerned that some people might be tempted to rely on these graphs more than their feelings to make their decisions. Graphs visually imply a norm, an amount to be reached, a minimum and a maximum, whereas each baby has his own rhythm, and it is important for his well-being to respect it.

Amadour was much more enthusiastic about the idea: the information collected is in the app, parents made the effort to record it, why not present it to them in a more accessible way, and thus make it even more useful for parents? Almost all competing apps offered them, and some users emailed us asking for them. Amadour took the matter in his hands, and we had graphs. I made sure access was not at the forefront when launching the app, and that their rendering was the least scientific, accurate and cold as possible. Navigating between the entries and the graphs is a thing of beauty, as both timelines are synchronised. The journal sample will let you play with it if you want to.

Last year, we added the routine graphs that allow parents to view the evolution of their baby’s sleeping and feeding patterns. Little by little, nights are becoming less interrupted, and meals are slowly normalising. Here is an example taken from a real journal that a user who contacted us agreed to share:

There is also a weekly view which is here to provide an overview of a longer period within the width of an iPhone. These views were a bit of a design and data processing challenge, to say the least. First, the color theme constraint imposed the use of shape and transparency to differentiate entry types. Second, representing the average activity during a given hour of the day for an entry type forced us to make choices as to what was negligible and what had meaning. I’m not going to get into the fine details, but let’s say we have tried many recipes before the one currently in production.

These routine graphs make every journal tell a different story. Despite its analytical appearance, it is a representation of an experience that parents will undoubtedly look at with nostalgia in a few years. The risk that these graphs tempt some to feed their baby at a given frequency for a given quantity exists, and remains for me a problem to be solved. But for most parents, they offer a relevant insight into the first few weeks with a baby that is otherwise impossible to get. So in the end, I’m very glad we added them.

Journal sharing

When taking shifts to care for the baby in the early days, being up to date without having to disturb your significant other is really, really, really helpful. This is what journal synchronisation between devices allows. Initially absent from our roadmap, it quickly became a key issue for the future of the app. Our initial omission can be explained very simply: setting up data synchronisation is a major and long technical project. All solutions are a multi-faceted compromise between data protection, reliability, implementation effort, and maintenance effort. Announced in September 2021, iOS 15 brought a lot of new features to CloudKit which allowed us to offer a sync that is simple for users to set up, end-to-end encrypted, and gives us the luxury of not having to manage servers ourselves. The trade-off is that when things get glitchy, we have no way to work on a fix, as we just experienced with iOS 16.3 and it’s what turned ou to be a conflict resolution bug. The implementation was not turnkey though, and took a lot of efforts because documentation is not complete. But when it works, it’s like clockwork.

From an interface design point of view, sharing is quite transparent: only a small icon that sometimes appears on the right of the baby’s name, indicating that it is in progress, or has failed. This is a perfect example of those features where the number of hours of development is inversely proportional to the pixel footprint in the screen. It’s also an opportunity to remember that the design of a product goes well beyond its interface. The benefit for users was quickly and clearly expressed in the comments, especially for parents with twins.

Conclusion

As long as this article ended up being, there’s a lot more to comment on design decisions made for this project. The app is far from finished with many shortcomings still to cover, and this article may have a companion in the future. That said, if you’d like more details on a specific topic, don’t hesitate to get in touch and I will try my best to respond.

User feedback for Le Baby has been overall pretty good. On the App Store, its global rating is at 4.8 stars, and reviews are usually positive. Critics are mostly about what’s missing, rather than about a bad experience with the current features. Having users telling you they found good value in what they’ve been provided with is such a great reward.

Every project comes with lessons to learn from. Before starting Le Baby, I already knew that careful observation of the context can lead to new ideas and good solutions. There are many little practical things that I learned from this project, but here are the two main ones: accessibility can be a temporary issue for a user, and staying focused on a small set of strong initial principles is a good way to achieve meaningful work. I hope this article will have covered new ground for you, and that it was worth your time. The next article about Le Baby that I will publish here will be about its identity, followed by a presentation of the tools I use on this project.

1. In the last 30 days, usage statistics we get from App Store Connect indicate 10 to 15 sessions (of at least 2 seconds) per day, averaging at 13.↩
2. The vast majority of users are from France for now, despite the app being translated and presented on the App Store, screenshots for 4 screen sizes included, in 9 languages. So most of the reviews Le Baby has are only visible to French AppleID owners.↩
3. Once the csv file opened, access the share sheet. It should list Le Baby as a compatible app for the file. Tap the icon, and you should be presented with an import confirmation screen within the app.↩

Le Baby - foundations

The design, building and marketing of an object are an endless series of questions.

How should we size this element? Is this the right font for the graphic identity? Can we find a better name for this feature to be instantly comprehensible? Is the price too high? You need to prioritize questions to answer, choose how much time you'll spend to find the best possible answer on each of them, and decide when it's time to move on.

The harmony between the chosen answers is as important for the product perception by its users as their individual relevance to each question asked.

To ensure a minimum of coherence between these decisions and to optimize the time spent on each of them, defining cardinal values for the project and having an objective look at its operational context are helpful guides and accelerators. For this first article of a series about publishing an application on the App Store, I thought it was important to start by listing the facts and principles guiding the decisions we - my colleague Amadour Griffais and I - make for Le Baby.

Ancillary activity

Baby is not our bread and butter, we work on it using the time we have left once we have earned our living. This is probably the most influential condition on the current shape of the app and the way we work on it.

Knowing our availability is limited, we have reduced to a minimum the number of channels through which this project can get our attention:

• email with each other and with users who contact us from the app or site,
• instant message for our discussions that cannot be asynchronous,
• a task management tool that can notify what needs to be done at a given time,
• and App Store Connect that notifies us when we receive comments in the App Store.

Our collaborative processes are also kept to a minimum: the most concise and infrequent written exchange possible, and occasional meetings to have richer and more subtle discussions. Our involvement in the project varies during the year, it is not constant: sometimes we make a special effort to respect a publication date, but this effort is always made on our free time.

The main influence of this situation on the product is that we pay a lot of attention to the long term stability of what we build. Whether it's the code, the writing of the app description, the preview video on the App Store, or the layout of the press kit, we try to make them modular objects that will only require a small amount of time to accommodate the next functional evolutions of the app.

Independence

We have witnessed in our respective professional experiences how financial pressure can sometimes take control of a product definition, leaving the user's benefit or the level of polish in the back seat when deciding what should be done at any given moment.

By choosing to build Le Baby with our own resources, and not to call on investors who would have allowed us to work faster, we made sure to keep control over the features the app offers and will offer, their build quality, and the pace at which they are released. Sure, we're moving slowly, and the return on investment is comical for now, but we believe that our current and future users benefit from the choices we've made for the sake of our independence.

For example, there are no trackers installed in the app to measure screen-by-screen usage. We inquire on what our users are doing with the app by talking to those who contact us, or by setting up face-to-face tests - parents with newborns are pretty easy to spot and go talk to, a definite advantage. An unquantified overview that would have been hard to defend to people who had invested money in our project. Perhaps we would have succeeded, but the time used to convince them would not have been put to work for the users.

Another choice we made to preserve our independence, which has already done us a huge favor, is not to use third-party code libraries. Some of them would have sped up the building of certain parts of the app, but Le Baby's compatibility with the new APIs offered by iOS each year would have been dictated by the libraries' compatibility. When we implemented journal sharing earlier this year, we were able to use the last CloudKit developments offered in iOS 15, which allow for encryption of transmitted data. If a critical third-party library had felt that stability on iOS 15 was not a priority for them, we would have had to wait for their update before rolling out this critical feature for parents.

Practical

The starting point of this project was the observation that taking notes of a baby's feeding and sleeping habits on a notebook or with existing apps was not very practical. By education or professional distortion, our natural tendency is to run away from everything that is not practical and to look for more obvious alternatives. A very particular attention is therefore naturally paid to the app screens, but also to everything that generates friction in the various project facets (tooling, writing, image production, work files organization).

One choice that influenced the shape of the Le Baby object and was dictated by the search for practicality is the use of the San Francisco font for the app's screens. I had originally selected Avenir Sans to compose the first mockups, but San Francisco ensured that the screens would better fit the scaling managed by iOS. Another example where friction hunting is a permanent concern and has a direct formal influence: the composition of documents intended for the press, emails, press releases, press kits or web page. The recipients attention for these materials can be counted in mere seconds, so ensuring that the message gets through like butter on a hot pan is very important if you hope to be quoted in a press article one day. For Le Baby, this is especially important because we do not intend to use targeted advertising to reach our potential users, for reasons discussed below. We are building the best possible product for parents with newborns, so that their satisfaction can translate into word-of-mouth, and be perceived by the press as a newsworthy topic for their audience.

Digital privacy

We have long been convinced that respecting the privacy of digital products users is important. In building and promoting Le Baby, we have remained true to this principle, even if this has resulted in slower commercial growth. It's more important to us that the users know the information they add to the app never leaves it unless they actively decide so, than to earn more money quickly. This respect for our users privacy has an influence on the construction of the app, its economic model and its marketing.

On the building side, we have made sure that by default, the data remains on device, and that it only comes out following an explicit action from the user, each time. It is possible to export the recorded data as a csv file at any moment, and since last April to synchronize it with partners and family. This sharing feature is based on CloudKit, which allowed us to use the highest data protection offered by Apple, and to ensure that only participants can access the information they add (written notes can be intimate) as it remains within their iCloud account. Setting this up is also easier as there's no need to create a “Le Baby” account with email+password. One extremely positive aspect from an operational point of view is that we don't have to manage the servers used for the data exchange. On the downside, when the servers are not working properly, we have no visibility on the restoration timeline, which affects the quality of our customer support.

Adding ad banners to the application would have allowed us to increase the income faster. But users would have lost in comfort because of the screen real estate loss, they would have encountered the occasional mistap making you leave the app, our night mode would not have been as effective as it is today (a banner ad with a light background alone can light up a dark room and disturb the eating baby), and the experience would have simply been less friendly and memorable. We heard from one parent who was thrilled to be using Le Baby again for his second child - not sure if the pleasure of returning would have been the same with banner ads.

In the same vein, no tracker of any sort is installed in the app, and we don't collect any data to resell it to third parties, as some of our competitors do (the Privacy page of the Glow app is quite explicit about it, when you take the time to read it).

For now, we don't have an advertising budget, but we hope that it will come soon. When we'll start our campaigns, we'll choose ad services that do not rely on collecting personal data and building profiles for their operation. It would be dishonest to have a critical point of view on Facebook/Meta, and at the same time giving them money to increase our app's visibility. Disclaimer: we do have an Instagram account, as it seemed sensible to have a presence there two years ago.

Made on site

The last point that guides our modus operandi is that we favor custom-made components when we are able to make them correctly, rather than getting existing but less fitting ones elsewhere to save time.

What we build ourselves will always be more accurate to our original intention. Also, as you will have understood by now, we prefer giving ourselves the time to do things right rather than to rush messy things that always end up to slow you down.

When we started working together on Le Baby, the goal was to use this project as a showcase for our respective know-how. The desire to make it a commercial success came later, when we saw that users found real value in using it. But the showcase aspect is still there, and still plays into our decisions.

It obviously takes more time, but the pleasure is there and we are rarely ashamed of the result. On my side, it allowed me to practice writing, staged photography, illustration, and to improve my judgment if not my technique in these areas.

❧

If you have read this far, you have now a good idea of the framework in which the project operates. The next article will get to the heart of the matter by looking at the interface attributes of Le Baby.