Design d'appli de recettes : refonte d'un écran d'accueil, avant et après

Une appli de recettes part avec le meilleur atout qu'un écran puisse avoir : une nourriture qui donne envie. Le premier jet ci-dessous a de vraies recettes et de belles photos, puis les étouffe avec une barre de recherche qui énumère quatre choses, un arc-en-ciel de catégories, de petites majuscules sur la photo principale et trois icônes sur chaque ligne. La correction garde tout le contenu et laisse de la place à la nourriture.

L'écran entier, avant et après

Brouillon junior

Corrigé

L'écran de gauche a beaucoup à offrir et vous dit tout en même temps. À droite, les mêmes recettes arrivent dans l'ordre où un cuisinier les cherche : trouver, filtrer, choisir, puis parcourir.

Comptez ce qu'une personne doit lire avant de choisir son dîner. Dans le brouillon : un message d'accueil avec une sous-ligne, une barre de recherche, un bouton de filtre, une cloche, des pastilles de catégories en six couleurs, un titre sur une photo, une ligne de cinq infos en majuscules, deux boutons sur la photo, puis trois icônes sur chacune des quatre lignes. L'écran corrigé en demande moins à chaque étape, et les chiffres le montrent.

Correction 1 : laisser la recherche dire ce qu'elle trouve

Avant

Après

Un placeholder qui énumère quatre choses et manque de place, contre deux choses et un filtre.

Le placeholder du brouillon est « Rechercher des recettes, ingrédients, cuisines, ch... », coupé au milieu du quatrième mot. Un placeholder est l'unique phrase qu'une barre de recherche peut dire : elle doit donc dire ce que fait la barre, et tenir dans l'espace. La liste du brouillon ne tient pas, et un indice coupé passe pour une erreur.

La correction nomme les deux choses que les gens tapent vraiment : recettes ou ingrédients. Tout le reste, comme la cuisine ou le régime, c'est le rôle du bouton de filtre à côté.

Le bouton de filtre est aussi passé d'un carré terracotta plein à un carré blanc. Un bouton plein est l'élément le plus bruyant de la ligne, et c'était le filtre, pas la recherche. La cloche a quitté cette ligne pour remonter au message d'accueil : la ligne n'est plus qu'une recherche et un bouton.

Correction 2 : un seul style pour toutes les catégories

Avant

Après

Cinq catégories en cinq couleurs avec une icône chacune, contre un seul style et une pastille remplie.

Quand chaque catégorie a sa propre couleur, les couleurs ne veulent plus rien dire. Le petit-déjeuner est pêche, le déjeuner est vert, le dîner est violet. Rien de tout cela n'indique au cuisinier laquelle est active, et le brouillon n'a aucun état sélectionné.

Dans la correction, chaque pastille est blanche et simple, et la sélectionnée, « Tout », est remplie du terracotta de la marque. La couleur porte maintenant une seule information : ce qui est actif.

Les pastilles sont aussi plus grandes, donc plus faciles à toucher, et la rangée s'estompe au bord droit où elle défile. Dans le brouillon, la rangée est simplement coupée au bord de l'écran, avec « Végétalien » tranché en deux. Un fondu dit « il y a la suite, faites glisser ». Une coupe nette ne dit rien.

Correction 3 : les infos passent sous la photo

Avant

Après

Un titre et cinq infos en majuscules sur une assiette claire, contre un titre et trois infos avec icônes sur la carte en dessous.

Le brouillon pose un titre de 15 px et une ligne de majuscules blanches de 9 px sur une assiette claire et une table claire. L'assiette est tout l'intérêt de la photo, et le texte est posé dessus dans la seule couleur qui s'y fond. La ligne porte les infos dont un cuisinier a besoin pour décider : temps, difficulté et portions. C'est la partie la plus difficile à lire de la photo.

La correction descend le texte sur une carte sous la photo, en caractères sombres. Les trois infos qui décident si l'on cuisine ce soir gardent leur place, chacune avec une icône : une horloge pour 30 min, un graphique en barres pour Facile et deux personnes pour 4 portions. On apprend les icônes une fois, puis on lit la ligne d'un coup d'œil. La carte corrigée abandonne les calories et la note, qui peuvent aller sur la page de la recette.

