Design d'app de sneakers : refonte d'une page produit, avant et après
Une page produit de sneakers avec quatre icônes et trois badges sur la photo, un prix noyé parmi cinq chiffres et des pointures qui n'indiquent pas laquelle est choisie, puis la même page corrigée. Chaque changement côte à côte, la raison de chacun, et le fichier Figma gratuit.
Un client ouvre une page de sneakers pour répondre à trois questions : à quoi elles ressemblent, combien elles coûtent, et si elles existent dans sa pointure. Le premier jet ci-dessous contient les trois réponses et oblige le client à les chercher. La correction garde le même produit et le même prix, et range les réponses dans l'ordre où le client les demande.
L'écran entier, avant et après
Brouillon junior
Corrigé
À gauche, le client croise sept petites marques sur la photo avant même le nom du produit. À droite, la photo vient d'abord, puis le nom et le prix, et le seul bouton sombre est celui qui achète.
| Brouillon junior | Corrigé | |
|---|---|---|
| Icônes sur la photo | 4 | 2 |
| Badges sur la photo | 3 | 0 |
| Prix | Un des 5 chiffres d'une rangée | Sa propre ligne, ancien prix barré, 19 % de remise à côté |
| Cases de pointure | 41 sur 32 px, une rangée de 8 | Pastilles de 44 px, grille de 2 rangées |
| Pointure choisie | Une bordure de 1 px | Remplie en #111111 |
| Pointure épuisée | Ressemble aux autres | Barrée sur gris |
| Boutons d'achat | 2 boutons en capitales et un lien | 1 bouton dans une barre fixe |
| Onglets | 5 | Aucun |
| Marge latérale | 14 px à gauche, 12 px à droite | 20 px des deux côtés |
| Tailles de texte | 9 à 14 px | 12 à 22 pt |
Correction 1 : une photo sans rien dessus
Avant
Après
Quatre icônes et trois badges sur la photo, contre un bouton retour et un bouton favori.
Le brouillon met tout le magasin sur le produit. Retour, partage, favori et un panier avec un « 3 » rouge courent en haut. « Nouveauté », « -19 % » et « Livraison gratuite » s'empilent en bas à gauche, sur le bout de la chaussure.
La correction garde deux boutons ronds de 40 px sur la photo : retour et favori. Le reste est allé à sa place. La remise est à côté du prix, la ligne de livraison est sous le total dans la barre du bas, et les points qui comptent les photos sont sous la photo.
La règle à retenir : une photo produit, c'est le produit. Tout ce qui n'aide pas le client à juger la chaussure a sa place ailleurs.
Correction 2 : le nom d'abord, puis le prix
Avant
Après
Un prix dans une rangée de chiffres, contre un prix sur sa propre ligne.
Le brouillon met la marque en capitales grises de 9 px, un nom de produit qui passe sur deux lignes, puis une rangée : « 129,00 $ | 4,8 (2 341 avis) | 1,2k vendus ». Cinq chiffres partagent une ligne à la même taille, et il faut retrouver le prix parmi eux.
La correction donne au nom sa propre ligne en grands caractères. Le prix a aussi la sienne : « 129 $ » en grand, l'ancien « 159 $ » barré à côté et une petite pastille « 19 % de remise ». La note, les avis et les ventes passent dessous sur une ligne plus discrète, car ils soutiennent la décision et le prix la prend. Les deux écrans portent les mêmes chiffres : 129 divisé par 159 fait 0,81, donc 19 % de remise est exact.
La règle à retenir : quand plusieurs chiffres partagent une ligne, un seul compte pour le client. Donnez-lui sa propre ligne et sa propre taille.
Une règle de prix à vérifier
Un prix barré a un aspect juridique à certains endroits.
Correction 3 : des pointures qui montrent ce qui est choisi
Avant
Après
Huit petites cases, contre une grille de pastilles aux états visibles.
Les cases de pointure du brouillon font 41 sur 32 px sur une rangée. La pointure choisie, 8,5, a une bordure plus foncée de 1 px, et le 9,5 épuisé ressemble aux pointures en stock. Les trois points de couleur n'ont pas de nom.
La correction fait de chaque pointure une pastille de 44 px sur deux rangées de quatre. La choisie est remplie en #111111 avec un texte blanc. L'épuisée est barrée sur gris, donc elle se lit comme indisponible avant même qu'on la touche. Les couleurs reçoivent des noms sous les échantillons : Crimson, Noir et Lime, avec la choisie entourée.
Les 44 px comptent. Les recommandations d'Apple fixent une zone tactile d'au moins 44 sur 44 points, et une case de 32 px dans une rangée de huit se rate facilement.
La règle à retenir : chaque option a besoin de trois états visibles, disponible, choisie et indisponible. Dites chacun avec un remplissage, pas avec un filet.
Correction 4 : une seule barre qui achète
Avant
Après
Deux boutons en capitales et un lien, contre le prix et un seul bouton.
Le brouillon se termine par un sélecteur de quantité, un « AJOUTER AU PANIER » avec contour, un « ACHETER MAINTENANT » noir et un petit lien « Ajouter à la liste d'envies ». Deux boutons de poids presque égal forcent le client à choisir comment acheter, et ils défilent avec la page.
La correction se termine par une seule barre qui reste en bas : « 129 $ », « Livraison gratuite » en dessous, et un bouton noir « Ajouter au panier ». La liste d'envies, c'est le bouton favori sur la photo. La barre d'onglets est partie aussi, car cinq onglets sous une barre d'achat lui font concurrence.
La règle à retenir : donnez à l'action principale un seul bouton, et gardez le prix à côté.
Les petites corrections
- Un seul bord gauche. Les marges du brouillon étaient de 14 px à gauche et 12 px à droite. La correction utilise 20 px des deux côtés.
- Une vraie échelle typographique. Le texte est passé de 9 à 14 px à des tailles iOS de 12 à 22 pt.
- Casse de phrase. « AJOUTER AU PANIER » et « ACHETER MAINTENANT » en capitales sont devenus « Ajouter au panier ».
- Un lien plus discret. « Guide des tailles » en bleu est passé en gris, car il soutient le choix sans être le choix.
Auditez votre propre page produit
| Question | Pourquoi c'est important |
|---|---|
| La photo est-elle libre de tout sauf retour et favori ? | Le client est venu regarder le produit |
| Le prix est-il sur sa propre ligne ? | C'est le chiffre que tout client cherche |
| Peut-on distinguer la pointure choisie de l'autre bout de la pièce ? | Une bordure fine n'est pas un état |
| Une pointure épuisée est-elle différente avant d'être touchée ? | Cela évite un toucher raté |
| Le prix reste-t-il à l'écran pendant le défilement ? | Le prix et l'action vont ensemble |
FAQ
Que doit montrer en premier une page produit de sneakers ?
La photo, avec seulement retour et favori dessus. Puis le nom, puis le prix sur sa propre ligne.
Comment concevoir un sélecteur de pointure pour chaussures ?
Faites de chaque pointure une pastille d'au moins 44 px, remplissez la choisie d'une couleur sombre et barrez les pointures épuisées. Une bordure fine autour de la pointure choisie est trop pâle pour se lire.
Comment afficher un prix soldé sur une page produit ?
Montrez le prix actuel en grand, l'ancien prix barré à côté et le pourcentage de remise dans une petite pastille. Les deux écrans ici utilisent 129 $, 159 $ et 19 % de remise. Vérifiez les règles locales sur l'ancien prix que vous avez le droit d'afficher.
Une page produit doit-elle avoir à la fois Ajouter au panier et Acheter maintenant ?
Un seul bouton principal est plus clair. Deux boutons de même poids font choisir au client une façon d'acheter avant qu'il ait décidé d'acheter.
Une page produit doit-elle avoir une barre d'onglets ?
Pas sur cet écran. La page a une seule tâche, et une barre d'onglets sous la barre d'achat lui fait concurrence.
Sources
- Les deux écrans sont les nôtres, conçus et mesurés dans Figma. Le nom du produit, la marque, les prix et les avis sont inventés.
- Photo du produit via Pexels par Ahimsa - OM.
- 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 zone tactile de 44 pt.
- Communication de la Commission européenne sur l'interprétation de l'article 6 bis de la directive 98/6/CE, pour la règle du prix antérieur.
- D'abord publié sous forme de carrousel sur App Brainy.
Want this for your own app? Our team redesigns product pages and shop apps like this one, from the first audit to the finished components.
Get Started
