Vier Prototypen für euren Shop

Die Leiste bleibt rot – und die Suche wird zur Lupe

Beides gilt für alle vier Entwürfe. Ein Zwischenstand hatte die Leiste beige laufen, weil eine vollflächig rote Zeile ganz oben schnell als Werbebanner gelesen und überblättert wird. Ihr habt dagegengehalten, dass sie am Handy beim Scrollen ohnehin verschwindet und die Signalwirkung genau deshalb wirkt – sie ist wieder rot wie in Figma, nur zwei Prozent dunkler, damit weiße Schrift darauf die Kontrastschwelle erreicht. Der Platz kommt stattdessen aus der Suche: Am Handy steht nur noch die Lupe neben Konto und Warenkorb, das Suchfeld klappt beim Tippen auf. Vier Symbole passen neben Logo und Burger nicht in eine Zeile – die Merkliste steht am Handy deshalb im Menü, das Kundenkonto bleibt in der Leiste, weil dort der Bonus-Punktestand liegt. Der Kopfbereich ist so 62 Pixel niedriger als vorher. Am Rechner steht wieder alles nebeneinander. Der rote Strich unter den Abschnittsüberschriften – das Element, das euch dort gefehlt hat – steckt nur in der Schriftvariante, weil er dort gebraucht wird.

„Ich finde, dass die Suchleiste über ein Icon mit einer Lupe besser wäre … weil ich das teilweise so empfand, als wenn ein Großteil des Bildschirms nur durch den oberen Balken besetzt ist.“ Can-Mert Hungenberg, 16. September

Vom Sortiment über die Bestseller zum Abholmarkt

Hero mit zwei Einstiegen für Hund und Katze, danach Sortimentskacheln, die fünf Versandzusagen, Bestseller, Angebote und Neuheiten als Reihen. Direkt darauf folgen die beiden Abholmärkte und das Bonusprogramm, dann der Einstieg für BARF-Anfänger, die Kundenstimmen und – neu ganz unten – „Warum Futter Fundgrube?“ vor den FAQs. Die Kaufargumente standen vorher direkt hinter den Produktreihen und haben den Weg dorthin unterbrochen.

„Ich glaube, dass vielleicht das Ladenlokal interessanter wäre, das drüber zu setzen … wir wollen ja später vielleicht auch Click & Collect anbieten.“ Can-Mert Hungenberg, 16. September

Die Abholung steht im Inhalt, nicht nur in der Fußzeile

Grevenbroich steht mit Adresse in der Reihe „So flexibel ist deine Bestellung“ und auf der Produktseite, Schmallenberg-Winterberg in der Fußzeile mit einem Neu-Hinweis. Solange die Adresse fehlt, bleibt der zweite Markt ein Platzhalter. Das Hauptmenü lassen die Mockups unberührt – der Burger am Handy bleibt ohne Funktion, weil der Menü-Umbau nicht Teil des Auftrags ist.

Echte Produkte und Preise aus dem Shop

Bestseller, Sale und Neuheiten zeigen die Produkte, die aktuell auf der Live-Startseite rollen – inklusive Grundpreis und Bewertung. Reduzierte MHD-Ware bekommt ein eigenes Badge, weil sie einen großen Teil des Sale ausmacht. Karten mit „Ab“-Preis führen in die Auswahl auf der Produktseite statt in den Warenkorb, damit niemand eine Variante kauft, die er nie gesehen hat. In der schmalen Handykarte stehen die beiden Knöpfe jetzt untereinander statt nebeneinander: „Warenkorb“ füllte den halben Knopf bis an beide Kanten. Der Auswahl-Button sieht seit dem 16. September aus wie „Details“ – Grün bleibt dem einen Vorgang vorbehalten, der wirklich in den Warenkorb legt. In den Reihen steht jetzt außerdem die dritte Karte angeschnitten im Bild, damit man sieht, dass sich wischen lohnt, und „Alle anzeigen“ steht bei jeder Reihe an derselben Stelle neben der Überschrift – am Handy auch, dort bricht dafür die Überschrift um.

Die Bilder werden gegen die neuen Fotos getauscht

Der Entwurf arbeitet mit Platzhaltern. Aus dem Shooting liegen Fotos von Küche, Lokal und Shop im Drive bereit. Ziel ist, von Stockbildern wegzukommen.

Abschnitte klappen dort auf, wo sie stehen

Heute verliert man beim Antippen von „Bewertungen“ die Position auf der Seite. Im Entwurf bleibt die angetippte Überschrift stehen und der Inhalt schiebt sich darunter auf. Alle vier Abschnitte sind gleichwertig sichtbar, statt hinter zwei Tabs zu liegen.

