Der Elefant im Online-Shop: Wie kleine Webdesign-Fehler die Kunden verschrecken

Der Elefant im Online-Shop: Wie kleine Webdesign-Fehler die Kunden verschrecken

LetsSeeWhatWorks.com ist eine Plattform für Unternehmer, auf der nicht nur ich meine eigenen Erfahrungen teile, sondern auch die Meinungen und Sichtweisen anderer Unternehmer Platz haben. Heute freue ich mich daher über einen Gastbeitrag von Matthias Barth von Startworks über typische Webdesign-Fehler. Thema Kundeninterviews. Schau mal hier, falls du auch einen Gastbeitrag schreiben möchtest. Los geht´s…

Was ist das Wichtigste, wenn man im Internet Geld verdienen will? Je nachdem, welchen Experten du fragst, wird dir jeder etwas anderes erzählen: Der SEO-Fachmann hält SEO für unverzichtbar. Der Webdesigner schwört auf das Design. Und der Marketing-Experte hält dagegen: Content is King!

Neulich habe ich einen Hilferuf von einer Selbständigen bekommen, die mit ihrem Webshop nicht weiterwusste. Silvia Gunsilius hat verschiedene Experten gefragt, warum ihre Seite nicht konvertiert. Und bekam lauter gute Ratschläge – von Youtube-Videos bis E-Mail-Marketing. Eine Internet-Agentur hat ihr bei der Keyword-Optimierung geholfen.

Das sind ja alles bewährte Instrumente, aber keines davon würde den Online-Shop weiterbringen: 74% der Besucher springen gleich auf der Startseite wieder ab. Denn keiner der „Experten“ hat den rosaroten Elefanten gesehen, der ihr auf dem Kopf herumtanzt und alle ihre Anstrengungen sinnlos macht!

Lass uns mal einen Blick auf den Webshop werfen

Silvia hilft als Mentaltrainerin Menschen mit Ängsten und chronischen Beschwerden, die keine physische Ursache haben. Weil sie aus einer ländlichen Gegend kommt, sind Kunden dort rar gesät. Ihre Idee war daher, ein Online-Programm zu erstellen und kurze Trainingseinheiten als MP3 anzubieten, so dass die Menschen ihre Übungen zu Hause auf dem Sofa durchführen können.

So entstand daraus der Onlineshop www.hypnocoach-online.de:

01-Webdesign-Fehler-Onlineshop-Screenshot

Gut, man sieht auf den ersten Blick, dass die Typo ziemlich schlecht ist – aber da gibt es schlimmere Seiten im Netz. Bei näherem Hinsehen wurde meine Liste an Webdesign-Fehlern aber immer länger, bis ich schließlich den Elefanten entdeckt habe.

Ich habe eine Weile überlegt, wie ich Silvia helfen kann. Und nicht nur ihr: Es gibt Millionen solcher Seiten mit ähnlichen Fehlern. Daher ist dieses Beispiel eine ideale Fallstudie, um auch anderen zu helfen, diese Fehler zu vermeiden.

Das Perfide ist: Es sind viele kleine Fehler, keine wirklich großen. Aber sie summieren sich zu zwei Problemen:

  • Man braucht mehrere Minuten, um zu verstehen, um was es eigentlich geht
  • Und selbst dann sieht man den Produkten, die immerhin knapp 30 Euro kosten, ihren Mehrwert leider nicht an.

Am Ende ist es sogar nicht ein Elefant, sondern eine Mutter und ihr Baby! Lass uns die beiden Dickhäuter mal genauer ansehen:

Die Elefantenkuh: Warum versteht man das Produkt nicht.

Die Antwort: Es liegt hauptsächlich am Inhalt und der Struktur. Studien haben ergeben, dass sich Website-Besucher innerhalb von 2,6 Sekunden entscheiden, ob sie bleiben wollen oder nicht. Sie überfliegen die Website dabei lediglich und verarbeiten die Eindrücke unterbewusst:

Wirkt sie übersichtlich und ansprechend? Um was geht es? Was habe ich davon?

Durch Eye-Tracking konnte ermittelt werden, dass die Augen bei fast allen Menschen dieselben Stellen erfassen: Von oben links beginnend, wo das Logo steht, geht es über die Navigation und dann am linken Rand nach unten zu Headline, Texten und Bildern. Immer wieder springt dabei der Blick aufs Logo zurück, das besondere Aufmerksamkeit bekommt:

Das Logo

02_Webshop-Logo-Fehler

