Seitenaufbau ohne Deko – Wireframe online shop

Ihr Ansprechpartner

Mit der Erfahrung von über 10 Jahren Web für Firmen wie McDonald's, LindtSprüngli oder GE Capital und zahlreichen, großen Online-Projekten unterstütze ich Ihr Projekt KPI-orientiert, ideenreich und stets sprungbereit für die Extra-Meile.

Kontakt Schliessen

Ich habe jetzt schon beinahe ein Jahrzehnt an Präsentations- und Projektsroutine und in der Retrospektive hätte manches weniger anstrengend sein können. Warum das? Im Agenturgeschäft gibt es mehr oder weniger 2 mögliche Gegenüber, Fach-Experten und Entscheider. Fach-Experten erwarten eine möglichst detailgetreue Vorgehensweise nach ihnen oder dem Markt bekannten Mustern. Entscheider ein möglichst fertiges Produkt zu einem möglichst frühen Zeitpunkt.

Dann passiert folgendes

Dadurch übergeht man jedes Nutzerfeedback und evt. – je nach Zeitdruck – auch die wichtigsten Entwicklungsphasen. In unserem Fall sehen die so aus:

Routine also doch gut

In 2 zukünftigen Beiträgen werden wir darauf eingehen, warum (und welche) Routinen gerade im Online-Shop-Bereich häufig willfährig sind, und nur eingesetzt werden, um des Kopieren willens. In diesem Fall hier, aber sind Routinen – oder eher Routine – reichlich hilfreich: In dem man nämlich an der entwickelten Prozessroutine festhält und sie dann auch noch an sein Gegenüber kommuniziert, nutzt man zusätzliche Ideen und vermeidet unnötige Fehler bereits vorab – und das, sorgt dann wirklich für einen frühzeitigen Projektstart.

Wireframe online shop für Hosentraeger

Da wir bereits die ersten beiden Punkte Personas und Ziele abgehakt haben (sowie das Moodboard erstellt haben), ist der nächste Schritt ein Wireframe.

Wireframes are dead, long live rapid prototyping

http://www.uxforthemasses.com/rapid-prototyping/

Kontraproduktv, nicht wahr? Es ist so: Der Artikel stellt die Wahrheit richtig dar. Wireframes waren jahrelang ein guter Begleiter, hatten aber extrem viele Nachteile. Deswegen schwang man sich, mit dem Aufkommen der ganzen Lean-Philosphien im Developmentbereich dazu auf, Rapid Prototyping als den neuen heiligen Gral zu verehren. Was gerechtfertigt ist. Für Google, Facebook und andere Firmen, bei denen Dutzende Personen an einem Projekt/Problem arbeiten. Wenn Sie in den Abschluss unserer Seiten schauen, sind nicht dutzende Personen abgebildet und das ist auch gut so – für Ihr Budget.

Rapid Prototyping nicht wirklich rapid

Wir haben einige der üblichen Rapid Prototyping Tools ausprobiert, von proto.io bis hin zu Macaw. Und die wahre Erkenntnis ist die, Sie bekommen einen miserablen, nicht weiter verwertbaren Code in stundenlanger Arbeit und erreichen doch nicht das Ergebnis, das man sich eigentlich vorgestellt hatte. Glücklicherweise haben wir schnell umgeschwenkt und machen das ganze ein wenig differenziert, nämlich wirklich rapide.

Offene Lo-Fi Wireframes

Was sind denn nun überhaupt diese Wireframes?

Anders als ein „Mock-up“ ‒ ein visueller Prototyp ‒ wird der Begriff Wireframe (Drahtmodell) dazu benutzt, einen sehr frühen konzeptionellen Entwurf einer Website oder eines Software-Frontends darzustellen. Dabei spielt die Gestaltung und Funktion noch keine Rolle. Das Augenmerk liegt auf der Anordnung von Elementen und der Benutzerführung

http://de.wikipedia.org/wiki/Wireframe

Besser als Wikipedia hätte ich es nicht sagen können. Wireframes sind rechteckige Boxen, die die Anordnung – oder auch die Anwesenheit – eines Elements grob definieren. Es gibt hier keinerlei gestalterischen – im Sinne von dekorativ aber auch markenbildend- Aspekt.

Unser Unterschied. Wireframes per Fax

Wir skizzieren unsere Wireframes auf Papier. Verwerfen, erweitern, verbessern Funktionen und Platzierungen auch wieder auf Papier (manchmal gar per Fax). Diese Skizzen nehmen wir als Ausgangsphase, feinpolieren das ein wenig im Mockup und programmieren das Ganze dann in direkt wiederverwendbaren Code.

Dadurch müssen wir nicht nur die Ergebnisse des Rapid Prototypings nicht – wegen der schlechten Wiederverwertbarkeit – von neuem aufbauen, sondern können mit Tools wie Clue auch laufend Nutzerfeedback erhalten.

