Einblicke in das Design-Konzept von LAGUNA

Desing_Usability

Warum während der Konzeptionsphase eines neuen Onlineshop insbesondere auf das Frontend-Design und die Usability hohe Aufmerksamkeit gelegt werden sollte, erklärt heute unser Partner kinderDerZeit. Die Dresdner Agentur hat das vor wenigen Tagen gelaunchte Projekt Laguna umgesetzt und gibt Euch anhand dieses Shops Einblicke, wie sie folgende drei zentralen Design-Fragen in diesem Projekt gelöst haben: 

  • Welche Anforderungen hat das Laguna-Team an den neuen Onlineshop?
  • Wie schaffen wir ein vertrauensvolles Design und Usability?
  • Welche Tools und Plugins unterstützen das Design- und Usability-Konzept? 

Gastartikel vom Shopware-Partner kinderDerZeit:

Interessiert sich ein User für ein Produkt, dauert es in der Regel einige Zeit bis es zum Kauf kommt. Es werden Tests gelesen, Videos konsumiert und mit anderen Produkten verglichen. Während dieser Informationsphase werden im Google Displaynetzwerk immer wieder Anzeigen zum Produkt geschaltet. Gelingt es dieser Werbung, mit einem einheitlichen, einprägsamen Corporate Design zu Punkten, werden potentielle Kunden mit hoher Wahrscheinlichkeit in genau diesem Onlineshop einkaufen. Umso wichtiger ist es also für Euch als Onlineshopbetreiber, ein auf allen Kanälen konsequentes und wiedererkennbares Corporate Design zu haben. 

So haben wir uns als Shopware Business Partner auf den Bereich „Onlineshop-Gestaltung“ spezialisiert und bieten gezielte Erweiterungen für die individuelle Onlineshop-Gestaltung an. Bei der Umsetzung des Shopware-Shops „LAGUNA – nachhaltig faire Produkte“, haben wir uns genau darauf konzentriert. Die erste wichtige Frage, die wir in gemeinsamen Gesprächen mit unserem Kunden geklärt haben, war folgende: 

Welche Anforderungen hat das Laguna-Team an den neuen Onlineshop?

Die Antwort auf diese Frage hat sich in den Gesprächen schnell beantwortet. Ziel war es nicht etwa einen Onlineshop aufzusetzen, indem stupide Produkte hintereinander aufgereiht sind, vielmehr hat sich unser Kunde gewünscht, die Kunden emotional zu erreichen. So fiel die Wahl für das Shopsystem auch auf Shopware, denn mit Shopware können wir genau diese Anforderung erfüllen und den Endkunden von Laguna ein völlig neues Einkaufserlebnis bieten.    

Frank Fischer, Geschäftsführer von Laguna, hat uns folgendes über sein Unternehmen verraten: „Wir haben uns entschieden ganz auf Plastik zu verzichten und gesunde Alternativen anzubieten. Ebenso ist unser Ziel, faire und gesunde Nischenprodukte zu fördern und Verbrauchern aufzuzeigen, dass diese Alternativen zwar in der Anschaffung oft etwas mehr kosten, jedoch langfristig viel Geld sparen können“. 

Deshalb haben wir uns entschlossen eine Einkaufswelt zu kreieren, in der Besuchern eine 100 %ige Sicherheit vermittelt wird, dass sie umweltfreundliche, gesundheitsunbedenkliche und fair hergestellte Produkte im Shop vorfinden. Wir haben ein gutes Maß an Informationen zu den einzelnen Thematiken gewählt, ausgewählte Produkt-Listings und auch Storytelling-Seiten integriert. 

Wie schaffen wir ein vertrauensvolles Design und Usability?

Zur Beantwortung dieser zweiten Kernfrage haben wir uns ein Blatt Papier zur Hilfe genommen, denn Skizzen bewirken Wunder. Als erstes haben wir alle wichtigen Punkte aufgenommen, welche beispielsweise auf der Startseite zu finden sein müssen. Hierzu zählen u.a.: 

  • Slider, in denen neue Aktionen aufgeführt werden können
  • Ansprechende Banner, um gezielte Produkte hervorzuheben
  • Teaser der beliebtesten Produkte
  • Verweis auf die Philosophie und Entstehungsgeschichte von Laguna
  • Ein schnelle Möglichkeit zur Kontaktaufnahme   

