Plant Shop App Design: Ein Redesign des Ecommerce-Startscreens

Ein Pflanzenshop hat den leichten Teil schon gelöst: Die Produkte sind fotogen. Der erste Entwurf unten hat echte Pflanzen und echte Fotos, begräbt sie aber unter einem überfüllten Header, drei Dropdown-Filtern, einem langen Block mit Pflegetipps und sieben Dingen unter jeder Karte. Die Lösung behält jede Funktion und gibt den Pflanzen den Platz.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links muss ein Shopper sich durch einen Header, eine Filterleiste, drei Sätze Ratschläge und einen Stapel Produktdetails lesen, bevor eine Pflanze komplett im Blick ist. Rechts erscheinen die ersten Pflanzen direkt nach drei kurzen Blöcken, jede Karte ist eine ganze Pflanze mit Preis, und das Grün hat genau eine Aufgabe: Dinge, die man antippen kann.

Der Sale bleibt auf beiden Screens. Die Pilea kostet 24,99 $, statt durchgestrichener 31,00 $, die Bergpalme 28,00 $, statt durchgestrichener 35,00 $. Der Shop, seine Preise und seine Bewertungen sind für die Übung erfunden; die Pflanzen sind echt.

Fix 1: Logo, Suche und Warenkorb, sonst nichts

Vorher

Nachher

Ein Menü, das Logo und drei kleine Icons, gegenüber demselben Logo mit zwei großen runden Buttons.

Der Header im Entwurf trägt ein Menü, das Logo, Suche, ein Herz und einen Warenkorb. Das Herz ist eine Wunschliste, und der reparierte Screen gibt der Wunschliste einen eigenen Tab, Gemerkt, damit das Herz nicht mehr im Header wohnen muss. Der Warenkorb behält seinen Platz, weil er das eine Bedienelement ist, das man oben in einem Shop erwartet, und sein Badge zeigt, wie viele Dinge darin liegen.

Die verbleibenden Icons sind größer: zwei 44-px-Buttons statt vier kleiner Icons. Ein Handy hält man in einer Hand, und ein größeres Ziel trifft man leichter. Das Logo ist auf beiden Screens dieselbe Wortmarke, und genau darum geht es: Der Header wurde repariert, indem man Dinge wegnahm, nicht indem man die Marke umstylte.

Das Badge wechselte von Rot zum Markengrün. Ein roter Punkt sagt, dass etwas falsch oder dringend ist. Ein Artikelzähler ist keins von beidem.

Fix 2: Filter, die man sieht, keine Dropdowns

Vorher

Nachher

Kategorie, Preis und Größe als geschlossene Dropdowns plus Sortierlink, gegenüber Indoor, Outdoor, Sukkulenten und Haustierfreundlich als Chips, mit ausgewähltem Indoor.

Ein Dropdown versteckt seine Optionen. Um eins zu nutzen, tippt der Shopper darauf, liest eine Liste, wählt, und die Liste schließt sich wieder. Drei Dropdowns sind drei solcher Umwege, bevor sich auf dem Screen auch nur eine Pflanze verändert hat. Außerdem sagen sie, welche Art von Filter es gibt, nicht was drinsteckt.

Die Chips zeigen die Auswahl offen. Indoor, Outdoor, Sukkulenten und Haustierfreundlich sind die Fragen, die ein Pflanzenkäufer tatsächlich hat, also beantwortet ein Tipp eine davon, und der ausgewählte Chip in Grün zeigt den aktuellen Zustand. Die vier Chips passen mit 6 px Luft in die 350-px-Zeile, sodass keiner abgeschnitten wird und keiner Scrollen braucht.

Fix 3: eine Karte, die die ganze Pflanze ist

Vorher

Nachher

Ein Foto, ein Badge, ein Herz, zwei Namen, ein Preis, Sterne, eine Bewertungszahl und ein Button in voller Breite, gegenüber einem Foto, einem kurzen Namen, einem Preis und einem runden Button.

Die Karte im Entwurf stapelt sieben Dinge unter das Foto: den lateinischen Namen der Pflanze, ihren gebräuchlichen Namen, den Preis, den alten Preis, die Sterne, die Bewertungszahl und einen Button „In den Warenkorb“ in voller Breite. Auf dem Foto selbst sitzen ein Rabatt-Badge und ein Herz. All das steckt in einer Karte, die einen halben Bildschirm breit ist.

Die Lösung behält zwei Zeilen und einen Button. Der Name ist kurz („Pilea“, „Calathea“), und der Preis steht darunter, mit durchgestrichenem alten Preis, wo es einen Sale gibt. Ein runder Plus-Button ersetzt die breite Leiste „In den Warenkorb“, denn ein Plus auf einer Produktkarte ist ein Muster, das Shopper schon kennen.

