Design d'application bancaire : refonte d'un écran d'accueil, avant et après
Un écran d'accueil bancaire qui ressemble à une pub pour carte de crédit, et le même écran corrigé pour que le solde passe en premier. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
L'écran d'accueil d'une application bancaire doit répondre à une question en moins d'une seconde : combien d'argent j'ai ? Le premier jet ci-dessous est une jolie carte en dégradé, mais le numéro de carte est la plus grosse chose après le solde, les actions se déclinent en six couleurs et presque chaque transaction est rouge. On dirait une publicité pour une carte de crédit.
La correction garde le violet de la marque et toutes les fonctionnalités. Elle dépense la couleur sur le chiffre qui compte et calme tout le reste.
L'écran entier, avant et après
Brouillon junior
Corrigé
À gauche, la carte est une carte : solde, numéro masqué, nom du titulaire, date d'expiration et logo VISA, le tout sur un seul dégradé. En dessous viennent six cercles d'action en six couleurs, puis une liste plate de transactions où le rouge apparaît sur chaque dépense et où chaque commerçant a sa propre couleur de logo.
À droite, la carte est un solde. Elle affiche le nom du compte, le montant en dollars, une ligne indiquant son évolution ce mois-ci, et les quatre derniers chiffres glissés dans le coin. Tout ce qui est dessous est plus calme, si bien que le solde est le premier endroit où l'œil se pose.
| Brouillon junior | Corrigé | |
|---|---|---|
| Ce que montre la carte | Solde, numéro de carte, titulaire, expiration, logo VISA | Nom du compte, solde, variation du mois, quatre derniers chiffres |
| Actions rapides | 6, en 6 couleurs | 3, une pleine et deux simples |
| Rouge dans la liste | Chaque dépense | Aucun |
| Vert dans la liste | Revenus | Revenus uniquement |
| Icônes de transaction | 5 couleurs de marque | 1 style d'icône dans la teinte de la marque |
| Onglets | 4 plus un bouton flottant | 4 |
Correction 1 : dépenser le violet sur le solde
Avant
Après
« Solde total » avec une icône d'œil et 12 450,80 $ en une seule taille, une rangée d'astérisques et 4821, Titulaire et Expire, et un logo VISA sur un dégradé vif, contre « Compte principal » et 4821 dans le coin, 12 450 avec le .80 plus petit, et une pastille « +320,50 $ ce mois-ci » sur un violet plus profond.
Le brouillon utilise le dégradé de la marque sur une carte qui ressemble à une carte, donc la première lecture est « c'est une carte de crédit ». Le solde est le texte le plus grand, mais le numéro de carte, le nom du titulaire, l'expiration et le logo VISA se disputent la même zone de la carte. La plupart de ces informations, la personne les connaît déjà ou n'en a besoin que pour payer en ligne.
La correction garde la même famille de violet et de bleu et la met au service d'une seule idée. Les dollars font 42 pt et les centimes 22 pt, parce que 12 450 $ est le chiffre qu'on lit et .80 est le détail. Une pastille montre ce qui a changé ce mois-ci, la deuxième question qu'on se pose sur un solde. Le numéro de carte se réduit à un « 4821 » masqué dans le coin, de quoi savoir de quel compte il s'agit.
Règle à retenir : quand la couleur de votre marque est criarde, donnez-lui un seul travail.
Correction 2 : trois actions, pas six
Avant
Après
Six icônes rondes en bleu, vert, orange, rose, violet et gris : Envoyer, Demander, Recharger, Payer les factures, Échanger et Plus, contre trois boutons larges : un Envoyer plein, puis Demander et Recharger en blanc uni.
Six couleurs sur six actions disent « elles sont toutes aussi importantes et toutes différentes ». Elles ne sont ni l'un ni l'autre. Les trois qui restent sont celles dont chaque compte a besoin : Envoyer, Demander et Recharger. Payer les factures, Échanger et Plus disparaissent de cet écran, et le nouvel onglet Paiements offre à ce type d'action une maison bien à lui.
La correction donne aussi une hiérarchie aux trois. Envoyer est rempli avec la couleur de la marque, parce que c'est l'action pour laquelle les gens viennent. Demander et Recharger sont simples, ils sont là sans crier. Les boutons sont larges, donc faciles à toucher, et le libellé se place à côté de l'icône plutôt qu'en dessous.
Correction 3 : regrouper les transactions par jour, donner un sens à la couleur
Avant
Après
Une liste plate de cinq transactions, chacune avec un cercle de marque coloré, un long horodatage comme « 22 oct. 2026 à 09:41 » et des montants en rouge ou en vert, contre deux groupes, Aujourd'hui et Hier, chacun dans une carte blanche avec des pastilles de lettres violettes, une catégorie sous chaque nom, des montants noirs et un seul +2 500,00 $ en vert.
Le rouge veut dire stop. Une application bancaire qui colore chaque dépense en rouge transforme la vie normale, un abonnement de streaming, un trajet, un café, en rangée de petites alarmes. La correction laisse l'argent sortant en texte simple et utilise le vert pour la seule bonne nouvelle : l'argent qui entre.
Les horodatages ont aussi changé. Une date et une heure complètes sur chaque ligne, c'est surtout de l'information répétée. Le regroupement sous « Aujourd'hui » et « Hier » donne la date une seule fois, et la deuxième ligne de chaque rang dit à quoi servait le paiement : « Abonnement », « Transport », « Salaire ». C'est la question que les gens se posent vraiment en parcourant une liste.
Les commerçants ont aussi perdu leurs couleurs de marque. Un N rouge, un U noir, un S vert et un A orange ont l'air vivants, mais ils transforment la liste en arc-en-ciel sans rien à dire. Une seule pastille teintée avec une lettre garde les lignes homogènes, si bien que ce sont les montants et les noms que l'on lit.
Correction 4 : quatre onglets, pas de plus flottant
Avant
Après
Accueil, Cartes, un grand bouton plus flottant, Stats et Profil, contre Accueil, Cartes, Paiements et Profil avec l'onglet actif en violet.
Le bouton plus flottant demande « ajouter quoi ? ». Dans une application bancaire, il peut signifier envoyer, demander, ajouter une carte ou recharger, et il faut l'ouvrir pour le savoir. Il se pose aussi par-dessus le contenu et coupe la barre d'onglets en deux.
La correction le remplace par un onglet appelé Paiements, qui dit ce qu'il y a derrière. Stats quitte la barre d'onglets, et la carte du solde porte désormais le seul chiffre qu'on en voit chaque jour : la variation de ce mois-ci.
Les petites corrections
- Un en-tête avec une seule icône. Le brouillon a un QR code, une cloche et une icône de réglages à côté du message d'accueil. La correction ne garde que la cloche.
- Un vrai avatar à initiales. Le cercle violet avec « AM » est en violet de marque plein, il se détache donc du fond.
- Une marge et une échelle d'espacement. Les lignes reposent sur une marge de 20 points, avec des espaces tirés d'une courte liste.
- Un message d'accueil plus calme. « Good Morning, Alex Moreno! » avec un M majuscule et un point d'exclamation est devenu « Bonjour » et un prénom.
- Des cartes qui regroupent. Les transactions de chaque jour tiennent dans un seul conteneur blanc, avec un fin séparateur entre les lignes et aucun entre les groupes.
Auditez votre propre application bancaire
| Question | Pourquoi c'est important |
|---|---|
| Le solde est-il l'élément le plus grand de l'écran ? | C'est la question à laquelle les gens ouvrent l'appli pour répondre |
| Les centimes sont-ils plus petits que les dollars ? | Les centimes sont un détail, pas le titre |
| Le rouge n'apparaît-il que là où quelque chose ne va pas ? | Une dépense normale n'est pas une erreur |
| Les actions ont-elles une hiérarchie ? | Six choix égaux, c'est aucun choix |
| Le numéro de carte a-t-il besoin d'être sur l'écran d'accueil ? | Un indice avec les quatre derniers chiffres suffit pour identifier un compte |
| Un onglet ou un bouton a-t-il besoin d'un libellé pour être compris ? | Un plus flottant oblige à deviner |
Récupérez le fichier Figma
Le fichier gratuit contient les deux écrans, chaque élément corrigé sous forme de composant avant et après, les variables de couleurs UI, les styles de texte iOS et un fichier lisez-moi avec les crédits.
Fichier Figma gratuit
Écran d'accueil bancaire, avant et après
Les deux écrans et chaque élément corrigé en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit afficher en premier un écran d'accueil d'application bancaire ?
Le solde, en grand, avec une courte ligne sur son évolution ce mois-ci. Les actions rapides viennent ensuite, puis les transactions récentes.
Combien d'actions rapides une application bancaire doit-elle avoir ?
Trois, c'est bien : Envoyer, Demander et Recharger. Rendez la plus courante pleine et les autres simples, et déplacez les actions plus rares vers un onglet Paiements.
Les dépenses doivent-elles être en rouge dans une application bancaire ?
Non. Le rouge se lit comme un avertissement, et une dépense ordinaire n'en est pas un. Gardez les montants sortants en texte simple et réservez le vert à l'argent qui entre.
Comment afficher un numéro de carte sur l'écran d'accueil d'une application bancaire ?
Masqué et petit, avec seulement les quatre derniers chiffres, pour que l'on sache de quel compte il s'agit. Les détails complets ont leur place sur l'écran Cartes.
Une application bancaire doit-elle avoir un bouton plus flottant ?
En général non. Un plus ne dit pas ce qu'il ajoute, alors remplacez-le par un onglet libellé comme Paiements.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Les noms de commerçants sont des exemples génériques.
- 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
