Wireframe-Design für Marktplatz-Checkout-App

Struktur des Marktplatz-Checkouts

Dieses offizielle OpenDesign-Beispiel zeigt einen mobilen Kaufprozess in niedriger Detailtreue mit dem Titel „Marketplace App · Buy Flow WIREFRAME v0.1 · MOBILE“. Die vier Phone-Screens nutzen einen gemeinsamen Rahmen in iPhone-Größe, die Statuszeit 9:41, graue Platzhalterblöcke und schwarze Primäraktionen. Die wiederholte Hülle macht die wechselnde Aufgabe leicht vergleichbar und lenkt die Aufmerksamkeit auf die Abfolge statt auf das finale Markendesign.

Der erste Screen platziert einen großen Bildplatzhalter über kurzen grauen Textzeilen und verankert „GET STARTED“ am unteren Rand, darunter „Skip for now“. Diese Reihenfolge gibt dem gedachten Produktnutzen Raum vor der ersten Aktion und erhält zugleich einen alternativen Einstieg. Der Kompromiss: Botschaft und Bildwelt bleiben für spätere Inhaltsentscheidungen offen.

Das Artefakt ist ein reiner Designablauf: Seine Labels und Zustände beschreiben eine vorgeschlagene Marktplatz-Erfahrung, keinen angebundenen Shop, kein Bestandssystem, keinen Zahlungsdienst und keine abgeschlossene Bestellung.

Sichtbare Designentscheidungen

Die angezeigte Uhrzeit bleibt in allen gelieferten Aufnahmen 9:41, während sich die Primäraktion von „GET STARTED“ über „ADD TO CART“ zu „DONE“ ändert. Die wiederholte Zeitdarstellung dient als stabile Rahmenreferenz; die wechselnden Aktionslabels tragen den Zustandsübergang. Die Platzhalterinhalte vermitteln Geometrie und Gewichtung, ohne Produktdaten zu behaupten.

Die Quelle nennt ein iPhone-Ziel von 390 × 844 und geringe Greybox-Detailtreue, während das tatsächliche CSS des Phone-Rahmens jeden Screen mit 258 × 524 Pixeln rendert. Das sind ein deklariertes Zielgerät und ein kompakter Präsentationsrahmen, keine identischen Maße. Die großzügigen unteren Aktionsbereiche helfen beim Vergleich der Prioritäten, doch finale Texte sowie die Validierung von Barrierefreiheit und Interaktion stehen noch aus.

Wann dieser Ablauf hilft

Dieses Wireframe ist nützlich, wenn ein Produktteam eine Marktplatz-Journey besprechen muss, bevor es sich auf eine visuelle Richtung oder ein Dienstverhalten festlegt. Die expliziten Labels „FIRST LAUNCH“, „BROWSE + SEARCH“, „SPECS + CTA“ und „ORDER PLACED“ benennen die vorgesehene Rolle jedes Zustands, sodass Teams fehlende Entscheidungen erkennen, ohne das Beispiel für einen Produktivablauf zu halten.

Besonders geeignet ist es für frühe Reviews zu Onboarding-Druck, Informationsdichte im Produktdetail und Bestätigungstexten. Die Abfolge schlägt vor, dass Stöbern zu einem Artikel führt, der Artikel zu „ADD TO CART“ und der letzte Zustand zu „DONE“. Dieser lineare Pfad ist leicht erklärt, zeigt aber noch keine Zurück-Navigation, Warenkorbprüfung, Mengenänderungen, Fehler, Lieferoptionen oder Zahlungsdetails.

Vom ersten Start zur Bestätigung

Die Quelle ordnet vier vollständige Phone-Wireframes nebeneinander an, verbunden durch drei orange Annotationen: ① tap Start, ② open item und ③ add to cart. Der Stöbern-Screen hat einen Suchplatzhalter, vier Kategorie-Pills, vier Zeilen aus Vorschaubild und Text sowie vier Positionen der unteren Navigation. Es handelt sich um statische div- und span-Formen ohne Click-Handler; ihre Aufgabe ist es, die Entdeckung vor dem Detailscreen zu beschreiben, nicht Suche oder Einkauf zu implementieren.

Der Produktdetail-Screen setzt einen großen Medienplatzhalter über einen Titelbalken, einen dunklen Hervorhebungsbalken und drei paarweise Spezifikationszeilen. Ein separater dunkler Preisplatzhalter steht unten neben ADD TO CART und bewahrt die Beziehung zwischen Preis und Aktion, ohne einen Betrag zu nennen. Diese Priorisierung unterstützt das Überfliegen von der Produktübersicht bis zur Kaufabsicht, doch Varianten, Verfügbarkeit und Kauf-Feedback sind weiterhin undefiniert.

1. Die Journey starten

   Der Willkommenszustand zeigt GET STARTED und Skip for now und bietet damit zwei Einstiegsoptionen, bevor Nutzer Marktplatzinhalte erreichen.

2. Stöbern und auswählen

   Der annotierte Home-Feed-Zustand trägt das Label BROWSE + SEARCH und verweist auf das Öffnen eines Artikels; die Entdeckung wird so zur Brücke zwischen Onboarding und Detail.

3. Prüfen und hinzufügen

   Der Artikeldetail-Zustand trägt das Label SPECS + CTA und endet mit ADD TO CART; Bewertung und Kaufaktion bleiben so getrennt.

4. Das Ergebnis bestätigen

   Der letzte Zustand nutzt ein orangefarben umrandetes Häkchen, Zusammenfassungsplatzhalter und DONE, um die Bestellbestätigung darzustellen.

Grenzen der Aussagekraft

Das Artefakt liefert einen visuellen Vorschlag für vier mobile Zustände und ihre vorgesehenen Labels. Es belegt weder funktionierende Navigation noch echte Marktplatzdaten, Kontoverwaltung, Checkout-Verarbeitung, erfolgreiche Zahlung oder Bestellspeicherung. Der Abschlussscreen ist daher am besten als gestalteter Bestätigungszustand zu lesen, nicht als Beleg dafür, dass eine Bestellung aufgegeben wurde.

Für eine Anpassung sollten Sie die beobachtete Zustandsunterscheidung und Aktionsabfolge beibehalten, die illustrativen Platzhalter durch geprüfte Inhalte ersetzen und ausgelassene Zustände definieren. Validieren Sie, ob der vorgeschlagene Checkout auf einem Screen noch ausreicht, sobald Anforderungen an Adresse, Lieferung, Zahlung, Fehler und Wiederherstellung bekannt sind.