Ab sofort starten wir eine neue Praxis-Reihe hier bei uns im shopbetreiber-blog: Die Shop Clinics. Dazu nehmen wir Online-Shops unter die Lupe und schauen, was andere Shopbetreiber von diesen lernen können. Den Auftakt macht der zweifache Gewinner der Shop-Awards 2015: Aboutyou.de.
Was sind die Shop Clinics?
Die Shop Clinics nehmen Online-Shops unter die Lupe, die beispielsweise durch Awards aus der Branche als besonders erfolgreich ausgezeichnet worden sind. Was machen diese Shops besser als der Wettbewerb und welche Anregungen können Sie als Online-Händler von diesem Shop mitnehmen? Diese Fragen beantworten wir in unseren Shop Clinics. Wir werfen aber auch immer wieder einen Blick auf solche Shops, bei denen es noch nicht so gut läuft und versuchen Stärken und Schwächen herauszufiltern.
Dazu haben wir den Gesamtsieger des diesjährigen Shop Awards, Aboutyou.de, analysiert. Die Auszeichnung wurde am Vortrag der Internet World Messe in München vergeben. Wir stellen unter anderem jeden Gewinner der acht Kategorien kurz vor und analysieren dann das Shop-Konzept sowie die Umsetzung. Aber auch andere Shopkonzepte werden in den Shop Clinics unter die Lupe genommen.
Aboutyou.de ist ein Mode-Shop aus der Entwicklerschmiede Collins der Otto-Group. Der Shop stand bei den Shop-Awards 2015 gleich zweimal auf dem Siegertreppchen. Als bester Shop in der Kategorie "Bester Online-Pure-Player" und als Gesamtsieger "Best-of-Show".
Die Startseite
Eine Startseite wie aus dem Lehrbuch: Sie ermöglicht dem Besucher durch eine klare Struktur eine sofortige Erfassung der dort kommunizierten Inhalte und ist klassisch dreigeteilt:
- wichtige Informationen für den Besucher direkt zu Beginn der Seite
- eine emotionale Bilderwelt
- umfangreiche Kundeninformationen zu Zahlarten, Sicherheit, Services, Features etc.
Der Einstieg
Abgeholt wird der Besucher direkt beim Einstieg über eine Vorteilsargumentation: Sicherheit durch Gütesiegel. Rechnungskauf. Keine Versand- und Retourenkosten. Eine Lieferzeit innerhalb von 1 bis 3 Werktagen. und eine Rückgabefrist von 100 Tagen sind für den Besucher gleich beim ersten Blick fünf Gründe, um bei Aboutyou einzukaufen.
Die Vorteilsleiste liefert gleich beim Einstieg 5 gute Gründe bei Aboutyou zu kaufen.
Diese Leiste lässt sich auf Wunsch durch einen einfachen Klick "ausXen", also löschen. Allerdings bleiben die Vorteile auch beim erneuten Aufruf der Seite verschwunden. Erst ein Löschen der Cookies macht die Vorteilsargumentation wieder sichtbar. Vielleicht wäre hier ein sessionbasiertes Cookie statt eines dauerhaften zielführender. Denn auch ein widerkehrender Besucher oder Stammkunde wird somit noch einmal aller Vorteile versichert.
Schnelle Erfassbarkeit der Information durch Text-Bild-Kombination
Die Anmeldung zum Kundenkonto, Wunschzettel, Suchfeld und Warenkorb befinden sich, wie mittlerweile gelernt, in der rechten oberen Ecke. Diese vier Elemente sind optisch zu einem Block zusammengefasst und bilden somit einen guten aber nicht aufdringlichen Ankerpunkt für das Auge. Zudem sind die Elemente um leicht verständliche Icons ergänzt. Beim Warenkorb wird sogar vollständig auf Text verzichtet, was der Erfassbarkeit zuträglich ist.
Die horizontale Hauptnavigation ist aufmerksamkeitsstark hervorgehoben. Weil es nur vier Hauptkategorien gibt, kommt die Navi sehr übersichtlich daher und tritt somit nicht in Konkurrenz zur Bilderwelt. Über einen Mouse-Over-Effekt wird das umfangreiche Untermenü sichtbar.
Reduzierte Hauptnavigation, die über Mouse-over ausklappt.
Mit einem Klick zwischen Zielgruppen hin- und hergeschaltet.
Ein kleines aber sehr interessantes Feature ist ein kleiner Schalter unter der Produktsuche. Nennen wir ihn mal Zielgruppenwahlschalter. In der einen Position werden in der Bilderwelt Damen adressiert, in der anderen Einstellung wird Herrenmode promotet. Der Shop merkt sich die Einstellung für weitere Besuche. Voreingestellt ist übrigens die Damen-Version.
Die Bilderwelt
Eine leicht erfassbare Struktur, die darauf ausgelegt ist, den Besucher für den Kauf vorzubereiten. Diese Hinführung des Kunden zum Kauf ist besonders gut gelungen. Je weiter der Nutzer nach unten scrollt, desto mehr nimmt der Verkaufsdruck zu. Die Bilderwelt ist reichhaltig, aber nicht zu überladen, wie man es leider bei nicht wenigen Shops immer wieder sehen kann. Wie beim Einstieg besteht die Struktur des Seitenaufbaus aus drei Teilen.
Thematisch geht es im ersten Teil um Inspiration und emotionale Ansprache. Auf eine dynamische Bühne haben die Entwickler verzichtet. Stattdessen wird direkt zu Beginn der Bilderwelt eine ganz klassische Einkaufswelt gehighlightet. Selbst auf der zweiten Seitenebene ist kaum Verkaufsdruck zu spüren. Erst via Mouseover über die Thumbnails bekommt der Nutzer erstmals einen Preis angezeigt.
Emotion statt Verkaufsdruck in der Bilderwelt.
Hard-Selling
Doch bei aller Softness beim Verkauf vergessen die Entwickler nicht das eigentliche Ziel der Seite: Produkte zu verkaufen. Dieses Hard-Selling erfolgt im unteren Teil der Startseite in Form von Produktgalerien. Dem Kunden werden „Neuheiten“ präsentiert. Die folgende Promotion der Produkte ist offensichtlich anlassbezogen. Denn hier werden „Übergangsjacken“ angeboten. Für diese Jahreszeit ein adäquates Produkt.
Saisonbezogene Produktempfehlungen: Für das Frühjahr die Übergangsjacke.
Abschließend wird der Hammer ausgepackt. Ein augenfälliger Störer weist auf tagesaktuelle Schnäppchen, den „Daily Cut“, hin. Um noch mehr Verkaufsdruck auf die Schiene zu bekommen, ist der „Daily Cut“ zeitlich befristet. Dies wird durch einen Countdown angezeigt.
Täglich ein neues Angebot mit dem Daily Cut.
Der Ausstieg
Ausstieg und Footer sind absolut auf dem neuesten Stand. Es werden die Kundenvorteile und Services nochmals aufgegriffen und ausführlicher dargestellt. Gütesiegel, Zahlarten, Zustellpartner und die Social Media Einbindungen. Alles sehr übersichtlich durch Icons gelöst, statt eine Textwüste zu schaffen.
Zudem werden Kundenbewertungen über ein Widget angezeigt. Natürlich fehlt auch eine Anmeldung für den Newsletter nicht. Vorbildlich werden hier die Benefits genannt, die der Nutzer durch die Anmeldung für den Newsletter erhält.
Die Produktdetailseiten
Hier lenkt nichts vom Kauf ab. Dabei machen die Collins-Entwickler nichts wirklich Neues. Sie setzen die aktuellen Erkenntnisse aus der Konversionsoptimierung nur konsequent um.
Sehr auffällig ist der verblüffende Gegensatz beim Farbeinsatz. Auf der Startseite dominieren viele unterschiedliche Farben, durch die Gestaltung der Bilderwelt, die auf Emotion statt Information abzielt. Auf den Produktseiten ist es genau andersherum. Hier ist weniger mehr und die Gestaltung ist vornehmlich in Schwarz/Weiß gehalten.
Es lenken keine Farben, keine Bilder vom Konversionsziel ab; das Design ist stark reduziert. Auffällige Flächen – visuelle Ankerpunkte für den Blickverlauf – sind die Produktabbildungen und der Warenkorbbutton.
In der linken Sidebar wird eine filterbasierte Navigation eingesetzt, durch die der Nutzer die Produktauswahl immer weiter einschränken kann. Die einstellbaren Filter entsprechen dem Standard wie etwa Preis, Größe, Farbe oder Marke.
Produkttexte
Um den Kunden nicht durch große Textwüsten vom Kauf abzuhalten, lässt sich die Produktbeschreibung ausklappen. Dort entdeckt der Nutzer dann interessante Details mit einem großen Mehrwert:
Bei einigen Artikeln, die am Modell fotografiert wurden, sind Vergleichsgrößen angegeben. Beispielsweise dass es sich bei dem T-Shirt des Models um die Größe M handelt. Auch wurden die Körpermaße des fotografierten Models angegeben. Damit soll offensichtlich der Passformproblematik vorgebeugt werden. Leider sind diese Infos nicht bei allen Produkten verfügbar, selbst wenn es am Model fotografiert wurde.
Die Angabe der Körpermaße des fotografierten Models helfen dem Kunden bei der Größenauswahl.
Vereinzelt tauchen in den Produkttexten weitere Angaben zur Passform auf. So heißt es beispielsweise bei einer Jeans unter dem Punkt „Größenhinweis“: „Fällt eng aus, bitte eine Größe größer bestellen.“ Aber auch dieses Feature wird nicht wie die zuvor genannten Vergleichsmaße kontinuierlich eingesetzt.
Sehr interessant gelöst haben die Entwickler das Thema Produktbewertung. Das Kundenurteil ist optisch nur durch eine größere Type hervorgehoben und bricht somit nicht mit dem S/W-Design der Detailseite. Hier zeigt sich, dass es nicht immer knalliger Farben und blinkender Web-Elemente bedarf, um Inhalte einer Shopseite aufmerksamkeitsstark zu promoten.
Vorteilsargumentation und Social Media-Integration werden in der rechten Sidebar erneut gespielt und geben somit dem Kunden ein Gefühl von Vertrauen und Sicherheit.
Natürlich dürfen auch Produktempfehlungen für Cross-Selling-Verkäufe nicht fehlen. Hier werden gleich mehrere Strategien eingesetzt. Zum einen Empfehlungen nach Outfits bzw. Looks, die das Modell auf einem Produktfoto trägt. Dann "Ähnliche Artikel" und abschließend noch "Andere Kunden kaufen auch". Abgerundet wird das Cross-Selling durch die Rubrik "Zuletzt gesehene Artikel"
Der Warenkorb
Der Warenkorb ist einfach und übersichtlich gestaltet. Der Call-to-Action-Button „Zur Kasse“ ist farblich vom Grunddesign abgehoben und wird immer zu Beginn und am Ende des Warenkorbes angezeigt. Zudem kann im Warenkorb noch einmal die Anzahl der Artikel korrigiert werden.
Sicherheit und Vertrauen
Die eingesetzten Eye-Catcher zahlen vor allem auf das Thema Sicherheit und Vertrauen ein. Darunter etwa gewonnene Auszeichnungen, Gütesiegel und angebotene Zahlarten. Wie wichtig diese Elemente den Entwicklern an dieser Position im Shop sind, zeigt sich daran, dass sie gleich drei Mal auf der gesamten Warenkorbseite eingebunden sind (Header, Warenkorb und Footer).
Bloß nicht vom Kauf ablenken. Doppelte Call-to-Action für eine bessere Konversion!?
Aber es gibt einige kleine Details, die einen näheren Blick lohnen. So finden sich im Warenkorb Angaben zur voraussichtlichen Lieferzeit und zum eingesetzten Paketzusteller. Die Information ist einmal sehr unauffällig zu Beginn des Warenkorbs auf Textbasis verfügbar. Zum zweiten Mal taucht sie am Ende des Warenkorbes wesentlich prominenter in Form von Icons auf.
Der Checkout
Der Checkout ist in drei Schritten zu durchlaufen. Diese sind übersichtlich im oberen Teil angeordnet und zeigen dem Nutzer, an welcher Position er sich gerade befindet. Die drei Schritte des Checkouts sind:
- Anmelden/Registrieren
- Zahlungsart wählen
- Lieferadresse wählen/Bestellung abschließen
Der Übergang zwischen der Auswahl der Zahlart und der Eingabe der Lieferadresse ist zunächst etwas verwirrend. Die Schaltfläche ist beschriftet mit "Zur Bestellübersicht". Hier wäre eine deutlichere Nutzerführung zu diskutieren, beispielsweise "Zur Eingabe der Lieferadresse" oder ähnliches.
Als konsequenter Internet-Pure-Player verzichtet Aboutyou auf die traditionellen Zahlarten Vorkasse und Nachnahme. Stattdessen setzen die Macher auf digitale Zahlarten wie Rechnungskauf via RatePay, PayPal, VISA, Yapital und Sofortüberweisung.
Aboutyou möchte, dass jeder Nutzer ein Kundenkonto anlegt. Die Bestellung mittels Gastzugang ist zwar vorgesehen, aber sehr dezent in den Hintergrund gerückt. Die Entwickler versuchen zwar den Kunden hier gezielt zu lenken. Dazu zeigen sie dem Nutzer die Vorteile auf, die er durch die Anmeldung zum einem Kundenkonto nutzen kann. Indem sie ihm an entscheidenden Stellen die Wahl lassen, kommt kein Zwang auf.
Überzeugungsarbeit für die Anmeldung zum Kundenkonto, aber ohne Zwang.
Und natürlich darf auch die Abfrage zur Werbeeinwilligung nicht fehlen. Sie wird gleich an zwei Stellen bewusst unauffällig promotet. Kein Wunder, denn das Häkchen, mit dem der Nutzer seine Zustimmung für den Erhalt von Werbung bestätigt, ist voreingestellt. Die vorangekreuzte Checkbox zur Werbeeinwilligung ist allerdings klar unzulässig.
Fazit
Der Online-Shop Aboutyou ist ein Beispiel für einen zeitgemäßen Shop auf sehr hohem Niveau. Technisch und konzeptionell wurden alle Register der modernen Shop-Optimierung gezogen. Auch wenn Aboutyou kein Innovations-Feuerwerk abbrennen, so überzeugt der Shop durch viele kleine Detaillösungen, die man bislang nur selten sieht.
Die Learnings
- Einsatz von Icons statt Texten machen die Informationsweitergabe an den Kunden leicht und schnell erfassbar.
- Emotionale Einkaufswelten statt aggressive Verkaufe im oberen Bereich der Startseite.
- Angabe von Passform-Angaben in den Produktbeschreibungen zur Reduzierung von Retouren. Leider nicht durchgehend.
- Auf den Produktseiten und im Checkout schlägt Funktion das Design. Keine Ablenkungen vom Konversionsziel.
- Angabe des voraussichtlichen Lieferdatums in Icon-Form.
- Kurze Wege im Checkout
Jetzt sind Sie an der Reihe!
Mit unseren Shop Clinics verfolgen wir das Ziel, Ihnen Anregungen und Ideen für den eigenen Online-Shop aufzuzeigen. Dies möchten wir immer auf Augenhöhe mit Ihnen tun und nicht von der Kanzel herabpredigen.
Daher laden wir Sie ein, die Ausgaben der Shop-Clinics mit uns zu diskutieren und zu kommentieren. Auch die Entwickler bei Collins und Aboutyou sind herzlich dazu eingeladen.
In der nächsten Ausgabe der Shop Clinics lesen Sie:Das neue responsive Design von Otto.de unter die Lupe genommen
