Design d'appli café : refonte d'un écran d'accueil de commande, avant et après
Un écran d'accueil de commande de café avec une ligne de magasin de 54 caractères, une bannière de points tapageuse, huit onglets qui débordent et un bouton AJOUTER sous chaque photo, puis le même écran corrigé. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
Une personne ouvre une appli de café pour une seule chose : commander une boisson et aller la chercher. Le premier jet ci-dessous contient les bonnes choses, mais les dit toutes en même temps : une longue ligne de magasin, une bannière qui hurle ses points, huit onglets et un bouton AJOUTER sous chaque photo. La version corrigée garde le magasin, les points et le menu, et donne à chacun une place unique et discrète.
L'écran entier, avant et après
Premier jet junior
Corrigé
À gauche, on croise un message d'accueil, une ligne de magasin, une bannière de points, une bande d'onglets et une grille de boutons, tous au même volume. À droite, il y a une chose à lire par bloc et une action par ligne.
| Premier jet junior | Corrigé | |
|---|---|---|
| Magasin | Une ligne de 54 caractères dans une boîte avec bordure | Une carte de retrait avec un lien Changer |
| Points | Une bannière avec trois points d'exclamation | Une carte de progression : 250 points pour une boisson offerte |
| Onglets de catégories | 8, qui débordent | 4 pastilles, une sélectionnée |
| Articles | Une grille de 2 par 3 cartes | Des lignes avec une photo de 60 px |
| Boutons d'ajout | Un large AJOUTER beurre sous chaque photo | Un bouton rond par ligne |
| Onglets dans la barre | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px, avec 16 px entre les blocs |
| Tailles de texte | 9 à 18 px | 11 à 28 pt |
Correction 1 : dire où, une seule fois
Avant
Après
Une ligne de magasin entassée dans une boîte, contre une carte de retrait.
Le premier jet entasse le magasin sur une ligne : « Downtown Store - 123 Main St (0.3 mi) - Open until 9PM », 54 caractères en petit dans une boîte avec bordure et un chevron au bout. Le nom, la rue, la distance et les horaires pèsent tous pareil, donc l'œil lit toute la ligne pour trouver le seul fait dont il a besoin.
La correction transforme la ligne en carte de retrait. « Retrait à Downtown » est le titre, « 0,3 mi · Ouvert jusqu'à 21 h » est une ligne grise dessous, et « Changer » se place à droite en bleu de la marque comme une vraie action. L'adresse de la rue n'est pas sur l'écran d'accueil. Le message d'accueil est devenu un grand « Bonjour, Leo » et les points d'exclamation ont disparu.
La règle à retenir : découpez une longue ligne en un titre, un détail et une action. Une boîte avec un chevron dit « touche-moi » moins clairement qu'un mot qui dit « Changer ».
Correction 2 : les points comme progression
Avant
Après
Une bannière qui crie, contre une barre de progression.
La bannière du premier jet passe du bleu au jaune beurre, et son texte blanc se retrouve sur le bout jaune, là où il est le plus dur à lire. Elle dit « Vous avez 1 250 points ! Échangez-les maintenant contre des boissons GRATUITES !!! » et la pastille Utiliser maintenant en dessous est blanche avec un texte jaune pâle. Elle dit qu'on a des points, mais pas à quel point on est proche de quoi que ce soit.
La correction est une seule carte bleu profond. « Récompenses » et « 1 250 points » sont en haut, et la grande ligne est « 250 points pour une boisson offerte ». Une barre de progression beurre en dessous se remplit à 83 %, soit 1 250 sur 1 500, et la petite ligne indique où se trouve la boisson offerte. La personne voit la distance, qui est le chiffre intéressant.
La règle à retenir : un solde de points est un chiffre, et une progression est une histoire. Montrez l'histoire, puis laissez le chiffre sur le côté.
Correction 3 : quatre pastilles, une sélectionnée
Avant
Après
Huit onglets qui débordent, contre quatre pastilles.
Le premier jet a huit catégories : Café, Thé, Boissons froides, Saisonnier, Boulangerie, Petit-déjeuner, Merch et Cartes cadeaux. Elles débordent à droite, donc « Merch » est coupé en « Mer », et la personne doit faire défiler sur le côté pour apprendre qu'il y en a d'autres. La catégorie sélectionnée est marquée par un fin soulignement.
La correction affiche quatre pastilles : Tout, Café, Boissons froides et Boulangerie. Tout est rempli du bleu du café et les autres sont blanches, donc la sélection se voit d'un coup d'œil. Les autres catégories ne sont pas sur cet écran ; une vraie appli les garderait dans l'onglet Menu, à un tap.
La règle à retenir : une rangée de filtres doit tenir à l'écran. Si elle a besoin d'un défilement latéral pour montrer sa propre liste, montrez-en moins.
Correction 4 : une ligne par article
Avant
Après
Une grille de cartes avec un bouton beurre sous chacune, contre trois lignes.
Le premier jet montre les articles en grille de cartes : une grande photo, un nom, un prix et un bouton « AJOUTER + » beurre en capitales. Deux rangées et demie de cartes remplissent l'écran sous les onglets, le beurre des boutons se répète sous chaque photo, et le lien « Voir le menu » est jaune pâle sur blanc.
La correction fait de chaque article une ligne avec une photo de 60 px, le nom, une ligne grise et le prix, et un seul « + » rond bleu à droite. Trois lignes tiennent dans une carte là où la grille montrait deux cartes et demie, et le seul bouton de chaque ligne est le bouton d'ajout. « Menu complet » est en bleu de la marque.
La règle à retenir : quand chaque article a la même action, l'action doit être petite et alignée, pour que l'œil lise noms et prix le long d'un seul bord.
Les petites corrections
- Un seul bord gauche. Les marges du premier jet étaient de 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés et 16 px entre les blocs.
- Une vraie échelle typographique. Le texte est passé de 9 à 18 px aux tailles iOS de 11 à 28 pt.
- Quatre onglets, pas cinq. Accueil, Menu, Commande, Récompenses et Compte sont devenus Accueil, Menu, Récompenses et Compte. L'onglet Commande a quitté la barre.
- Une palette de quatre. Le cobalt café #2342A8, le bleu profond #15276B, le beurre #F3C77A et la crème #F5EFE4 remplacent un dégradé et un fond gris.
Auditez votre propre écran de commande
| Question | Pourquoi c'est important |
|---|---|
| La personne peut-elle lire le magasin de retrait d'un coup d'œil ? | Cela décide si elle peut commander tout court |
| Les récompenses montrent-elles une progression ou seulement un solde ? | La distance est le chiffre intéressant |
| La rangée de catégories tient-elle sans défilement latéral ? | Un onglet coupé cache ce qui existe d'autre |
| Chaque article répète-t-il un large bouton ? | Un petit bouton d'ajout par ligne suffit |
FAQ
Que doit afficher en premier l'écran d'accueil d'une appli de commande de café ?
Le magasin de retrait sur une carte avec un lien Changer, puis la progression des récompenses, puis les catégories et les articles populaires. La personne doit voir où elle commande avant de voir quoi.
Comment concevoir une section de points de fidélité ?
Montrez la distance jusqu'à la prochaine récompense sous forme de barre de progression et d'une ligne simple, comme « 250 points pour une boisson offerte », et mettez le solde sur le côté.
Combien d'onglets de catégories un menu doit-il avoir ?
Autant qu'il en tient à l'écran sans défilement latéral, généralement quatre. Mettez le reste dans l'onglet Menu, à un tap.
Un menu doit-il utiliser une grille ou une liste ?
Une liste de lignes marche mieux pour commander, parce que les noms et les prix s'alignent sur un bord et que chaque ligne n'a besoin que d'un petit bouton d'ajout. Une grille convient mieux pour parcourir des photos.
Quelle taille doit avoir un bouton d'ajout ?
Au moins 44 par 44 points pour le toucher, même quand le cercle visible est plus petit. L'écran corrigé utilise un bouton rond bleu par ligne.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Le magasin, son adresse, les prix et les points sont inventés.
- Photos du menu via Pexels par Duc Nguyen, Melissa Jansen van Rensburg, Marcelo Verfe, Juan Pablo Serrano, Skyler Ewing et Vinícius Vieira ft.
- Apple Human Interface Guidelines: Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- Apple Human Interface Guidelines: Accessibility, pour la taille de cible tactile de 44 pt.
- Kivetz, Urminsky et Zheng, The Goal-Gradient Hypothesis Resurrected, Journal of Marketing Research, 2006, pour les clients qui achètent plus souvent à mesure qu'une carte de fidélité se remplit.
- D'abord publié en carrousel sur App Brainy.
Want this for your own app? Our team redesigns ordering apps like this one, from the first audit to the finished components.
Get Started