Ihr Nutzerfeedback

Wie bei den meisten bisher vorgestelltent Schritten, geht es also auch heir darum, möglichst früh Feedback vom Markt zu erhalten. Wir werden dieses Feedback morgen direkt bei der Zielgruppe einholen und die Ergebnisse hier präsentieren. Aber in der Zwischenzeit sind Sie wieder dran.

Unsere Skizzen

Für die Startseite

Für die Startseite finden wir einen Splitscreen geeignet, der unsere Vorteile gegenüber Gürtelträgern plakativ zeigt. Auf eine Navigation verzichten wir großteils, da wir eh kaum klassische – routinierte – Inhalte haben. Im unteren Block zeigen wir, warum unsere Hosenträger so ausgezeichnet sind. Um dann die Seite mit einem sozialen PR-Instrument zu beenden: Einer Challenge zwischen Hosenträger und Gürteln. Also identisches Outfit – einmal mit Gürtel, einmal mit Hosenträger. Die Nutzer entscheiden dann, was besser aussieht. Das Ganze kann dann wunderbar auf sozialen Kanälen verteilt werden.

wireframe online shop index-vorlage

Produktseite

Wir haben uns – mangels (Bedarf) eines Riesensortiment – dafür entschieden, nur ein Produkt einzustellen in verschiedenen Farb- und Breitenvarianten. Diese Farbvarianten können dann plakativ durchgespielt werden und außerdem wird hervorgehoben wie das Produkt an echten Nutzern aussieht, bzw wie es hergestellt wird.

wireframe online shop produkt-vorlage

Inhaltsseiten

Wir haben uns zwar noch nicht für einen Vertriebsweg entschieden; dass dieser über blau oder grün aber nur über Content gehen kann, ist jetzt schon klar. Deswegen hat die Inhaltsvorlage hohe Bedeutung. Hier ordnen wir den Inhalt mit sehr viel Weißraum ein, ganz im Sinne unserer Zielgruppe und des modernen Gustos. Außerdem fügen wir hier die Einbettbarkeit der Wettkämpfe mit ein

wireframe online shop content-vorlage

Sonstiges?

Es wird höchstwahrscheinlich keine Suchfunktion (mangels Bedarf) geben. Sowie keine Kategorieseite (mangels Bedarf). Der Checkout-Prozess ist auch ein wenig vorgegeben durch das ausgewählte System und die verfügbaren Zahlungs- und Lieferbedingungen; deswegen haben wir dem hier nicht vorgegriffen

Fazit

Ursprünglich war dieser Beitrag als ein sehr kurzer geplant und wurde der bisherige Rekordhalter mit über 800 Wörtern. Das zeigt offensichtlich die Wichtigkeit eines Gestaltungsprozesses, sowie die Wichtigkeit eines auf die eigenen Bedürfnisse und Fähigkeiten abgestimmten Prozesses. Wir würden uns freuen, über Zusätze, Feedback etc. zu den vorgestellten Skizzen. Schliesslich kennt niemand die Bedürfnisse besser als der Nutzer.

Und niemand schlechter als der Konferenztisch.

Flori Schaller

Diese Seite ausdrucken? Kontakt

Florian Schaller

Konzept, Gestaltung

Ruben Haug

SEO, Kundenkontakt

Daniel Popescu

Datenbanken, Technik

Flori Schaller

Mit der Erfahrung von über 10 Jahren Web für Firmen wie McDonald's, LindtSprüngli oder GE Capital und zahlreichen, großen Online-Projekten unterstütze ich Ihr Projekt KPI-orientiert, ideenreich und stets sprungbereit für die Extra-Meile.

fsc@schaller-werbeagentur.com

07231-60 72 774

Schliessen

Einen Online-Shop zu starten ist definitiv mehr als der technische Aufwand und die Logistik. Sondern vor allem die Frage, wie erhalte ich Besucher, überzeuge diese vom Kauf und binde sie nach dem Kauf weiter. Mit dem Projekt »Die Warenkorb-Dokumentation« nutzt die Schaller Werbeagentur GmbH Ihre langjährige E-Commerce und Multichannel-Erfahrung, um ein eigenes E Commerce-Projekt vom Start zu gründen. Alle Daten, Erkenntnisse, Fehler und Erfolge können Sie wärend dieser Zeit live verfolgen. Und den Schluss daraus ziehen, dass wir der richtige Partner für Sie sind.

Sie haben bereits einen Shop, sind aber nicht mit dessen Performance zufrieden? Unser Projekt Shopverbesserer ist genau auf Sie abgestimmt. Schauen Sie rein oder kontaktieren Sie Herrn Ruben Haug unter
07231/6072774
rha@schaller-werbeagentur.com

Unsere Ergebnisse als Wochenrückblicke