Es wirkt sehr selbstgemacht und ist mit zu vielen Effekten versehen. Aber es ist gut lesbar und die Farbgebung passt zum Thema. Nicht schön, aber auch nicht abschreckend. Inhaltlich sorgt es aber für Verwirrung: Was ist eigentlich ein Hypnocoach? Und was hat das mit Mein-Mentaltraining zu tun, das ??? möglich macht?

Das Menü

03-Webshop-Menu-ueberladen

Gut: Es ist auffällig und klar als Navigation erkennbar. Leider aber auch überfüllt mit Menüpunkten: Widerrufsrecht, AGB, Impressum – so viele rechtliche Hinweise schrecken eher ab und tragen nicht zum Verständnis bei.

Es folgt die sehr auffällige Headline

Hier hat Silvia versucht, ihr Produkt in einem Satz zu erklären. Leider ist sie dabei über das Ziel hinausgeschossen: So viele Schlagworte verwirren mehr, als zu helfen. Zudem ist die Headline so lang, dass man sie nicht lesen möchte.

04-Headline-Webshob-Typographie

Das liegt auch an der schlechten Typographie. Bis zu diesem Punkt wirkt das Design zwar ein wenig altbacken, aber übersichtlich. Die Headline ist jedoch derart verhunzt, dass sie die Seite qualitativ extrem abwertet.

Die Bilder

Da wende ich den Blick lieber schnell von der Headline ab und gelange bei der Suche nach etwas Ansprechendem zu den Bildern. Davon gibt es gleich zwei am rechten Rand, die offensichtlich aus einer Bilddatenbank stammen und stilistisch nichts miteinander zu tun haben.

Der Eingeweihte ahnt die Botschaft, dass das Mentaltraining durch Zuhören und Entspannen neue Möglichkeiten eröffnet. Aber diese Informationen fehlen dem Erstbesucher beim Scannen der Seite. So wirken die Bilder einfach nur wahllos zusammengestellt. Ein typischer Fehler: Weil man selbst tief in der Materie steckt, hält man die Botschaft für offensichtlich.

05-Webdesign-Fehler-scrollen-und-bilder

Der Text

Auf die Headline folgt ein langer, wenig einladender Textblock. Die Absätze sind relativ lang und der Zeilenabstand zu gering – das verschlechtert die Lesbarkeit. Der Text wirkt sogar wuchtiger als er ist, weil er in einem zu kleinen Frame steht. So muss man den Text in seinem Frame nach unten scrollen – das sieht sehr mühsam aus und lädt nicht zum Lesen ein. Schade, denn die Texte sind gut geschrieben.

Auch die Audioprobe, die darunter versteckt liegt, übersieht man komplett. Zudem ist der Nutzen begrenzt: Für einen schnellen Eindruck ist sie zu lang, für einen wirklichen Test zu kurz.

Das sind sehr viele Hürden, um zu verstehen, dass es sich um ein Audio-Programm für Mentaltraining handelt. Leider haben die wenigsten Besucher so viel Geduld.

Und ihr Kalb: Warum ist der Wert der Produkte nicht erkennbar?

Angenommen der Nutzer ist wirklich hartnäckig und noch nicht ausgestiegen. Er scrollt auf der Seite nach unten und findet zwei Produkte für je 29,90 Euro.

Sie heißen Erfolgreicher Verkaufen und How to sell more. Ich dachte, hier geht es um einen Audio-Kurs namens Mein Mentaltraining?! Wo finde ich den denn? Im Shop ist er nicht, denn dort sind noch mehr Produkte mit Namen wie Mehr Kreativität und Einfach Entspannen.

Bei mir hat es mehrere Minuten gedauert, bis ich verstanden habe, dass Mein Mentaltraining eine Produktreihe ist und alle diese Produkte dazugehören.

Zu all den Webdesign-Fehlern kommt also noch ein massiver Fehler im Branding: Mein Mentaltraining erkennt der Besucher nicht als Marke.

Die vier Topprodukte im Shop sehen so aus:

06-Webdesign-Topseller-im-Onlineshop

Jedes hat ein vollkommen beliebiges Stock-Bild. Es gibt keine Gemeinsamkeiten im Namen und in der Darstellung.

Das Produkt ist ein 10-minütiges MP3. Die Abbildung sieht billig aus. Es gibt noch keine Bewertungen. Keine fachliche Autorität bestätigt, dass Mentaltraining funktioniert. Der Shop ist anonym und unpersönlich. Die Geld-zurück-Garantie ist unter Widerrufsrecht als juristisches Schwergewicht verklausuliert. Es kostet 29,90 Euro.

