Design d'app de livraison de repas : refonte d'un écran d'accueil, avant et après

Un écran d'accueil d'app de livraison de repas a un seul boulot : amener une personne affamée jusqu'à un restaurant en quelques secondes. Le premier jet ci-dessous rate ce boulot, non pas parce qu'un élément serait moche, mais parce que chaque élément réclame de l'attention en même temps. La solution n'a pas été d'ajouter des fonctionnalités ni de changer de style. Il a fallu retirer des choses jusqu'à ce que chaque élément ne dise plus qu'une seule chose.

L'écran entier, avant et après

Brouillon junior

Corrigé

Compte ce que l'œil doit traiter avant d'atteindre le premier restaurant. À gauche : une adresse postale complète, deux icônes d'en-tête, une barre de recherche avec deux icônes de plus, une bannière en dégradé avec trois lignes de texte et un bouton, des points de carrousel, cinq anneaux de cinq couleurs, un titre de section avec une icône de flamme, et trois badges sur une seule photo. À droite : un nom de lieu, un panier, une barre de recherche, cinq tuiles, une offre et une carte.

Rien de ce qui manque à droite n'était une fonctionnalité de la version de gauche. L'adresse, la recherche, les catégories, l'offre et les restaurants sont toujours là. Chacun a simplement arrêté de rivaliser avec les autres.

Correction 1 : dire où, en un mot

Avant

Après

Le brouillon affiche l'adresse complète, 221B Baker Street, coupée en plein mot en petits caractères à côté d'un repère. La correction affiche le nom que la personne a donné à cette adresse, « Maison », en grand, avec un chevron qui indique qu'on peut le changer.

Personne n'ouvre une app de livraison pour lire sa propre adresse. Il faut juste confirmer une chose : est-ce que ça part au bon endroit ? Un nom qu'on a choisi soi-même, Maison, Bureau, Chez maman, répond à ça plus vite qu'un nom de rue, et il reste lisible quelle que soit la longueur puisque c'est un seul mot. L'adresse complète se trouve à un tap de là, sur l'écran où on la modifie.

La correction retire aussi l'icône de profil de l'en-tête. Le brouillon l'avait deux fois, une en haut et une dans l'onglet Compte. Deux portes vers la même pièce font se demander si elles mènent à des pièces différentes.

Correction 2 : une forme, un état sélectionné

Avant

Après

Avant, chacune des 5 catégories est dans un cercle avec son propre anneau coloré : jaune, vert, bleu, rose, violet. Après, les tuiles partagent une forme et un cadre neutre, et seule la sélectionnée, Pizza, reçoit le rouge de la marque sur sa bordure et son libellé.

La couleur dans une interface est un signal, et cinq couleurs envoient cinq signaux. Celui qui parcourt la rangée doit se demander ce que veut dire le vert et pourquoi les sushis sont bleus. La réponse est rien, et c'est bien le problème : de la décoration qui ressemble à de l'information.

Quand la couleur n'est dépensée que pour une seule chose, elle veut dire quelque chose. Une seule tuile rouge dit « vous êtes ici » sans un mot. Les photos font le reste, car les photos de nourriture sont déjà ce qu'il y a de plus coloré à l'écran et n'ont pas besoin d'aide.

Correction 3 : une offre, un message

Avant

Après

La bannière du brouillon empile « MEGA SALE ! », l'offre, le code, la commande minimum et « CGV applicables » en minuscules, puis un bouton. La correction garde le -50 % et dit trois choses : quand (Aujourd'hui seulement), pour qui (votre première commande de plus de 20 $) et le code, sous forme de bouton à copier.

L'offre n'a jamais été le problème. 50 % de réduction est une bonne raison de commander, et la correction la garde à la même taille.

Ce qui a changé, c'est tout ce qu'il y a autour. « MEGA SALE ! » et « 50 % OFF » disaient deux fois la même chose. Les petits caractères entassaient quatre infos sur une ligne à 9 px, séparées par des barres. Le bouton « Commander » ne menait nulle part, puisqu'il n'y a pas encore de restaurant précis où commander.

Le code est désormais l'action. Toucher le code copie YUMMY50, la seule chose qu'une personne doit emporter de cette bannière jusqu'au paiement. Les conditions passent aussi au paiement, là où elles s'appliquent.

L'image a changé également. Le brouillon découpe le burger en cercle flottant sur un dégradé orange. La correction le photographie sur le rouge de la marque, si bien que la nourriture est sur la carte elle-même et non dans un autocollant posé dessus.

Correction 4 : un badge, deux infos

Avant

Après

