Conception d’app d’onboarding pleine conscience

Parcours d’onboarding Lull

Le parcours d’onboarding de Lull est un exemple officiel OpenDesign rédigé par OpenDesign. Sa source décrit trois écrans avec un seul ton : un fond chaleureux, des titres en serif et un unique accent. La conception est présentée comme une séquence d’app mobile, et non comme un service de compte ou de méditation abouti.

Le premier écran s’ouvre sur « Quiet beats noise. » Son texte d’appui présente la pratique comme « Twelve minutes a day » et « a practice that fits in a coffee break », puis rejette explicitement les « streaks » et les « badges ». Cet appariement rend la promesse du produit lisible avant de demander à la personne de créer un compte.

Le traitement visuel renforce cette même retenue. Une composition circulaire chaleureuse domine le premier écran ; une carte de pratique au trait avec une coche dans un cercle orange domine le second. Les deux utilisent la même zone d’illustration au-dessus de titres en serif et d’un court texte. L’espace généreux laisse au message le temps de s’imprimer, mais laisse moins de place à des textes plus longs ou à des contrôles supplémentaires.

Une première impression apaisante

Le premier écran associe un grand cercle aux tons orange, un petit cercle pâle et une base courbe basse au titre en serif sombre. L’illustration n’est pas un affichage de données ; elle installe une atmosphère avant que le texte n’explique la routine. Un designer qui adapterait ce motif devrait préserver l’équilibre image-texte ou accepter une première zone visible plus dense.

Cas d’usage du parcours

Cette séquence convient à une app de pleine conscience qui veut expliquer sa pratique quotidienne avant de proposer des choix de connexion. L’ordre est délibéré : l’utilisateur voit d’abord un énoncé de bénéfice apaisant, puis une description de l’adaptation, et seulement ensuite l’écran de création de compte. Cela réduit le risque que les contrôles d’authentification soient la première chose que le produit communique.

Le texte répond aussi à une vraie tension d’onboarding : une routine doit sembler réalisable sans promesse de performance infondée. « Shorter on busy days, deeper on quiet ones » explique l’adaptation prévue en langage simple. Il communique de la souplesse, mais la conception n’établit pas comment les séances changeraient ni si ce comportement est implémenté.

Ce parcours sert autant à étudier la hiérarchie du contenu que le style de l’interface. Les deux premiers écrans utilisent « Skip » en haut à droite et « Continue » en bas, tandis que l’écran final remplace l’action auxiliaire par « Help ». Ces libellés distinguent la progression de l’assistance, même si les captures n’établissent pas ce que fait chaque contrôle à l’exécution.

De l’introduction apaisante à la création de compte

Les trois écrans de téléphone forment un récit compact à la structure répétée. Les deux premiers conservent la même zone d’état supérieure, le contrôle « Skip », la zone d’illustration, le titre, le texte, les indicateurs de progression et le bouton « Continue » en bas. La répétition rend la transition entre états introductifs facile à reconnaître, mais elle fait aussi paraître la mise en page différente du troisième écran comme un vrai changement d’état.

Sur le premier écran, la marque de progression active est la pastille orange de gauche. Sur le deuxième, elle passe au milieu. Le troisième écran utilise la pastille orange de droite et remplace l’illustration et l’action du bas par trois options de compte. Les repères visibles indiquent donc la position dans la séquence, tandis que le contenu changeant signale que l’onboarding est passé de l’explication à l’engagement.

L’écran final commence par « Make a place for it. » et la ligne « Save your sessions across devices. We don’t email, we don’t share. » Il présente ensuite trois grandes lignes à bordure : « Continue with Apple », « Continue with Google » et « Continue with email ». Leur traitement homogène facilite la comparaison, tandis que les icônes circulaires distinctes donnent un repère visuel rapide pour chaque fournisseur.

En bas, la mention de consentement affiche « Terms » et « Privacy Policy » dans la couleur d’accent. La source indique que ces liens sont des éléments provisoires ; l’écran montre donc l’emplacement prévu des mentions légales plutôt qu’une navigation aboutie. La conception montre aussi le compromis qu’implique de placer le texte juridique sous les options : il reste hors de la zone de décision principale, mais il est visuellement séparé des contrôles qu’il qualifie.

Structure répétée, état modifié

Les premier et deuxième écrans sont des états presque parallèles, mais leurs illustrations diffèrent. Le premier utilise une composition circulaire chaleureuse ; le second un panneau encadré avec de courtes lignes, un contrôle orange et une coche. Cela conserve la même densité visuelle tout en donnant à chaque promesse son propre symbole. Le troisième écran supprime entièrement cette couche d’illustration pour faire place aux choix d’authentification et au texte de consentement.

Conception visible et limites des capacités

Les captures établissent un concept visuel d’onboarding avec trois états de téléphone distincts, un texte précis, des contrôles, des libellés de fournisseurs, des marques de progression et l’emplacement des mentions légales. Elles n’établissent ni comptes authentifiés, ni stockage de séances entre appareils, ni logique de séance adaptative, ni navigation aboutie vers Terms ou Privacy, ni parcours d’onboarding fonctionnel. Les phrases sur la sauvegarde des séances et la non-diffusion des informations sont du texte produit montré dans la conception, non un comportement de service vérifié.

Une nouvelle implémentation aurait besoin de son propre comportement d’authentification, de stockage des séances, de pratique adaptative et de consentement. Dans cette source, Skip et Help sont des éléments span de texte, Continue et les lignes de compte sont des div stylisés, et Terms et Privacy Policy sont des ancres sans destination. La séquence représente ces décisions sans les rendre opérables.

Ce que l’exemple enseigne

La leçon la plus transférable est la relation entre l’ordre des messages et l’engagement : expliquer la pratique, expliquer sa souplesse prévue, puis demander un compte. Le texte spécifique de Lull, ses illustrations et son langage de confidentialité appartiennent à cet exemple. Un nouveau produit aurait besoin de ses propres affirmations, règles d’adaptation et destinations de consentement plutôt que de les copier comme des faits établis.