Design d'application de méditation : refonte d'un écran d'accueil, avant et après
Un écran d'accueil d'appli de méditation signé d'un junior, avec cinq couleurs d'humeur, des mots blancs sur une photo pâle et un paragraphe pour la progression, puis le même écran corrigé. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
Une application de méditation n'a qu'une promesse : l'écran vous rend plus calme qu'à votre arrivée. Le premier jet ci-dessous le veut bien, puis se tire une balle dans le pied avec neuf couleurs, des mots blancs sur une photo pâle et un paragraphe là où devraient se trouver des chiffres. La correction garde toutes les fonctionnalités et baisse le volume.
L'écran entier, avant et après
Brouillon de junior
Corrigé
L'écran de gauche est sympathique et bruyant. Celui de droite est le même produit à un volume plus bas, et ce volume plus bas est la fonctionnalité.
Compte ce que l'œil doit trier de chaque côté. Le brouillon montre cinq couleurs d'humeur et quatre couleurs de tuiles, plus un encadré pêche et une photo avec du texte dessus, avant même qu'on lise un mot. L'écran corrigé a un seul vert sauge de marque, #4F7A5A, et une flamme pêche, #E0784A, réservée à la seule chose qui signifie la série.
| Brouillon de junior | Corrigé | |
|---|---|---|
| Couleurs dans le suivi d'humeur | 5 | 1, plus du gris |
| Couleurs dans les tuiles recommandées | 4 | 0, des photos à la place |
| Texte sur une photo | titre et 4 tags | aucun |
| Progression | une phrase | 3 chiffres |
| Onglets | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Tailles de texte | 8 à 18 px | 11 à 28 pt |
Correction 1 : poser la question d'humeur une fois, dans une seule couleur
Avant
Après
Cinq cercles colorés avec un mot sous chacun, face à une question, cinq visages discrets et une réponse choisie.
Un suivi d'humeur est une question à cinq réponses. Dans le brouillon, chaque réponse a sa propre couleur : avant même que l'utilisateur ait choisi quoi que ce soit, la rangée a déjà l'air répondue, et rien n'indique ce qui est sélectionné. La couleur fait un travail de décoration, pas d'information.
La correction dessine les cinq visages dans le même gris et ne remplit que celui qui a été choisi, en vert de marque, avec son mot dans une pastille à côté de la question : « Calme ». Désormais la couleur ne veut dire qu'une chose : c'est l'état actuel. Les mots sous les visages ont disparu de la rangée parce que la pastille donne le mot du visage choisi, une seule fois.
Le principe vaut pour toute appli avec une note ou un choix : si chaque option est colorée, la couleur n'apprend rien à l'utilisateur. Gardez les options neutres et dépensez l'accent sur la sélection.
Correction 2 : la photo au-dessus, les mots en dessous
Avant
Après
Des mots blancs et quatre minuscules tags sur une photo de plage pâle, face à une photo avec le titre, la durée et un bouton lecture dessous.
Le brouillon pose un titre blanc de 17 px et quatre tags de 8 px directement sur du sable et de la mer lumineux. Le blanc sur une photo pâle est le pire duo possible, et les tags sont le plus petit texte de l'écran au moment précis où l'utilisateur décide quoi lancer. Un texte posé sur une photo change aussi avec chaque photo : le jour où arrive une image plus sombre, la mise en page se lit autrement.
La correction déplace tous les mots sur la carte, sous la photo, en texte sombre sur une surface unie. La photo n'est plus qu'une photo. Quatre tags se réduisent à une ligne de méta, « Daily Calm, 10 min, Sleep », et la pilule Play du coin devient un bouton rond au bout de la ligne, là où se trouve déjà un pouce. La même séance a maintenant un titre, une durée et une action.
La règle à réutiliser : si les mots comptent, donnez-leur leur propre surface. Mettre du texte sur une photo, c'est accepter que certaines photos le cassent.
Correction 3 : deux cartes photo à la place de quatre tuiles colorées
Avant
Après
Quatre tuiles pastel avec une icône chacune, face à deux cartes photo qui montrent l'effet que fait la séance.
Les tuiles ne ressemblent à rien. Une boîte violette avec une lune dit « sommeil » de la même façon plate qu'une boîte bleue avec des poumons dit « respirer », et les quatre couleurs coûtent à l'écran son calme. Les photos montrent la chose : un ciel nocturne pour une séance de sommeil, un lac brumeux pour une séance du matin. Dans une appli de méditation, l'image fait partie du produit, car elle installe l'ambiance avant l'audio.
La rangée corrigée montre deux cartes, et chacune porte son nom, sa durée et sa catégorie sur deux lignes. Deux cartes laissent à chaque photo assez de largeur pour être lue. Les tuiles Breathe et Focus Music ne sont plus sur cet écran, et la section passe de « Recommended For You » à « Pour vous », puisqu'une liste sur un écran d'accueil est déjà pour vous.
Correction 4 : trois chiffres à la place d'un paragraphe
Avant
Après
Une phrase où les trois mêmes faits sont enfouis, face aux trois faits en chiffres avec leurs libellés.
Les deux versions disent la même chose : sept jours d'affilée, deux heures trente-cinq au total, vingt-trois séances. Le brouillon les entasse dans une seule phrase avec deux points d'exclamation et un « jusqu'ici, génial ! ». Il faut lire toute la phrase pour trouver le chiffre qu'on cherchait, et un chiffre ne se compare pas d'un coup d'œil quand il vit dans une proposition.
La correction donne à chaque fait sa propre colonne : un gros chiffre et un petit libellé. La flamme, en pêche, se tient à côté de la série parce que la série est le chiffre qui fait revenir demain. Désormais l'utilisateur consulte sa progression le temps d'un regard.
Les petites corrections
- Quatre onglets, pas cinq. Aujourd'hui, Explorer, Sommeil et Profil remplacent Home, Sleep, Meditate, Music et Profile. Méditer et Musique n'ont plus d'onglet à eux.
- Une seule marge. Le brouillon utilisait 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés et 14 px entre les cartes.
- Un message de bienvenue plus propre. « How are you feeling today??? » a disparu de l'en-tête, parce que la carte d'humeur la pose, une fois, avec un seul point d'interrogation.
- Une seule action dans l'en-tête. La cloche reste et gagne une petite pastille. L'avatar a quitté l'en-tête, et Profil reste un onglet.
- Une vraie échelle typographique. Le texte est passé de 8 à 18 px aux tailles iOS de 11 à 28 pt, pour que le plus petit texte soit lisible et que le titre soit clairement un titre.
- Des liens de section discrets. « View all > » est devenu « Voir tout », les mêmes mots sur chaque section.
Auditez votre propre appli de bien-être
| Question | Pourquoi c'est important |
|---|---|
| Chaque option d'un choix a-t-elle sa propre couleur ? | Si toutes sont colorées, aucune ne dit « sélectionnée » |
| Du texte est-il posé sur une photo ? | La prochaine photo peut le casser |
| Une série ou un total se lit-il d'un coup d'œil ? | Les chiffres cachés dans des phrases sont ignorés |
| Les cartes de séance montrent-elles l'effet de la séance ? | Le calme se vend avec des images |
| Y a-t-il plus d'une couleur d'accent ? | Chaque couleur en plus est une chose de plus à décoder |
| Deux onglets mènent-ils au même endroit ? | Les portes en double cachent la structure |
Récupérez le fichier Figma
Le fichier gratuit contient les deux écrans en composants, chaque correction en paire avant et après, les variables de couleur et les styles de texte iOS.
Fichier Figma gratuit
Écran d'accueil d'appli de méditation, avant et après
Les deux écrans et chaque partie corrigée en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit montrer l'écran d'accueil d'une appli de méditation ?
Un message de bienvenue, une question d'humeur, la séance du jour en une seule carte photo avec un bouton lecture, une courte rangée de suggestions et la progression de l'utilisateur. Tout le reste peut attendre à un tap de distance.
À quoi doit ressembler un suivi d'humeur dans une appli ?
Cinq options égales et discrètes avec une question au-dessus. Ne colorez que l'option choisie par l'utilisateur et dites son mot une seule fois. Si chaque visage a sa propre couleur, rien n'indique à l'utilisateur ce qui est sélectionné.
Peut-on mettre du texte sur une photo dans une appli ?
Seulement quand le texte repose sur une zone maîtrisée, comme un voile sombre, et respecte le contraste minimum. Sur une photo lumineuse et changeante, mettez plutôt les mots sur une surface unie sous l'image.
Comment montrer les séries et la progression dans une appli de bien-être ?
Par quelques chiffres avec des libellés, comme jours de suite, temps total et séances. Une série mérite un petit accent, comme une flamme. Une phrase d'encouragement ne remplace pas le chiffre.
Combien d'onglets une appli de méditation doit-elle avoir ?
Quatre ou cinq. Si deux onglets mènent à la même bibliothèque, fusionnez-les. L'écran corrigé est passé de cinq onglets à quatre.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'utilisateur, les séances et les chiffres sont inventés pour l'exercice.
- Photos via Pexels par Татьяна Танатова, olia danilevich, Felipe Barboza et Jean-Daniel Francoeur.
- Apple Human Interface Guidelines: Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), pour le texte sur les images et les fonds.
- D'abord publié sous forme de carrousel sur App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