Würdest Du es kaufen?

Ich nicht!

Dabei sind das alles Fehler, die leicht zu beheben sind! Ja, es ist ein kompliziertes Produkt, das in weiten Teilen der Gesellschaft noch nicht angekommen ist. Aber es hat sicherlich seine Zielgruppe und Menschen, denen es wirklich helfen würde. Was also tun?

Wie gewinnt Mein-Mentaltraining seine Zielgruppe?

Jetzt habe ich genug kritisiert: Lass uns anschauen, wie wir die beiden Elefanten aus dem Shop bekommen.

1. Rebranding

Hypnocoach-Online sorgt als Markenname für Verwirrung. Er tritt in Konkurrenz zu Mein-Mentaltraining, das das einzige Produkt im Shop ist. Da es auch das entscheidende Keyword enthält, sollte der ganze Shop umbenannt werden und ein neues Logo bekommen. Hier ein Quick-and-dirty-Redesign:

07-Webshop-Rebranding

Die Domain mein-mentaltraining.de ist zum Glück noch zu haben.

2. Menü entschlacken

Das Menü hat viel zu viele Punkte. Wir räumen hier auf und geben dem Nutzer eine bessere Orientierung auf der Seite. Der rechtliche Kram wandert dezent an den oberen Rand:

08-Webshop-Redesign-Menu

3. Ein klares Nutzen-Versprechen

Bevor der Besucher sich eingehend mit der Materie beschäftigt, will er erst einmal einen Eindruck gewinnen, ob es sich lohnt zu bleiben. Mit einem attraktiven Banner lenken wir die Aufmerksamkeit auf den Nutzen, den er hier erwarten kann.

4. Einstiegshürde senken

Mentaltraining haben sicher die wenigsten Menschen schon einmal ausprobiert. Nachdem der Shop viele Produkte anbietet, warum nicht ein für Einsteiger besonders geeignetes Produkt verschenken?

Mit einem neuen Button Jetzt kostenlos starten erhält die Seite einen wichtigen Call-to-action, und der Nutzer kann ohne Risiko gleich ausprobieren, ob das Programm für ihn geeignet ist.

Nur mit diesen vier Änderungen würde der Shop bereits ganz anders wirken:

09-Webshop-Redesign-Mockup

5. E-Mail-Liste aufbauen

Sagte ich kostenlos? Nicht ganz! Für den Download sollte er seine E-Mail-Adresse abgeben. Die gute alte E-Mail-Liste ist noch immer das effektivste Tool im Online-Marketing. So kann Silvia ihren Kunden per E-Mail Tipps geben, wie sie am meisten von ihrem Mentaltraining profitieren. Und sie kann sie so auch an die kostenpflichtigen Produkte heranführen.

6. Eine persönliche Verbindung aufbauen

Bisher ist der Shop sehr unpersönlich. Dabei kann Silvia viel über sich und ihre Erfahrungen berichten. Sie selbst ist durch ihre eigene Leidensgeschichte zum Mentaltraining gekommen. Zumindest eine aussagekräftige Über-mich-Seite mit Einblicken und guten Bildern sollte es geben. Zurzeit entspricht die Über-mich-Seite der Startseite.

7. Social Proof

Eine hohe Glaubwürdigkeit gewinnt man vor allem dann, wenn Anwender ihre guten Erfahrungen weitergeben. Mit dem Verschenken eines Basis-Produkts sollten schnell erste Berichte eintreffen. Dank des Newsletters kann Silvia gezielt darum bitten.

Eventuell sollte sie erst einmal weniger Produkte anbieten, damit diese schneller Bewertungen erhalten. Neue Produkte kann sie dann nach und nach einführen und über den Newsletter bewerben.

Auch Zertifikate, Meinungen von Autoritäten und andere Referenzen sollten nicht fehlen.

8. Gute Produktabbildungen und Fotos

Ein hochwertiges Produkt kann man einfach nicht mit Stock-Bildern bewerben. Noch dazu, wenn sie so wild zusammengewürfelt sind und nicht einmal ein einheitliches Format haben. Schon mit einem einfachen Layout wirken die Produkte ganz anders:

10-Webshop-Produkt-Redesign

Auch die vielen Stockbilder mit Fotomodels wirken unnatürlich. Besser sind attraktive Stimmungsbilder, von denen viele kostenlos sind. Christians Guide für lizenzfreie Bilder verrät, wo man sie findet. Die beste Lösung wäre aber vermutlich, ganz auf Stockbilder zu verzichten.

