Design d'app de chat : refonte d'une liste de discussions, avant et après
Une liste de discussions de débutant avec quatre icônes dans l'en-tête, six filtres qui sortent de l'écran et une date complète sur chaque ligne, puis le même écran corrigé. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
Une liste de discussions a un seul travail : montrer qui a écrit, ce qu'il a dit et si cela demande une réponse. Le premier jet ci-dessous contient toutes les fonctionnalités qu'une messagerie pourrait désirer, et il les crie toutes en même temps : quatre icônes dans la barre de titre, un champ de recherche qui s'explique tout seul, six filtres qui dépassent du bord et une date complète sur chaque ligne. La correction garde les mêmes personnes et les mêmes messages, et donne à chaque partie de l'écran un seul rôle.
L'écran entier, avant et après
Brouillon de débutant
Corrigé
À gauche, l'œil tombe sur quatre icônes, une indication de recherche de 47 caractères, cinq anneaux arc-en-ciel identiques, une rangée de filtres qui ne finit pas et sept lignes de messages sur une seule ligne, chacune avec une date et un badge. À droite, l'œil tombe sur un grand titre, un bouton, un champ de recherche, cinq visages, quatre puces et cinq lignes qui se lisent comme des phrases.
| Brouillon de débutant | Corrigé | |
|---|---|---|
| Icônes d'en-tête | 4 | 1 |
| Indication de recherche | 47 caractères | "Rechercher" |
| Puces de filtre | 6, qui sortent de l'écran | 4, toutes visibles |
| Heure de la ligne | "10/24/26 9:41 AM" | "9:41", "Hier", "Jeu" |
| Badge non lu | 20 px rouge | 17 px bleu, gris en sourdine |
| Onglets | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Tailles de texte | 9 à 20 px | 11 à 28 pt |
Correction 1 : une action dans le titre, une recherche qui dit Rechercher
Avant
Après
Quatre icônes et un champ de recherche qui énumère ce qu'il cherche, contre un bouton et le seul mot Rechercher.
La barre de titre du brouillon contient un appareil photo, un crayon, une loupe et un menu. La loupe est posée au-dessus d'un champ de recherche qui a sa propre loupe : l'écran propose donc deux fois la même recherche.
La correction garde l'unique action pour laquelle on vient ici, écrire un nouveau message, et lui donne un bouton rond et doux dans le bleu de la marque. Le titre devient un grand titre, le même schéma qu'iOS, pour que l'écran dise où l'on est avant toute autre chose. Le champ de recherche dit "Rechercher". Les 47 caractères du brouillon, "messages, personnes, groupes et plus", décrivaient un champ que tout le monde sait déjà utiliser.
La règle à retenir : une barre de titre a une seule action, et un champ nommé Rechercher n'a pas besoin d'une phrase.
Correction 2 : un anneau qui veut dire nouveau
Avant
Après
Cinq anneaux arc-en-ciel identiques et des noms coupés, contre du bleu pour le nouveau, du gris pour le vu et des prénoms entiers.
Quand tous les anneaux se ressemblent, un anneau n'apporte aucune information. Le brouillon donne le même dégradé aux cinq stories : une story déjà regardée ressemble exactement à une story non vue, et les noms sont coupés en "Jessica M..." et "Daniel Ro...".
La correction donne un sens à l'anneau. Un anneau bleu de 2,5 px veut dire nouveau. Un anneau gris de 1,5 px veut dire vu.
Votre propre story est en premier avec un petit plus dessus, et chaque nom est un prénom entier : Jessica, Daniel, Amara, Leo. Les prénoms courts tiennent, et c'est ainsi que les gens s'appellent.
La règle à retenir : utilisez la couleur pour séparer deux états, et ne colorez que l'état qui demande de l'attention.
Correction 3 : quatre puces, un seul style, le compteur sur sa puce
Avant
Après
Six puces à contour dans une rangée plus large que l'écran, contre quatre puces qui tiennent, avec le compteur en badge.
Le brouillon a six puces dans une rangée de 434 px sur une colonne de 364 px. La sixième est coupée en deux : l'écran montre à la personne qu'il y a plus, sans lui donner la moindre idée de quoi. Les compteurs sont entre parenthèses dans les libellés, "Non lus (12)" et "Groupes (3)", ce qui donne à chaque libellé une longueur différente.
La correction en garde quatre : Tous, Non lus, Favoris et Groupes. La puce choisie est remplie de bleu, les autres sont d'un gris doux. Le compteur de non lus passe sur sa propre puce sous forme de petit badge bleu, car c'est le seul chiffre que les gens veulent, et c'est le même badge qu'ils verront sur les lignes en dessous. Groupes a perdu son compteur.
Canaux et Archivés ont quitté la rangée. Ce sont de vraies fonctionnalités, et cette refonte ne dessine pas où elles vont : une application complète a donc encore besoin d'une place pour elles.
La règle à retenir : une rangée de filtres doit finir à l'intérieur de l'écran, et la puce choisie doit être la seule remplie.
Correction 4 : des lignes avec la personne, deux lignes de message et une heure courte
Avant
Après
Une ligne coupée, un horodatage complet et un badge rouge avec une icône, contre deux lignes, une heure courte et un badge discret.
Une ligne est un message en miniature, et le brouillon coupe le message après environ cinq mots : "Haha oui !! Envoie-moi les photos de...". La place est partie dans la date, "10/24/26 9:41 AM", et dans une petite icône d'épingle ou de haut-parleur à côté d'un badge rouge. Une date avec l'année et les secondes est la chose la moins utile sur une ligne pour un message arrivé ce matin.
La correction donne deux lignes à l'aperçu, de sorte que "Haha oui ! Envoie-moi les photos d'hier soir quand tu peux" se lit sans ouvrir la discussion. L'heure est courte : "9:41" aujourd'hui, "Hier", puis "Jeu".
Une discussion non lue voit son heure en bleu et un badge bleu de 17 px. Le groupe en sourdine, Design Team, reçoit un badge gris pour compter sans appeler. Les avatars passent à 52 px, et un message vocal reçoit un petit micro devant sa durée.
La règle à retenir : dépensez la place de la ligne pour le message, et écrivez l'heure comme les gens la disent.
Les petites corrections
- Un seul bord gauche. Le brouillon utilisait 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés, avec des séparateurs qui commencent après l'avatar.
- Une seule couleur pour l'attention. Les badges du brouillon sont rouges, les anneaux vont de l'orange au violet et la puce non lus est juste contourée. La correction utilise le bleu de la marque #2E7CF6 pour le nouveau, le sélectionné et le non lu, et du gris pour tout ce qui est calme.
- Une vraie échelle typographique. Le texte est passé de 9 à 20 px aux tailles de texte iOS de 11 à 28 pt, avec le grand titre au sommet.
- Quatre onglets, pas cinq. Les Chats, Appels, Caméra, Statut et Réglages du brouillon sont devenus Chats, Appels, Actus et Réglages. La caméra a quitté la barre d'onglets.
- Des visages plus grands. Les avatars de la liste passent à 52 px, pour que la personne soit la première chose qu'une ligne montre.
Auditez votre propre liste de discussions
| Question | Pourquoi c'est important |
|---|---|
| Combien d'actions y a-t-il dans la barre de titre ? | Une action se trouve, quatre se balaient du regard |
| Le champ de recherche se décrit-il en une phrase ? | Le mot Rechercher suffit déjà |
| Chaque anneau ou point veut-il dire exactement une chose ? | Un style utilisé pour tout ne dit rien |
| La rangée de filtres finit-elle à l'intérieur de l'écran ? | Une puce coupée cache ce qu'elle offre |
| L'aperçu fait-il au moins deux lignes ? | On ne devrait pas ouvrir une discussion pour la lire |
| Les heures sont-elles écrites comme les gens les disent ? | "Hier" est plus rapide qu'une date avec l'année |
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
Liste de discussions, 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 montrer chaque ligne d'une liste de discussions ?
La personne, deux lignes du dernier message, une heure courte et un petit badge pour les non lus. Laissez de côté la date complète, les icônes en plus et tout second badge.
Combien de filtres une messagerie doit-elle afficher ?
Quatre puces suffisent sur la liste principale : Tous, Non lus, Favoris et Groupes. Placez le reste, comme Archivés, derrière un menu ou sur un autre écran, et veillez à ce que la rangée ne dépasse jamais du bord.
Comment concevoir les anneaux de stories dans une app de chat ?
Utilisez une couleur pour le nouveau et une couleur discrète pour le vu, afin que l'anneau porte une information. Notre correction utilise un anneau bleu pour le nouveau et un fin anneau gris pour le vu, avec des prénoms entiers sous les visages.
Comment une app de chat doit-elle afficher l'heure d'un message ?
Aussi court qu'une personne le dirait : l'heure pour aujourd'hui, puis "Hier", puis le jour de la semaine. Gardez les dates complètes pour la discussion elle-même.
Quelles tailles de police une app de chat doit-elle utiliser ?
Utilisez l'échelle de texte de la plateforme. L'écran corrigé utilise les tailles iOS de 11 à 28 pt, avec un grand titre pour le nom de l'écran.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Les noms et les messages sont inventés pour l'exercice.
- Photos via Pexels par Татьяна Танатова, Iphanyi Ezemenari, pessoas uem, Son Hoa Nguyen, Ajan Yogi, Tamra Creatives Agency, Kenneth Surillo et kaleef lawal.
- Apple Human Interface Guidelines : Typography, pour les tailles de texte iOS et le grand titre utilisés dans l'écran corrigé.
- Apple Human Interface Guidelines : Accessibility, pour la taille de cible tactile de 44 pt.
- Publié pour la première fois 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
