Sneaker-App-Design: Redesign einer Produktseite, Vorher und Nachher
Eine Sneaker-Produktseite mit vier Icons und drei Badges auf dem Foto, einem Preis, der zwischen fünf Zahlen untergeht, und Größen, bei denen man nicht sieht, welche gewählt ist, und dieselbe Seite repariert. Jede Änderung im direkten Vergleich, der Grund dahinter und die kostenlose Figma-Datei.
Wer eine Sneaker-Seite öffnet, will drei Fragen beantwortet haben: Wie sieht er aus, was kostet er, und gibt es ihn in meiner Größe? Der erste Entwurf unten liefert alle drei Antworten und lässt die Käuferin danach suchen. Die Lösung behält dasselbe Produkt und denselben Preis und bringt die Antworten in die Reihenfolge, in der gefragt wird.
Der ganze Screen, vorher und nachher
Junior-Entwurf
Repariert
Links begegnen der Käuferin sieben kleine Markierungen auf dem Foto, noch vor dem Produktnamen. Rechts kommt zuerst das Foto, dann Name und Preis, und der einzige dunkle Button ist der, der kauft.
| Junior-Entwurf | Repariert | |
|---|---|---|
| Icons auf dem Foto | 4 | 2 |
| Badges auf dem Foto | 3 | 0 |
| Preis | Eine von 5 Zahlen in einer Reihe | Eigene Zeile, alter Preis durchgestrichen, 19 % Rabatt daneben |
| Größenkästchen | 41 mal 32 px, eine Reihe mit 8 | 44-px-Chips, Raster aus 2 Reihen |
| Gewählte Größe | Ein 1-px-Rahmen | Gefüllt mit #111111 |
| Ausverkaufte Größe | Sieht aus wie die anderen | Durchgestrichen auf Grau |
| Kauf-Buttons | 2 Versal-Buttons und ein Link | 1 Button in einer Sticky-Leiste |
| Tabs | 5 | Keine |
| Seitenrand | 14 px links, 12 px rechts | 20 px auf beiden Seiten |
| Schriftgrößen | 9 bis 14 px | 12 bis 22 pt |
Fix 1: ein Foto ohne alles drauf
Vorher
Nachher
Vier Icons und drei Badges auf dem Foto, gegen einen Zurück-Button und einen Merken-Button.
Der Entwurf packt den ganzen Shop auf das Produkt. Zurück, Teilen, Merken und ein Warenkorb mit roter „3“ laufen oben entlang. „Neuheit“, „-19 %“ und „Gratisversand“ stapeln sich unten links, über der Schuhspitze.
Die Lösung lässt zwei runde 40-px-Buttons auf dem Foto: Zurück und Merken. Der Rest ist dorthin gewandert, wo er hingehört. Der Rabatt steht neben dem Preis, die Versandzeile unter der Summe in der unteren Leiste, und die Punkte, die die Fotos zählen, sitzen unter dem Foto.
Die Regel zum Mitnehmen: Ein Produktfoto ist das Produkt. Alles, was nicht hilft, den Schuh zu beurteilen, gehört woandershin.
Fix 2: erst der Name, dann der Preis
Vorher
Nachher
Ein Preis in einer Reihe von Zahlen, gegen einen Preis auf eigener Zeile.
Der Entwurf setzt die Marke in 9 px grauen Versalien, einen Produktnamen, der auf zwei Zeilen umbricht, dann eine Reihe: „$129.00 | 4.8 (2,341 Rezensionen) | 1,2k verkauft“. Fünf Zahlen teilen sich eine Zeile in gleicher Größe, und der Preis muss erst gefunden werden.
Die Lösung gibt dem Namen eine eigene Zeile in großer Schrift. Der Preis bekommt ebenfalls eine eigene Zeile: „$129“ groß, daneben der alte Preis „$159“ durchgestrichen und ein kleiner Chip „19 % Rabatt“. Bewertung, Rezensionen und Verkäufe stehen darunter in einer leiseren Zeile, denn sie stützen die Entscheidung, und der Preis trifft sie. Beide Screens tragen dieselben Zahlen: 129 geteilt durch 159 ist 0,81, also sind 19 % Rabatt korrekt.
Die Regel zum Mitnehmen: Wenn sich mehrere Zahlen eine Zeile teilen, braucht die Käuferin nur eine davon. Gib ihr eine eigene Zeile und Größe.
Eine Preisregel zum Prüfen
Ein durchgestrichener Preis hat an manchen Orten eine rechtliche Seite.
Fix 3: Größen, die zeigen, was gewählt ist
Vorher
Nachher
Acht kleine Kästchen, gegen ein Raster aus Chips mit sichtbaren Zuständen.
Die Größenkästchen im Entwurf sind 41 mal 32 px in einer Reihe. Die gewählte Größe 8,5 hat einen 1 px dunkleren Rahmen, und die ausverkaufte 9,5 sieht aus wie die lieferbaren Größen. Die drei Farbpunkte haben keine Namen.
Die Lösung macht jede Größe zu einem 44-px-Chip in zwei Reihen mit je vier. Die gewählte ist mit #111111 gefüllt und hat weißen Text. Die ausverkaufte ist auf Grau durchgestrichen, sie wirkt also nicht verfügbar, noch bevor jemand tippt. Die Farben bekommen Namen unter den Feldern: Crimson, Schwarz und Limette, die gewählte mit Ring.
Die 44 px Höhe zählen. Apples Richtlinie verlangt ein Tippziel von mindestens 44 mal 44 Punkten, und ein 32-px-Kästchen in einer Reihe aus acht verfehlt man leicht.
Die Regel zum Mitnehmen: Jede Option braucht drei sichtbare Zustände: verfügbar, gewählt und nicht verfügbar. Sag jeden mit Füllung, nicht mit einer Haarlinie.
Fix 4: eine Leiste, die kauft
Vorher
Nachher
Zwei Versal-Buttons und ein Link, gegen den Preis und einen Button.
Der Entwurf schließt mit einem Mengen-Stepper, einem umrandeten „IN DEN WARENKORB“, einem schwarzen „JETZT KAUFEN“ und einem kleinen Link „Zur Wunschliste“. Zwei Buttons fast gleichen Gewichts zwingen die Käuferin, einen Kaufweg zu wählen, und sie scrollen mit der Seite weg.
Die Lösung schließt mit einer Leiste, die unten bleibt: „$129“, darunter „Gratisversand“ und ein schwarzer Button „In den Warenkorb“. Die Wunschliste ist der Merken-Button auf dem Foto. Die Tab-Leiste ist ebenfalls weg, denn fünf Tabs unter einer Kauf-Leiste konkurrieren mit ihr.
Die Regel zum Mitnehmen: Gib der Hauptaktion einen Button und halte den Preis daneben.
Die kleineren Fixes
- Eine linke Kante. Die Ränder im Entwurf waren 14 px links und 12 px rechts. Die Lösung nutzt auf beiden Seiten 20 px.
- Eine echte Schriftskala. Der Text ging von 9 bis 14 px auf iOS-Größen von 12 bis 22 pt.
- Normale Groß- und Kleinschreibung. „IN DEN WARENKORB“ und „JETZT KAUFEN“ in Versalien wurden zu „In den Warenkorb“.
- Ein leiserer Link. „Größentabelle“ in Blau wurde zu „Größenratgeber“ in Grau, denn er stützt die Wahl und ist nicht die Wahl.
Prüfe deine eigene Produktseite
| Frage | Warum es wichtig ist |
|---|---|
| Ist das Foto frei von allem außer Zurück und Merken? | Die Käuferin kam, um das Produkt anzusehen |
| Steht der Preis auf einer eigenen Zeile? | Es ist die Zahl, die jede Käuferin sucht |
| Erkennst du die gewählte Größe quer durch den Raum? | Ein Haarlinien-Rahmen ist kein Zustand |
| Sieht eine ausverkaufte Größe schon vor dem Tippen anders aus? | Das erspart einen vergeblichen Tipp |
| Bleibt der Preis beim Scrollen auf dem Screen? | Preis und Aktion gehören zusammen |
FAQ
Was sollte eine Sneaker-Produktseite zuerst zeigen?
Das Foto, mit nichts darauf außer Zurück und Merken. Dann den Namen, dann den Preis auf einer eigenen Zeile.
Wie gestaltet man eine Größenauswahl für Schuhe?
Mach jede Größe zu einem Chip von mindestens 44 px, fülle die gewählte in einer dunklen Farbe und streiche ausverkaufte Größen durch. Ein Haarlinien-Rahmen um die gewählte Größe ist zu schwach zum Lesen.
Wie sollte ein Sale-Preis auf einer Produktseite gezeigt werden?
Zeige den aktuellen Preis groß, daneben den alten Preis durchgestrichen und den Rabatt in Prozent in einem kleinen Chip. Beide Screens hier nutzen $129, $159 und 19 % Rabatt. Prüfe die lokalen Regeln, welchen alten Preis du zeigen darfst.
Sollte eine Produktseite sowohl „In den Warenkorb“ als auch „Jetzt kaufen“ haben?
Ein Hauptbutton ist klarer. Zwei Buttons gleichen Gewichts zwingen die Käuferin, einen Kaufweg zu wählen, bevor sie sich zum Kauf entschieden hat.
Sollte eine Produktseite eine Tab-Leiste haben?
Nicht auf diesem Screen. Die Seite hat eine Aufgabe, und eine Tab-Leiste unter der Kauf-Leiste konkurriert mit ihr.
Quellen
- Beide Screens sind von uns, in Figma gestaltet und vermessen. Produktname, Marke, Preise und Rezensionen sind erfunden.
- Produktfoto über Pexels von Ahimsa - OM.
- Apple Human Interface Guidelines: Typography, für die iOS-Schriftgrößen im reparierten Screen.
- Apple Human Interface Guidelines: Accessibility, für die Tippzielgröße von 44 pt.
- Bekanntmachung der Europäischen Kommission zur Auslegung von Artikel 6a der Richtlinie 98/6/EG, für die Regel zum vorherigen Preis.
- Zuerst veröffentlicht als Karussell auf 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
