Maquette filaire d’application de checkout pour marketplace

Structure du checkout de la marketplace

Cet exemple officiel OpenDesign présente un parcours d’achat mobile en basse fidélité intitulé « Marketplace App · Buy Flow WIREFRAME v0.1 · MOBILE ». Ses quatre écrans de téléphone partagent un cadre aux dimensions d’iPhone, une heure d’état 9:41, des blocs de remplissage gris et des actions principales noires. Cette enveloppe répétée facilite la comparaison de la tâche qui change et centre l’attention sur la séquence plutôt que sur le style de marque final.

L’écran d’ouverture place un grand emplacement d’image au-dessus de courtes lignes de texte grises, puis ancre « GET STARTED » en bas avec « Skip for now » dessous. Cet ordre laisse de la place à la valeur imaginée du produit avant la première action, tout en conservant un point d’entrée alternatif. En contrepartie, la maquette laisse le message et l’imagerie non résolus pour des décisions de contenu ultérieures.

L’artefact est un parcours de conception uniquement : ses libellés et états décrivent une expérience de marketplace proposée, et non une boutique connectée, un système de stock, un service de paiement ou une commande effectivement passée.

Décisions de conception visibles

L’heure de l’écran reste 9:41 sur toutes les captures fournies, tandis que l’action principale passe de « GET STARTED » à « ADD TO CART », puis à « DONE ». Cet affichage répété sert de repère de cadre stable ; ce sont les libellés d’action qui portent la transition d’état. Le contenu de remplissage communique la géométrie et l’emphase sans prétendre présenter des données produit.

La source indique une cible iPhone de 390 × 844 et une fidélité greybox basse, alors que le CSS du cadre de téléphone affiche en réalité chaque écran à 258 × 524 pixels. Il s’agit d’une cible d’appareil déclarée et d’un cadre de présentation compact, et non de dimensions identiques. Les zones d’action basses généreuses aident à comparer les priorités, mais le texte final, l’accessibilité et la validation des interactions restent à faire.

Quand ce parcours est utile

Cette maquette filaire est utile lorsqu’une équipe produit doit discuter d’un parcours de marketplace avant de s’engager sur une direction visuelle ou un comportement de service. Les libellés explicites « FIRST LAUNCH », « BROWSE + SEARCH », « SPECS + CTA » et « ORDER PLACED » nomment le rôle prévu de chaque état, ce qui permet d’identifier les décisions manquantes sans confondre l’exemple avec un parcours de production.

Elle convient particulièrement aux premières revues de la pression à l’accueil, de la densité des fiches produit et du message de confirmation. La séquence propose que la navigation mène à un article, l’article à « ADD TO CART », et l’état final à « DONE ». Ce chemin linéaire est facile à expliquer, mais il ne montre pas encore le retour en arrière, la revue du panier, les changements de quantité, les erreurs, les choix de livraison ni les détails de paiement.

Du premier lancement à la confirmation

La source place côte à côte quatre maquettes de téléphone complètes, reliées par trois annotations orange : ① toucher Start, ② ouvrir l’article et ③ ajouter au panier. L’écran de navigation comporte un champ de recherche, quatre pastilles de catégorie, quatre lignes vignette-texte et quatre positions de navigation inférieure. Ce sont des formes div et span statiques sans gestionnaire de clic ; leur rôle est de décrire la découverte avant l’écran de détail, et non d’implémenter la recherche ou l’achat.

L’écran de fiche produit place un grand emplacement média au-dessus d’une barre de titre, d’une barre d’accent sombre et de trois lignes de caractéristiques appariées. Un emplacement de prix sombre distinct se trouve à côté de ADD TO CART en bas, ce qui conserve la relation prix-action sans donner de montant. Cette priorité favorise un parcours de lecture de l’aperçu du produit à l’intention d’achat, mais les variantes, la disponibilité et le retour d’achat restent indéfinis.

1. Démarrer le parcours

   L’état d’accueil présente GET STARTED et Skip for now, offrant deux choix d’entrée avant que l’utilisateur n’atteigne le contenu de la marketplace.

2. Parcourir et sélectionner

   L’état annoté du fil d’accueil est intitulé BROWSE + SEARCH et indique l’ouverture d’un article, faisant de la découverte le pont entre l’accueil et le détail.

3. Examiner et ajouter

   L’état de détail de l’article est intitulé SPECS + CTA et se termine par ADD TO CART, séparant l’évaluation de l’action d’achat.

4. Confirmer le résultat

   L’état final utilise une coche orange cerclée, des emplacements de récapitulatif et DONE pour représenter la confirmation de commande.

Limites des capacités

L’artefact établit une proposition visuelle pour quatre états mobiles et leurs libellés prévus. Il n’établit ni navigation fonctionnelle, ni données réelles de marketplace, ni gestion de compte, ni traitement du checkout, ni réussite du paiement, ni persistance des commandes. L’écran de fin se lit donc comme un état de confirmation conçu, et non comme la preuve qu’une commande a été passée.

Pour l’adapter, conservez la distinction observée entre les états et la séquence d’actions, tout en remplaçant les emplacements illustratifs par du contenu vérifié et en définissant les états omis. Vérifiez si le checkout proposé sur un seul écran reste suffisant une fois connues les exigences d’adresse, de livraison, de paiement, d’erreur et de reprise.