Design d'application de fitness : refonte d'un écran d'accueil, avant et après
Un écran d'accueil d'appli de fitness version junior, avec quatre tuiles de stats, une photo d'entraînement chargée et un graphique sans rien à lire, puis le même écran corrigé. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
L'écran d'accueil d'une appli de fitness a un seul travail : dire à quelqu'un comment se passe sa journée et lui offrir une façon claire de démarrer. Le premier jet ci-dessous contient tous les bons chiffres, mais il les livre dans quatre tuiles serrées, avec du texte blanc sur une photo chargée et un graphique sans rien à lire. La correction garde toutes les fonctionnalités et change la quantité d'effort que chaque partie demande à l'œil.
L'écran entier, avant et après
Premier jet junior
Corrigé
À gauche, l'œil rencontre un en-tête de quatre éléments, puis quatre tuiles en quatre couleurs, puis une photo, deux boutons et un cœur, un graphique, et une seconde rangée d'entraînements coupée par la barre d'onglets. À droite, il y a trois cartes et un en-tête : comment se passe la journée, quoi faire maintenant, à quoi ressemble la semaine.
Rien n'a été retiré de la liste des fonctionnalités qui manquerait à quelqu'un. Pas, calories, eau, rythme cardiaque, entraînement du jour et activité de la semaine sont tous toujours là. Ils sont simplement regroupés dans des formes moins nombreuses et plus grandes.
| Premier jet junior | Corrigé | |
|---|---|---|
| Contrôles de l'en-tête | 3 icônes et un avatar | 1 bouton |
| Chiffres du jour | 4 tuiles en 4 couleurs | 1 carte, 3 anneaux et une pastille de rythme cardiaque |
| Boutons sur la carte d'entraînement | 2 boutons et un cœur | 1 bouton play |
| Graphique hebdomadaire | 7 barres orange, aucun chiffre | Le total, la tendance, aujourd'hui en orange |
| Onglets | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Tailles de texte | 8 à 16 px | 11 à 28 pt |
Correction 1 : une carte d'anneaux au lieu de quatre tuiles
Avant
Après
Quatre tuiles pastel, chacune avec une icône, un chiffre, un libellé et une fine barre, face à une carte avec trois anneaux, la cible sous chaque libellé et le rythme cardiaque en petite pastille.
Chaque tuile du premier jet annonce un chiffre et dessine une fine barre, mais pas par rapport à quoi la barre mesure. 8 432 pas, est-ce bien ou pas ? Le lecteur doit deviner l'objectif d'après la longueur de la barre, et les barres sont fines.
Les anneaux mettent l'objectif en mots (« sur 10 000 », « sur 600 kcal », « sur 2 L ») et en forme : un anneau est plein ou il ne l'est pas. Un coup d'œil répond à « suis-je dans les temps aujourd'hui ? ». Le rythme cardiaque est une mesure, pas un objectif, donc il n'a pas d'anneau. Il descend dans une pastille dans le coin, ce qui signale que c'est un autre type de chiffre.
La règle à réutiliser : si un chiffre a une cible, montrez la cible. S'il n'en a pas, ne le déguisez pas en progression.
Correction 2 : un bouton play, un voile derrière les mots
Avant
Après
Un titre de section, un badge NEW, du texte blanc de 9 px sur la photo et trois contrôles dessous, face à une photo étiquetée, un texte plus grand sur un voile et un seul bouton play.
Le texte blanc sur une photo n'est lisible que là où la photo est sombre par hasard. Dans le premier jet, la ligne de détails traverse la partie la plus claire de l'image, un sol de salle et un t-shirt gris, et à 9 px elle disparaît. La correction pose sur la photo un voile noir qui atteint 72 % au bord inférieur, exactement là où se trouvent les mots, et les agrandit.
Le premier jet pose aussi une question avant que la personne puisse agir : Commencer, ou Détails, ou l'enregistrer avec le cœur ? Il n'y a qu'une chose à faire avec l'entraînement du jour : le démarrer. Un seul bouton play rond le dit sans un mot. Les détails sont à un tap quand quelqu'un les veut, mais ils ne rivalisent plus avec l'action principale.
Le badge « NEW » et le titre de section « Entraînement du jour » disaient presque la même chose deux fois. La correction garde un seul libellé, une pastille sur la photo.
Correction 3 : ouvrir le graphique par le total
Avant
Après
Sept barres orange égales avec un menu déroulant et une légende, face au total de la semaine en gros caractères, une pastille de tendance et une barre en orange plein.
Un graphique répond à une question, et celui du premier jet ne dit pas laquelle. Sept barres du même orange vif, aucune valeur et une légende pour la seule série : le lecteur doit décider seul ce qu'il doit en retenir. La correction répond d'abord en mots à la question probable : 4 h 12 min cette semaine, 18 % de plus que la semaine dernière.
Les barres sont maintenant du contexte, pas le message. Cinq sont d'une teinte pâle de la couleur de la marque, et aujourd'hui, samedi, est en orange plein, si bien que l'œil se pose sur l'endroit où la personne en est dans la semaine. Dimanche reste un petit moignon, donc la semaine se lit de gauche à droite jusqu'à aujourd'hui. Le menu « Cette semaine » et la légende « Minutes actives » ont disparu parce que le titre dit déjà les deux.
La règle à réutiliser : mettez en haut le chiffre que le graphique mettrait une minute à expliquer, et laissez les barres faire le reste.
Correction 4 : un seul bouton dans l'en-tête
Avant
Après
Un avatar, une salutation avec point d'exclamation, une seconde ligne avec deux de plus, et trois icônes, face à la date, une salutation et un seul bouton de notifications.
L'en-tête du premier jet contient sept éléments avant tout contenu : un avatar, deux lignes de salutation et trois icônes. L'avatar mène au compte de la personne, et l'appli a déjà un onglet Profil, donc la correction le retire de l'en-tête. Les icônes recherche et réglages partent avec lui, ce qui laisse de la place à la salutation.
La correction garde la seule chose qui mérite le coin supérieur : les notifications, avec un point quand il y a du nouveau. La salutation devient la date et un prénom en gros caractères, ce qui dit au lecteur à quel jour appartiennent les chiffres du jour, sans point d'exclamation.
Les petites corrections
- Quatre onglets, pas cinq. Accueil, Entraînements, Progression et Profil. Stats et Communauté ont cédé la place à un seul onglet Progression.
- Une seule marge. Le premier jet utilisait 14 px à gauche et 12 px à droite, donc les cartes semblaient légèrement décentrées. La correction utilise 20 px des deux côtés et 16 px entre les cartes.
- Une couleur pour l'action. Le premier jet utilisait des tuiles pêche, jaune, rose et bleu plus de l'orange. La correction utilise l'orange pour l'action et garde l'ambre et le bleu uniquement sur deux anneaux, où ils servent à les distinguer.
- Une vraie échelle typographique. Le texte est passé de 8 à 16 px aux tailles de texte iOS de 11 à 28 pt, donc rien à l'écran n'est plus petit que la plus petite légende du système.
- Pas de rangée Recommandés. La seconde rangée de photos du premier jet était coupée par la barre d'onglets. La correction termine l'écran d'accueil après le graphique.
- Une salutation plus calme. « Écrasons les objectifs du jour !! » est devenu la date au-dessus du prénom.
Auditez votre propre appli de fitness
| Question | Pourquoi c'est important |
|---|---|
| Chaque chiffre de progression montre-t-il son objectif ? | Un chiffre sans cible n'est pas une progression |
| Y a-t-il une seule action claire sur la carte d'entraînement ? | Deux boutons et un cœur demandent une décision |
| Du texte est-il posé directement sur une photo ? | La lisibilité ne doit pas dépendre de la photo |
| Le graphique dit-il son point en mots d'abord ? | Des barres sans valeurs laissent le lecteur deviner |
| L'en-tête double-t-il un onglet ? | Deux portes pour une pièce ajoutent du bruit |
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 fitness, 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 en premier l'écran d'accueil d'une appli de fitness ?
Comment se passe la journée : pas, calories et eau face à leurs objectifs, dans une seule carte. Placez l'entraînement du jour juste en dessous avec une façon claire de démarrer.
Les anneaux de progression sont-ils meilleurs que les barres de progression dans une appli de fitness ?
Pour quelques objectifs quotidiens, oui. Un anneau se lit d'un coup d'œil, montre plein ou pas plein sans échelle, et accueille un chiffre en son centre. Gardez le rythme cardiaque hors des anneaux, car c'est une mesure et il n'a pas d'objectif à remplir.
Comment rendre lisible du texte blanc sur une photo d'entraînement ?
Mettez un voile sombre derrière les mots, plus fort là où se trouve le texte, et réglez le texte à une taille lisible. Ne comptez pas sur le fait que la photo soit sombre au bon endroit.
Comment concevoir un graphique d'activité de fitness ?
Ouvrez par le total et la tendance en mots, puis montrez les barres dans une teinte douce avec le jour en cours dans la couleur de la marque. Supprimez les légendes et menus déroulants que le titre couvre déjà.
Combien d'onglets une appli de fitness doit-elle avoir ?
Quatre ou cinq. Fusionnez les onglets qui contiennent des chiffres liés, comme Stats et Communauté, en un seul endroit comme Progression.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma.
- Photos via Pexels par pessoas uem, Julia Larson, Tima Miroshnichenko et Vitaly Gariev.
- Apple Human Interface Guidelines: Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- 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
