Kategorie und Vergleich
Produkte erhalten vergleichbare Informationen. Auswahlkriterien und Filter werden so bezeichnet, dass Besucher ihre Aufgabe wiederfinden. Welche Seiten als Suchziele dienen, wird mit der SEO-Planung abgestimmt.
Shop-Design
Shop-Design für eine verständliche Produktauswahl
Welche Variante passt, was wird geliefert und was passiert nach der Auswahl? Eloquin gestaltet Shopansichten anhand dieser Kaufentscheidungen. Kategorie, Produktdetail und Warenkorb werden mit realistischen Produktdaten, nachvollziehbaren Zuständen und klaren Regeln für die technische Umsetzung ausgearbeitet.
Für Shopteams mit konkreten Auswahlfragen
Wir gestalten die Informationen vor der Kaufhandlung
Produkt und Variante
Titel, Merkmale, Preiszuordnung, Verfügbarkeit und Lieferinformation werden in einer nachvollziehbaren Reihenfolge gezeigt. Die Auswahl einer Variante darf nicht von den zugehörigen Daten getrennt erscheinen.
Warenkorb und Zustände
Eine hinzugefügte Position, eine nicht verfügbare Variante und ein fehlgeschlagener Vorgang brauchen unterschiedliche Rückmeldungen. Wir beschreiben diese Ansichten für die Umsetzung und gezielte Abnahme.
Die E-Commerce-Strategie klärt Angebots- und Geschäftsentscheidungen. Hier wird die Kaufaufgabe in verständliche Ansichten übersetzt. E-Commerce SEO behandelt Such-Einstiege und URL-Entscheidungen; die Shopentwicklung implementiert den Kaufweg.
Illustrativer Produktentwurf
Eine Box auswählen, ohne Preis und Verfügbarkeit zu verwechseln
Fiktive Ablagebox OFFICE · statischer Entwurf · kein bedienbarer Shop
Nutzeraufgabe: Eine Person möchte eine kleine Ablagebox auswählen und vor dem Warenkorb prüfen, ob diese Variante verfügbar ist. Im Beispiel gibt es „Klein“ und „Groß“. Alle Produktangaben und Beträge sind angenommene Gestaltungsdaten und kein Preisangebot.
Zustand A · Klein ausgewählt
- Produkt und Auswahl
- Ablagebox OFFICE · Größe Klein · Artikelkennung OFFICE-K.
- Zugeordnete Angaben
- 20,00 Euro pro Box als fiktiver Darstellungsbetrag. „Größe Klein ist derzeit verfügbar.“ Im Modell ist die Box innerhalb von zwei Werktagen versandfertig; die angenommene Versandpauschale innerhalb Deutschlands beträgt 4,00 Euro. Diese Modellangaben stehen vor dem Warenkorbschritt.
- Vorgesehene Handlung
- „Größe Klein in den Warenkorb legen“. Die Auswahl wird im Handlungsbereich nochmals benannt.
- Rückmeldung nach erfolgreicher Übernahme
- „Ablagebox OFFICE, Größe Klein, wurde zum Warenkorb hinzugefügt.“ Ein Weg führt zum Warenkorb, ein anderer zurück zur Produktauswahl. Beide werden unterschiedlich beschriftet.
Zustand B · Groß ausgewählt
- Produkt und Auswahl
- Ablagebox OFFICE · Größe Groß · Artikelkennung OFFICE-G.
- Zugeordnete Angaben
- 28,00 Euro pro Box als fiktiver Darstellungsbetrag. „Größe Groß ist derzeit nicht verfügbar.“ Die Information wird ausdrücklich als Text gezeigt.
- Vorgesehene Handlung
- Der direkte Warenkorbschritt ist für diese Variante nicht freigegeben. Die Seite erklärt: „Wählen Sie eine verfügbare Größe.“ Ein unbelegter Liefertermin wird nicht angezeigt.
- Zurück zur Auswahl
- Die Person kann wieder „Klein“ wählen und sieht danach ausschließlich die dazugehörigen Angaben. Größe, Betrag und Verfügbarkeitsmeldung wechseln gemeinsam.
Was an diesem Entwurf konkret geprüft wird
- Information richtig zuordnen: Nach einem Wechsel von Klein zu Groß dürfen Betrag oder Meldung der vorherigen Größe nicht stehen bleiben.
- Verfügbarkeit verstehen: Die Meldung ist als Text erkennbar und hängt nicht allein von einer Farbe oder einem kleinen Symbol ab.
- Auswahl nachvollziehen: Beschriftung und Fokuszustand zeigen dieselbe ausgewählte Variante. Die vereinbarten Bedienelemente werden anschließend mit Tastatur und auf schmalem Bildschirm geprüft.
- Rückmeldung unterscheiden: Ein bloßer Klick erhält keine Erfolgsbestätigung. Erst die bestätigte Warenkorbübernahme zeigt die passende Position; ein Fehler erhält einen verständlichen nächsten Schritt.
Für eine echte Shopseite werden Produktbilder, Preise, Lieferbedingungen und Bestand aus den freigegebenen Daten eingesetzt. Hier zeigt die ausformulierte Ansicht die Informationshierarchie und zwei unterschiedliche Zustände. Sie dokumentiert keine tatsächlich ausgeführte Bestellung und keine gemessene Verbesserung.
Vom Entwurf zur verwendbaren Oberfläche
Welche Unterlagen Entwicklung und Shopteam erhalten
Kaufaufgabe eingrenzen
Wichtige Einstiege und Auswahlprobleme anhand vorhandener Ansichten und verfügbarer Beobachtungen klären. Gemeinsam wird festgelegt, welche Produkte und Zustände den Entwurf sinnvoll prüfen.
Ansichten ausarbeiten
Seitentypen und wiederkehrende Komponenten mit realistischen Inhalten gestalten. Freigaben begründen sich an Information, Verständlichkeit und vereinbarten Gestaltungsregeln.
Umsetzung abnehmen
Sie erhalten Ansichten, Komponenten- und Zustandsbeschreibung sowie Prüffälle. Im gebauten Shop werden die tatsächliche Datenzuordnung, Bedienung und Rückmeldung mit der Entwicklung kontrolliert.
Die W3C-Anleitung zu Beschriftungen von Bedienelementen erläutert, warum Zweck und zugehörige Kontrolle eindeutig verbunden sein sollen. Das betrifft auch eine Variantenwahl. Eine umfassende Prüfung nach einem bestimmten Standard ist eine gesondert zu vereinbarende Aufgabe.
Wenn ein bestehender Shop untersucht werden soll, passt die Usability-Optimierung. Die UX/UI-Leistung zeigt einen anderen konkreten Nutzerablauf. Umfang und Aufwand hängen von Seitentypen, Varianten, Material, Zuständen und der vorgesehenen Erprobung ab; sie werden vor dem Auftrag benannt.
Die eigene Eloquin-Website macht tatsächlich bearbeitete Struktur- und Gestaltungsaufgaben nachvollziehbar. Ein umgesetztes Kunden-Shopprojekt wird damit nicht behauptet.
Vor der Zusammenarbeit
Häufige Fragen
Was gehört zum Shop-Design?
Der vereinbarte Umfang kann Informationshierarchie, Produkt- und Kategoriedarstellung, Variantenwahl, Warenkorbansichten sowie wiederkehrende Komponenten und Zustände umfassen. Welche Seitentypen ausgearbeitet und erprobt werden, wird vor dem Entwurf festgelegt.
Ist ein Redesign nur eine neue Farbwelt?
Gestaltung umfasst auch Reihenfolge, Vergleichbarkeit, Beschriftungen und Rückmeldungen. Vorhandene Markenregeln können weiterverwendet werden. Ob eine visuelle Überarbeitung ausreicht, hängt von den tatsächlichen Problemen im Auswahl- und Kaufweg ab.
Werden Entwürfe auch technisch umgesetzt?
Design und Implementierung sind unterschiedliche Arbeitsschritte. Der Entwurf beschreibt Ansichten und Zustände. Entwicklung, Systemanbindung und tatsächliche Bestellprüfung werden im Umfang der Shopentwicklung ausdrücklich vereinbart.
Wie lässt sich ein Entwurf sinnvoll prüfen?
Mit einer konkreten Aufgabe, geeigneten Produktdaten und definierten Zuständen wird geprüft, ob Auswahl, Preiszuordnung und Rückmeldung verständlich sind. Eine Erprobung mit passenden Personen kann Hinweise liefern; sie belegt allein keine bestimmte Umsatzwirkung.
Der nächste Schritt
Welche Produktauswahl bleibt in Ihrem Shop unklar?
Zeigen Sie eine Kategorie oder Produktseite und beschreiben Sie die Entscheidung, die Besucher dort treffen sollen. Vorhandene Gestaltungsregeln und bekannte Fehler helfen, den Umfang einzugrenzen.
Shopansichten besprechenAusgangslage klären. Umfang vereinbaren.