Mein-Mentaltraining setzt einen starken persönlichen Bezug voraus. Wenn ich die Trainerin unsympathisch finde oder ihre Stimme nicht mag, werde ich es nicht nutzen. Warum nicht gleich die Titelseite mit einem guten Portrait beginnen, wie es auch Christian in seinem Blog macht?

Statt einer Studio-Aufnahme wären hier stimmungsvolle Bilder in der freien Natur sicher passender, die sich dann als Bildthema durch alles durchziehen könnten.

9. Responsives Layout

All diese Punkte sind relativ leicht mit der bestehenden Seite zu realisieren. Mittelfristig muss aber ein neues Layout her, das auch auf mobilen Geräten funktioniert. Viele Menschen hören MP3s auf ihrem Smartphone – da muss es möglich sein, sich ein neues Trainingsprogramm direkt aufs Handy zu holen.

Langfristig ist eine eigene App sicher die beste Lösung. Aber das ist Zukunftsmusik, wenn sich das Produkt bewährt.

Auch die Macher von Freeletics haben nur mit einem Youtube-Video und ein paar PDFs angefangen. Ihre Erfolgsgeschichte ist ein tolles Beispiel, wohin die Reise gehen kann: Hier ist sie anschaulich nacherzählt.

10. Es ist nie perfekt

Das waren jetzt eine Menge Verbesserungsvorschläge. Doch selbst damit wird die Seite nicht perfekt sein. Das ist vielleicht die wichtigste Lektion aus dem Artikel.

Egal wie gut man plant und gestaltet: Man macht immer Fehler und manches funktioniert einfach nicht wie gedacht. Deshalb muss man immer sehen, was funktioniert und sich weiter verbessern. Der einzige Fehler ist, niemals anzufangen.

Ich wünsche Silvia viel Erfolg auf dem Weg! Meine Vorschläge werden ihr hoffentlich helfen, ihren Shop zu optimieren. Ich bin gespannt, wie sich ihr Geschäft nach den Änderungen entwickeln wird.


P.S.: Und wenn du Silvia unterstützen und Mentaltraining ausprobieren willst: Sende ihr eine Nachricht über das Kontaktformular auf ihrer Seite. Sie schickt dir gerne ein kostenloses Training zum Testen.


Artikelbild: Emanuele, flickr.com (CC BY-SA 2.0)

5 Kommentare

  • […] Artikel wie „Wie ich mit dem richtigen Freebie meine Abonnentenzahl verdreifacht habe“, „Der Elefant im Online-Shop: Wie kleine Webdesign-Fehler die Kunden verschrecken“ oder „Mit Trusted Content mehr Affiliate Provisionen verdienen“ liefern dir tiefe Einblicke, […]
  • […] Webdesign-Fehler, die Kunden verschrecken Fehler im Design, die zu hohen Absprungraten und fehlenden Conversions führen müssen nicht immer auf den ersten Blick zu sehen sein. Oftmals liegt der Teufel im Detail. Unser vierter Artikel zeigt anhand eines konkreten Beispiels auf, wo im Onlienshop durch kleine Verbesserungen große Effekte erzielt werden können. https://de.letsseewhatworks.com/online-shop-webdesign-fehler/ […]
  • Tolle Case Study!

    Gerade Anfänger machen solch simple Grundlangenfehler, die man eigentlich an einem Tag alle ausbessern könnte. Das ist eine tolle Anleitung. Der Artikel wird mal gleich gebuffert ;) :D

    Gruß
    Vladimir
  • Sollte man meinen. Ich habe schon erstaunlich viele Leute getroffen, die auf irgendwelche starren Systeme oder unflexible Webdesigner setzen, dass sie Panik bekommen, wenn es um ein paar einfache Änderungen geht: "Oh Gott, was das kostet..."
    Es scheint noch immer jede Menge unqualifizierter "Dienstleister" zu geben, die immer wieder Opfer finden, die drauf rein fallen.

    Traurig aber wahr.
    Matthias

Was denkst du?

Lerne aus der Praxis

Hier bekommst du kostenlose Erfahrungen von Gründern für Gründer. Lerne, wie du dein Business zum Erfolg bringst.

Sponsoren

Finanzmanagement für kleine Unternehmen

Immer frischer Kaffee für´s Büro

© 2017 by Framework. Powered by Chimpify.