Design d'app de boutique de plantes : refonte de l'écran d'accueil e-commerce
L'écran d'accueil d'une app de boutique de plantes signé junior, avec quatre icônes dans l'en-tête, trois filtres déroulants et sept éléments 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 boutique de plantes a déjà réglé le plus facile : les produits se photographient bien. Le premier jet ci-dessous a de vraies plantes et de vraies photos, puis les enterre sous un en-tête surchargé, trois filtres déroulants, un long bloc de conseils d'entretien et sept éléments sous chaque carte. La correction garde toutes les fonctionnalités et rend aux plantes leur espace.
L'écran entier, avant et après
Version junior
Corrigé
À gauche, l'acheteur doit lire un en-tête, une barre de filtres, trois phrases de conseils et une pile de détails produit avant de voir une seule plante en entier. À droite, les premières plantes apparaissent juste après trois blocs courts, chaque carte est une plante entière avec un prix, et le vert n'a qu'un seul rôle : signaler ce qu'on peut toucher.
La promo reste sur les deux écrans. Le Pilea est à 24,99 $ avec 31,00 $ barré, et le palmier de salon à 28,00 $ avec 35,00 $ barré. La boutique, ses prix et ses avis sont inventés pour l'exercice ; les plantes, elles, sont réelles.
| Version junior | Corrigé | |
|---|---|---|
| Icônes d'en-tête à côté du logo | 4 | 2 |
| Filtres | 3 menus déroulants et un lien de tri | 4 puces tactiles |
| Conseils d'entretien | 3 longues phrases | 3 faits courts avec icônes |
| Éléments sous la photo de chaque carte | 7 | 2, plus un bouton d'ajout |
| Onglets | 5 | 4 |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Tailles de texte | 8 à 20 px | 11 à 20 pt |
Correction 1 : le logo, la recherche et le panier, rien d'autre
Avant
Après
Un menu, le logo et trois petites icônes, face au même logo avec deux grands boutons ronds.
L'en-tête du brouillon porte un menu, le logo, la recherche, un cœur et un panier. Le cœur est une liste de souhaits, et l'écran corrigé lui donne un onglet, Favoris, donc le cœur n'a plus besoin d'habiter l'en-tête. Le panier garde sa place parce que c'est le seul contrôle qu'on s'attend à trouver en haut d'une boutique, et son badge indique combien d'articles il contient.
Les icônes restantes sont plus grandes : deux boutons de 44 px au lieu de quatre petites icônes. Un téléphone se tient à une main, et une cible plus grande se touche plus facilement. Le logo est le même wordmark sur les deux écrans, et c'est tout le propos : l'en-tête a été corrigé en retirant des choses, pas en relookant la marque.
Le badge est passé du rouge au vert de la marque. Un point rouge signale un problème ou une urgence. Un compteur d'articles n'est ni l'un ni l'autre.
Correction 2 : des filtres visibles, pas des menus déroulants
Avant
Après
Catégorie, Prix et Taille en menus déroulants fermés plus un lien Trier, face à Intérieur, Extérieur, Succulentes et Sans danger pour les animaux en puces, avec Intérieur sélectionnée.
Un menu déroulant cache ses options. Pour l'utiliser, on le touche, on lit une liste, on choisit, et la liste se referme. Trois menus, c'est trois allers-retours avant que la moindre plante ait changé à l'écran. Et ils disent quel type de filtre existe, pas ce qu'il contient.
Les puces montrent les choix à découvert. Intérieur, extérieur, succulentes et sans danger pour les animaux sont les vraies questions d'un acheteur de plantes : un toucher répond à l'une d'elles, et la puce sélectionnée en vert indique l'état actuel. Les quatre puces tiennent dans la ligne de 350 px avec 6 px de marge, donc aucune n'est coupée et aucune ne demande de défilement.
Correction 3 : une carte qui montre la plante entière
Avant
Après
Une photo, un badge, un cœur, deux noms, un prix, des étoiles, un nombre d'avis et un bouton pleine largeur, face à une photo, un nom court, un prix et un seul bouton rond.
La carte du brouillon empile sept éléments sous la photo : le nom latin de la plante, son nom courant, le prix, l'ancien prix, les étoiles, le nombre d'avis et un bouton Ajouter au panier pleine largeur. Sur la photo elle-même, un badge de réduction et un cœur. Le tout dans une carte large de la moitié de l'écran.
La correction garde deux lignes et un bouton. Le nom est court (« Pilea », « Calathea ») et le prix se place dessous, avec l'ancien prix barré en cas de promo. Un bouton plus rond remplace la large barre Ajouter au panier, parce qu'un plus sur une carte produit est un motif que les acheteurs connaissent déjà.
Les photos ont changé aussi. Les cadrages du brouillon coupent les plantes et les pots ne sont pas alignés. La correction recadre chaque photo pour que la plante entière occupe environ 70 % de la hauteur du cadre, centrée, avec chaque pot sur la même ligne. Une rangée de cartes se lit alors comme une rangée, et non comme quatre images différentes.
Correction 4 : les conseils d'entretien en trois faits
Avant
Après
Trois phrases de conseils dans un encadré vert, face à trois icônes avec un libellé et un mot chacune.
Le brouillon dit les bonnes choses, mais l'acheteur doit lire trois phrases pour les trouver. Les trois faits sont l'eau, la lumière et l'innocuité pour les animaux, et chacun peut se dire en un mot : hebdo, indirecte, sans danger.
La correction donne à chaque fait une icône, un petit libellé et ce mot en gras. Toute la carte se lit d'un coup d'œil. Un acheteur qui cherche « puis-je la mettre près de mon chat ? » trouve « Animaux : sans danger » sans rien lire.
Les petites corrections
- Quatre onglets, pas cinq. Accueil, Boutique, Favoris et Profil. La liste de souhaits est devenue Favoris, et le panier a quitté la barre d'onglets pour l'en-tête.
- Une seule marge. Le brouillon utilisait 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés et 12 à 14 px entre les blocs.
- Pas de badges sur les photos. Les badges rouge -20 % et bleu NOUVEAU et le cœur sur chaque photo ont disparu. La promo reste visible, car le prix barré demeure.
- Une seule couleur d'accent. Au vert du brouillon s'ajoutaient des badges rouges et bleus. La correction utilise un seul vert de marque, #1F7A4D, pour tout ce qui est tactile.
- Une vraie échelle typographique. Le texte est passé de 8 à 20 px aux tailles iOS de 11 à 20 pt.
- Un titre de section plus court. « Plantes populaires » est devenu « Populaires », parce que l'écran parle déjà de plantes.
Auditez votre propre app de boutique
| Question | Pourquoi c'est important |
|---|---|
| L'en-tête peut-il se réduire au logo, à la recherche et au panier ? | Chaque icône en plus fait concurrence à celle que les gens utilisent |
| Un menu déroulant peut-il devenir des puces ? | Des choix visibles ne demandent aucun toucher de plus |
| Chaque carte produit montre-t-elle un prix et une action ? | Sept détails transforment une carte en formulaire |
| Les photos montrent-elles le produit entier à la même échelle ? | Des cadrages coupés rendent une grille inégale |
| Un paragraphe de conseils peut-il devenir trois faits courts ? | Les acheteurs scannent, ils ne lisent pas |
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 de boutique de plantes, avant et après
Les deux écrans et chaque partie corrigée en composants Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.
FAQ
Que doit montrer en premier l'écran d'accueil d'une app e-commerce ?
Un en-tête court avec le logo, la recherche et le panier, puis des filtres en puces et les premiers produits. Gardez petit tout ce qui n'est pas un produit, comme les conseils ou les bannières.
Les filtres d'une app de boutique doivent-ils être des menus déroulants ou des puces ?
Des puces, pour les quelques filtres les plus utilisés. Les puces montrent les choix sans toucher, et la puce sélectionnée indique l'état actuel. Gardez les menus déroulants ou une feuille de filtres pour les longues listes comme le prix et la taille.
Que doit afficher une carte produit dans une app d'achat ?
Une photo du produit entier, un nom, un prix et un bouton d'ajout. Les détails comme les notes et le nom long peuvent aller sur la page produit.
Comment afficher les instructions d'entretien dans une app ?
Sous forme de quelques faits courts avec icônes, un mot chacun, comme Eau : hebdo. Les longues phrases peuvent vivre un toucher plus loin.
Combien d'onglets une app d'achat doit-elle avoir ?
Quatre ou cinq. Fusionnez les doublons dans les endroits où les gens regardent déjà, comme le panier dans l'en-tête et la liste de souhaits dans un onglet Favoris.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. La boutique, ses prix et ses avis sont inventés ; les noms de plantes sont réels.
- Photos via Pexels par Kulbir, Gül Işık et Kaboompics.
- Apple Human Interface Guidelines: Typography, pour les tailles de texte iOS utilisées dans l'écran corrigé.
- D'abord publié en 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