Auch die Fotos wurden geändert. Die Ausschnitte im Entwurf schneiden die Pflanzen an, und die Töpfe stehen nicht auf einer Linie. Die Lösung beschneidet jedes Foto so, dass die ganze Pflanze etwa 70 % der Bildhöhe füllt, zentriert, mit jedem Topf auf derselben Linie. Eine Kartenreihe liest sich dann als Reihe und nicht als vier verschiedene Bilder.

Fix 4: Pflegetipps als drei Fakten

Vorher

Nachher

Drei Sätze Ratschläge in einer grünen Box, gegenüber drei Icons mit je einem Label und einem Wort.

Der Entwurf sagt die richtigen Dinge, aber ein Shopper muss drei Sätze lesen, um sie zu finden. Die drei Fakten sind Wasser, Licht und ob die Pflanze für Haustiere unbedenklich ist, und jeder lässt sich in einem Wort sagen: wöchentlich, indirekt, unbedenklich.

Die Lösung gibt jedem Fakt ein Icon, ein kleines Label und dieses Wort in Fett. Die ganze Karte liest sich auf einen Blick. Ein Pflanzenkäufer, der nach „Kann ich die neben meine Katze stellen?“ sucht, findet „Haustiere: Unbedenklich“, ohne zu lesen.

Die kleineren Fixes

• Vier Tabs, nicht fünf. Start, Shop, Gemerkt und Profil. Aus der Wunschliste wurde Gemerkt, und der Warenkorb zog aus der Tab-Leiste in den Header.
• Ein Rand. Der Entwurf nutzte 14 px links und 12 px rechts. Die Lösung nutzt 20 px auf beiden Seiten und 12 bis 14 px zwischen den Blöcken.
• Keine Badges auf Fotos. Das rote -20 % und das blaue NEU sowie das Herz auf jedem Foto sind weg. Der Sale bleibt sichtbar, weil der durchgestrichene Preis bleibt.
• Eine Akzentfarbe. Zum Grün des Entwurfs kamen rote und blaue Badges. Die Lösung nutzt ein Markengrün, #1F7A4D, für alles Antippbare.
• Eine echte Typo-Skala. Der Text ging von 8 bis 20 px auf die iOS-Größen von 11 bis 20 pt.
• Ein kürzerer Abschnittstitel. Aus „Beliebte Pflanzen“ wurde „Beliebt“, weil es auf dem Screen ohnehin um Pflanzen geht.

Prüfe deine eigene Shop-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens als Komponenten, jeden Fix als Vorher-Nachher-Paar, die Farbvariablen und die iOS-Textstile.

Kostenlose Figma-Datei

Pflanzenshop-Startscreen, vorher und nachher

Beide Screens und jedes reparierte Teil als Figma-Komponenten. Kostenlos, nur ansehen, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte der Startscreen einer Ecommerce-App zuerst zeigen?

Einen kurzen Header mit Logo, Suche und Warenkorb, dann Filter als Chips und die ersten Produkte. Halte alles, was kein Produkt ist, etwa Tipps oder Banner, klein.

Sollten Filter in einer Shop-App Dropdowns oder Chips sein?

Chips, für die wenigen Filter, die Leute am häufigsten nutzen. Chips zeigen die Auswahl ohne Tipp, und der ausgewählte zeigt den aktuellen Zustand. Dropdowns oder ein Filter-Sheet eignen sich für lange Listen wie Preis und Größe.

Was sollte eine Produktkarte in einer Shopping-App zeigen?

Ein Foto des ganzen Produkts, einen Namen, einen Preis und einen Hinzufügen-Button. Details wie Bewertungen und der lange Name können auf der Produktseite stehen.

Wie zeigt man Pflegehinweise in einer App?

Als wenige kurze Fakten mit Icons, je ein Wort, zum Beispiel Wasser: Wöchentlich. Lange Sätze können einen Tipp tiefer leben.

Wie viele Tabs sollte eine Shopping-App haben?

Vier oder fünf. Fasse Doppelungen dort zusammen, wo Leute ohnehin schon hinschauen, etwa den Warenkorb im Header und die Wunschliste in einem Tab Gemerkt.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Der Shop, seine Preise und seine Bewertungen sind erfunden; die Pflanzennamen sind echt.
• Fotos über Pexels von Kulbir, Gül Işık und Kaboompics.
• Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
• Zuerst als Karussell veröffentlicht auf App Brainy.