Avant, la photo porte trois badges (Livraison gratuite, 20 % OFF, Sponsorisé) et le texte en dessous liste les cuisines, le délai de livraison, les frais, le niveau de prix, la commande minimum et les horaires. Après, un badge, le nom, la note et deux infos : combien de temps et combien ça coûte.

Une carte de restaurant dans une liste se lit en une seconde environ, et pendant cette seconde on décide deux choses : est-ce que j'ai envie de ce plat, et est-ce que ça vaut l'attente et les frais. La carte corrigée répond exactement à ça. La photo répond à la première. « 25 à 35 min, 2,99 $ de livraison » répond à la seconde.

Tout le reste sur l'ancienne carte est de l'information réelle, mais pas de l'information de premier coup d'œil. La liste des cuisines se voit déjà dans la photo. La commande minimum de 15 $ et l'heure de fermeture à 23 h ne comptent qu'une fois le choix fait, donc elles ont leur place sur la page du restaurant.

« Sponsorisé » sert l'entreprise, pas le client, et trois badges côte à côte s'annulent. Un seul badge, choisi par priorité, est lu.

Cinq petites corrections

Les quatre éléments ci-dessus sont les gros. Ces cinq changements sont tout aussi délibérés :

• Une seule marge. Le brouillon utilisait 12 px à gauche et 16 px à droite, donc rien n'était aligné avec rien. La correction utilise 20 px des deux côtés, et chaque bord de l'écran se cale sur cette ligne.
• Un système typographique. Le brouillon avait du texte de 9 à 30 px sans paliers entre les deux. La correction utilise les styles de texte iOS, de 11 à 22 pt, donc chaque taille a un rôle et rien n'est trop petit pour être lu.
• Une barre de recherche plus calme. La recherche du brouillon contenait un micro et une icône de filtre, et un texte d'invite assez long pour être coupé. La correction garde une icône et une invite plus courte : « Plats, restaurants ou cuisines ».
• Pas de points de carrousel. Des points sous une bannière promettent d'autres bannières. La plupart des gens ne les font jamais défiler, et les points ajoutent un truc de plus à regarder. Une seule offre n'a pas besoin de points.
• Quatre onglets, pas cinq. Les favoris ont quitté la barre d'onglets. L'enregistrement se fait toujours avec le cœur de chaque carte, et quatre onglets donnent à chacun plus de place et une cible plus facile.

Auditez votre propre écran d'accueil

Placez l'écran d'accueil de votre app à côté de cette checklist. Chaque « non » est un élément qui crie.

Récupérez le fichier Figma

Le fichier gratuit contient les deux écrans sous forme de composants, chaque correction en paire avant et après, les variables de couleur et les styles de texte iOS.

Fichier Figma gratuit

Écran d'accueil de livraison de repas, avant et après

Les deux écrans et chaque élément corrigé en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Que doit afficher en premier l'écran d'accueil d'une app de livraison de repas ?

Où part la commande, une barre de recherche, les catégories et une offre, puis les restaurants. Chaque carte de restaurant a besoin d'une photo, du nom, de la note, du délai de livraison et des frais de livraison.

Combien de badges une carte de restaurant doit-elle avoir ?

Un. Trois badges côte à côte s'annulent ; choisissez celui qui compte le plus pour le client, comme la livraison gratuite.

Une app de livraison doit-elle utiliser une couleur différente par catégorie ?

Non. Donnez à chaque catégorie la même forme et un cadre neutre, et réservez la couleur de la marque à la catégorie sélectionnée, pour que la couleur veuille dire « vous êtes ici ».

Comment concevoir une bannière promo qui convertit ?

Énoncez une offre une seule fois : la réduction, à qui elle s'adresse et le code. Faites du code l'action, à toucher pour copier, et déplacez les conditions au paiement.

Combien d'onglets une app de livraison de repas doit-elle avoir ?

Quatre ou cinq au maximum. Ici, quatre (Accueil, Recherche, Commandes, Compte) ont donné plus de place à chaque onglet, l'enregistrement étant géré par le cœur de chaque carte.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Les mesures du tableau proviennent des fichiers Figma.
• Photos de nourriture via Unsplash par Fernando Andrade, sina piryae, Mahmoud Fawzy, Anna Pelzer, Alana Harris, Thimotius Timmy et Poul Hoang. Burger promo par Elements Interactive sur Pexels, dont le fond de studio a été remplacé par le rouge de la marque via la couleur, sans IA.
• Tailles de texte iOS tirées des Human Interface Guidelines, Typography d'Apple.
• D'abord publié sous forme de carrousel sur App Brainy.