Design d'appli de suivi de dépenses : refonte d'un tableau de bord budget, avant et après
Un tableau de bord budget avec un camembert à huit parts et un tableau à neuf points, puis le même écran corrigé : un seul chiffre d'abord, une barre plate, des lignes simples et le mois comme titre. Chaque changement côte à côte, avec le fichier Figma gratuit.
On ouvre une appli de budget pour savoir une seule chose : combien puis-je encore dépenser. Le premier brouillon ci-dessous raconte tout. Le chiffre se cache dans la dernière de quatre cases identiques, à 10 px, les dépenses sont un camembert à huit parts avec une légende à 8 px, et les transactions forment un tableau de cinq colonnes à 9 px.
La correction garde chaque fonction et change l'ordre. Le chiffre passe en premier et devient énorme, le camembert devient une barre plate, et le tableau devient quatre lignes simples qu'on peut lire.
L'écran entier, avant et après
Brouillon de junior
Corrigé
À gauche, rien ne mène la danse. Quatre cases, un camembert, un graphique en barres, une rangée de filtres et un tableau ont tous à peu près le même poids, et la réponse à l'unique question est un chiffre de 10 px dans la quatrième case. L'œil doit balayer tout l'écran pour la trouver.
À droite, l'écran répond dans l'ordre : combien il reste, où est parti le reste, que s'est-il passé récemment. Un seul chiffre est gros, tout le reste est du texte simple, et chaque élément n'a qu'un seul rôle de couleur.
Ce qui a changé, mesuré
| Brouillon de junior | Corrigé | |
|---|---|---|
| Fond | Quatre cases avec bordure, un bandeau gris d'en-tête de tableau | Blanc uni, pas de carte, pas de tuile, pas d'ombre |
| Marges | 14 à gauche, 12 à droite | 20 des deux côtés |
| Chiffre principal | 1 284 $ dans la quatrième case à 10 px | 1 284 $ en 48 gras, premier sur l'écran |
| Dépenses | Un camembert de 160 px, huit parts, légende à 8 px | Une barre empilée plate de 10 px de haut, une légende deux par deux |
| Budgets | Non affichés | Lignes simples, une barre de 4 px dessous |
| Transactions | Cinq colonnes à 9 px | Quatre lignes en 15 et 13 px, cercles à lettre de 36 px |
| Titre | Menu déroulant à côté du menu, de l'export et de la cloche | Le mois en 28 gras, logotype petit au-dessus |
| Onglets | Cinq, icônes pleines et contour mélangées, plus flottant | Quatre, barre plate de 78 px avec un filet |
Correction 1 : mettre en premier ce qu'il reste à dépenser
Avant
Après
Quatre petites cases égales en rangée : Revenus 4 200 $ en vert, Dépenses 1 916 $ en rouge, Épargne 1 000 $ en bleu et Solde 1 284 $ en noir, tout en 10 px, contre 1 284 $ en énorme gras avec reste sur 3 200 $ et 12 jours à venir en gris dessous.
Les quatre cases donnent à chaque chiffre la même taille, donc aucun n'est la réponse. L'utilisateur doit savoir que le Solde est celui qui compte, puis le lire à 10 px.
La correction en choisit un. 1 284 $ fait 48 px en gras, et la ligne dessous porte les deux faits qui lui donnent du sens : le budget dont il vient, 3 200 $, et les jours restants dans le mois. Un chiffre sans son budget n'est qu'une anecdote. Avec lui, l'utilisateur sait s'il doit s'inquiéter.
Les chiffres collent, rien n'a été inventé pour faire joli. 4 200 $ de revenus moins 1 000 $ d'épargne donnent le budget de 3 200 $, et 1 916 $ dépensés laissent 1 284 $. Revenus et Épargne sont passés dans l'onglet Stats.
Règle à réutiliser : trouvez le seul chiffre pour lequel on ouvre l'écran, faites-en l'élément le plus gros, et écrivez le contexte en une ligne dessous.
Correction 2 : une barre plate au lieu d'un camembert
Avant
Après
Un grand camembert avec huit parts colorées nommées Loyer, Courses, Loisirs, Transport, Shopping, Santé, Factures et Abonnements, avec une minuscule légende et des pourcentages, contre une fine barre empilée en indigo, corail, ambre et turquoise avec un bout pâle, une légende deux par deux de Loyer 1 100 $, Courses 412 $, Loisirs 186 $ et Autres 218 $, et trois lignes de budget avec de fines barres dessous.
Un camembert est difficile à lire dans le meilleur des cas, car on compare mal les angles. Huit parts aggravent les choses. Cinq d'entre elles font quelques pourcents chacune, ce sont donc des lamelles, et la légende qui les nomme fait 8 px.
La barre se lit de gauche à droite, comme une barre de progression, ce que tout le monde comprend déjà. Elle est dessinée à l'échelle du budget de 3 200 $, donc le bout pâle représente les 1 284 $ restants, et l'écran montre le même chiffre deux fois sous deux formes. Les cinq petites catégories sont regroupées dans Autres, 218 $, et s'ouvrent dans Budgets. Les parts s'additionnent : 1 100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 font 1 916 $.
Les budgets suivent juste en dessous en lignes simples : un nom, « 412 $ sur 600 $ » et une barre de 4 px. Une barre se remplit vers une limite, elle montre donc à quel point l'utilisateur s'en approche. Un camembert ne le peut pas.
Règle à réutiliser : utilisez une barre quand les parties forment un tout, et regroupez les petites parts dans Autres.
Correction 3 : quatre lignes, pas un tableau
Avant
Après
Un titre Transactions avec des boutons de filtre Tout, Revenus et Dépenses au-dessus d'un tableau de cinq colonnes avec Date, Commerçant, Catégorie, Moyen et Montant, dix lignes de texte en 9 px et un bouton plus corail flottant qui recouvre les derniers montants, contre un titre Récent avec Tout voir en corail et quatre lignes : un M turquoise pour Marlow Market, un R violet pour Reel House, un A ambre pour Alder Studio avec le revenu en vert, et un C vert pour Cityline Transit.
Un tableau de cinq colonnes à 9 px, c'est un tableur. Sur un téléphone, il oblige à plisser les yeux et à lire en travers d'une ligne, et le bouton plus flottant se pose sur la colonne des montants, si bien que les derniers chiffres sont cachés.
Quatre lignes suffisent pour un écran d'accueil. Un cercle de 36 px avec la lettre du commerçant donne à l'œil quelque chose à quoi s'accrocher, le commerçant est en 15, la catégorie en 13 et grise, et le montant se place à droite. Le revenu est le seul vert de la liste, donc la paie ressort sans étiquette. La date, le moyen de paiement et les filtres s'ouvrent depuis Tout voir et depuis chaque ligne, donc rien n'est perdu.
Règle à réutiliser : un écran d'accueil montre les quelques dernières opérations, pas tout l'historique. Mettez les filtres derrière Tout voir.
Correction 4 : faire du mois le titre
Avant
Après
Une barre d'en-tête avec une icône de menu, le mot Penny en corail, le mot Dashboard, un menu déroulant Novembre 2026, une icône d'export et une cloche avec un point rouge, contre un petit logotype Penny corail au-dessus de Novembre en 28 points gras avec un chevron, une cloche avec un point rouge et un plus corail.
L'en-tête du brouillon contient six éléments à la même taille : menu, logotype, une étiquette « Dashboard » qui ne dit rien, un menu déroulant, l'export et une cloche. Le menu déroulant est le contrôle que les gens utilisent vraiment, et c'est le plus petit.
La correction donne un titre à l'écran et le titre est le contrôle. « Novembre » est en 28 gras avec un chevron, le logotype est petit sur sa propre ligne, et le plus est passé d'un bouton flottant à l'en-tête, à côté de la cloche. Le menu et l'étiquette Dashboard sont partis dans l'onglet Profil, et l'export dans Stats.
Règle à réutiliser : si le contrôle principal est un filtre, faites-en le titre.
Les petites corrections
- Chaque fonction reste. Le graphique hebdomadaire, Revenus et Épargne passent dans Stats. Les cinq petites catégories sont regroupées dans Autres et s'ouvrent dans Budgets avec les Objectifs. Filtres, dates et moyen de paiement s'ouvrent depuis Tout voir et depuis chaque ligne.
- Marges égales. Le brouillon a 14 px à gauche et 12 px à droite. La correction utilise 20 des deux côtés.
- Pas de boîtes. La correction n'a ni carte, ni tuile, ni ombre. L'espace et la typo séparent les choses.
- Moins d'onglets. Quatre onglets dans une barre plate de 78 px avec un filet, à la place de cinq avec des icônes pleines et contour mélangées.
- Échelle typographique. Le texte va de 13 à 48 px, contre 8 à 13 px dans le brouillon.
- De la place sous le contenu. La correction s'arrête 67 px au-dessus de la barre d'onglets, donc rien n'est coupé ni recouvert. Dans le brouillon, un plus flottant se pose sur le tableau.
Auditez votre propre écran de budget
| Question | Pourquoi c'est important |
|---|---|
| Le chiffre pour lequel on ouvre l'appli est-il l'élément le plus gros de l'écran ? | Tout le monde doit le trouver d'un coup d'œil |
| Dit-il sur quoi il porte ? | Un chiffre sans son budget n'est qu'une anecdote |
| Les parties d'un graphique forment-elles un tout qu'on peut montrer en une barre ? | Une barre se lit plus vite que des angles |
| Pouvez-vous lire chaque ligne à bout de bras ? | 9 px, c'est un tableur |
| Le contrôle principal est-il le titre ? | Le contrôle le plus utilisé ne doit pas être le plus petit |
| Un bouton flottant recouvre-t-il du contenu ? | Il cache les chiffres sur lesquels il se pose |
Récupérer le fichier Figma
Le fichier gratuit contient le brouillon de junior, l'écran corrigé et chaque élément sous forme de composant.
Fichier Figma gratuit
Refonte d'un écran de suivi de dépenses, avant et après
Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Comment concevoir l'écran d'accueil d'une appli de suivi de dépenses ?
Commencez par ce qu'il reste à dépenser, en grand, avec le budget et les jours restants sur une ligne dessous. Ensuite, une barre plate pour savoir où est passé l'argent, quelques lignes de budget simples et les quatre dernières transactions, le reste derrière Tout voir.
Camembert ou barre pour les catégories de dépenses ?
Une barre empilée plate, quand les parties forment un tout. On lit la longueur plus vite que l'angle, et les petites catégories restent visibles comme un segment de barre au lieu d'une lamelle. Regroupez les plus petites dans Autres.
Combien de catégories un graphique de budget doit-il montrer ?
Trois ou quatre. Dans cet écran, cinq petites catégories sont regroupées dans Autres, 218 $, et s'ouvrent dans Budgets, pour que la barre reste lisible.
Quelle taille pour le chiffre principal dans une appli de finance ?
Assez grand pour être la première chose vue. Ici le solde fait 48 px en gras, contre 28 px pour le titre du mois et 15 px pour les lignes.
Combien de transactions montrer sur un écran d'accueil ?
Quatre à cinq lignes, en 13 à 15 px, avec un lien Tout voir pour la liste complète, les filtres et le moyen de paiement.
Que doit contenir la barre d'onglets d'une appli de budget ?
Quatre onglets suffisent : Accueil, Stats, Budgets et Profil. Les Objectifs vivent dans Budgets.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'appli, Penny, ses commerçants et ses montants sont inventés. Les chiffres sont cohérents sur les deux écrans : revenus de 4 200 $ moins épargne de 1 000 $ font le budget de 3 200 $, 1 916 $ dépensés laissent 1 284 $, et 12 jours à venir signifie le 18 novembre, la date de la transaction la plus récente.
- Modèle étudié : Copilot Money et Monarch, avec un seul chiffre de reste à dépenser, une barre pour les catégories, des lignes simples et une barre d'onglets plate.
- Les icônes viennent de Phosphor (MIT). Aucune photo n'est utilisée.
- D'abord publié en 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
