Design de l'écran de profil : refonte d'un profil et de ses réglages, avant et après
Un écran de profil qui n'est qu'une liste plate de treize lignes, puis le même écran corrigé : une ligne d'identité, une vraie carte de membre, des réglages groupés qui affichent leur état et un Se déconnecter discret. Chaque changement côte à côte, avec le fichier Figma gratuit.
Un écran de profil a trois missions : montrer qui vous êtes, montrer ce que vous avez, et offrir un endroit pour changer des choses. Le premier brouillon ci-dessous fait les trois, mais en une seule liste plate de treize lignes, avec les points écrasés dans une petite ligne et Se déconnecter comme élément le plus bruyant de l'écran. C'est un tiroir fourre-tout : tout y est, et rien n'est facile à trouver.
La correction garde toutes les fonctionnalités. Elle donne à chaque mission son propre bloc et laisse les lignes afficher leur état, si bien que la plupart des réglages se lisent sans les ouvrir.
L'écran complet, avant et après
Brouillon de junior
Corrigé
À gauche, tout a le même poids. L'avatar, le nom, l'e-mail et le numéro de téléphone sont empilés au centre, le bandeau qui harcèle se trouve juste au-dessus des points, puis treize lignes descendent dans la page, chacune avec sa propre couleur d'icône. Le large bouton rouge en bas est la couleur la plus forte de l'écran : la dernière chose que l'œil trouve est donc l'action que personne ne devrait déclencher par accident.
À droite, l'écran a quatre blocs et une seule couleur. La ligne d'identité est courte, la carte porte les points, et les tuiles et la liste de réglages contiennent tout le reste. Le cobalt de la marque apparaît sur la carte, le bouton Modifier et l'onglet actif, et le rouge n'apparaît qu'une fois, sur Se déconnecter, en simple texte.
Ce qui a changé, mesuré
Chaque différence sur un écran, d'après les deux frames Figma :
| Brouillon de junior | Corrigé | |
|---|---|---|
| Identité | Pile centrée : avatar, nom, e-mail, téléphone, Modifier le profil | Une ligne : avatar, nom, e-mail, petit bouton Modifier |
| Points | Une ligne en 9 pt : « Points : 12480 | Niveau : Gold | Suivant : Platinum (13000) » | Une carte avec un nombre en 44 pt et « 520 points avant Platinum » |
| Menu | 13 lignes dans une liste, 7 couleurs d'icônes | 3 tuiles et 5 lignes groupées, 1 teinte d'icône |
| État des lignes | Seulement Notifications (un badge) et Inviter des amis (une étiquette) | Compteur, solde, carte, langue et un interrupteur, tous visibles |
| Se déconnecter | Un bouton rouge de 38 px, pleine largeur | Texte rouge de 17 pt, centré |
| Barre d'onglets | 5 onglets, icônes pleines et contours mélangées | 5 onglets dans une barre flottante, un seul style d'icône |
| Marge | 14 à gauche, 12 à droite | 20 des deux côtés |
Correction 1 : une ligne pour dire qui vous êtes
Avant
Après
Un avatar centré, le nom, un e-mail, un numéro de téléphone et un bouton Modifier le profil en contour, avec un bandeau jaune dessous, face à une seule ligne : l'avatar à gauche, le nom et l'e-mail à côté et une petite pilule Modifier à droite.
La pile centrée dépense environ 160 points de hauteur pour dire un nom et un e-mail. Le numéro de téléphone est la ligne la moins utile, et le bouton Modifier le profil est un contrôle complet en contour qui concurrence tout ce qui est en dessous.
La correction tient en une ligne : l'avatar à gauche, le nom et l'e-mail à côté, et Modifier en petite pilule au bout. Le bloc fait 60 points de haut au lieu de 158, donc le bloc suivant démarre plus haut. Le bandeau insistant, « Complétez votre profil et gagnez 50 points !!! », a disparu du haut de l'écran. Une demande de finir son profil a sa place après un premier lancement ou dans Modifier, pas au-dessus de ce que l'on est venu voir.
Règle à retenir : on connaît son propre nom. Donnez une ligne à l'identité et réservez la place à ce qui change.
Correction 2 : transformer une ligne de texte en carte
Avant
Après
Un petit logotype suivi de « Points : 12480 | Niveau : Gold | Suivant : Platinum (13000) » sur une ligne de texte minuscule, face à une carte bleu profond avec le logotype, une étiquette Gold, 12 480 en grands caractères, une barre de progression et « 520 points avant Platinum ».
Les points sont la raison pour laquelle un membre ouvre cet écran, et le brouillon les compose dans le plus petit corps de la page. Les chiffres y sont tous, mais le lecteur doit faire la soustraction : 13 000 moins 12 480.
La correction fait la soustraction à sa place. La carte affiche les points en 44 pt, le niveau en étiquette dorée, une barre remplie à 83 % et la phrase « 520 points avant Platinum ». Gold commence à 10 000, donc 12 480 est presque au niveau suivant, et la barre le montre d'un coup d'œil. La carte utilise aussi le cobalt de la marque et l'unique doré du niveau, ce qui en fait le bloc le plus fort de l'écran, et c'est normal : c'est la seule chose ici qui récompense celui qui la regarde.
Règle à retenir : montrez le résultat de l'addition, pas les nombres qui la composent.
Correction 3 : grouper les réglages et montrer leur état
Avant
Après
Treize lignes dans une liste, de Mes commandes à Conditions générales, chacune avec sa propre icône colorée et un chevron, face à trois tuiles (Commandes, Portefeuille, Favoris) et un groupe blanc de cinq lignes : Adresses, Moyens de paiement, Notifications, Langue et Aide et mentions légales.
Treize lignes de même taille, avec le même chevron et sept couleurs d'icônes n'ont aucun ordre. Mes commandes et Conditions générales paraissent aussi importantes l'une que l'autre, et le brouillon ne dit rien de ce qu'il y a derrière une ligne avant que vous la touchiez.
La correction trie la liste selon la fréquence d'usage :
- Commandes, Portefeuille et Favoris deviennent des tuiles. Ce sont les trois endroits où l'on va le plus, ils reçoivent donc de grandes cibles et une info en direct chacun : « 2 en cours », « 42,50 $ » et « 18 articles ».
- Les réglages sont dans un seul groupe. Adresses affiche « 2 enregistrées », Moyens de paiement affiche « Visa ·· 4242 » et Langue affiche « Français ». On peut vérifier sans toucher.
- Notifications devient un interrupteur. C'est un choix activé ou désactivé, il n'a donc pas besoin de son propre écran.
- Les lignes rarement utilisées passent derrière Aide et mentions légales. Inviter des amis, Noter l'app, À propos, Politique de confidentialité et Conditions existent toujours, un toucher plus loin.
Chaque ligne du brouillon reste accessible. Rien n'a été supprimé, tout a été mis là où sa fréquence dit qu'il doit être. Les icônes partagent aussi une seule teinte, donc la couleur sur l'écran veut dire quelque chose : la marque désigne les éléments actifs et touchables.
Correction 4 : rendre Se déconnecter discret
Avant
Après
Un bouton rouge pleine largeur avec des majuscules blanches indiquant SE DÉCONNECTER, face aux mots Se déconnecter en rouge, 17 pt, centrés avec de l'espace autour.
Un bouton rouge plein est le contrôle le plus bruyant de l'écran du brouillon, et il réclame qu'on appuie dessus. Se déconnecter est rare et légèrement destructeur, puisque cela renvoie la personne vers une connexion. Il doit être facile à trouver et difficile à toucher par erreur.
La correction garde le rouge, car le rouge dit toujours qu'il s'agit d'une action de départ, et retire l'aplat. C'est du simple texte sous le groupe de réglages, avec de l'espace autour. Il reste à un toucher, mais il n'attire plus l'œil.
Les petites corrections
- Un grand titre au lieu d'une barre de navigation. « Mon profil » avec une flèche de retour, une icône de partage et une icône de soleil est devenu « Profil » en 34 pt. La barre d'onglets dit déjà où l'on est, donc la flèche de retour a disparu, et la cloche de notification est la seule icône restante.
- Une seule marge. Le brouillon utilise 14 à gauche et 12 à droite. La correction utilise 20 des deux côtés et 14 entre les blocs.
- Une seule échelle typographique. Le texte du brouillon va de 8 à 15 px. La correction utilise les tailles iOS de 11 à 34 pt.
- Un seul accent. Le brouillon a sept couleurs d'icônes, un bandeau jaune et un bouton rouge. La correction a le cobalt de la marque, un doré pour le niveau et du rouge pour Se déconnecter.
- Une barre d'onglets flottante. Les cinq onglets restent, mais ils utilisent un seul style d'icône, seul l'onglet actif étant plein.
Auditez votre propre écran de profil
| Question | Pourquoi c'est important |
|---|---|
| L'identité tient-elle en une ligne ? | On connaît son nom, il ne devrait pas prendre 160 points |
| Peut-on lire les points ou le statut en une seconde ? | Un résumé en petit texte force le lecteur à calculer |
| Les endroits les plus utilisés sont-ils plus grands que les rares ? | Des lignes égales cachent ce qui compte |
| Chaque ligne de réglage affiche-t-elle sa valeur actuelle ? | L'état est la réponse à la plupart des visites |
| Y a-t-il plus d'une couleur d'accent ? | Sept couleurs d'icônes ne veulent rien dire |
| Se déconnecter est-il plus fort que Modifier ? | L'action rare doit être la discrète |
Récupérer le fichier Figma
Le fichier gratuit contient les deux écrans, avec les blocs corrigés sous forme de composants.
Fichier Figma gratuit
Refonte de l'écran de profil, avant et après
Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit montrer un écran de profil dans une app ?
Qui est la personne, ce qu'elle possède, et un moyen de modifier ses réglages. Mettez l'identité dans une courte ligne, placez les points, le solde ou l'abonnement dans une carte et groupez les réglages en dessous.
Où placer le bouton Se déconnecter sur un écran de profil ?
En bas des réglages, sous le dernier groupe, en simple texte. Il doit rester accessible, mais ne jamais être le contrôle le plus bruyant de la page.
Combien de lignes une liste de réglages doit-elle avoir ?
Cinq à sept dans la première vue fonctionnent bien. Déplacez les lignes rarement utilisées, comme les pages légales et la notation de l'app, derrière une ligne comme Aide et mentions légales.
Les lignes de réglages doivent-elles afficher leur valeur actuelle ?
Oui. Une valeur comme « Français » ou « Visa ·· 4242 » répond à la question sans toucher, et un interrupteur vaut mieux qu'une ligne pour un simple choix activé ou désactivé.
Comment afficher des points de fidélité sur un écran de profil ?
Sous forme de carte avec le nombre en grand, le niveau actuel en étiquette et une phrase sur la suite, comme « 520 points avant Platinum ». Faites la soustraction pour le lecteur.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'app, le membre et les chiffres sont inventés.
- Les tailles de texte suivent l'échelle typographique iOS des Human Interface Guidelines d'Apple.
- Photo d'avatar : Tamra Creatives Agency sur Pexels.
- Publié d'abord 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