Les boutons de la photo sont passés de deux, un cœur et un partage, à un seul : sauvegarder. C'est l'action qu'un cuisinier attend d'une carte recette, car sauvegarder, c'est la façon de cuisiner la recette plus tard.

Correction 4 : une ligne, c'est une recette, un temps et un niveau

Avant

Après

Quatre lignes avec la mention d'un chef et trois icônes chacune, contre trois lignes avec temps, niveau et deux icônes discrètes.

Chaque ligne du brouillon porte une miniature, un nom, une ligne de temps, difficulté et « par le chef Anna », et trois icônes : un cœur, un marque-page et un partage. Un cœur et un marque-page sont deux façons de dire « j'aime », et une liste de quatre lignes imprime ce choix douze fois.

Dans la correction, chaque ligne a une photo plus grande, le nom, et une ligne de temps et de difficulté. À droite, deux icônes, partager et sauvegarder, d'un gris clair qui reste discret jusqu'à ce qu'on en ait besoin. La première recette montre à quoi ressemble l'état sauvegardé : le marque-page se remplit du terracotta de la marque, la même couleur que la catégorie sélectionnée. Le titre « Recettes populaires » raccourcit en « Populaires », car l'appli parle déjà de recettes.

La liste corrigée montre trois recettes au lieu de quatre, ce qui laisse de la place à la carte au-dessus de la barre d'onglets.

Les petites corrections

• Quatre onglets, pas cinq. Accueil, Recherche, Favoris et Profil remplacent Accueil, Recherche, Favoris, Planning et Profil.
• Une seule marge. Le brouillon utilisait 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés et 14 px entre les blocs.
• Un message d'accueil plus court. « Salut Maya ! Qu'as-tu envie de cuisiner aujourd'hui ? » est devenu « Qu'est-ce qu'on cuisine, Maya ? ».
• Une seule couleur de marque. Le terracotta, #C8553D, marque la pastille sélectionnée, le marque-page sauvegardé, l'onglet actif et les petits libellés. Rien d'autre n'est coloré.
• Une vraie échelle typographique. Le texte est passé de 8 à 18 px aux tailles iOS de 11 à 22 pt.

Auditez votre propre appli de recettes

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

Écran d'accueil d'appli de recettes, avant et après

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

Ouvrir dans Figma

FAQ

Que doit montrer l'écran d'accueil d'une appli de recettes ?

Une barre de recherche qui dit ce qu'elle trouve, une rangée de catégories, une recette mise en avant avec son temps, sa difficulté et ses portions, et une courte liste de recettes populaires. Les calories, les notes et les mentions de chef peuvent vivre sur la page de la recette.

Que doit dire la barre de recherche d'une appli de recettes ?

Dire ce que la barre trouve, avec le moins de mots possible : « Rechercher recettes ou ingrédients ». Une longue liste de tout ce qu'elle pourrait trouver se fait couper, et le reste a sa place dans un filtre.

À quoi doivent ressembler les pastilles de catégories dans une appli de recettes ?

Un seul style pour toutes, avec la pastille sélectionnée remplie de la couleur de la marque. Laissez la rangée défiler et s'estomper au bord pour que l'on voie qu'il y a la suite.

Où placer le temps et la difficulté d'une recette ?

Sous la photo, sur une ligne avec une petite icône chacun : une horloge pour le temps, un niveau pour la difficulté et des personnes pour les portions. Le texte sur une photo de plat est difficile à lire et cache le plat.

Combien d'icônes par ligne dans une liste de recettes ?

Deux ou moins. Sauvegarder et partager suffisent, et un gris discret les empêche de rivaliser avec le plat.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'utilisatrice, les chefs et la liste de recettes sont inventés pour l'exercice.
• Photos via Pexels par Tamra Creatives Agency, Willians Huerta, Kei Scampa, Ana Palade, adrian vieriu et Surendra Shrestha.
• Apple Human Interface Guidelines: Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), pour le texte sur les images et les arrière-plans.
• Publié d'abord en carrousel sur App Brainy.