Anschließend haben wir verschiedene Elemente auf ein Blatt Papier gezeichnet und darauf geachtet, dass strategisch wichtige Elemente an den richtigen Stellen platziert sind. Beispielsweise kann man den Warenkorb natürlich theoretisch auch unten unten oder links platzieren. Durch „erlerntes Verhalten“ aber erwartet der Besucher den Warenkorb oben rechts. 

Beim Aufbau ist sehr darauf zu achten, dass der Besucher sich wohl fühlt. Denn neben einem ansprechenden Design muss der Kunde das Vertrauen zum Unternehmen aufbauen. Wenn er jedoch Elemente, welche ihm sonst immer vertraut sind suchen muss, kann er sich schnell unwohl fühlen und baut unterbewusst kein Vertrauen auf. 

beispielschema_kinderderZeit

Obiges Beispielschema dient zur ersten Orientierung. In diesem Fall wird der Headerbereich durch eine vollflächige Navigation getrennt, anschließend folgt eine große Slider-Impression, Icons und einer Banner-Landschaft. 

Welche Tools und Plugins unterstützen das Design- und Usability-Konzept?

Als absolute Grundlage und für jeden Onlineshop empfehlen wir das Storytelling-Modul und die Digital Publishing Erweiterung. Beides ist aber der Professional Edition inklusive. Wir setzen aufgrund unserer positiven Erfahrungen in nahezu allen Projekten diese Features mit ein, da wir durch den Einsatz eine wesentlich höhere Conversionrate verzeichnen konnten. 

Außerdem haben wir folgende durch uns entwickelte Einkaufswelten-Plugins im Shop eingesetzt: 

Parallax Banner

Dieser stark nachgefragte Effekt lädt zum Spielen ein und lässt Kunden den Inhalt intensiver wahrnehmen. Der Effekt kurz erklärt: Man wählt ein Hintergrundbild aus und legt darüber ein Blatt Papier mit einem Loch. Durch Bewegen des oberen Blattes sieht man immer nur einen Teil des Hintergrundbildes. So entsteht eine Art Ebenen-Effekt und der Inhalt wirkt räumlicher. 

ParallaxBanner

Parallax Kacheln

Dies ist eine Erweiterung des Parallax Banners, bei dem man auf das Blatt Papier mit dem Loch noch einmal eine kleine Schablone mit sechs Kacheln auflegt. Auf diese Art, können Aktionen, Produkte oder Dienstleistungen besonderes angeteasert werden. 

Toggle Box

Lange Texte und zusätzliche Informationen lenken oft vom Produkt selbst ab. Mit der Toggle Box können weitere Inhalte per Mausklick oder Touch Geste einfach ein- und ausgeblendet werden. 

FAQ Boxen

Um die Übersicht zu wahren, werden die definierten Fragen in einer „Frequently Asked Question“ Liste geordnet dargestellt. Erst beim Anklicken der jeweiligen Frage wird die dazugehörige Antwort darunter eingeblendet, um dem Kunden noch schneller zu seiner Antwort zu führen. 

FAQ

Flip Kacheln

Der Effekt ist mit einer Spielkarte zu vergleichen. Ich kann die Vorder- und Rückseite mit Text, Bild oder kombiniert gestalten und beim rüberfahren der Maus dreht sich die Kachel wie eine Spielkarte. Auch diesen Effekt haben wir besonders für das mobile Einkaufserlebnis optimiert und so drehen sich die Kacheln, wenn ich mit dem Finger rauftippe. 

FlipKacheln

Unser Tipp:  Weniger ist manchmal mehr

Grundsätzlich empfehlen wir Euch: Übertreibt es nicht mit dem Einsatz von Effekten und Plugins. Das Design sollte immer der Funktion folgen. Es gibt viele Onlineshops, die viele Elemente lieblos und unüberlegt auf den Seiten hintereinander positioniert haben. Nehmt Euch, um genau dies zu vermeiden, ein Blatt Papier und zeichnet auf, welche Elemente der Kunde erwartet, welche den Verkauf unterstützen und welche rechtlich vorhanden sein müssen. Dies schafft einen besseren Überblick und erleichtert das spätere Umsetzen. Erstellt Euch einen roten Faden und oder holt Euch Hilfe von einer Agentur wie kinderDerZeit, um Euren Onlineshop erfolgreich zu planen und auf dem Markt zu bringen. 

Zu den Plugins von kinderDerZeit im Store

Mehr über kinderDerZeit erfahren

Diese Shops überzeugen mit einer tollen Usability

Der Gesamtsieg, vier Kategoriesiege und der Publikumsaward gingen beim Shop Usability Award 2017 an Shopware-Shops.

Zu den Gewinnern

comments powered by Disqus