„Normalerweise würde ich erwarten, dass es sich aufklappt, mindestens von unten nach oben.“ Can-Mert Hungenberg, 8. September

Jeder Inhalt sitzt auf einer eigenen Fläche

Heute hat der untere Textblock einen Kasten, der obere nicht. Der Entwurf setzt Beige als Seitengrund und legt Preis, Beschreibung, Bewertungen und Cross-Selling auf je eine weiße Karte.

„Du siehst zum Beispiel, dass das alles einfach nur dahin geklatscht ist, ohne so ein Hintergrund irgendwie.“ Can-Mert Hungenberg, 8. September

Preis, Menge und Warenkorb stehen in einem Block

Preis, Grundpreis, Steuerhinweis und Versandlink stehen heute als vier lose Zeilen untereinander. Im Entwurf sind sie eine Karte. Scrollt der Kaufbutton nach oben aus dem Bild, erscheint unten eine Leiste mit Preis und Warenkorb. Seit dem 16. September ist der Weg dorthin kürzer: Über dem Button steht nur noch eine Zeile, was im Paket ist, die vollständige Sortenliste und die Versandbedingungen folgen unmittelbar darunter.

„Jeder Schritt ist immer ein unnötiger Schritt für den Kunden.“ Can-Mert Hungenberg, 8. September

Versandtage und Kühlkette stehen neben dem Kaufbutton

Versandtage, Kühlkette und Bonuspunkte standen bisher verstreut in der Fußzeile und auf der Startseite. Der Entwurf zieht sie unter den Warenkorb-Button, weil das aus unserer Erfahrung die Fragen sind, die bei Tiefkühlware vor dem Klick offen bleiben.

Beide Standorte bekommen einen Platz auf der Seite

Der Abholmarkt war nur ein Link in der Fußzeile unter „Service“. Schmallenberg-Winterberg stand auf der Seite noch gar nicht. Adresse und Öffnungszeiten dort sind im Entwurf Platzhalter, weil sie uns noch fehlen.

Der Herstellername ist anklickbar und öffnet die Kontaktdaten

Seit der GPSR müssen Hersteller mit Anschrift und einer elektronischen Adresse beim Produkt stehen, ohne Suche erreichbar. Der Name in den Produktdaten führt jetzt auf einen eigenen Abschnitt „Herstellerinformationen“ und klappt ihn auf – dasselbe Muster wie bei vitalundfitmit100.de. Die Zulassungsnummer im Entwurf ist ein Platzhalter. Bei Fremdmarken gehört dort deren Kontakt hin, nicht der von Hund & Sport Hungenberg.

Unter dem Bild stehen jetzt die Produktdaten

Am Schreibtisch lief die Kaufspalte rund 800 Pixel länger als das Bild, und links daneben stand nichts. Dort stehen jetzt die genauen Mengen, die Produktdaten – Artikelnummer, Hersteller, Zieltier, Lagerung, Haltbarkeit, Herkunft – und die fünf Qualitätspunkte; beide Spalten enden auf fast derselben Linie. Das Bild bekommt mehr Breite und füllt sie fast randlos, der Preis läuft rot statt schwarzgrau, die günstigste Paketgröße trägt eine Auszeichnung, und unter dem Kaufbereich steht ein Block mit Foto, der erklärt, warum sich die große Menge lohnt. Die Abschnitte darunter stehen zu zweit nebeneinander statt als fünf Zeilen über die volle Breite. Die Anlage der Datenspalte orientiert sich an vitalundfitmit100.de, das ihr als Beispiel genannt habt – Lagerung, Haltbarkeit und Herkunft sind bei uns noch angenommen und brauchen eure echten Werte.

„Dann gefällt es mir designtechnisch nicht, weil ich finde, dann wirkt es mir zu leer die Seite … das wirkt einfach wie ein Infotext.“ Can-Mert Hungenberg, 16. September

Staffelpreise oder Großverbraucher-Artikel – eins von beidem

Heute gibt es denselben Artikel zweimal: einmal regulär mit Staffelpreis, einmal als eigenes Großgebinde unter „Großverbraucher“. In der Suche stehen beide nebeneinander, ohne dass der Unterschied erkennbar wäre. Can-Mert klärt mit dem Chef, welcher der beiden Wege bleibt – davon hängt ab, wie der Kaufbereich die Mengen anbietet.

Jedes Bedienelement misst mindestens 44 × 44 px

Nachgemessen im Entwurf: Mengensteuerung, Merkzettel, Akkordeon-Köpfe, Navigationssymbole und die kleinen Karten-Buttons erfüllen das Maß. Fließtext startet bei 16 px, damit iOS beim Antippen von Feldern nicht hineinzoomt.