Bei Formularen spielt die Kosten-Nutzen-Rechnung für Website-Nutzer eine wesentliche Rolle. Nicht zuletzt ist die Bereitschaft, die eigenen Daten preiszugeben, bei vielen Menschen nicht besonders hoch [1], die Erwartungen dafür umso mehr. Insofern ist es eine regelrechte Herausforderung, Menschen dazu zu motivieren, online ein Formular auszufüllen. Zu diesem Zweck lohnt sich ein Exkurs in die konsumpsychologischen Verhaltensmuster von Menschen. So kannst du erstens deine Nutzer besser verstehen und zweitens diese Erkenntnisse in der Gestaltung deines Formulars bzw. deiner Formulare einfließen lassen.

Unser Praxis-Beispiel für ein Online-Formular: Wie es nicht funktioniert

Um dir aufzuzeigen, wie man ein konversionsstarkes Formular gestaltet, möchten wir dir den Verlauf von einem schlecht gestalteten Formular zu einem gelungenen, optimierten Formular aufzeigen. So wird der qualitative Unterschied besser erkennbar.

In unserem konkreten Fall handelt es sich um ein Formular, das, wenn ausgefüllt, ein E-Book zum Download freigibt – quasi klassische Lead-Generierung. Auf den ersten Blick sind alle typischen Merkmale eines Formulars gegeben, aber so wirklich Lust bekommen Nutzer nicht, die Felder mit den eigenen Angaben zu befüllen.

Schauen wir uns das Ganze genauer an: Auffällig ist zum einen das beliebig ausgewählte Stockfoto. Was für eine Rolle spielt dieser Mann auf dieser Formularseite? – Keine erkennbare. Damit wären wir schon beim ersten Problem: Das Foto unterstützt die Funktion der Formularseite nicht, da der Bezug des Fotos zum Ganzen nicht nachvollziehbar ist.

Ebensowenig findet man als Nutzer Gründe, warum man dieses E-Book herunterladen sollte. Zwar gibt es einen Titel, der spannend klingt (“Die Präsentationsgeheimnisse von Steve Jobs”) und der den Website-Besucher überhaupt auf die Formularseite geführt zu haben scheint, doch was genau zeichnet dieses E-Book aus? Vielmehr scheint es, als würde man im Gegenzug für die Angabe der eigenen, sehr konkreten Daten die Katze im Sack erhalten. Warum also sollte ein Nutzer hier seine Daten eingeben?

Formulare optimieren: So sorgst du für zufriedene Nutzer und eine höhere Conversion-Rate

Für uns war die Ausgangslage eine willkommene Herausforderung: Die Optimierung dieses Formulars war nämlich nicht nur eine Frage der Usability, sondern involvierte ebenso den Einsatz konsumpsychologischer Prinzipien. Im Folgenden zeigen wir dir, welche Behavior Patterns wir einsetzten, um das Ausfüllen des Formulars attraktiver zu machen.

Zunächst fällt dir auf der optimierten Formularseite höchstwahrscheinlich das neue Bild auf. Statt eines beliebig gewählten Fotos siehst du nun Steve Jobs – immerhin geht es um die Präsentationsgeheimnisse des ehemaligen Apple CEOs! Damit der Bezug um ein Weiteres deutlicher zu Tage tritt, ist darüber hinaus sein Name auch auf der E-Book-Visualisierung neben dem Portrait zu sehen. Das Behavior Pattern, das hier wirkt, ist das der Authority.

Das Behavior Pattern Authority beruht auf dem Vertrauen, das Menschen jenen mit Autorität beimessen. Je höher die Bekanntheit, Expertise und damit die Autorität auf einem Gebiet, desto stärker ist das Vertrauen gegenüber dieser Autorität ausgeprägt. Frag dich also am besten, welche Autorität du nutzen kannst, damit Nutzer dein Angebot noch mehr wertschätzen!

Dafür bedarf es nicht unbedingt einer Koryphäe wie Steve Jobs. Die Nutzung von seriösen, bekannten Quellen wie offiziellen Statistik-Datenbanken, Stimmen von renommierten Kunden oder Referenzen zu einschlägigen Veröffentlichungen können ebenfalls diesen Effekt bei deinen Nutzern erzeugen.

Die Bedeutung eines Formulars für die Erstellung oder Optimierung nutzen

Führt man sich den Sinn eines Formulars bewusst vor Augen, wird klar, dass es sich um einen Tausch handelt: Du bietest etwas an, in diesem Fall ein E-Book zu den Präsentationstechniken von Steve Jobs, was deine Website-Besucher interessieren könnte. Da in einem E-Book Arbeit steckt, erbittest du einige Angaben deiner Nutzer statt Geld, um sie später für weitere Angebote deinerseits begeistern zu können. Da viele Nutzer (zu Recht) auf ihre Daten Acht geben und sorgfältig prüfen, ob es sich lohnen würde, zum einen die Daten preiszugeben, zum anderen Zeit in das Ausfüllen zu investieren, solltest du ihnen gute Gründe nennen können. 

Und hiermit wären wir bei dem Behavior Pattern Reciprocity: Dafür, dass Nutzer ihre Daten übermitteln, erwarten Sie etwas im Gegenzug. In diesem Fall ist es das vermeintlich kostenfreie E-Book sowie die Aussicht auf weitere kostenfreie Materialien (–> Behavior Pattern Preview). Gewissermaßen steht der Anbieter in der Bringschuld, wenn Nutzer ihre Daten erst einmal übermittelt haben, und muss einen zufriedenstellenden Ausgleich leisten können. Das Prinzip der Reziprozität solltest du dir daher stets vor Augen halten. Bietest du genug, damit deine Nutzer darin einen Mehrwert sehen und sich auf einen Tausch einlassen?

Formularoptimierung: Bedenken minimieren und Neugier wecken

Zwei weitere Behavior Patterns, die sich vorteilhaft auf die Conversions deiner Formularseite auswirken, sind Preview und Curiosity. Das Verhaltensmuster Preview basiert auf dem Gedanken, dass du deinen Nutzern eine Vorstellung davon gibst, was sie konkret erwartet, wenn sie dein Formular ausfüllen, zum Beispiel mittels Inhaltsvorschau. In unserem Fall ist es die Veranschaulichung des E-Books, das durch die neue Visualisierung greifbarer wird. Die direkte Verbindung zu Steve Jobs, um dessen Techniken für Präsentationen es im E-Book geht, wird deutlich herausgestellt, genauso wie das Format des E-Books, was Fragen zur Kompatibilität erübrigt. In der Ausgangsversion des Formulars war von alldem noch nichts erkennbar.

Schauen wir in den unteren Bereich des optimierten Online-Formulars, sind außerdem weitere Materialien aufgeführt, die Nutzer ebenfalls interessieren könnten, und durch Fettung der Schrift hervorgehoben.

Die Themenverwandtschaft weiterer kostenfrei verfügbarer E-Books appelliert an ein weiteres Behavior Pattern, nämlich das der Curiosity: Vielleicht sind im “Handbuch für virtuelle Präsentationen” ja weitere Informationen und Erkenntnisse gesammelt, die eine tolle Ergänzung zum E-Book über Steve Jobs’ Präsentationstechniken sind! Und zur “Projektzusammenarbeit in virtuellen Teams” könnte man sich ebenfalls mal genauer belesen…

Hier wird durch die bildliche Darstellung weiterer Materialien Neugier geweckt. In dem optimierten Formular hat man eine bessere Vorstellung, was einen erwartet und was es darüber hinaus gibt. Stell dir also die Frage, womit du deine Nutzer aus der Reserve locken könntest und was sie anspornen könnte!

Ausfüllen von Formularen: Begründe & betone den Nutzen!

Anhand eines weiteren Beispiels erläutern wir dir den Vorzug eines weiteren Behavior Patterns – dem Reason Why. Im Prinzip solltest du dem Nutzer immer die Frage des Warum beantworten können. “Warum sollte ich das Formular ausfüllen und meine Daten preisgeben?” – Nun, ganz einfach, weil…Und an dieser Stelle solltest du klar kommunizieren können, was die Vorteile oder der Mehrwert für deine Nutzer sind. Schaffe Gründe, deretwegen es sich lohnt, das Formular auszufüllen! 

Im Beispiel sieht dies im Vorher-Nachher-Vergleich folgendermaßen aus:

In der optimierten Variante sehen wir recht schnell und deutlich, welche Vorteile das Infopaket dem Einzelnen bringt. Die grünen Häkchen verstärken visuell diesen Eindruck, der auch durch die recht weit oben erfolgte Positionierung unterstrichen wird. Neben dem Reason Why lassen sich an diesem Beispiel auch die bereits genannten Verhaltensmuster Curiosity, Preview und Reciprocity erkennen.

Beyond Usability: Kundenzentrierte Online-Formulare erstellen 

Unsere Beispiele haben dir hoffentlich verdeutlicht, wie man fernab von Usability Formular-Seiten optimieren kann. Mit einem konsumpsychologischen Ansatz kannst du dir das Wissen über menschliche Verhaltensweisen und Denkmuster, wovon du nun eine Auswahl an Praxisbeispielen kennengelernt hast, nachhaltig zu Nutze machen. Mit den Behavior Patterns, die wir dir hier vorgestellt haben, kannst du dein Download- oder Kontaktformular auf Vordermann bringen.

Weiterführende Materialien zum Optimieren von Formularen

Wenn du dich zu dem Thema gern tiefergehend belesen und weitere Optimierungsmaßnahmen kennenlernen möchtest, kannst du dir beispielsweise den Blogbeitrag unseres Head of UX Design Manuel Ressel mit dem Titel 3 Geheimtipps für noch bessere Formulare durchlesen oder den Beitrag von konversionsKRAFT-Gründer André Morys: 21 Best Practices zur Formular-Optimierung. Da wir in diesem Artikel exemplarisch vorgegangen sind und nicht alle möglichen Optimierungsmaßnahmen für Formulare behandeln konnten, ist sicherlich noch das ein oder andere Learning für dich in den weiteren Materialien enthalten.

⬇️ Für die schnelle Orientierung steht dir unsere aktualisierte Checkliste zur Formularoptimierung zum kostenlosen Download zur Verfügung. Jetzt herunterladen und dein Formular in Bestform bringen! 📝

Unsere Weiterbildungsangebote zu Konsumpsychologie & Co.

Wenn du dich intensiver mit Konsumpsychologie beschäftigen und erfahren möchtest, wie du die Verhaltens- und Denkmuster in E-Commerce und Website-Gestaltung gewinnbringend einsetzen kannst, empfehlen wir dir unseren Lehrgang zum zertifizierten Conversion-Manager.

Darin lernst du unter anderem Folgendes:

• Die Wirkung von Psychologie im Marketing verstehen.
• Webseiten mit dem 7-Ebenen-Modell analysieren.
• Anhand von typischen Verhaltensmustern Optimierungspotenziale erkennen.
• Test-Konzepte auf Basis von Behavior Patterns erstellen.

Wir hoffen, dass wir dir neue Erkenntnisse und Impulse bieten konnten, damit deine Formulare nicht mehr der Flaschenhals sind, an dem deine Website-Besucher aufgeben. Wenn du Fragen haben solltest, kannst du diese gern im Kommentarbereich schreiben. Ich freue mich über dein Feedback!

Quelle:

[1] Hier gibt es in Bezug auf das Alter interessante Erkenntnisse: So ist die Generation Z (bis zu einem Alter von 23 Jahren, Stand: Sept. 2019) vorsichtiger im Umgang mit den eigenen Daten als die Babyboomer, die derzeit zwischen 55 und 73 Jahren alt sind. https://www.adobe-newsroom.de/2019/09/11/adobe-studie-generation-z-ist-online-am-einfachsten-zu-beeinflussen-aber-am-cleversten-mit-ihren-daten/, 09.09.2019.

Der Beitrag Formular-Optimierung: 5 Behavior Patterns in der Anwendung (inkl. Checkliste) erschien zuerst auf konversionsKRAFT.

Technik ist kein Allheilmittel

Mit einer technischen Optimierung der Webseiten ist es nicht getan. Eine gänzlich andere Denkweise muss in die Köpfe der Marketer, um der Zielgruppe das bieten zu können, was sie in einem mobilen Umfeld auch benötigt.

Wie schaffen wir es, unsere Marketingmaßnahmen den geänderten Nutzungsverhalten der Zielgruppe anzupassen? Wenn alle Welt mit einem Smartphone rumläuft und es spezielle Fußgängerwege braucht, dann muss sich etwas in unserem Denken ändern.

Bildquelle

Ein Umdenken muss stattfinden 

Eine gute mobile Strategie fordert ein Umdenken was Inhalte betrifft. Wir müssen uns in die Lage derjenigen hineinversetzen, die unsere Webseiten täglich mit mobilen Endgeräten besuchen.

Welche Intention hat der Nutzer? Was haben die Besucher vorher getan? Was tun sie als nächstes? Welche Informationen braucht die Zielgruppe genau jetzt? Welche Informationen sind irrelevant?

Es geht also nicht darum, den mobilen Traffic nur abzuschöpfen und darauf zu achten, dass einen die Suchmaschine nach oben rankt. Vielmehr geht es darum, die Intentionen der Besucher mit mobilen Endgeräten zu verstehen und bedienen zu können, denn diese fordern immer mehr, dass man Webseiten auch von unterwegs mit dem Smartphone gut bedienen können muss. Eine mobile Website ist kein Begeisterungsfaktor mehr, sondern Basisfaktor.

Auf gut Deutsch: Baut mobile Seiten nicht für die Suchmaschine, sondern für den Nutzer! Aber das gilt ja bekanntlich auch für “nicht mobile” Webseiten 😉

Wie steht es 2017 um die deutschen Top100 Onlineshops? 

Wer seine Seite technisch checken lassen möchte, kann das direkt bei Google tun > Link zu Google’s Test auf Optimierung für Mobilgeräte

Im März 2017 haben wir für den “Mobile Commerce Checkup” die 100 umsatzstärksten deutschen Onlineshops analysiert. Die positive technische Bilanz: 95% haben ihre Website für Mobilgeräte optimiert.

In der nachfolgenden Checkliste möchten wir daher nicht auf technische Aspekte einer Optimierung für Mobilgeräte eingehen, sondern uns mit dem mobilen Nutzererlebnis befassen.

Die Checkliste für Deine mobile Strategie

Die Basis unserer Checkliste (Download am Ende des Artikels) ist das bewährte „7-Ebenen Modell“. Es spiegelt den inneren Dialog der Nutzer bei ihrer Entscheidungsfindung auf 7 Ebenen wider. Vielleicht kennst Du das Modell bereits und wendest es für die Desktop-Optimierung an. Heute übertragen wir es ganz gezielt auf mobile, denn Nutzerbedürfnisse unterscheiden sich auch nach Device:

Welche Fragen hat die Zielgruppe im mobilen Umfeld? Welchen Ängste hat sie? Welche Bedürfnisse sollten bedient werden? Wie schaffe ich es, Nutzern das Gefühl zu geben, das meine Webseite das Richtige anbietet und sie ihr vertrauen können?

Wähle eine Ebene mit der Schnellnavigation
>> Ebene 1: Relevanz
>> Ebene 2: Vertrauen
>> Ebene 3: Orientierung
>> Ebene 4: Stimulanz
>> Ebene 5: Sicherheit
>> Ebene 6: Komfort
>> Ebene 7: Bewertung
>> Download Checkliste

Ebene 1: Relevanz

Wenn man unterwegs ist, muss alles schnell gehen, sofort verfügbar sein, Probleme lösen können oder in der Nähe sein. Relevanz kann daher auf unterschiedlichen Ebenen erreicht werden: Zeitlich, räumlich und problemlösend. Wir müssen uns fragen: In welchem Schlamassel steckt der Suchende im Moment? Warum wird ein bestimmtes Keyword eingegeben?

Anwendungsbeispiel: “Autoreparatur”

Ich fahre mit meinem Auto zum Termin, da blinkt unerwartet die Kontrollleuchte auf, welche warnt: Motorstörung! Im Handbuch zu lesen: “Fahren Sie zur nächsten Werkstatt”. Mein Smartphone lässt mich nicht im Stich und ich google nach „Autoreparatur“. Es erscheinen ein paar Adwords Anzeigen:

Autobutler.de

Die erste Anzeige, die mir Google anzeigt, verspricht 3 Angebote zu vergleichen und zu sparen:

Auf der Seite von Autobutler ist die Nachricht einfach und klar: Werkstatt in der Nähe, Vertrauen, andere zufriedene Kunden. Problem: ich bekomme die Angebote erst später zugesendet. Es ist aber dringend! Wie komme ich zur Werkstatt in der Nähe? Das ist nicht relevant.

Zurück zu Google. Nächster Versuch.

Autoreparaturen.de

Bei autoreparaturen.de spare ich auch und mir werden lokale Angebote versprochen. Hmm… die Telefonnummer (zum Zeitpunkt der Suche befand ich mich in Berlin) ist aus einer ganz anderen Region. Ich bin stutzig, klicke aber drauf.

Auch auf der mobilen Landing Page keine Info, die mir weiterhelfen würde. Keine Adresse, Auswahlmöglichkeit einer Filiale oder Telefonnummer. Aber hey: Ich kann mein Auto fit für den Frühling machen. Warte: Wir haben Ende August. Ich bin im falschen Film und mein Auto benötigt dringend Hilfe.

Stopandgo.de

Die 3. Anzeige verspricht mir lange Öffnungszeiten, eine Mobilitätsgarantie und Service für alle Marken. Hier wird mir sicher geholfen.

Diese mobile Landing Page macht es richtig. Hier sehe ich auf den ersten Blick die Öffnungszeiten und kann über die regionale Suche eine Werkstatt in meiner Nähe suchen (1). Außerdem gibt es einen Schnellkontakt – schnell ist gut 😉 – und eine Onlinebuchungsmöglichkeit für die Schüchternen (2). Ich bekomme eine Mobilitätsgarantie (3) und wenn mein Auto doch dort bleiben muss, erhalte ich einen Ersatzwagen (4). Unten gibt es dann noch mal die 3 Schritte zur Buchung und alle Filialen auf einen Blick (5) und ich finde eine Pannennummer für die direkte Hilfe, falls es der kleine doch nicht mehr bis zur Werkstatt schafft (6). Problem gelöst. Hier ist die Conversion von Online zu Offline geglückt.

>> Optimierungstipps für mehr Relevanz

Ebene 2: Vertrauen

Menschen, die man nicht kennt, vertraut man weniger als bekannten Personen. Bei Webseiten ist das nicht anders. Also braucht es externe Reize (Vertrauenssignale), die bestätigen, dass man dem Anbieter vertrauen kann. Bei starken Marken ist das Vertrauen schon über andere Kanäle geprägt und geschaffen worden. Weniger bekannte Marken oder Anbieter können unterschiedliche Signale nutzen: Gütesiegel, TÜV Abzeichen oder Testberichte. Aber auch das Design einer mobilen Webseite prägt das Vertrauen.

Anwendungsbeispiel: “bank konto”

Auf dem Nachhauseweg in der S-Bahn möchte ich mich über unterschiedliche Girokonten informieren. Da Geld Vertrauenssache ist, erwarte ich von den unterschiedlichen Anbietern auch, dass sie Vertrauen zu mir aufbauen. Ich gebe „bank konto“ in die Suche ein.

Comdirect

Comdirect wirbt in seiner Adwords Anzeige mit einer Prämie von 150€, Fairness und kostenloser Kontoführung. Ich klicke auf die Anzeige und gelange zur Landing Page:

Vertrauen wird geschaffen, da die mobile Landing Page das Versprechen aus der Anzeige mit der Prämie und der kostenlosen Kontoführung direkt wieder aufgreift. Das Bild mit dem Pärchen auf einem Boot impliziert, dass ich von überall auf mein Konto zugreifen kann, was zusätzlich Vertrauen schafft. Scrolle ich weiter, sehe ich, dass ich die 150€ auch bei Nichtgefallen erhalte. Dann habe ich ja nichts zu verlieren! Außerdem gibt es einen Kundenservice rund um die Uhr und eine Auszeichnung von Focus Money als fairste Direktbank – aktuell aus 2017. Preise und Konditionen sowie zusätzliche Infos kann ich aufklappen und ganz unten finde ich die Telefonnummer, über die ich den Kundenservice 24 Stunden am Tag erreichen kann.

Bonus, der nichts mit Vertrauen direkt zu tun hat: Der CTA zur Kontoeröffnung läuft auf der kompletten mobilen Landing Page sticky mit. 😉

>> Optimierungstipps für mehr Vertrauen

Ebene 3: Orientierung

In sehr frühen Kaufentscheidungsphasen informieren sich Nutzer über unterschiedliche Anbieter und deren Portfolio. Gerade bei Produkten oder Dienstleistungen, die sich nicht sofort erschließen, muss man für Orientierung sorgen. Das gleiche gilt für Shops mit einem großen Sortiment. Orientierung auf einem kleinen Endgerät zu schaffen, ist leichter gesagt als getan.

Anwendungsbeispiel: “notebook kaufen”

Mit dem Keyword „notebook kaufen“ begebe ich mich auf die Suche nach einem neuen Notebook. Meist haben Onlineshops eine immens hohe Auswahl an Geräten. Ich bin gespannt. Eine Anzeige von computeruniverse weckt meine Aufmerksamkeit, da sie mir eine große Auswahl verspricht.

Die Anzeige führt mich direkt in die Kategorie “Notebooks & Zubehör”, wie ich oben in der Breadcrumb-Navi sehe. Darunter dann was ich erwartet habe: 2.434 Notebooks wollen durchforstet werden. Auf einem Smartphone kein Spaß.

Orientierung liefern mir hier 3 Funktionen: Die Suche (1), Ansicht wechseln (2) und Filter und Sortierung (3).

Sollte es mir trotz dieser drei Optionen nicht gelingen, mir einen Überblick zu verschaffen und das richtige Notebook zu finden, steht am Ende der Seite immer noch die Telefonnummer als Notanker. Sympathisch: kein Call Center, da es eine Nummer mit Ortsvorwahl ist. Ich tippe auf die Nummer und das Gerät fragt mich, ob ich anrufen möchte. So muss das sein. Schließlich nutze ich ein Smartphone.

>> Optimierungstipps für mehr Orientierung

Ebene 4: Stimulanz

Wie schafft man es, die Zielgruppe zu aktivieren? Wie kann man die eigenen Angebote noch unwiderstehlicher machen? Stimulanz kann auch auf dem mobilen Endgerät erreicht werden. Wichtig dabei: Versprechen müssen gehalten werden.

Anwendungsbeispiel: “business hemd”

Zwei Hemden, zum Preis von einem! Das klingt nach einem guten Angebot. Dazu eine Garantie von 5 Jahren und bügelfrei. Ich klicke, bzw. tippe mit dem Finger auf die Anzeige.

Die mobile Seite enttäuscht mich nicht, sondern überrascht vielmehr. Ich verstehe sofort: Aha, hier kann ich sogar meine beiden Hemden nach meinen Wünschen gestalten! Wirkt einfach und fingerfreundlich. Das hätte ich nicht erwartet und beeindruckt mich positiv.

Leider finde ich zunächst nichts zu den versprochenen 5 Jahren Garantie! Zwei mal mit dem Daumen nach unten scrollen und ich bin wieder beruhigt. Hier finde ich unterhalb der Call-to-Action meine Garantie. Erneut werde ich positiv überrascht: Kauf auf Rechnung, eine kostenlose Retoure und ein Rückgaberecht überzeugen mich vollends.

>> Optimierungstipps für mehr Stimulanz

Psycho-Tipp: Stimuliere mit dem “Reason Why”

In diesem überzeugungsKRAFT-Video erfährst Du, welchen Effekt es hat, wenn Du Nutzern gute Gründe lieferst:

Ebene 5: Sicherheit 

Der Moment des Innehaltens kurz vor einer Entscheidung: Ist das wirklich sicher, wenn ich hier buche/ kaufe? Die Besucher müssen ein gutes Gefühl haben, wenn sie auf den Kaufen-Button klicken. Was passiert bei Rückgabe? Wie kann man retournieren?

Anwendungsbeispiel: Fashion

Bei FashionID finde ich viele gute Gründe, warum einem Kauf nichts mehr im Weg stehen sollte. Meine Ängste sollten dadurch genommen werden.

>> Optimierungstipps für mehr Sicherheit

Ebene 6: Komfort

Wenn die Entscheidung getroffen ist, muss es auf dem Smartphone auch schnell und einfach gehen, die gewählten Produkte zu bestellen oder Anfragen zu stellen. Kein Mensch möchte sich mit langen Formularen rumschlagen müssen, die im schlimmsten Fall auf dem Smartphone nicht richtig bedienbar sind.

Anwendungsbeispiel: “KFZ Versicherung”

Eine einfache und klare Anzeige, die mich auf der Suche nach einer „KFZ Versicherung“ auffordert, sofort zu starten. Ich möchte wissen, was mir der Tarifrechner bringt. Los geht‘s.

Ich gelange auf die Seite und starte den Rechner. Schnell erwische ich mich dabei, zu denken: Oh mann, das wird lange dauern. Für die Berechnung einer KFZ Versicherung wird schon ein wenig Zeit benötigt. Dann sollte es aber zumindest so aussehen, als wäre der Prozess leicht und komfortabel zu durchlaufen. Vor mir liegen fünf weitere Schritte, aber bei den kleinen Bedienelementen vergeht mir leider die Lust. Das muss ich wohl nochmal daheim in Ruhe machen, denn mit meinen Fingern klicke ich immer wieder neben die Schaltflächen.

>> Optimierungstipps für mehr Komfort

Ebene 7: Bewertung

Nach getaner Arbeit wird das Werk begutachtet. Soll heißen: Der Nutzer bewertet, wie er oder sie das mobile Einkaufserlebnis empfand. Bleiben Zweifel bestehen, oder reiht sich die Bestellung oder Anfrage über mobile Endgeräte nahtlos in unser Online Konsumverhalten ein?

>> Optimierungstipps für eine bessere Bewertung

Fazit

Die Welt wird mobile. Es gibt Länder, in denen das mobile Endgerät den einzigen Zugang zum Internet darstellt. Davon sind wir zwar noch weit entfernt, aber der Trend ist eindeutig. Das heißt aber nicht, dass wir Webseiten ab sofort für ein zusätzliches Endgerät anpassen müssen, sondern vielmehr, dass wir unterschiedliche Nutzungsszenarien berücksichtigen müssen.

Der Nutzungskontext ist maßgeblich für die Informationen, die wir anbieten. Wer also noch nicht auf mobile Endgeräte optimiert hat, der sollte sich die Zeit nehmen, eine mobile Strategie zu entwickeln und sich genau überlegen, wo die Zielgruppe erreicht wird und was man ihr auf allen 7 Ebenen der Entscheidungsfindung bieten muss. Dann wird der mobile Traffic auch sinnvoll gewandelt!

Checkliste Mobile Adwords Landing Pages (Download)

Die Checkliste mit allen 33 Tipps zur Optimierung Deiner mobilen Adwords Landing Page gibt es hier. Einfach herunterladen, ausdrucken und Deine Landing Page Tipp für Tipp optimieren.

Vielen Dank an Dennis Herzberger, der diese Checkliste mit erstellt hat.

Viel Spaß beim Optimieren!

Weiterführende Links:

https://www.konversionskraft.de/conversion-optimierung/infografik-mobile-commerce-checkup.html

https://www.konversionskraft.de/daten-fakten/infografik-mobile-checkout-report.html

https://www.konversionskraft.de/checklisten/diese-checkliste-macht-deine-adwords-landing-page-zum-treffer-download.html

Der Beitrag Das erwarten Nutzer von mobilen Landing Pages (Download Checkliste) erschien zuerst auf konversionsKRAFT.

Wir wünschen uns Licht im Tal der Verwirrung

Jeder von uns kennt die Situation: Du suchst im Netz nach einem bestimmten Produkt, doch Du klickst schon die zehnte Seite weg, denn Du findest einfach nicht, wonach Du gesucht hast. Du beginnst, innerlich zu toben: “Was soll das? Das habe ich nicht gesucht!”, „Wo ist denn jetzt die Reise nach Malle für 499€?“, “Das war ja klar, dass das super Angebot jetzt schon weg ist, die wollten mich doch nur anlocken”.

Um zu vermeiden, dass die Reaktionen Deiner Nutzer beim Besuch Deiner Landing Page genauso ernüchternd ausfallen, ist es an der Zeit, Dich mit ihren inneren Dialogen auseinanderzusetzen.

Was fesselnde Adwords Landing Pages auszeichnet

Fesselnde Adwords Landing Pages nehmen die inneren Dialoge der Nutzer vorweg. So ebnest Du ihnen den Weg zum Checkout und stellst sie auch darüberhinaus zufrieden. Um sich ein klareres Bild über die Dialoge machen zu können, bietet es sich an, die Nutzerfragen auf Basis des 7-Ebenen-Frameworks zu betrachten.

Das 7-Ebenen-Framework ist ein erprobtes Modell, um Schwachstellen einer Webseite aus Sicht der Nutzer zu identifizieren. Mehr dazu findest Du im Artikel >> Die 7 Ebenen der Konversion.

Best Practices, Optimierungstipps und eine Checkliste

In diesem Artikel gehen wir die inneren Dialoge der Nutzer Ebene für Ebene durch. Dabei müssen die Ebenen auf dem Weg zur perfekten Adwords Landing Page nicht zwangsläufig hintereinander erklommen werden. Die Prozesse können auch parallel ablaufen.

Wir veranschaulichen unsere Optimierungstipps durch Best Practices und zeigen Dir auch ein paar Nicht-so-gut-Beispiele. Alle Tipps gibt es am Ende des Artikels als praktische Checkliste zum Herunterladen und Ausdrucken.

Wähle eine Ebene mit der Schnellnavigation
>> Ebene 1: Relevanz
>> Ebene 2: Vertrauen
>> Ebene 3: Orientierung
>> Ebene 4: Stimulanz
>> Ebene 5: Sicherheit
>> Ebene 6: Komfort
>> Ebene 7: Bewertung
>> Download Checkliste

Ebene 1: Relevanz

“Finde ich hier, was ich gesucht habe?”

Das wichtigste überhaupt zuerst: Bietet die Landing Page das, was ich suche, bzw. kann ich vermuten, dass ich das finde, was ich suche? Die Frage scheint trivial. Sie ist aber nicht immer so einfach zu beantworten, wenn man ein Set von 3.000 bis 4.000 Keywords optimieren muss. (Automatisierung vs. Individualisierung)

Je genauer eine Eingabe des Suchbegriffs in der Suchmaschine erfolgt, um so enttäuschender ist es, wenn man die Suche auf der Adwords Landing Page nochmal starten muss, da man einfach nicht richtig verlinkt wurde. Wichtig hierbei ist auch, den richtigen Match Type bei den Adwords-Anzeigen für die Suchbegriffe einzustellen, damit man mit der eigenen Werbeanzeige nicht zu Kombinationen oder ganz generischen Begriffen erscheint. Wie sich die Optimierung der Zielseite auf die SEA-Kampagnen Daten (CTR, Conversions, etc.) auswirkt, kannst Du in dem Artikel >> 92:1 Dilemma im Online Marketing nachlesen.

Relevanz am Beispiel der Google-Suche “herrenschuhe braun leder”

Wir haben einmal die Adwords-Treffer untersucht, die bei der Suchanfrage “herrenschuhe braun leder” erscheinen. Die Anzeigen klingen vielversprechend. Sie locken mit Rabatten, Rückgaberecht und bestimmten Marken.

Der eingegebene Suchbegriff taucht bei Floris van Bommel auf – einer Seite, die vielleicht nicht jedem direkt ein Begriff ist. Die meisten würden wohl aus Gewohnheit doch eher Zalando wählen. Doch schauen wir mal, was sich auf den Landing Pages hinter den Ergebnissen verbirgt.

Nicht-so-gut-Beispiele:

Zalando

Die Landing Page von Zalando lässt mich als Mann direkt wieder abspringen. Zwar erkenne ich bei genauerem Hinsehen, dass ich richtigerweise in der Rubrik “Schuhe” gelandet bin und auch die Farbe Braun ist per Filter selektiert. Doch schrecken die 4 Paar Damenschuhe und das Paar “Lauflernschuhe” schon direkt auf den ersten Blick so sehr ab, dass MANN die Seite verlassen hat, bevor er die Kategorien überhaupt erst erblickt hat.

Clarks und Schuhcenter

Bei den Landing Pages von Clarks und Schuhcenter freue ich mich direkt, dass ich der Kategorie “Herrenschuhe” gelandet bin. Doch möchten sie mich hier scheinbar von einer anderen Farbe überzeugen, denn “braune Herrenschuhe” suche ich hier vergebens. Vielleicht bin ich mit meiner Anfrage nicht mehr im Trend? Hmm…

Positiv Beispiel:

Ist Dir aufgefallen, dass Schuhcenter die Marke Floris van Bommel bewirbt? Wie aus Zufall wollten wir gerade nachsehen, welche Landing Page sich hinter der Anzeige dieses Shops verbirgt.

Floris van Bommel

Auch wenn das Dschungel-Bild Geschmacksache sein mag, so fühle ich mich schon auf den ersten Blick auf dieser Landing Page richtig, denn ich sehe: “herrenschuhe braun leder” . Beim Blick auf den Filter sehe ich sogar spezielle Ledersorten, nach denen gefiltert wurde. Diese kann ich hier anpassen – toll!

Doch… die Seite sieht ziemlich teuer aus. Kann ich mir die Schuhe hier überhaupt leisten? Da fallen mir die beiden Labels “New” und “Sale” ins Auge. Obwohl in der Anzeige nichts von Rabatten stand, gibt es hier tolle Angebote. Doch wo steht der genaue Preis? Ich bewege die Mouse und beim Hovern bekomme ich im “Quick view” direkt mehr Details zum Preis und Rabatt. Coole Sache.

Relevanz kann auch erzeugt werden, in dem Du dem Nutzer das Gefühl gibst, dass Du das richtige Sortiment anbietest. Für manche Zielgruppen ist die Auswahl wichtig (“Wie groß ist das Sortiment?), für manche ist die Qualität wichtig (“Sind die Schuhe hochwertig?”) und für wiederum anderen kann es Ziel sein, ausgefallene Ware zu finden. Relevanz bedeutet also auch: “Ist das für Leute wie mich gemacht?”. Diese Frage geht noch viel tiefer als das reine Abbilden eines Keywords, denn es zielt auf das Gesamte Look-and-Feel der Seite ab.

>> Optimierungstipps für mehr Relevanz

>> Zum Anfang

Ebene 2: Vertrauen

„Kann ich Dir vertrauen?”

Wen oder was man nicht kennt, dem vertraut man erstmal nicht. Hat man positive Erfahrungen mit einer Webseite gemacht, vertraut man ihr auch beim nächsten Besuch eher, als einer unbekannten Seite. Gerade bei Shops, die eine geringe Markenbekanntheit haben, ist das Vertrauen ein wichtiger Faktor innerhalb des Kaufentscheidungsprozesses.

Externe Reize können das Vertrauen in eine Seite stärken. Sehr effektiv sind objektive Gütesiegel von einer unabhängigen Prüfstelle (z.B. Trusted Shops).

Auch die Bewertungen anderer Nutzer können das Vertrauen in eine Webseite stärken (s. Behavior Pattern social proof). Die Bewertungen in den Google Adwords sind daher schon vor dem Klick vertrauensbildend.

Auch das Design kann entscheiden, ob ein Nutzer einer Seite vertraut oder nicht. Ein professionelles Design, vertrauensbildende Maßnahmen, wie auch rechtschreibfehlerfreie und professionelle Inhalte prägen den Ersteindruck in Bruchteilen einer Sekunde.

Vertrauen am Beispiel der Google-Suche “goldankauf”

Beim Kauf oder Verkauf wertvoller Dinge ist Vertrauen das A und O für den Kunden. Als Beispiel für unsere Untersuchung geben wir “goldankauf” in die Google Suche ein. Zwei Anzeigen heben sich direkt von den anderen ab.

Moneygold sticht optisch mit 5 orangenen Sternen heraus. Daneben erscheint die Bewertung: 4,8 von 5 zeigt mir, dass andere Kunden bei diesem Anbieter sehr zufrieden waren. Und dann soll es sogar schon “mehr als 50.000 zufriedene Kunden” geben. Außerdem ist es “sicher und unverbindlich“. Ziemlich überzeugend, wie wir finden.

Goldankauf Haeger schafft durch die genaue Adressangabe bereits in der Anzeige Vertrauen. Ein Händler vor Ort – Da kann ich mich bestimmt persönlich beraten lassen. Außerdem “seriös und diskret” – das klingt erstmal nach Vertrauen.

Nicht-so-gut-Beispiele:

Edelmetallhandel Grünwald

Bei der Adwords Landing Page von Edelmetallhandel Grünwald habe ich ein ungutes Gefühl. Es gibt zwar eine Kontaktnummer, doch sagt mir niemand, dass ich der Seite vertrauen kann.

Scheideanstalt

Die Scheideanstalt lässt einen ähnlichen Eindruck entstehen. Neben der Telefonnummer gibt es hier aber ein Siegel, das Vertrauen schafft. Der fehlende Content unter der Überschrift “Unsere Goldpreise…” wirft dann erneut Zweifel auf. Wer auf seiner Webseite so schludert, kann doch nicht seriös mit meinem Gold umgehen, oder?

Positiv Beispiele:

Moneygold

Auf der Landingpage von Moneygold begegnen mir direkt zahlreiche Vertrauenssignale. Direkt im Header wird mir “100% Sicherheit” versprochen. Die 50.000 zufriedenen Kunden und auch die 4,8-Bewertung mit den 5 Sternen tauchen wieder auf. Außerdem gibt es eine “100% Gold-zurück-Garantie“, einen Videobericht einer Kundin, das eKomi-Siegel in Gold und sogar einen eigenen Sicherheits-Reiter im Menü. Die vorhandene Kontaktnummer wird zusätzlich durch einen Live-Chat ergänzt. Erste Fragen kann ich so direkt hier loswerden. Dieser Seite kann ich vertrauen!

Goldankauf Häger

Goldankauf Häger setzt auf die persönliche Note. Im Fokus stehen hier der geografische Bezug mit Google Maps Karte und die persönliche Beratung von Frau Ullrich (kein Stockfoto). Oben rechts ist das Feld leider hinter “Bewertungen” – Punktabzug. Bewertungen gibt es trotzdem, und zwar einmal 27 Berichte, dann 146 Bewertungen”von mehreren Portalen” – wobei eine Kundenstimme zitiert wird – und dann finde ich noch 393 Bewertungen neben dem eKomi-Siegel. Leider sehe ich erst nach langem Srollen bis zum Footer Datenschutzhinweise sowie Medien, die bereits über den Anbieter berichtet haben. Für den ersten Eindruck sollten solche Vertrauenssignale unbedingt above the fold angezeigt werden.

>> Optimierungstipps für mehr Vertrauen

>> Zum Anfang

Ebene 3: Orientierung

„Wo finde ich relevante Informationen? Wo geht’s weiter?“

Ordnung ist das halbe Leben sagt man. Das sollte man sich auch bei der Orientierung auf einer Adwords Landing Page vor Augen halten. Die Leute haben keine Zeit und wollen sich erst recht nicht auf unüberschaubaren Seiten verirren.

Der innere Dialog lautet: Wo bin ich? Wo geht es weiter?

Gerade bei generischen Keywords ist es schwierig, zu erahnen, was die Besucher eigentlich suchen. Eine gezielte Adwords Landing Page anzubieten, ist daher nicht so einfach. Allerdings bieten gerade generische Keywords einen hohen Anteil von Neu-Besuchern (Neukunden).

Google Anzeige – Suchbegriff: “t-shirt”

Neben den Anzeigen von AboutYou, Otto und Grundstoff habe ich auch die Anzeige von My Theresa bei den Shopping-Ergebnisse untersucht.  Die Ergebnisse sehen so aus:

Nicht-so-gut-Beispiele:

Grundstoff

Die Anzeige von Grundstoff führt mich geradewegs auf die Startseite (1). Auf den ersten Blick bin ich nicht sicher, ob ich hier richtig bin (s. Ebene 1: Orientierung). Doch da ich bei meiner Suche nicht “Herren” / “Damen” eingegeben habe, ist das Ergebnis ein Stück weit verständlich. Zum Glück wird mir direkt im Header angezeigt, dass ich mich für “Männer” oder “Frauen” entscheiden kann. Die visuelle Untermalung durch die beiden abgebildeten Personen schafft hier zusätzliche Orientierung. Super ist auch das Flyout-Menü (2), das mir beim Hovern direkt zeigt, wo ich nun die begehrten T-Shirts finde.

Auf der Zielseite (3) angekommen frage ich mich, weshalb diese Seite nicht gleich als Landing Page erschienen ist… Diese Seite gefällt mir also schonmal gut! Doch wer erkennt die Filterfunktion in Bild (3)? Diese ist leider zu gut getarnt. Er aufgeklappt (4) fällt sie ins Auge und sorgt für zusätzliche Orientierung durch Eingrenzung der Produkte.

My Theresa

Wo die Landing Page von Grundstoff zu allgemein ausfällt, ist die von My Theresa (5) zu eng gefasst. Ich lande auf der Produktdetailseite eines T-Shirts. Dass der Shop mehr als dieses Shirt zu bieten hat, sehe ich erst auf den zweiten Blick. Die winzig kleine Breadcrumb-Navi führt mich dann zurück zu den T-Shirts (6). Auch hier frage ich mich: Wieso war das nicht die Landing Page und kann mir ein Augenrollen nicht verkneifen.

Positiv Beispiele:

Otto

Die Landing Page von Otto (1) zeigt mir direkt durch rote Hervorhebungen (“Damen” / “Shirts”), wo ich mich befinde. Nehmen wir mal an, ich suche nach einem Damen-Shirt 😉 , so habe ich links zahlreiche weitere Filtermöglichkeiten (Shirt-Typ, Farbe, Marke, Preis, Bewertung, Verkäufer und Aktionen). Zudem sehe ich direkt, wie viele Produkte des jeweiligen Shirt-Typs mich erwarten.

AboutYou

Auch AboutYou zeigt uns ein Beispiel für eine gelungene Landing Page. Man landet direkt in der Kategorie des eigegebenen Suchbegriffs. Durch Einrückungen im linken Menü erkenne ich direkt, dass es sich um eine Unterkategorie handelt und welche Kategorien es  och so gibt. Oben bekomme ich dann noch den Tipp “Nur noch sehen, was passt“. Hier können die angezeigten Produkte durch Wahl von Größe, Farbe, Marke und Preis weiter eingegrenzt werden. Außerdem kann ich die Reihenfolge nach Style, Preis, Rabatt und Neuheit anpassen. Was mich besonders beeindruckt hat: AboutYou umgeht das Problem der fehlenden Eingabe des Geschlechts durch einen zusätzlichen Reiter direkt über den angezeigten Produkten:

Der Reiter wird, wenn man nicht über die Anzeige auf die Seite geht nicht angezeigt. Sehr cool und übersichtlich gelöst!

>> Optimierungstipps für mehr Orientierung

Psycho-Tipp: Paradox of choice vermeiden
Warum wir uns bei vielen Auswahlmöglichkeiten überfordert fühlen, zeigt unser überzeugungsKRAFT Video zum Paradox-of-Choice-Effect

>> Zum Anfang

Ebene 4: Stimulanz

“Will ich kaufen / klicken?”

Schafft es die Landing Page, einen Sog zu erzeugen, der mich unweigerlich in die Tiefen der Seite hineinzieht, oder macht mich die Seite nicht so richtig an? Wie sehr werden unterbewusst meine Emotionen angesprochen? Das ist eine Ebene, die gar nicht so einfach zu erklimmen ist.

Ein emotionales Produkt ist der Urlaub. Urlaubstage sind limitiert, deshalb soll der Urlaub richtig schön werden. Im Netz überschlagen sich die Angebote. Da fällt es schwer sich zu entscheiden. Ich habe mich entschieden, nach einer Wanderreise zu suchen. Mir erscheinen diese Anzeigen:

Google Anzeigen – Suchbegriff: “wanderreisen”

Geworben wird hier mit einem Rundum-Sorglos-Paket, Land & Leute kennenlernen, authentischen Erlebnissen, Wandern in herrlicher Natur. Die Anzeigen wirken bereits vielversprechend und stimulant. In meinem Kopf entstehen Bilder. Mal sehen, ob die Landing Pages diese widerspiegeln.

Nicht-so-gut-Beispiele:

ASI Reisen

Die Landing Page wirkt für mich alles andere als stimulant. Die triste, graue Farbgebung lässt den Eindruck entstehen, ich sei auf der Seite eines Bestattungsunternehmens gelandet. Mit Urlaub hat das für mich nichts zu tun. Der Nebel ist vielleicht authentisch, doch träumen wir nicht alle von Sonnenschein im Urlaub? Die kleineren Bilder darunter sind schon freundlicher.

Studiosus Reisen

Bei Studiosus scheint die Sonne. Das Bild vereint Natur- mit kulturellen Erlebnissen. Mein Wandererherz schlägt höher! Doch der Rest der Seite bringt die Ernüchterung. Die eingerahmten Textblöcke kommen wenig stimulant daher. Was, wenn die Reise genauso öde ist? Möchte ich wirklich hier buchen oder gibt es noch etwas Besseres?

Positiv Beispiel:

Abenteuerwege

Dieser Anbieter hat die Macht ansprechender Bilder erkannt und setzt sie auch ein. Ich sehe mich schon selbst bei strahlendem Sonnenschein an der Küste entlang wandern und diesen tollen Ausblick aufs Meer genießen. Darunter finde ich einen kurzen Einleitungstext, der die Versprechen der Anzeige (“Individuelle Wanderreisen mit Gepäcktransport und ausgewählten Unterkünften”) direkt wiedergibt. Gleich danach geht es weiter mit atemberaubenden Aufnahmen der verschiedenen Destinationen. Meine Reiselust ist geweckt und das Stöbern kann beginnen!

Landal

Landal weiß, dass Wanderer gesellig sind und ihre Erlebnisse gerne mit Freunden und Familie teilen. Die ansprechenden Bilder zeigen begeisterte Paare und Familie. Die Begeisterung schwappt direkt über und ich sehe mich schon, wie ich die Natur gemeinsam mit meiner Familie aktiv erlebe. Ich lese weiter und eine emotionale und bildhafte Sprache begegnet mir: Mir wird erzählt von “Wanderspaß”, “Erlebnissen”, “duftenden Wäldern und malerischen Flusslandschaften”. Meine Phantasie ist geweckt, in meinem Kopf verfeinern sich die Bilder und ich kann es kaum erwarten, diese Dinge selbst zu erleben! Jetzt muss ich mich nur noch für eine Destination entscheiden. Nicht einfach, denn hier werden sie alle gleichermaßen stimulant angepriesen.

>> Optimierungstipps für mehr Stimulanz

Psycho-Tipp: Druck aufbauen mit Scarcity
Im überzeugungsKRAFT Video erfährst Du, wie Du Verknappung auf Deiner Adwords Landing Page einsetzen kannst:

>> Zum Anfang

Ebene 5: Sicherheit

“Gehe ich ein Risiko ein?”

Nachdem sich die Besucher unterbewusst die wichtigsten Fragen zu Deiner Landing Page beantwortet haben, wollen sie vor einer Entscheidung nochmal alle Risikofaktoren bewerten, die sich auftun könnten, wenn die Entscheidung getroffen ist.

“Wie lange habe ich Garantie? Wie ist es mit der Rückgabe, falls der Artikel doch nicht gefällt / oder passt?  Wo kann ich Rückfragen stellen? Wie wird mit meinen Daten bei der Buchung umgegangen? Welche Versandkosten kommen auf mich zu, wenn ich an die Packstation liefern lasse, etc.? Binde ich mir gleich einen Vertrag ans Bein?”

Werfen wir mal einen Blick in die Versicherunngsbranche.

Google Anzeige – Suchbegriff: “altersvorsorge versicherung”

Die Bewertungen von ErgoDirekt und der Hannoverschen geben schon in der Anzeige Sicherheit. Der Fokus liegt hier auf Beratung und Service. Die Hannoversche verspricht außerdem eine “garantierte Rente”.

Nicht-so-gut-Beispiel:

ErgoDirekt

Die Landing Page von ErgoDirekt viel “Kleingedrucktes”, was auf den ersten Blick nicht unbedingt ein Gefühl von Sicherheit vermittelt. In den UVPs wird jedoch auf den “vollen Schutz” eingegangen.

Positiv Beispiele:

Hannoversche

Die Landing Page der Hannoverschen im Jahr 2015 (1): Hier wird mit einer aktuellen Auszeichnung geworben. Ich kann direkt einen Fachberater anrufen und eine Email schicken. Ich kann mich informieren, oder direkt ein Angebot anfordern – hier habe ich das Gefühl, ich hätte die Wahl und kann nichts falsch machen.

Die aktuelle Landing Page (2) sieht noch ähnlich aus, doch die Kundenbewertung und der Kontakt zum Fachberater sind inzwischen ans Ende der Seite gerutscht. Ein stärkeres Sicherheitsgefühl wäre vermittelt worden, hätte man diese Änderung nicht vorgenommen.

Allianz

Auch die Allianz (3) wirbt mit einer Auszeichnung. Der Faktor “Sicherheit” erscheint in den UVPs und ich erkenne direkt alle “wichtigen Leistungsmerkmale“. Scrolle ich weiter nach unten (4), so erscheinen “Häufig gestellte Fragen” (FAQ) zum Thema. Einige davon hatte ich auf der Zunge. Super, dass sie hier beantwortet werden!

>> Optimierungstipps für mehr Sicherheit

>> Zum Anfang

Ebene 6: Komfort

“Geht das alles einfach?”

Wurden die wichtigsten Fragen beantwortet und ist der Besucher bereit, sich für Dein Produkt zu entscheiden, so sollten ihm die letzten Schritte so einfach wie möglich gemacht werden. Auch wenn ein Formular unumgänglich ist, so sollte es den Eindruck erwecken, schnell ausfüllbar zu sein.

Google Anzeige – Suchbegriff: “Strom Anbieter”

Leider habe ich zu diesem Suchbegriff keine Anzeige gefunden, die mir schon vor dem Besuch der Seite verrät, wie einfach ein Anbieterwechsel ist. Daher nur eine Betrachtung der Landing Page.

Nicht-so-gut-Beispiel:

innogy

Auf den ersten Blick sieht die Landing Page von innogy zwar einfach aus, doch ich frage mich als Nutzer: Was passiert als nächstes? Wie funktioniert ein Anbieterwechsel online?

Positiv Beispiel:

E wie Einfach

E wie Einfach fragt im ersten Schritt zwar eine Sache mehr ab als innogy (“Personen im Haushalt”), doch hier wird mir schon auf der Landing Page erklärt, wie es weiter geht. Ich sehe, dass der Anbieterwechsel nach nur drei Schritten erledigt ist und ich am Ziel bin.

>> Optimierungstipps für mehr Komfort

>> Zum Anfang

Ebene 7: Bewertung

“War das jetzt richtig?”

Auch wenn die 7. Ebene eigentlich nicht mehr auf einer Landing Page stattfindet, so gehört sie der Vollständigkeit halber hier mit aufgezählt und erläutert. Nachdem eine Entscheidung mehr oder weniger bewusst getroffen wurde, ist es wichtig, die Besucher darin zu bestärken, dass die Entscheidung auf jeden Fall richtig war und es keinen Grund für Reue oder ein schlechtes Gewissen geben muss. Eine umfangreiche Best Practice – Sammlung hat mein Kollege Marcel in dem Artikel 5 Tipps für bessere Kundenbindung und weniger Retouren zusammengestellt.

>> Optimierungstipps für eine bessere Bewertung

>> Zum Anfang

Adwords Landing Page Checkliste zum Download

Die Checkliste mit allen 35 Tipps gibt es hier zum Download. Einfach herunterladen, ausdrucken und Deine Landing Page Tipp für Tipp optimieren. Viel Spaß damit!

>> Zum Anfang

Das Seminar zum Thema

Du möchtest noch mehr zum Thema “Landingpage Optimierung” lernen? Dann sichere Dir die letzten freien Plätze in Berlin, München, Köln oder Hamburg. Lerne von unseren Referenten an nur einem Tag, wie Du die ideale Landingpage für Dein Kernziel konzipierst >> mehr zum Seminar

Weiterführende Links

• Tipps, wie man bereits die Suchergebnisse optimiert, findet man im Artikel Conversion Optimierung beginnt auf den SERPs
• Das 7-Ebenen-Modell
• Die 4 Erfolgssäulen der Conversion Optimierung 

Der Beitrag Diese Checkliste macht deine Adwords Landing Page zum Treffer [Download] erschien zuerst auf konversionsKRAFT.

Zuerst: Was ist ein Mega Drop-down?

Beispiel für Mega Drop-down (Puma.com)

Mega Drop-downs gibt es als vertikale und horizontale Menüs. Sie sind eine Weiterentwicklung regulärer Drop-downs. Sie bieten zweidimensionale Navigationselemente mit gruppierten Optionen. Diese lassen sich durch Layout, Typographie und Illustrationen strukturieren. Alles ist auf einmal sichtbar, es gibt kein Scrolling. Ein Mega Drop-down wird zum Fly-out, wenn es von einer vertikalen Navigation ausgelöst wird.

Beispiel für Flyout (Nike.com)

Warum überhaupt Mega Drop-downs?

Prinzip: Sehen und Vergleichen

Beispiel für Vergleichsmöglichkeiten (Otto.de)

Reguläre Navigationselemente haben bei Websites mit vielen, komplexen und/oder sehr unterschiedlichen Inhalten den Nachteil, dass sie für den Kunden mögliche Optionen nicht oder nur unzureichend auf den ersten Blick darstellen können. Da sie nur eine Ebene der Darstellung ermöglichen, wird häufig versucht, dies durch mehr Optionen pro Ebene zu kompensieren.

Problematisch: Dies hat häufig lange Listen und Scrolling zur Folge. Dadurch werden andere Inhalte und/oder Optionen aus dem Sichtfeld bewegt. Kunden können die Optionen nicht direkt vergleichen. Als Resultat müssen sie auf ihr Kurzzeit-Gedächtnis zurückgreifen, was ihre eigentliche Aufgabe “Kaufen” behindert.

Mega Drop-downs zeigen – im Idealfall – alle sinnvollen Optionen auf einmal, so dass Kunden sich nicht an Menü-Punkte erinnern müssen, sondern direkt vergleichen können.

Äpfel zu Birnen, Kartoffeln zu Karotten

Beispiel für Gruppierung (Mediherz.de)

Das Problem regulärer Drop-downs: Sie können Inhalte nur auf einer Ebene darstellen – Gruppierungen sind schwer darstellbar. Mega Drop-downs bieten hingegen die Möglichkeit, zusammengehörige Inhalte zu gruppieren und für den Kunden angenehm und übersichtlich darzustellen. Richtig angewendet können Kunden damit ihre Auswahl besser und leichter verstehen, was die Abbruchquote reduziert.

Inhalte trennen

Beispiel für klare Trennung der Inhalte (Rei.com)

Während reguläre Menüs nur einfach formatierten Text darstellen können, lassen sich bei Mega Drop-downs die Optionen durch eine Vielzahl an Variationen hervorheben und visuell strukturieren. Durch unterschiedliches Layout, Typographie oder Illustrationen kann je nach Relevanz, z. B. die Schriftgröße oder Farbe variiert werden. Zusatzinhalte, die als Erweiterung gelten, lassen sich beispielsweise kleiner in grau darstellen.

Für den Kunden wird die Struktur der Informationen sofort klar, ohne dass die Übersichtlichkeit darunter leiden muss.

Aufgrund des komplexen Verhaltens der Mega Drop-downs stecken in der richtigen Realisierung einige Stolpersteine, die es zu umgehen gilt. In Form der nachfolgenden 5 Grundregeln zeigen wir die wichtigsten Erfolgsrezepte aus den letzten 6 Jahren Optimierung:

Regel Nr. 1: Das richtige Timing

Beispiel für das richtige Timing (Foodnetwork.com)
Allerdings ist das x zum schließen überflüssig, Drop-downs sind flüchtig und müssen nicht geschlossen werden (Mouse-Out)

Es ist enorm wichtig, dass der Kunde von der Website vermittelt bekommt, dass die Aktivität der Seite unmittelbar das Ergebnis seiner Aktion ist. Ohne dieses direkte Feedback ist Kontrollverlust das vorherrschende Gefühl. Nielsen bestätigt unsere Erfahrung mit Speed is essential to making any user interface feel responsive

Darstellungsgeschwindigkeit:

Unserer Erfahrung nach ist <0.5 Sekunden Rendertime ein guter Anhaltspunkt, um ein physikalisches Gefühl für das Interface zu vermitteln. Ein Drop-down sollte jedoch keinesfalls „Scheibchenweise“ geladen werden. Die Inhalte sollten zum Zeitpunkt der Anzeige vollständig zur Verfügung stehen (gerade bei Illustrationen wichtig). Ein langsamer Aufbau, im schlimmsten Fall flackernd, ist “Gift” für die Wirkung des Interface. Nielsen geht dabei sogar noch extremer vor und schreibt in seiner Guideline render within 0.1 seconds

Es ist jedoch völlig legitim, dass Drop-down beispielsweise einzublenden, anstatt es „nur schnell“ anzuzeigen. Unseren Erfahrungen nach wird beispielsweise ein fade-in mit 0.5 Sekunden immer noch als „physikalisch realistisch“ wahrgenommen. Hierzu mehr in Regel Nr. 5.

Reaktionsgeschwindigkeit:

Beispiel für eine gute Reaktionsgeschwindigkeit (Menshealth.com)

Es ist sehr wichtig, dass das Drop-down nicht zu schnell auf das Überfahren (“Hover”) der Maus reagiert.
Dies hat ansonsten ein Aufflackern des Menüs zur Folge, sobald der Kunde mit der Maus auch nur kurz die Navigationsleiste streift. Einige Kunden nutzen beim Scannen der Seite häufig die Maus als Hilfsmittel, oder sie haben vielleicht nur versehentlich die Navigationsleiste berührt. Eine zu schnelle Reaktion wirkt unruhig und nervös und wird als störend empfunden, was wiederum den Kunden unruhig und nervös macht. Beides sind Gefühle, die den Kaufprozess negativ beeinflussen können. Hier stimmen unsere Erfahrungen für die „response time“ mit Nielsens Guideline überein: the mouse should remain stationary for 0.5 seconds

Technisch wird ein solches „Aussitzen“ als hover-intention bezeichnet. Dieser Wert besagt nichts anderes, als dass die Reaktion auf die Maus von ihrer aktuellen Position aus, um die angegebene Zeit verzögert wird. Der Unterschied zum normalen Delay ist, dass bei jenem die Aktion immer ausgeführt wird, egal ob die Maus noch an der ausgelösten Position steht oder nicht. Das Menü würde somit zwar verzögert angezeigt werden, jedoch auch wenn die Maus schon längst die Navigationsleiste verlassen hätte.

Wir haben festgestellt, dass neben einer Verzögerung vor dem Einblenden des Drop-downs, eine Verzögerung auch beim Ausblenden sinnvoll ist. Thema “Accessibility”: Es ist wichtig, auch Kunden mit Einschränkungen in der Motorik die sinnvolle Bedienung des Drop-downs zu ermöglichen. Ein kurzes, versehentliches Verlassen sollte genauso bedacht werden wie das versehentliche Auslösen. Hier ist jedoch eine Verzögerung von 0.25 Sekunden völlig ausreichend.

Für uns hat sich somit folgendes Timing bei Mega Drop-downs bewährt:

1. Reaktion nach 0.5 Sekunden Verzögerung
2. Anzeigen innerhalb 0.1 – 0.5 Sekunden, je nach Effekt (im Unterschied zu Nielsen, der 0.1 Sekunden angibt)
3. Reaktion nach 0.25 Sekunden Verzögerung (hier unterscheiden sich unsere Erfahrungen von Nielsen)
4. Ausblenden innerhalb 0.1 – 0.5 Sekunden, analog zu 2.

Häufige Probleme beim Hover:

Das Drop-down darf natürlich erst ausgeblendet werden, wenn die Maus die Navigationsleiste und das Drop-down verlassen hat.

Hierbei entsteht ein Fehler, den Nielsen als „diagonal problem“ beschreibt. Beim aktivierten Drop-down, wird die Maus von der Navigationsleiste, welche die Anzeige des Drop-downs ausgelöst hat, zum Drop-down bewegt. Damit wird die Navigationsleiste verlassen, was als MouseOut-Event gewertet wird. Somit wird das Drop-down ausblendet.

Es ist also wichtig, diesen Ablauf bei der Implementierung zu berücksichtigen und Präventionsmaßnahmen zu ergreifen. Das “Katz’ und Maus” – Spiel zwischen Navigationsleiste und Drop-down kann ein hoher Motivations-Killer sein. Kostet es doch einiges an Nerven, wenn das Drop-down permanent unabsichtlich geschlossen wird.

Regel Nr. 2: Gruppierung der Optionen

Beispiel für Gruppierung und Hervorhebung (Reuters.com)

Das Top-Feature des Mega Drop-downs ist die Gruppierung der Menüoptionen, mit dessen Hilfe die Übersichtlichkeit und der Vergleich ermöglicht wird.

Zusammenfassung von Optionen

Für eine richtige Gruppierung der Optionen nach zusammengehörigen Sets zählt ausschließlich die Denk- und Ordnungsstruktur der Kunden, welche es herauszufinden und nachzubilden gilt. Eine häufige Ursache schlechter Informationsarchitektur ist die falsche Sichtweise – nicht die Sichtweise des Betreibers, sondern die der Kunden ist ausschlaggebend. Daher empfehlen wir die Entwicklung von Mental Models oder Use Cases mit Hilfe realer Kundensituationen (Card Sorting, Nutzertest) oder auf Basis von Personas. Auch Nielsen schlägt vor: Chunk options into related sets.

Welche Methode auch immer angewendet wird, wichtig ist eine für den Kunden verständliche Zusammenfassung der Optionen in Gruppen.

Balance der Gruppierungen

Weder zu große Gruppen mit zahlreichen Optionen noch zu viele kleine Gruppen mit wenig Optionen. Beide extreme haben den Nachteil, dass sie nur langsam zu erfassen sind und der Kunde zu lange braucht, um sie zu verstehen. Verwirrung ist ein weiteres Gefühl, das den Kaufprozess negativ beeinflusst. Nielsen bezeichnet das in seiner Guideline treffend mit: keep a medium level of granularity

Das Ziel dieser Disziplin ist also eine ausgewogene Anzahl an unterschiedlichen Gruppen und Optionen.

Sinnvolle Beschriftung

Wie auch bei jedem anderen Navigationselement sollte dessen Beschriftung sinnvoll sein. Darunter versteht Nielsen „descriptive labels“ und gibt als Richtlinie die Standard-Regeln für „writing for the web“ an.

Zusammengefasst sollten folgende drei Aspekte berücksichtigt werden:

1. Die Erfassbarkeit „scannability“ sollte verbessert werden, in dem mit dem Wort begonnen wird, welches am meisten informationstragend ist
2. Kurze und direkte Grundformen („shop“) sind in der Regel besser als die Verlaufsformen („shopping“).
3. Beschriftungen sind deutlich zu differenzieren, beispielsweise sind „Ways to Shop“ und „Shops“ im gleichen Zusammenhang eine verwirrende Beschriftung

Reihenfolge

Welche Reihenfolge der Optionen sinnvoll ist, hängt unserer Erfahrung nach wieder von der Sichtweise ab. Was bringt den Kunden am schnellsten voran? Was erwartet er? Davon wird letztlich abhängig sein, nach welchen Kriterien sortiert wird. Nielsen sagt hier: Die wichtigste und/oder am häufigsten genutzte Gruppe muss nach oben (bei einem vertikalen Design) bzw. nach links (bei einem horizontalen Design), was natürlich nur in westlichen Ländern gilt. Außerdem schränkt er die Reihenfolge zusätzlich ein, in dem er die Optionen „among the features“ oder „according to importance“ sortiert.

Redundanz

Jede Option sollte nur einmal vorhanden sein. Doppelte Optionen sind aus mehreren Gründen zu vermeiden: Zum einen verwirren sie die Kunden, weil sie nicht unterscheiden können, ob die Inhalte hinter der Option gleich sind oder sich unterscheiden. Zum anderen blähen sie das Drop-down unnötig auf und erschweren die Übersichtlichkeit und Handhabung.

Optische Trennung

Beispiel für optische Trennung (Famousecookies.com)
Dieses Beispiel zeigt, dass sich mit Illustrationen die Inhalte leicht erfassen und trennen lassen

Die Drop-downs bieten eine Reihe von Möglichkeiten, die Inhalte optisch ansprechend und leicht verständlich zu trennen. Neben Typographie lassen sich die Optionen sehr gut mit Illustrationen darstellen und / oder vereinfachen. Die Redewendung “Ein Bild sagt mehr als tausend Worte” trifft hier voll zu.

Regel Nr. 3: Einfachheit

Beispiel für Einfachheit (Audi.de)
Durch klare Trennung und Illustrationen ist das Drop-down schnell und leicht zu erfassen

Nielsens Standard Usability Guidline keep it simple gilt auch für die mega drop-downs. „Viel hilft viel“ passt nach unseren Erfahrungen hier nicht. Nur weil man alles in die Drop-downs packen kann, heißt das noch lange nicht, dass das Sinn macht. Dies gilt sowohl für Inhalte, als auch für die Bedienung.

Bedienung

Verschiedene „GUI widgets“ ermöglichen neben dem klassischen Mausklick weiterte Bedienkonzepte wie z. B. Tabs innerhalb des Drop-downs. Von diesen Techniken ist in diesem Zusammenhang meist abzuraten. Erwartungskonformität und einfache Bedienung spielen hier eine wichtigere Rolle. In der Regel werden die Drop-downs nicht durch Mausklick, sondern durch Hover ausgelöst. Dieses Verhalten hat sich bewährt und ist erwartungskonform. Jedoch bringt dies auch Nachteile mit sich, die in Regel Nr. 4 näher erläutert werden. Generell gilt es, die Konformität zu wahren. Wird das Drop-down durch das Event MouseOver ausgelöst, so muss es auch wieder mit MouseOut geschlossen werden. Ebenso gilt es mit OnClick. Nur wenn letzteres zum öffnen verwendet wurde, macht ein x – Button zum schließen Sinn.

Menü, nicht Dialog.

Beispiel für Dialoge in Drop-downs (BMI.com)

Ein Drop-down ist nach wie vor ein Navigationselement und hat eine flüchtige Bildschirmpräsenz, es ersetzt keine Dialogbox. Komplexere Interaktionen sollten nicht in das Drop-down wandern, auch wenn es verführerisch sein mag.

Vorsicht bei Überladung!

Beispiel für ein überladenes Drop-down (tntrailsandbyways.com)

Der Name “Mega Drop-down” diktiert zwar Größe und die Drop-downs haben schließlich viel Platz für Optionen. Dennoch sollten sie nicht überladen werden. Es ist verführerisch, alle Optionen, auch evtl. weniger relevante, zu implementieren. Es könnte ja sein, ein Kunde vermisst diese Option. Hier gilt es, stets abzuwägen und sich die Fragen zu stellen: „Ist dieses Feature wirklich wichtig für den Kunden?“ oder „Kommt der Kunde ohne dieses Feature schlechter zum Ziel?“.

Regel Nr. 4: Accessibility

Wer eine maximal erreichbare Plattform zur Verfügung stellen möchte, sollte bei der Implementierung technische Hilfsmittel wie beispielsweise „screen reader“ oder „screen magnifiers“ im Hinterkopf behalten.

Nicht nur Kunden mit motorischen Störungen oder Sehschwäche sollten berücksichtigt werden, sondern auch beispielsweise Mobile Nutzer. Sofern keine Mobile-Ansicht eines Adaptiven oder Reponsive Layouts vorhanden ist, ist durch die Zoomfunktion der mobilen Endgeräte stets nur ein Teil des Drop-downs sichtbar, was die Navigation erschwert. Das gleiche gilt natürlich für Bildschirmlupen.

Touchscreen-Nutzer sind häufig benachteiligt, weil ein Mega drop-down in der Regel per Hover ausgelöst wird. Häufig wird auch lediglich der Text verlinkt. Tooltips werden nicht angezeigt, was die Nutzung erschwert.

In der Vergangenheit haben sich dazu folgende Tipps bewährt:

1. Für diese Nutzergruppen sollte stets ein Fallback in Form einer klassischen Übersicht als HTML-Seite bereitgestellt werden. Idealerweise wird diese beim Klick auf die Navigationsleiste angezeigt und beinhaltet die gleichen Informationen wie das Drop-down.
2. Es sollte nicht nur der Text, sondern ein größerer Bereich um den Text verlinkt sein (auch für Nutzer mit motorischen Einschränkungen wichtig).
3. Die Grundstruktur des Drop-downs sollte in solidem HTML Markup und CSS erfolgen. JavaScript sollte lediglich zur optimierten Darstellung eingesetzt werden. Beispielsweise hierarchisch verschachtelte Listenelemente (<li>) innerhalb eines Navigationscontainers (<nav>). Das hat als Nebeneffekt auch positiven Einfluss auf die Suchmaschinenoptimierung (SEO). Was für Screenreader gilt, erleichtert auch den Crawlern der Suchmaschinen die Indizierung.

In seiner Guideline empfiehlt Nielsen Shops, die überwiegend Kunden mit Sehschwäche in Ihrer Zielgruppe haben (z. B. ältere Kundengruppen), starke visuelle Signale für Menürahmen zu verwenden. Dies könnte auch bei mobilen Endgeräten hilfreich sein. Dennis Herzberger von konversionsKRAFT geht auf diese Thematik in seinem Artikel Mega Drop-down auf mobilen Endgeräten genauer ein.

Ein weiterer Tipp von Nielsen, den wir bisher im eCommerce jedoch nicht bestätigen können, ist die Verwendung von „keytips interactions“. Dabei werden alle Funktionen des Drop-downs auch vollständig durch die Tastatur ermöglicht, ähnlich den Menüleisten der Betriebssysteme. Idealerweise werden die entsprechenden Tasten durch Unterstreichung des Buchstabens angezeigt.

Ob sich das durchsetzen wird, bleibt weiterhin abzuwarten. In den letzten sechs Jahren jedenfalls nicht. Auch die Verwendung der Tabulator- und Cursor-Tasten hat sich bei regulären Drop-downs zur alternativen Bedienung nicht etabliert.

Regel Nr. 5: Die Haptik

Beispiel für ausgewogene Haptik (EMC.com)
Hier wurde auf Timing, Geschwindigkeit, Verzögerung und Animation Rücksicht genommen. Allerdings ruckelt die Anzeige gelegentlich, der Schließen-Button ist überflüssig.

Abgesehen von der Reaktions- und Darstellungsgeschwindigkeit, verzichtet Nielsen in seiner Guideline gänzlich darauf, auf die Haptik der Drop-downs einzugehen.

Unseren Erfahrungen und Nutzertests zu Folge spielt diese jedoch eine durchaus relevante Rolle. Wir haben festgestellt, dass die Art des Drop-downs und das Gefühl, das bei der Nutzung (oder anderer Bedienelemente) entsteht, eine Wirkung auf die „User Experience“ und letztendlich den Kaufprozess hat.

Mit anderen Worten: Ein Menü muss sich „gut anfühlen“. Bestätigung unser Erfahrungen zu diesem Thema finden wir in einer sehr klassischen Richtlinie, welche in diesem Zusammenhang erst einmal unkonventionell klingt: the principles of animation by Disney®. Dabei spielen – neben der bereits angesprochenen Ein-/Ausblende-Verzögerung und der Zeit – zwei weitere Faktoren eine wichtige Rolle:

Zum einen die Art des Effekts, beispielsweise als „Fading“, und zum anderen die Dynamik. Neben der linearen sind dynamische Darstellungen wie z. B. gedämpfte Beschleunigung möglich. Diese Easings werden mittlerweile nativ durch CSS und alternativ bzw. ergänzend schon seit vielen Jahren durch diverse JavaScript Frameworks und Animation Plugins zur Verfügung gestellt (z. B. Greensock.com).

Es macht einen großen Unterschied, ob das Drop-down nach 0.5 Sekunden einfach da ist, oder weich eingeblendet wird. Wichtig dabei ist, den Bogen nicht zu überspannen. Bei aller Liebe zum Detail und einem guten Joy of Use gilt Nielsens Guideline: „keep it simple“.

Diese Techniken sollten lediglich der Aufwertung dienen und auf keinen Fall die Funktion oder Wahrnehmung stören. Die verwendeten Effekte müssen sich harmonisch und ausgeglichen in das Gesamtbild integrieren. Nach einer Einblende-Animation sollte das Drop-down z. B. nicht einfach verschwinden, sondern auch wieder ausgeblendet werden.

Beispiel für gutes Timing und Animation (Archer-group.com)

Oft wird auf diese kleinen Details keine oder nur wenig Rücksicht genommen. Wir haben in Nutzer- und zahlreichen A/B-Tests in den letzten Jahren festgestellt, dass jedoch auch das Gefühl für das Interface eine relevante Rolle spielt. Auch wenn Nutzer in Befragungen angeben, dass ihnen eine visuell ansprechende Darstellung nicht wichtig ist oder diese teilweise gar nicht aktiv wahrgenommen wurde. So zeigen die Tests, dass Interfaces mit optimierter Haptik ein positives Gefühl bewirken und einen positiven Effekt auf messbare KPIs wie die Conversion Rate haben.

Fazit

Ein Mega Drop-down Menu einzuführen bzw. zu optimieren ist eine von vielen Stellschrauben, um die Conversion Rate durch den Joy-of-Use, die Einfachheit und Orientierung, zu steigern.

Berücksichtigt man eine klare Informationsarchitektur, gruppiert die zur Verfügung stehenden Optionen sinnvoll, trennt diese visuell und hält sich an ein paar Anhaltspunkte zum Timing, so lässt sich der Kunde schneller und leichter zum Ziel führen. Diese Regeln können die Motivation beim Navigieren steigern, sind aber sicherlich kein “Allerwelts-Heilmittel”. Hier stimmen auch unsere Erfahrungen mit Nielsen überein: it’s always best to test

Fragen und Meinungen sind in den Kommentaren willkommen!

Weiterführende Links

• Jakob Nielsens „Mega Drop-Down Navigation Menus Work Well“
• The principles of animation by Disney® bzw. The Illusion of Life: Disney Animation

Weiterführende Artikel

• Mega-Drop-Down auf mobilen Geräten
• Navigations-Optimierung mit Icons: 12 Best Practices
• 12 Praxistipps: Conversion Optimierung mit Facettensuche & Filternavigation
• Erlebniswelt Onlineshop – 14 Beispiele für mehr Joy of Use im E-Commerce

Der Beitrag Praxistipps: Conversion Optimierung mit Mega Drop-downs erschien zuerst auf konversionsKRAFT.

Conversion-Optimierung ist ein stetiger Lernprozess und auch Dinge, die nicht funktionieren, liefern Erkenntnisse, aus denen wir lernen können. Das hat schon Avinash Kaushik – ein Vorreiter der Onlinebranche – erkannt:

„I bet you’d never imagined that success depends on your ability to fail. Fail faster, fail forward. And the secret to that success is your ability to learn and iterate quickly.“

Es ist OK, Fehler zu machen. Aber wie wäre es, wenn wir in Optimierungsprojekten schneller auf den richtigen Weg kommen könnten?

Hierfür haben wir eine praktische Checkliste mit 44 Tipps und Learnings zusammengestellt. Orientiere Dich an ihr, wenn Du das Projekt strukturiert angehen, potentielle Fehlerquellen ausmerzen und bessere Erfolge erzielen möchtest.

Für die Umsetzung Deines Conversion-Projektes stehen uns Optimierern auf dem Markt verschiedene Tools zur Verfügung. Ziel aller Tools ist es, die Effizienz der Maßnahmen zu erhöhen und den Outcome der Conversion-Optimierung positiv zu beeinflussen. Die Entscheidung für das oder die passende(n) Tool(s) fällt oft nicht leicht.

Schnellnavigation

Folgende Themen werden behandelt:

1. Überblick über Testingpotentiale gewinnen
2. Testingpotentiale priorisieren
3. Schwachstellen identifizieren
4. Wichtige Metriken überblicken
5. Bereits Bewiesenes adaptieren
6. Testlaufzeiten berechnen
7. Schwachpunkte im Prozess erkennen
8. Konsumpsychologie als Werkzeug einsetzen
9. Team und Stakeholder einbeziehen
10. Wissensdatenbank aufbauen
11. Maßnahmen ordentlich planen

Interessiert Dich davon etwas besonders? Ein Klick auf ein Thema führt direkt an die entsprechende Stelle im Artikel.

Optimierungs-Checkliste zum Download

Eine Checkliste mit allen 44 Tipps findest Du in unserer Download-Bibliothek.

1. Überblick über Testingpotentiale gewinnen

Den zentralen Erfolgsfaktor eines jeden Experimentes bildet die Idee oder Hypothese dahinter. Stehen diese Erfolgsfaktoren, angereichert mit allen relevanten Daten auf übersichtliche Weise zur Verfügung, so hilft dies, den Überblick zu behalten und schnell auf Veränderungen zu reagieren.

Tipps und Learnings für einen besseren Überblick:

2. Testingpotentiale priorisieren

Im Regelfall gibt es deutlich mehr Testing-potentiale als freie Testing-Slots. Gründe reichen von fehlendem Traffic bis zu fehlenden Kapazitäten. Es stellt sich also ab einem gewissen Punkt immer die Frage, wie man objektiv bewertet und diskutiert, was sich wirklich zu testen lohnt.

Tipps und Learnings für die Priorisierung:

3. Schwachstellen identifizieren

Das A und O eines jeden erfolgreichen Experiments sind die Ideen oder Hypothesen, denen es zugrunde liegt. In diesem frühen Stadium ist es sehr wichtig, sich die richtigen Fragen zu stellen und die richtigen Dinge in Angriff zu nehmen. Dazu ist es stets empfehlenswert, die Nutzerbrille aufzusetzen und für die Bedürfnisse der Zielgruppe zu optimieren.

Tipps und Learnings beim Identifizieren von Schwachstellen:

4. Wichtige Metriken überblicken

Stets den aktuellen Status der Optimierungsmaßnahmen und den damit verbundenen erwirtschafteten Mehrumsatz zu kennen, ermöglicht nicht nur, agile und schnelle Entscheidungen, sondern schafft auch eine wichtige Argumentationsbasis für das Thema Conversion-Optimierung im Unternehmen.

Tipps und Learnings für Deine Zahlen:

5. Bereits Bewiesenes adaptieren

Manchmal macht es Sinn, sich von bereits erfolgreich getesteten Best Practices inspirieren zu lassen. Input liefern z.B. Studien, Wettbewerber oder Dienstleister. Auf diese Weise können ein erfolgreicher Einstieg gefunden und schnell positive Ergebnisse generiert werden. Außerdem fällt es so in der Regel auch leichter, die „Low Hanging Fruits“, also Optimierungspotentiale, die durch einen sehr geringen Aufwand bereits eingefahren werden können, zu ernten.

Tipps und Learnings für bereits Bekanntes:

6. Testlaufzeit berechnen

Die optimale Testlaufzeit zu finden ist nicht einfach. Auf der einen Seite erhöht sich zwar die Validität der Ergebnisse, je länger wir unseren Test laufen lassen. Leider steigen hiermit auch die damit verbundenen Kosten. Auf der anderen Seite hast Du ein dementsprechend erhöhtes Risiko, eine Fehlentscheidung zu treffen, wenn Du Entscheidungen auf Basis nicht-valider Erkenntnisse triffst.

Falsche Entscheidungen wirken sich negativ auf den unternehmerischen Erfolg aus und verursachen Kosten. Es ist also ein wichtiger Erfolgsfaktor, die richtige Testlaufzeit zu ermitteln und den Test im wirtschaftlich sinnvollsten Moment abzuschalten. Weitere Informationen und einen praktischen Testlaufzeitkalkulator findest Du hier.

Tipps und Learnings zum Bestimmen der Testlaufzeit:

7. Schwachpunkte im Prozess erkennen

Conversion Funnel ermöglichen es, die CTRs verschiedener Seitentypen varianten-übergreifend miteinander zu vergleichen. Dafür kannst Du für jede einzelne Variante verschiedene Goals in einem „Trichter“ anzeigen lassen und ergründen, welche Veränderung für welchen Schritt am besten funktioniert. So kannst Du das Maximale aus Deinen Testergebnissen herausholen.

Tipps und Learnings für prozess-spezifische Schwachpunkte:

8. Konsumpsychologie als Werkzeug einsetzen

Mit Hilfe der Konsumpsychologie und Erkenntnissen der Verhaltensforschung können Motivatoren und Demotivatoren gezielt getriggert und neue kreative Konzepte erdacht werden. Es wird immer wichtiger, sich mit kognitiven Verhaltensweisen und Phänomenen zu beschäftigen, um auf die wachsenden Bedürfnisse der Zielgruppe eingehen zu können. Es steckt viel Arbeit darin, Prinzipien in Form von Testhypothesen zu isolieren und daraus Testkonzepte zu entwickeln. Die Mühe ist aber nicht umsonst. Mit der richtigen Vorgehensweise kann man Potentiale mit höheren Uplifts ausschöpfen.

Tipps und Learnings für Konsumpsychologie als Werkzeug:

9. Team und Stakeholder einbeziehen

Der Optimierungsprozess betrifft immer mehrere Personen (Stakeholder). Um eine stetige Vorwärtsbewegung zu garantieren, sind nicht nur die Qualität und die Anzahl von A/B-Tests entscheidend.

Ein zentraler Faktor für den langfristigen Erfolg ist es, zu ermöglichen, dass alle Teammitglieder in jedem Schritt zusammen arbeiten können. So werden auch Redundanzen vermieden. Wird das Gelernte aufbereitet und an die richtigen Personen weitergegeben, so kann sichergestellt werden, dass letztendlich auch die richtigen Entscheidungen getroffen werden.

Tipps und Learnings für Conversion-Optimierung im Team:

10. Wissensdatenbank aufbauen

Optimierung unterliegt immer einer Lernkurve. Optimierungsmaßnahmen können somit mehrere Zyklen durchlaufen. Achtet man darauf, vorhandenes Wissen nicht zu verlieren sondern sinnvoll zu nutzen, können Hypothesen und Testkonzepte besser auf die eigenen Zielgruppen abgestimmt werden. Mit jedem Experiment kann sich also die Basis für Folgeentscheidungen durch das Gelernte verbessern.

Tipps und Learnings für das Wissensmanagement:

11. Maßnahmen ordentlich planen

Eine besondere Herausforderung in der Conversion-Optimierung ist es, den gegebenen Traffic unter Berücksichtigung einer Mindesttestlaufzeit richtig auf die geplanten Maßnahmen zu verteilen. Auch andere Einflussfaktoren im Blick zu haben (z.B. Marketingmaßnahmen, welche sich auf den Traffic auswirken oder den Urlaub von Kollegen, welcher einen Flaschenhals darstellt) ist nicht immer einfach. Dazu kommen Releases, die Tests zerschießen, und das Chaos ist komplett. Umso wichtiger ist es, präventiv gut aufgestellt zu sein und eine ordentliche Planung aufzustellen.

Tipps und Learnings für die Planung:

Fazit

Jedes Optimierungsprojekt birgt einzigartige Herausforderungen, welche es zu meistern gilt. Mit der richtigen Herangehensweise sparst Du Dir Zeit, Geld und Nerven. Die in diesem Blogpost vorgestellten Tipps bilden eine Checkliste, welche Dir hilft, die essentiellen Faktoren für den Erfolg im Optimierungsprojekt anzugehen und letztendlich abhaken zu können.

Eine mögliche Vorgehensweise kann sein, in iterativen Schleifen vorher priorisierte Verbesserungspotentiale zu erschließen. Auch Tools wie Iridion helfen Dir dabei, Struktur und Plan in den Prozess zu bringen.

Als Hilfestellung in Form einer Checkliste haben wir alle Tipps und Learnings für Dich in einem PDF zusammengefasst und Dir nur einen Scroll entfernt als Download zur Verfügung gestellt.

Viel Spaß beim Ausprobieren!

Weiterführende Links:

• U-Modell der Validität 
• Low Hanging Fruits
• Testlaufzeit Berechnung
• Kostenlos für Iridion anmelden

Download der Checkliste

Eine Checkliste mit allen 44 Tipps findest Du in unserer Download-Bibliothek.

Der Beitrag Checkliste: 44 Tipps für mehr Erfolg im Optimierungsprojekt erschien zuerst auf konversionsKRAFT.

Eine Conversion scheitert viel zu oft an schlechten Formularen. Viele sind so unübersichtlich und kompliziert gestaltet, dass die Aufwand-Nutzen-Rechnung des Users nicht aufgeht. Er hat schlicht und einfach keine Lust, ein Formular auszufüllen, das ihn nicht anspricht, unnötige Daten abfragt und somit zu viel Zeit in Anspruch nimmt. Dann wird es Zeit, die User Experience zu optimieren.

Im menschlichen Gehirn bedeutet Aufwand = Schmerz und Nutzen = Belohnung. Dabei wirkt potenzieller Schmerz doppelt so schwer wie die Aussicht auf Belohnung (siehe Verlustaversion). Formular-Optimierung hat sehr viel mit dem Wissen über Nutzermotivation, Wahrnehmung und Verhaltensökonomik zu tun. Also lasst uns den Nutzer vor Schmerz bewahren, nutzerfreundliche Formulare gestalten und so einen großen Conversion-Killer ausmerzen!

21 Dos & Don´ts der nutzerfreundlichen Formular-Optimierung

1) Keep it simple

Auch wenn Du in Deinem Formular eine Reihe von Daten abfragen musst: Lass es einfach aussehen! Nutzer füllen Formulare nicht aus, die unübersichtlich, kompliziert oder lang aussehen, denn das Gehirn hasst kognitive Belastung.

Vermeide visuelles Rauschen durch unnötige Rahmen, Schatten oder Linien. Schone das Auge des Nutzers durch ausreichende Abstände zwischen den Feldern und eine lineare Ausrichtung. Farben und Hintergrund des Formulars sollten so wenig wie möglich ablenken. Gerade bei kleinen Bildschirmen (mobile) macht es Sinn, die Felder linksbündig anzuordnen, damit sie direkt im Sichtfeld liegen und man nicht nach rechts scrollen muss.

2) Gib dem Kind einen Namen

Jedes Formular sollte einen Titel haben. Der User muss wissen, was er da gerade ausfüllt. Ein kleiner Intro-Text kann je nach Art des Formulars zusätzliche Orientierung geben, sollte aber klar und prägnant sein. Genauso klar sind auch die Labels zu wählen. Was willst Du von dem User? Meinst Du mit „Name“ nun den Vornamen, den Nachnamen oder beides? Und soll er bei „Adresse“ nun seine Straße oder seinen Ort eingeben?

3) Frage nicht so viel

Seien wir mal ehrlich: Welche Angaben braucht es tatsächlich, zum Beispiel um sich für einen Newsletter anzumelden oder etwas zu bestellen? Für einen Newsletter braucht es einzig und allein eine gültige Emailadresse. Und für die wenigsten Bestellungen ist das Geburtsdatum entscheidend. Viele Daten werden aus Marktforschungsgründen erhoben. Natürlich sind wir dafür, dass Du Deine Kunden besser kennenlernst, doch unnötige Fragen können im Worst Case dazu führen, dass sie gar nicht erst zu Kunden werden. Die E-Mail-Adresse öffnet bereits einige Türen. Hast Du sie erst einmal, so lassen sich weitere Angaben auch nachträglich noch qualifizieren. Das Prinzip der “Easy Registration” lässt sich auch auf andere Bereiche übertragen. So kann man sich den Opt-In für E-Mail-Newsletter auch erst auf einer Dankesseite holen.

4) Kennzeichne Deine Pflichtfelder deutlich

Wie Punkt 3) schon sagt: Jeder, der sein Formular conversion-gerecht optimieren möchte, sollte sich bei jedem optionalen Feld fragen: muss diese Angabe überhaupt sein? Worin liegt der Mehrwert? Grundsätzlich gilt es, jede unnötige Angabe zu vermeiden. Falls es eine Unterscheidung zwischen Pflichtfeldern und freiwilligen Angaben gibt, hat sich das Sternchen* als Standard für den Hinweis auf ein Pflichtfeld durchgesetzt.
Es gilt die einzige Ausnahme: Falls alles Pflicht ist, sind keine Sternchen nötig:

Beachte: Erkläre im Formular, was das Sternchen bedeutet, denn es gibt auch Formulare, in denen die optionalen Angaben ein Sternchen haben.

Eine weitere Möglichkeit ist es, Pflichtfelder direkt farblich hervorzuheben. Dies hat einen schönen visuellen Effekt.

5) Schaffe Relevanz

Ein sehr wichtiger Aspekt bei der Formular-Optimierung ist Relevanz. Jeder Mensch hat eine Idee im Kopf, welche Angaben in welcher Reihenfolge benötigt werden. Verkäufer fragen stets zuerst “Was willst Du?” und danach “Wie ist Deine Adresse?”. Ein typisches Beispiel sind Versicherungen. Im Kopf des Nutzers steht sein Anliegen im Vordergrund. Diese Daten müssen zuerst abgefragt werden, erst wenn die Kaufbereitschaft vorhanden ist, erfolgt das Abfragen der Adresse.

6) Wähle die richtige Label-Position

Dass ein Feld ein Label braucht, ist den meisten klar. Aber wohin damit? Für die Formular-Optimierung ist die Positionierung der Labels wichtig, denn wir möchten dem User den Lesefluss erleichtern und das Ausfüllen beschleunigen. In Eyetracker-Tests konnten die besten Positionen ermittelt werden:

a) „Right Aligned“ – links neben dem Feld, aber rechtsbündig angeordnet erfordern Labels nur halb so viele Fixationen, wie linksbündig angeordnete, da der Abstand vom dazugehörigen Feld gering und überall gleich ist

oder

b) „Top Aligned“ – oberhalb des Feldes angeordnete Labels verkürzen die Ausfüllzeit [Quelle]. Auch hier ist die Nähe zum Feld der entscheidende Vorteil.

Bei LinkedIn ist direkt klar, was in welches Feld einzugeben ist. Die Eingabe ist simpel.

7) Nutze die visuelle Hierarchie

Die Unterteilung eines Formulars in sinnvolle Untergruppen hilft dem Nutzer, die Funktionsweise schneller zu verstehen. Dabei ist es besonders wichtig, dass die Gruppen visuelle Hierarchien bilden. Dadurch wird das Formular besser verstanden, es wirkt leichter. Die ARAG nutzt dieses Prinzip bei ihrem Formular:

8) Zeige Deinen Kunden den Weg

Schaffe Transparenz, indem Du dem User bereits am Anfang zeigst, wie viele Schritte noch bis zum Ziel nötig sind. Dies ist vor allem bei großen Formularen wichtig. Anstatt das Formular ewig lang werden zu lassen, unterteile es sinnvoll in mehrere Seiten, so bleibt es im sichtbaren Bereich. Mache den Fortschritt sichtbar und hebe ihn farbig hervor (Schritt 3 von 5; 50% geschafft).

Eine ebenfalls schöne Orientierung wird geschaffen, indem das aktive Feld, in dem sich der User gerade befindet, farblich hervorgehoben wird.

9) Gib positives Feedback

Warum nicht einfach einmal etwas Positives sagen? Ist Dir schon aufgefallen, dass sich Formulare immer nur über die Fehler beschweren? Consorsbank macht es vor und ermutigt den Nutzer zum nächsten Schritt durch einen grünen Haken, der bestätigt, dass man alles richtig gemacht hat.

10) Validiere Felder inline

Das Prinzip des positiven Feedback muss nicht nur auf Seitenebene statt finden. Untersuchungen haben gezeigt, dass die Ausfüllquote stark ansteigt, wenn Nutzer während des Ausfüllens Feedback bekommen. Eine perfekte Maßnahme für Formular-Optimierung. Diese “Inline Validierung” steigert den Joy of Use und damit die Konversionsrate. Consorsbank zeigt, wie es geht:

11) Wähle eine passende Feldgröße

Dieser Fehler passiert leider viel zu oft. Dabei ist die Heuristik “Analogien zur Realität verwenden” schon fast so alt wie das Internet. Es handelt sich um ein festes “Design Pattern”. Denn: Etwas, das erwartungskonform aussieht, sieht “vertraut” aus und ist damit “vertrauenswürdig”. Also ein ganz einfach zu behebender Fehler.

Überlege im Voraus: Wie lang ist ein PLZ-Feld? Richtig: 5 Zeichen. Wie werden Vor- und Nachname angeordnet? Richtig, so wie im Adressfeld eines Briefes. Die Länge des Feldes bestimmt auch die Erwartung des einzugebenden Inhalts und damit den Eingabeaufwand.

Ich habe kein wirklich gutes Best-Practice gefunden, daher verdeutliche ich das Prinzip anhand dieses Beispiels:

12) Nutze das richtige Timing

Es gibt leichte Aufgaben und es gibt schwierige. Eine Reise zu buchen kann schwierig werden. Eine Krankenversicherung auch. Dank vieler Erkenntnisse aus der Konsumpsychologie wissen wir, dass die Bereitschaft eine schwierige Handlung zu vollziehen steigt, sobald in den Prozess bereits Arbeit investiert wurde. Dieses Prinzip von “Konsistenz und Commitment” lässt sich auch im Ablauf von Formularen nutzen. Während im Einstieg eher einfache, bedarfsorientierte Fragen gestellt werden, kommen bei der Krankenversicherung die “harten” Gesundheitsfragen zum Schluss. Kämen diese gleich zu Beginn, würde es Abschrecken und zum Abbruch führen.

13) Erkläre, weshalb Du die Daten brauchst

Die größte Hürde für jeden Konsumenten ist die Preisgabe von Daten. Dieser “Schmerz” wiegt schwerer als vieles andere. Daher ist es eine einfache Schlussfolgerung, dass gute Formulare bei “brenzligen” Angaben erklären, warum diese Information benötigt wird. Psychologen kennen schon lange die Kraft des “Reason Why” – in Formularen findet er eine gute Anwendung.

14) Baue einen Dialog auf

Bereits Ende der 1970er Jahre fand der Dialog-Marketing-Forscher Siegfried Vögele heraus, dass optimale Verkaufsmaterialen dem inneren Dialog der Kunden folgen. Sie beantworten Fragen genau zur richtigen Zeit und in der richtigen Reihenfolge. Auch Formulare können den inneren Dialog von Kunden abbilden. Ein nettes Beispiel ist dieses Registrierungsformular von lendingtree:

15) Lasse keine neuen Fragen aufkommen

Jede offene Frage ist ein Konversionskiller. Nutzer, die auf neue Fragen stoßen und diese nicht beantworten können, brechen mit hoher Wahrscheinlichkeit ab. Jede auch noch so kleine Zusatzinformation oder Abfrage kann dabei ausreichend sein, um die Motivation zu zerstören – vor allem, wenn sich die passenden Antworten nicht finden lassen. Das nachfolgende Beispiel zeigt Tarifoptionen eines Mobilfunkanbieters. Jedem Kunden wird sich die Frage stellen: “Was ist ein(e) Kompakt EVN? Und warum wird es nicht erklärt?”. Analysieren Sie Ihr Formular sehr genau und beseitigen Sie alle Unsicherheiten.

16) Denke an mobile Endgeräte

Nichts ist nerviger, als wenn Sie unterwegs per Mobiltelefon etwas bestellen wollen. Das Registierungsformular fragt gleich doppelt nach der E-Mail-Adresse (denn man könnte sich ja vertippt haben). Doch jedes Mal ist leider das Tastaturlayout verkehrt. So geht es richtig:

17) Setze Technik richtig ein

Es gibt so viele Technik-Details in der Formular-Optimierung, dass es schwer fällt, alles in nur einem Punkt zusammen zu fassen. Ein paar Dinge sind leicht, z.B. dass der Einsatz von Captchas nur dann erfolgen sollte, wenn er unbedingt nötig ist. In Länderlisten können die wichtigsten Länder gleich vorne als Default stehen. Und Felder sollten natürlich mit der richtigen Reihenfolge mit der Tab-Taste anzusteuern sein. Damit ist schon viel getan.
Doch eine wirklich hilfreiche Idee habe ich bei wordpress.com gesehen. Hier wird das Passwort nämlich als Standard offen angezeigt – ohne diese “Sternchen-Punkte-Verdeck-Orgie”. Dadurch entfällt auch die doppelte Eingabe. Bei Amazon in der Tablet-Variante ist das übrigens ebenfalls bereits als Option enthalten. So lässt sich Technik intelligent einsetzen:

18) Orientiere Dich am Style Deiner Seite und behalte die Emotionalität

Der Idealzustand: Ein Online-Shop verführt den Nutzer in emotionaler Reinform. Große Bilder, gute Texte – alles stimmt. Im Moment größter Kaufbereitschaft klickt der konsumwillige und beinahe ekstatische Kunde auf den “Weiter zur Kasse” Button und wird jäh in eine graue Welt der technischen Formulare katapultiert. Leider habe ich auch hier wenige positive Beispiele gefunden. Den Effekt illustriert auf negative Weise die Luxusmarke Burberry sehr eindrucksvoll:

19) Stärke das Vertrauen im Transaktionsbereich

Besonders gegen Ende des Kaufprozesses quälen den Nutzer Sicherheitsfragen. Was passiert mit meinen Daten? Habe ich eine Garantie? Kann ich den Artikel wirklich problemlos zurück schicken, falls doch etwas nicht in Ordnung ist? Evrgreen.de zeigt sehr gut, wie sich weiter “hinten” im Conversion-Funnel die Sicherheits-Hinweise immer weiter verstärken. Sie werden jedoch nie übertrieben eingesetzt:

20) Greife die Value Propositions auf

Ganz zu Beginn einer Customer Journey hat den Nutzer etwas besonderes angesprochen. Ein Bonus, ein Alleinstellungsmerkmal, ein Feature – egal, was es war: Es ist der Grund, für seine Entscheidung. Leider wird nur allzu häufig vergessen, diese Value-Propositions in Anmelde- und Checkout-Formularen zu wiederholen. “Maintain the Scent” (halte die Fährte aufrecht) ist ein wichtiger Hinweis, der besonders in Formularsituationen wichtig wird:

21) Be Social

Viele Webseitenbetreiber erleichtern Interessenten die Registrierung bereits durch Social Media. Meistens wird der Facebook-Account hierfür genutzt. Mit einem Klick auf Buttons wie „Mit Facebook anmelden“ wird der User im Handumdrehen registriert. Alle wichtigen Daten, die der User freigegeben hat, werden direkt aus dem Facebook-Account gezogen. Diese Variante praktisch, spart Zeit und ist vor allem für mobile User sehr bequem.

Fazit:

Mit Formularen steht und fällt so Einiges, wenn es um Conversion-Optimierung geht. Diese 21 Tipps der Formular-Optimierung sind für uns sehr wichtige Beispiele und sicherlich erweiterbar. Dennoch sind sie sehr individuell und treffen vielleicht nicht auf jeden Shop und jede Zielgruppe zu.

Nimm diese Liste als Basis und prüfe Punkt für Punkt “Wie kann ich XY nutzen, um mein Formular zu verbessern?”. Nicht alles wird funktionieren – deshalb empfehlen wir Dir, die Wirksamkeit der Heuristiken über einen AB-Test zu validieren.

Wenn Du weiter gehen willst, brauchst Du vor allem mehr und besseren qualitativen Input. Formular-Optimierung hat auch etwas mit Innovation zu tun. Du brauchst Quellen für mehr Input.

Qualitative Quellen:

Probandentests, Commercial Ethnography (reale Situationen beobachten um Einwände zu lernen), Mouserecording, Kundenservice / Call Center (Frage nach typischen Bedenken, Probleme, Häufigkeit um einen inneren Dialog zu entwickeln)

Quantitative Quellen:

Web Analyse (miss einzelne Felder, deren Ausfüllzeit, Completion Rate), Eyetracking (Time to First Fixation, Duration), Mousetracking

Download der Checkliste zur Formlar-Optimierung

Die Checkliste Formularoptimierung mit allen 44 Tipps auf einer Seite findest Du als Download in unserer Download-Bibliothek.

Weiterführende Links

• http://www.smashingmagazine.com/web-form-design-showcases-and-solutions/
• http://www.lukew.com/ff/entry.asp?1502
• http://www.getelastic.com/form-design-11-patterns-for-accepting-user-input/
• https://www.konversionskraft.de/tipps/3-geheimtipps-bessere-formulare.html
• https://www.konversionskraft.de/hintergrunde/antizipation-der-conversion.html
• http://de.slideshare.net/soultank/usability-coffee-dos-und-donts-von-formularen
• https://www.translate-trade.com/kundenfreundliche-online-formulare/
• http://www.zdnet.de/39133866/acht-tipps-fuer-benutzerfreundliche-webformulare/
• http://www.web-haeppchen.de/5-tipps-fuer-benutzerfreundliche-eingabefelder/
• https://help.formassembly.com/help/article/link/best-practices-for-user-friendly-forms

Der Beitrag 21 Best Practices zur Formular-Optimierung (inkl. Checkliste) erschien zuerst auf konversionsKRAFT.

• 301 Redirects auf neue URLs einrichten
• Backlinks checken
• individuelle 404 Seiten erstellen
• Analytics Integration prüfen
• usw…

Eins vorweg: Auch wenn das alles sehr wichtige ToDos sind, wird es in diesem Artikel nicht darum gehen. Ehrlich gesagt bin ich dafür auch nicht der Experte. 🙂

Auch auf die Themen Relaunch-Strategie, agile Sprint-Planung und implizite Markenwirkung werde ich nicht weiter eingehen (dazu hat mein Kollege Gabriel erst letzte Woche einen sehr interessanten Artikel geschrieben).

Stattdessen möchte ich diesmal möglichst konkrete Praxisbeispiele zeigen, was beim Website Relaunch auf konzeptioneller Ebene schiefgehen kann. Die folgenden Beispiele basieren auf Erfahrungen aus zahlreichen Relaunch-Projekten, die wir in den letzten Jahren mit Analysen, A/B-Tests und Userlabs begleiten durften.

Da wir hier natürlich keine Screenshots aus Kundenprojekten zeigen dürfen, habe ich versucht, die Website Relaunch Beispiele an ähnlichen Seiten oder groben Skizzen darzustellen. Los gehts mit einem Phänomen, das wohl jedes Relaunch-Projekt gemeinsam hat:

1. Der Wunsch nach einem modernen Design

Die alte Seite ist zu kleinteilig, zu überladen, zu chaotisch. In Zukunft soll alles leichter, klarer, moderner werden (so zumindest der Wunsch der meisten Verantwortlichen). Die Folge sind professionelle Designs mit großen Flächen, viel Weißraum und ansprechenden Bildern. Das Problem dabei: der Inhalt kommt zu kurz.

Ein paar Beispiele:

Stadt Heidenheim

Schlecker

Media Markt

Immonet

Avandeo

Deutsche Bank Maxblue

2. Der Drang zur Reduktion

Dieser hängt direkt mit den Wunsch nach einem „klaren & zeitgemäßen Design“ zusammen. Der Nutzer darf auf keinen Fall durch Inhalte abgelenkt werden, die ihn nicht interessieren. Die Folge: Es wird gekürzt und versteckt wo es nur geht. Leider oft an der falschen Stelle. Ein paar Beispiele:

Texte einfach wegklappen

Unschöne CTA Sublines entfernen

Avandeo

Hinweistexte passen nicht ins Raster

Es gibt noch viele weitere Elemente, wie z.B. Kontaktmöglichkeiten, Trust-Elemente, Header-Links oder ganze Textabschnitte, die im Zuge des Redesigns einfach gelöscht werden. Nach dem Launch weiß aber leider niemand mehr, ob es vielleicht besser gewesen wäre, sie zu behalten.

Die bessere Frage wäre:

Stört es jemanden, dass es da ist?

3. Wie sieht die neue Navigation aus?

Jeder, der schonmal einen Website Relaunch begleitet hat, kennt die (manchmal) endlosen Diskussionen über die Navigationsstruktur:

• Linksspaltig oder doch besser per Flyout?
• Wie viele Ebenen braucht die Navigation?
• Öffnet sie per Mouseover oder per Klick?
• Wie schaffen wir es, dass auch unsere Stammkunden weiter zurechtkommen?

Was oft weniger beachtet wird: Die Navigation repräsentiert das Sortiment bzw. Angebot des Anbieters. Wird das vergessen, entstehen Navigationen wie im folgenden Beispiel:

Hauptnavigation à la Mobile

Globetrotter

Thomann

Es muss nicht die ganze Hauptnavigation geändert werden, um den Nutzer zu verwirren. Manchmal reicht schon die Umpositionierung eines einzelnen Elements.

Position der Suche

Wikipedia

4. Textänderungen, die keiner bemerkt

Manchmal schleichen sich bei der Relaunch-Konzeption Texte oder Labels ein, die nach einer Weile niemand mehr hinterfragt. Teilweise schaffen es Texte vom Platzhalter im Grobkonzept bis auf die Live-Seite. Das macht niemand absichtlich – es wird einfach nicht mehr auf die alte Seite geschaut und verglichen.

Value Propositions

Formular Labels

CTA Labels

Fazit

Die Erwartungen an einen Relaunch sind meist riesig. Wo man soviel Geld reinsteckt – soll am Ende bitte auch was Neues, Frisches und Moderneres rauskommen. Und natürlich soll die neue Seite auch besser verkaufen als die alte Seite.

Wozu jetzt die Formatierung in Rot?

Weil es genau die Sichtweise widerspiegelt, wie sie bei fast jedem Relaunch eintritt.

• alte Seite = altbacken, schlecht
• neue Seite = modern, innovativ, und grundsätzlich viel besser

Der Fehler liegt wohl schon darin, die bestehende Webseite mit alte Seite zu bezeichnen. Aus diesem Grund wird oft überhaupt nicht mehr auf die aktuelle Website geschaut. Dabei wird genau mit dieser Seite Tag für Tag Geld verdient. Hier wurde in den letzten Jahren viel Zeit investiert, um sie immer weiter zu optimieren.

Daher ein letzter Tipp:
Prüfe, was auf der alten Seite schon richtig gut war – und nimm es auf die neue gleich mit. Das kannst Du hervorragend mit einem Userlab prüfen. Es hilft aber auch schon, die Seiten einfach mal ausgedruckt nebeneinander zu halten. Wenn du noch mehr Wissen über Website-Design erlangen möchtest, kannst du dich für unser Growth Ambassador Programm bewerben. Neben interessanten Meetups mit der Community gibt es spezielle Videos über Neuro-Webdesign, die dir dabei helfen, deine Kunden emotional zu aktivieren.

Wie ist Deine Erfahrung mit der Konzeption von Relaunches? Ich freue mich über Kommentare und Feedback!

Der Beitrag NEU = BESSER?! – 21 Beispiele für gute & schlechte Website Relaunch-Ansätze erschien zuerst auf konversionsKRAFT.

Für eilige Leser:

8 Bausteine für mobile Landingpages

Der Vorteil einer Scorecard liegt ganz klar in den vorgegebenen Richtlinien und bietet daher die Möglichkeit eines strukturierten Vergleichs, ob alle wichtigen Informationen aus Nutzersicht enthalten sind.

Ein Benchmark mit dem Wettbewerb zeigt zudem auf, an welchen Stellen die eigene mobile Landingpage im Vergleich zurückliegt. Dies ermöglicht eine gezielte Optimierung von Schwachstellen.

Worauf kommt es bei der mobilen Optimierung also an?

Auf dem kleineren Display ist es die große Kunst, den Kunden in sehr kurzer Zeit zu überzeugen. Die Folge: Man muss schneller auf den Punkt kommen und gezielt die wichtigsten Informationen und Inhalte zur Verfügung stellen. Ist der Nutzer dazu genötigt, mehr als 4x mit dem Finger zu swipen um den gesamten Inhalt zu erfassen, ist die Seite zu lang.

Die folgenden Fragen muss der Besucher auf den ersten Blick schnell beantworten können:

• Bin ich hier richtig?
• Was soll ich tun?
• Überzeugt mich das Produkt?

1. Logo

Das Logo ist für den Besucher wichtig, denn es dient als Wiedererkennungsmerkmal, sofern die Marke bekannt ist. Ein gutes und einprägsames Logo zeigt dem Nutzer, dass es sich um ein seriöses Unternehmen handelt, welches im besten Fall sogar bekannt ist. Auch bereits getätigte Erfahrungen werden mit einem Logo verknüpft.

Besonderheit bei Mobile:

In der mobilen Version wird das Logo natürlich im Header-Bereich verkleinert. Es ist nicht zu empfehlen, ein bekanntes Logo im Bildformat gegen einen einfachen Schriftzug auszutauschen.

2. Headline / Subline

Zugegeben: es bleibt nicht viel Platz um dem Nutzer die Frage „Bin ich hier richtig?“ zu beantworten. Um so prägnanter muss die Headline sein, damit der Nutzer sich abgeholt fühlt und weiß, was er tun soll. Vorteilhaft ist es, wenn in der Headline bereits kurze und klare Handlungsauffordung gegeben sind, damit der Besucher nicht lange überlegen muss:

• „Lesen Sie unsere Inhalte“
• „Kontaktieren Sie uns“
• „Kaufen Sie dieses Angebot“

Hat er den Weg aus einer CPC-Anzeige auf die mobile Landingpage gefunden, muss der Text der Anzeige entsprechend aufgegriffen werden.

Besonderheit bei Mobile:

Kurze und prägnante Texte schonen den Platz auf dem Bildschirm und ermöglichen eine schelle Aufnahme der Informationen.

3. Call-to-Action – Genau das soll der Nutzer tun!

Da das Smartphone im Regelfall für die reine Beschaffung von Informationen oder schnellen Bestellungen verwendet wird, geht es auf dem kleinen Display ziemlich effizient zur Sache. Die Call-to-Action muss unverzüglich im sichtbaren Bereich angezeigt werden. Es darf nicht viel Platz verschwendet werden um den Wunsch des Nutzers zu erfüllen. Aus meiner Erfahrung sind die häufigsten Anfragen auf einem Smartphone:

• Kontakt mit dem Anbieter
• Vergleich von Preisen
• Suchen eines bestimmten Produktes
• Download einer App

Suche ich nach einer Anti-Virus Software und klicke auf die Anzeige von Avira, gelange ich auf eine ansprechende Landingpage. Die Call-to-Action verweist mich leider auf eine ausführbare Installationsdatei für den Computer. Auf dem Smartphone bringt das wenig, zumal Avira speziell für Android und iOS eine App zur Verfügung stellt. Als Idee kann man beides in einem Layer abfragen:

1. Den Download für den Computer an die E-Mail Adresse senden
2. Alternativ die App für das Smartphone als Direktverweis anbieten

4. Preis

Die Kaufentscheidung wird maßgeblich durch den Preis bestimmt. Liegt ein faires oder gar kostenloses Angebot vor, so zeigen Sie dies transparent. Das Produkt wird vom Verbraucher in Relation zum Preis bewertet.

Besonderheit bei Mobile:

Je teurer ein Produkt ist, desto länger wird abgewogen, ob es das richtige Produkt ist. Da auf dem Smartphone Impulskäufe getätigt werden, gilt also, dass günstigere Produkte einfacher und schneller verkauft werden können. Bei teuren Anschaffungen hingegen, kann eine kostenlose Testphase helfen, sich leichter zu entscheiden.

5. UVP – Unique Value Propositions

Wofür steht das Produkt oder das Angebot? Geben Sie in einer kurzen und knackigen Liste die Vorzüge an, warum der Nutzer genau das richtige Angebot gefunden hat. Hier werden keine langen und ausschweifenden Erklärungen erwartet, sondern schnell zu erfassende Alleinstellungsmerkmale. Zeigen Sie, warum es sich lohnt das Angebot anzunehmen und nicht weiter im Internet zu suchen.

6. Beschreibung – Reason Why

Ist der Nutzer bis zu dieser Stelle gekommen? Dann haben Sie ihn schon fast überzeugt. In diesem Schritt kann detaillierter auf die Besonderheiten des Produktes eingegangen werden und warum es für den Besucher genau das Richtige ist.

Besonderheit bei Mobile:

Überfrachten Sie die Seite nicht. Eine einfache Darstellung durch Illustrationen der Funktionsweise oder die Verwendung von übersichtlichen Bullet-Listen lassen die Beschreibung besonders schnell überblicken.

Es muss Ziel sein, die Textblöcke kurz und aussagekräftig zu gestalten. Im Beispiel der Commerzbank werden zusätzliche Informationen in einem Akkordeon platzsparend dargestellt. Dadurch bleibt die Seite kurz und übersichtlich.

7. Trust Elemente

Ist noch kein Vertrauen zu dem Anbieter vorhanden, muss es aufgebaut oder gestärkt werden. Dies ist ein starkes psychologisches Prinzip, denn aufgebautes Vertrauen ist durchaus verkaufsfördernd. Elemente mit denen Sie Vertrauen aufbauen können sind Zertifikate, Testurteile, Gütesiegel, positive Kundenbewertungen und bekannte Gesichter.

8. Rufnummer – Click-to-Call

Der einfachste Weg für den Nutzer, weitere Fragen zu stellen, ist direkt anzurufen. Er hat schließlich ein Smartphone in der Hand. Click-to-Call Nummern geben zum einen Sicherheit, denn der Anbieter ist für mich erreichbar. Auf der anderen Seite können Sie komplexe Produkte am Telefon einfacher erklären. Nicht alle Besucher trauen sich, bspw. direkt ein Konto auf dem Smartphone zu eröffnen. Mit einem Telefonanruf können Sie jedoch individuell auf die Bedürfnisse Ihres zukünftigen Kunden eingehen und bspw. Termine vor Ort vereinbaren.

Besonderheit bei Mobile:

Ein Telefon-Icon im Header zeigt, dass Sie kontaktfreudig sind und kann neben der primären Call-to-Action ebenfalls zu Kaufabschlüssen führen. Aus unterschiedlichen Kundentests konnte die häufigere Nutzung einer Click-to-Call Nummer im Gegensatz zu einem Kontaktformular nachgewiesen werden.

Download der Conversion Scorecard:

Zusammenfassung:

Der Erfolg einer Landingpage auf dem Smartphone kann mit diesen 8 Punkten nachhaltig verbessert werden.

• In der Kürze liegt die Würze:
  Die Kunst liegt darin, dem Nutzer innerhalb kurzer Zeit vom Angebot zu überzeugen.
• Der Nutzungskontext bestimmt die Call-to-Action:
  Auf eine mobile Landingpage kommt der Nutzer unter einem bestimmten Vorwand. Diesen gilt es abzufangen, um einen Kaufabschluss zu fördern. Daher gibt es nicht DIE EINE Call-to-Action. Kommen Sie dem Kunden entgegen und machen Sie es ihm so einfach wie möglich, sich auf dem Smartphone zu informieren oder zu kaufen.

Weiterführende Links:

• Performance Indikatoren für mobile Landingpages
• Infografik: Landingpage Baukasten
• 11 Landingpage Elemente im Bewertungsraster
• 6 Erfolgsfaktoren für Responsive Webdesign

Der Beitrag Download: Conversion Scorecard für mobile Landingpages erschien zuerst auf konversionsKRAFT.

Viele Website-Betreiber führen daher keine A/B Tests durch, weil sie schlichtweg Angst davor haben, dass alles den Bach runter geht. Dabei muss man sich eigentlich nur vor Augen führen, dass die Suchmaschine im Prinzip wie ein Conversion-Optimierer funktioniert: Liefere zu einem gewünschten Suchbegriff relevante Inhalte, die sauber strukturiert und aufbereitet sind.

Das ist der Grund, warum wir uns in einem Interview mit Thomas Zeithaml, Geschäftsführer bei Seoratio und ausgewiesener SEO-Spezialist zusammengesetzt haben, um zu klären, welche Gefahren beim Testing für die Positionierungen in den Suchmaschinen auftreten können, bzw. wie man dafür sorgen kann, dass alles glatt läuft.

Interview mit Thomas Zeithaml (Seoratio)

konversionsKRAFT: Erzeugen mehrere Varianten beim Testing Duplicate Content?

Zuerst einmal möchte ich erklären was Duplicate Content (DC) überhaupt aus Sicht von Google bedeutet. Von Duplicate Content spricht man, wenn zwei nahezu identische Inhalte auf zwei unterschiedlichen Webadressen verfügbar sind. Dabei ist es unerheblich in welches Layout der Text eingebettet ist. Einfache Beispiele sind Pressemitteilungen, die auf vielen Webseiten veröffentlicht werden. Für Google sind diese reinen Inhalte vereinfacht gesagt „Resourcenfresser“, da sie diese mehrfach in ihren Suchindex aufnehmen müssen. Aus diesem Grund versucht Google hier Festplattenspeicher zu sparen und Quellen von Duplicate Content auszublenden. Daher ist die Frage in Bezug auf den Umgang mit Testing-Tools berechtigt.

Es gibt verschiedene Herangehensweisen von und in Testingtools. Die einen verändern nur den Inhalt oder das Layout auf der Seite. Dabei bleibt die Internetadresse der Seite jedoch unverändert. Diese Art der Veränderung wird auch als DOM-Manipulation bezeichnet. Da die Adresse jedoch die gleiche bleibt, gibt es aus Sicht von Google diesen Inhalt nur einmal. Somit entsteht bei dieser Art von Tests mittels Dom-Manipulation kein doppelter Inhalt. Gefährlicher wird es, wenn das Tool mit unterschiedlichen Adressen arbeitet. Wird z.B. bei einem A/B-Test der Inhalt einer Seite auf der Adresse “test1.html” und nur in einem veränderten Layout auf “test2.html” ausgeliefert, entsteht tatsächlich Duplicate Content. Bei dieser Konstellation sind gleiche Inhalte auf unterschiedlichen Adressen verfügbar.
Man sollte also bei einem Test genau drauf achten, ob die Varianten auf der gleichen Webadresse stattfinden. Denn nur so kann man der DC-Problematik aus dem Weg gehen.

konversionsKRAFT: Cloaking – wird die Manipulation einer indizierten Seite abgemahnt?

Abgemahnt wird bei Google erstmal gar nichts 😉 Die Richtlinien sind eher Spielregeln und haben nichts mit gültigem Recht zu tun. Auch hier muss man vielleicht Cloaking erst mal definieren.
Das typische Cloaking stammt aus einer Zeit, in der man die Suchmaschinen noch sehr leicht hinters Licht führen konnte. Laut Definition ist Cloaking das Ausliefern von Inhalten die speziell für die Suchmaschinen-Robots entwickelt werden. So wurden früher statistischer optimierter Inhalt an Google ausgeliefert, während ein normaler Besucher einen ganz anderen Inhalt angezeigt bekommen hat.

Inzwischen arbeiten viele Seiten mit dynamischen Elementen. Ein einfaches Beispiel wären hier personalisierte Inhalte oder eine Auslieferung des Inhalts aufgrund der geographischen (IP-) Herkunft. Solche Methoden würde man somit auch als Cloaking einstufen. Aus diesen Gründen hat Google die Regeln hier deutlich freizügiger definiert. Mir ist seit Jahren keine Seite mehr bekannt, die aufgrund von Cloaking eine Positions-Strafe erhalten hätte.
Meine Empfehlung bei Testläufen wäre, die Varianten nicht zu weit auseinander laufen zu lassen. Die Anordnung von Layout-Elementen kann problemlos verändert werden. Die Anzeige des Inhalts sollte jedoch auf beiden Varianten weitestgehend gleich sein. Also eine Variante mit und eine ohne Text könnte Google wirklich verwirren.

konversionsKRAFT: Was passiert mit der URL-Struktur – landen Varianten-URLs im Index?

Varianten die auf einer DOM-Manipulation beruhen, sind an sich kein Problem. Meist ist diese Adresse sowieso im Suchmaschinen-Index. Tritt der Fall auf, dass eine Testversion im Google-Index landet, kann man den Test pausieren und über die Webmaster-Tools eine Neuindexierung anstoßen. Alternativ kann man das Problem auch aussitzen. Denn beim nächsten Crawl-Vorgang wird die Originalversion des Inhalts wieder aufgenommen.

Problematischer sind Testläufe, bei denen mit zwei Webadressen gearbeitet wird. Wenn also jede Variante unter einer eigenen URL verfügbar ist und je nach Besucher damit die eine oder andere Version verlinkt wird. Wie oben erwähnt, würde an dieser Stelle Duplicate Content auftreten. Wir empfehlen daher bei solchen Tests einen der beiden folgenden Schritte zu unternehmen:

Ich gehe davon aus, dass die Version A die eigentliche Seite darstellt. Die Seite B sollte nun per Canonical Tag auf diese Seite A verweisen. Aus Sicht von Google entspricht dies einer Weiterleitung. Dazu wird auf Seite B im Head Bereich des HTML Quellcodes eine Zeile eingefügt. Dies könnte wie folgt implementiert werden: <link rel=”canonical” href=”https://www.example.com/a.html” />

Die andere Möglichkeit besteht darin, die Seite B aus den Suchmaschinen auszusperren. Die einfachste Methode ist hier ebenfalls im Head Bereich die Anweisung: <META NAME=”ROBOTS” CONTENT=”NOINDEX”> anzugeben. Dadurch wird verhindert, dass Google und Co diese Seite in den Suchindex aufnehmen.

konversionsKRAFT: Interpretation der Inhalte (JavaScript) – Welche Inhalte indiziert Google?

Google versucht Webseiten immer besser zu verstehen. Durch neue Technologien (jQuery, Ajax) war dies aus Sicht von Google nicht mehr gegeben. Aus diesem Grund hat Google sein Verhalten hier geändert. Inzwischen werden Seiten so interpretiert und indexiert, wie sie im Browser angezeigt werden. Dies schließt die Interpretation von JavaScript mit ein.

Somit kann es also vorkommen, dass Testvarianten von Google indexiert werden. Fehlende Texte oder Elemente der Variante wären dann nicht mehr im Google-Index enthalten. Bei langen Tests kann dies durchaus problematisch werden. So könnte die interne Verlinkung einer Webseite Schaden nehmen. Wir hatten schon mal einen Fall, bei dem eine Variante keine weiterführenden Cross-Selling-Links hatte. Die Folge war, dass einige Produkte in den Suchergebnissen abgefallen sind, weil sie intern nicht mehr so gestärkt wurden.

Einige Tools am Markt können solche Indexierungsfehler jedoch verhindern. Eigentlich alle setzen Cookies ein, um nicht einem Benutzer unterschiedliche Versionen auszuliefern. Werden keine Cookies erlaubt, findet in der Regel kein Test statt. Google akzeptiert keine Cookies und nimmt somit nicht an dem Test teil. Ebenso bieten Tools wie Optimizely oder VWO auch die Möglichkeit, bestimmte User-Agents aus den Tests auszuschließen. Damit kann man also verhindern, dass der Googlebot an Tests teilnimmt.

konversionsKRAFT: Zum Targeting – Warum sollte man Google aus dem Test ausschließen?

Im Mai 2014 gab Google (siehe http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html) bekannt, dass sie vermehrt die Webseiten wie ein normaler Nutzer betrachten wollen. Dazu gehören auch Browserfunktionen wie z. B. JavaScript und das Erkennen von dynamischen Inhalten, die über Schnittstellen nachgeladen werden. Während also früher JavaScript und Ajax nicht erkannt wurden, schafft es Google nun, diese Funktionen auszuwerten.

Viele Testing-Tools verändern allerdings mittels JavaScript den HTML-Code um z. B. Inhalte woanders zu platzieren. Da Google diese JS-Logik früher nicht ausführen konnte, war Google somit nicht in der Lage an einem Test teilzunehmen. Dies hat sich durch die Umstellung von Google nun jedoch geändert.

Die reine Platzierung von Inhalten ist für Google nicht ausschlaggebend und stellt an sich kein Problem dar. Aber natürlich gibt es Testfälle, in denen Inhalte weggelassen oder hinzugefügt werden. Daraus würde aus Sicht von Google eine komplett neue Interpretation der Relevanz der Webseite in den Suchergebnissen nötig. Denn je nach Textausrichtung, Textlänge und inhaltlicher Relevanz wird eine Unterseite in den Suchergebnissen eingeordnet. Da diese HTML- bzw. DOM-Manipulation, wie gesagt, mit JavaScript umgesetzt wird, würde Google an diesem Test teilnehmen und die Seite neu interpretieren.

In diesem Zusammenhang wird immer wieder der Begriff Cloaking ins Spiel gebracht. Die Intention von Cloaking ist somit eine bewusste Verbesserung in den Suchergebnissen. Dies ist in einem Testfall ja nicht gegeben. Daher kann Testing nicht mit Cloaking gleichgesetzt werden. Trotzdem haben wir in unserem oben beschriebenen Testfall eine Version mit zusätzlichem Inhalt und eine ohne. Aus diesem Grund sollte man den Bot aussperren. Ein Ausschluß ist sozusagen nur zum Schutz da, Google nicht am Test teilnehmen zu lassen. Während also beim Cloaking ein anderen Inhalt an den Bot ausgeliefert wird, verhindert man mit einer Sperre den Zugriff auf einen Inhalt.

Es macht aber auch keinen Sinn, einen Bot an einem Test teilnehmen zu lassen. Aus diesen Daten kann man keine sinnvollen Aktionen ableiten. So wird ein Bot keine Klicks ausführen, nicht scrollen oder Einkäufe tätigen – auch wenn viele Testing-Tools die Besuche nicht in die Reportings einrechnen.

Visual Website Optimizer und die „vis_opt_url“

Dazu kommt, dass von den Tools oft auch URLs, die es so im System nicht gibt, erzeugt werden. Nimmt der Bot am Test teil, kann er somit auch am Beispiel von „vis_opt_url“ neue URLs aufspüren und in den Suchmaschinenindex aufnehmen. Google ist in diesem Bereich sehr hungrig geworden und versucht alle URLs aufzunehmen, die wie Webadressen aussehen. Da diese URLs nicht vorhanden sind, werden so viele Fehlerseiten erzeugt.

Infos zur Testing-Praxis

In den meisten Testing-Tools kann man anhand bestimmter Regeln festlegen, welche Nutzer an einem Test teilnehmen sollen. Hier sollte man anhand des User-Agents nun die Regeln für Bots definieren. Man kann so z. B. über einen regulären Ausdruck „Googlebot“ (oder ganz allgemein “bot”) die Bots ausschließen.

Prüfen kann man das in den Google Webmaster Tools recht einfach, indem folgendes gewählt wird: “Abruf wie durch Googlebot” > “Rendern”. Dort ist ein visueller Vergleich möglich:

Unsere Tipps für SEO sichere A/B-Tests

1. Bei Redirect-Tests Canonical-URLs verwenden
2. Google per UserAgent-Überprüfung aus dem Test ausschließen
3. Gegebenenfalls Überprüfung der Google Webmaster-Tools
4. Beim Ausrollen des Tests sicherstellen, dass alte URLs (z. B. von nun getauschten Bildern) nicht in einem 404 enden
5. Vorsicht bei serverseitigen Tests (also nicht per JavaScript im Browser) unter gleicher URL
6. Wenn eigene Tools zum Einsatz kommen, sollte der Einfluss auf die SEO-Bemühungen eingehend geprüft werden

Gefährden A/B Tests die SEO Rankings?

Unterm Strich kann man sagen, dass A/B Tests keine Auswirkungen auf die SEO Rankings haben. Es gibt immer wieder Fälle, in denen Tests angeblich zu Verschlechterungen der Positionen geführt haben sollen. Beim näheren Betrachten hat sich aber rausgestellt, dass Fehler im Setup vorliegen, bzw. auf die oben genannten Punkte nicht eingegangen wurde. Von daher gilt auch hier wie immer:

Wir danken Thomas Zeithaml von Seoratio für das Interview und dafür, dass er für Fragen in den Kommentaren unserer Leser da ist 😉

Der Beitrag A/B-Testing als SEO-Gefahr? erschien zuerst auf konversionsKRAFT.

#1 Keine Deployments während des Testlaufs

Änderungen oder Bugfixes, auch wenn sie noch so klein und wenig komplex zu scheinen mögen, können zu Komplikationen bei der Testausspielung führen. Dies spielt vor allem bei <tag>-basierten Testingtools eine große Rolle. Existiert eine Roadmap mit definierten Deployment-Terminen, können Tests vor- oder nachher durchgeführt werden. Sollte ein Deployment während einer Testlaufzeit nicht zu verhindern sein, sprechen Sie frühzeitig mit Ihrer Entwicklung. Mit einer Kopie des laufenden Tests und einer Anspielung z.B. auf einem Staging-Server, können mögliche Konflikte frühzeitig erkannt und der Test angepasst werden.

Sie möchten die Testlaufzeit einschätzen? Unsere Faustformel für eine durchschnittliche Testlaufzeit:

Ein Test sollte mindestens 2 – 4 Wochen laufen und pro Variante
mindestens 1.000 – 2.000 Conversions beinhalten. Es sollten in diesem Zeitraum Aktionen (Newsletter, TV-Spots, Sales etc.) stattfinden. Es sollten möglichst unterschiedliche Kanäle abgebildet werden (Gesamt-Traffic-Mix, entweder durch Targeting im Vorfeld oder Segmentierung im Nachgang). Hat der Test eine minimale statistische Signifikanz von 95% erreicht (zweiseitig, d. h. positiv wie negativ) und ist diese stabil, so wird der Test angehalten.

#2 Kontrast beachten

Die Kombination unterschiedlicher Anpassungen ermöglicht oft ein kontraststarkes Testen. Ein zu großer Kontrast macht eine anschließende Analyse der effektivsten Hebel jedoch schwierig. Zudem wird der Aufwand für Umsetzung und Qualitätssicherung steigen.

Meine Empfehlung wäre daher: Überprüfen Sie große Anpassung durch einen ersten Test. Mit Folgesprints weitere Anpassungen vornehmen und validieren.

André Morys geht näher auf das Thema kontrastreichen Optimierungshypothesen in seinem Artikel Für mehr Uplift: Der goldene Zirkel der Conversion-Optimierung detaillierter ein.

#3 Worst-Case-Szenario beachten

Oft gibt es bei großen Produktsortimenten abweichende Darstellungen im Template oder der Header verändert sich im Verlauf der Seite, z.B. werden UVP’s im Checkout stärker präsentiert. Dies kann bei der Entwicklung sowie der Qualitätssicherung zu kleinen bis großen Probleme führen. Durch eine im Vorfeld erstellte Worst-Case-Liste (z.B. in Form eines Impediment Backlogs) können schon bei der Entwicklung entsprechende Sonderfälle beachtet werden. Die Qualitätssicherung kann mit dieser Liste eine optimale Überprüfung aller möglichen Szenarien bieten. Fragen Sie bei Ihren Kunden nach Sonderfällen (Sondergrößen, besondere Produktkategorien wie z.B. Accessoires etc.). Dies erleichtert auf beiden Seiten das Abfangen von Abweichungen.

#4 Agilität vs. Perfektion

Oft sollen A/B Tests in völliger Perfektion umgesetzt werden. Nach mehreren Wochen Abstimmungs-Zyklen, Entwicklung, Qualitätssicherung und Testlaufzeit ist das Ergebnis jedoch nicht erfolgreich. Gerne sagen wir “Ein Test ist kein Deployment”. Wichtig: Hiermit ist keine Minderung der Qualität einer Testumsetzung oder Qualitätssicherung gemeint. Vielmehr geht es um die Umsetzung von minimalen Details, deren Auswirkung aber auf einen Besucher in Frage zu stellen ist.

Sollten Sie bei nächster Gelegenheit vor diesem Problem stehen, stellen Sie sich einfach folgende Frage: “Würde ich dieses Produkt nicht kaufen, weil z.B. Schriftgröße, Zeilenabstand oder Borderbreite nicht stimmt?”.

#5 Quereinstiege beachten

Quereinstiege in einen Test sollten immer beachtet werden. SEA, SEO oder Bestandskunden könnten unter Umständen eine veränderte Seite angezeigt oder auf eine andere Seite weitergeleitet werden. Im ersten Fall könnten zudem schwerwiegende Fehler auftreten, welche durch die Testausspielung verursacht werden.

#6 Testeinstiege & Abweichung der URL Struktur beachten

Vor allem bei der Durchführung von Multi-Page bzw. Funnel-Tests sollte ein Blick auf eine mögliche Abweichung der URL-Struktur geworfen werden. Sollte sich die Struktur unerwartet ändern, kann im schlimmsten Fall das Targeting des Testingtools nicht mehr greifen. Dies hat zur Folge, dass Teilnehmer die Testvariante nicht mehr sehen. Bei externen Anbietern, für z. B. Zahlungsmethoden, können – durch eine fehlende Rückleitung auf die Dankeseite – Conversion & Revenue verloren gehen.

#7 Kein Test ohne Targeting

Wenn die Qualitätssicherung eine fehlerfreie Testausspielung auf allen Endgeräten mit zugehörigen Browsern gewährleisten kann, ist ein Ausschluss von bestimmten Devices / Browsern nicht notwendig. In den seltensten Fällen ist dies jedoch möglich. Durch eine Whitelist, einer Auflistung aller in der Qualitätssicherung zu überprüfenden Endgeräte sowie Browser, können potenzielle Fehlerquellen ausgeschlossen werden. Es ist von Vorteil diese Liste schon vor der Freigabe der Entwicklung zu definieren. Als Hilfestellung dienen die aktuellen Zugriffszahlen aus einem bestehenden Web Analytics / Reporting Tool wie Google Analytics.

#8 Von der Messung ausschließen

Wer sind die täglichen Besucher einer Seite? Neben Ihren Kunden sind dies oft externe Dienstleister wie Call-Center oder auch der Kollege im Büro nebenan. Dies kann Ihre Ergebnisse jedoch verfälschen. Schließen Sie daher Ihre eigene IP-Adresse sowie von internen und externen Mitarbeiter von der Messung aus. Achtung, nicht jedes Tool bietet die Möglichkeit, IP-Adressen noch nachträglich aus den Ergebnissen zu filtern.

#9 Auch Browser werden alt

Ältere Browser wie z.B. IE 7 & 8 sterben aus. Durch einen Blick auf die Traffic-Zahlen können oft ältere Browser vernachlässigt werden. Browser wie der IE 7 oder IE 8 verursachen in der Entwicklung und Qualitätssicherung erfahrungsgemäß enormen Zusatzaufwand.

#10 Sind iFrames vorhanden?

Gerne wird die eigene Seite durch Funktionen von externen Dienstleistern erweitert. Es kommt vor, dass diese Funktionen über einen iFrame implementiert wird. iFrames können manipuliert werden, wenn diese auf der gleichen Domain liegen. Ist dies nicht der Fall muss Ihr Testingtool auf der Domain des Dienstleisters implementiert werden. Wenn Sie Glück haben, ist dies möglich, in den meisten Fällen jedoch nicht. Überprüfen Sie das Konzept gemeinsam mit Ihrer Entwicklung vorab auf die Umsetzbarkeit.

#11 Aufwand der Qualitätssicherung beachten

Die benötigte Zeit für die Qualitätssicherung wird oft unterschätzt. Typische Problemfälle sind Tests der Produktdetailseite oder Checkout. Der Aufwand kann exponentiell ansteigen. Sprechen Sie vorab mit Ihrer Qualitätssicherung um keine Überraschung zu erleben.

Hier ein Beispiel für eine vereinfachte Berechnung der benötigten Zeit für Checkout-Tests:

Varianten x Browser x Seiten x Kundentypen x Lieferarten x Zahlungsarten x Sonderfälle
= Zu betrachtende Seiten

Zu betrachtende Seiten x Zeit pro Seite
= Zeitaufwand Qualitätssicherung

Ein Test mit 2 Varianten bei nur 4 Browsern, mit 5 Seiten, 3 Lieferarten und 5 Zahlungsarten entspricht 600 zu untersuchende Seiten. Bei nur 2 Minuten pro Seite besteht ein Zeitaufwand von 20 Stunden.

#12 Ist die Produktvielfalt bekannt?

Die Produktdetailseite bietet häufig ein großes Optimierungspotential. Von kleinen Anpassungen bis hin zu einer kompletten Umstrukturierung. Oft wird jedoch die Menge der Produkte und deren unterschiedliche Darstellung (Sonderfälle) nicht beachtet. Das Resultat sind notwendige Anpassungen für die Entwicklung und Zusatzaufwand für die Qualitätssicherung. Eine Verzögerung des Teststarts ist die Folge.

Falls Ihnen nicht alle möglichen Sonderfälle bekannt sind, suchen Sie nach Kollegen die Ihnen weiterhelfen können. Fassen Sie schon vor der Testkonzeption entsprechende Sonderfälle zusammen und geben Sie diese Informationen entsprechend an die Entwicklung und Qualitätssicherung weiter.
Sollte es dafür doch zu spät sein oder unerwartete Probleme auftreten, sollten Sie Folgendes beachten: Können vorerst einzelne Kategorien oder Marken getestet werden? Dies ermöglicht einen Teststart und gibt Puffer für die Anpassung des Tests auf Ihr gesamtes Sortiment.

#13 Ajax oder Anpassung von Produktbildern beachten

Nicht selten werden Änderungen per dynamisch nachgeladenen Inhalt vorgenommen z.B. Informationen über den Lagerbestand. Aber nicht immer ist dies sofort offensichtlich. Im besten Fall entsteht nur ein Mehraufwand für die Entwicklung, im schlimmsten Fall ist eine Umsetzung nicht möglich.
Bei der Verkleinerung oder Vergrößerung von Produktbildern muss auf die Qualität der Bilder geachtet werden. Ein verpixeltes Bild verhindert eine optimale Produktdarstellung.

Nachgeladenen Inhalt beachten und die Entwicklung frühzeitig mit ins Bott holen. Die Vergrößerung von Produktbildern sowie das Hinzufügen von großen Inhalten (Text oder Bild) sollten Sie vorzeitig testen, um eine Machbarkeit zu gewährleisten.

#14 Komplexe Umbauten durch Ladeanimationen verdecken

Durch sichtbare Umbauten kann ein Besucher verunsichert werden. Im schlimmsten Fall verliert er das Vertrauen und bricht seinen Besuch ab. Durch die Verwendung von Ladeanimationen kann dieser Effekt gemindert werden. Der betroffene Bereich wird vorerst ausgeblendet und mit einer Ladeanimation versehen. Nach allen benötigten Manipulationen wird dieser Bereich sichtbar gemacht. So werden Umbauten im besten Fall unsichtbar und steigern ggf. sogar den Joy of Use.

Der Artikel Endstation Ladezeit: 3 Geheimtipps für ein optimales Ladeverhalten meines Kollegen Manuel Brückmann befasst sich detaillierter mit diesem Thema.

#15 100% Ausspielungen als Zwischenlösung

Nach einem erfolgreichen Test soll die Anpassung oft schnellstmöglich dauerhaft auf der Seite implementiert werden. Je nach Deployment-Zyklus eines Unternehmen kann dies jedoch schnell ein paar Wochen oder Monate dauern. Als Überbrückung bieten sich 100% Ausspielungen an. In der Regel sind die Kosten des Testingtools geringer als der erhöhte Umsatz durch die Anpassung der Ausspielung. Somit kann der erhöhte Umsatz direkt mitgenommen werden.

Fazit

Sobald der Wunsch besteht, mehr zu testen als roter vs. blauer Button, wird der gesamte Prozess von Idee über Konzept bis hin zu einem fertigen Test komplexer. Dies wird leider in der Praxis oft nicht beachtet. Viele Probleme lassen sich durch eine gute Vorbereitung und Kommunikation mit Kollegen schon vor der Entstehung verhindern. Beachten Sie die Aufwände von Umsetzung und Qualitätssicherung und halten Sie rechtzeitig Rücksprache mit Ihrer Entwicklung und Qualitätssicherung. Auf diese Weise können Aufwände und eventuelle Problemstellen besser eingeschätzt werden.

Oft wird nur über negative Testergebnisse gesprochen, um Verbesserungen und Learnings zu generieren. Ein Test wurde erfolgreich durchgeführt? Viele werden keine Informationen über die Testergebnisse erhalten. Geben Sie das Erfolgserlebnis an alle Beteiligten weiter und steigern Sie damit die Motivation des gesamten Teams. Feiern Sie den Erfolg zusammen!

Wie verfahren Sie beim Entwickeln von Tests? Über Ihr Feedback würde ich mich freuen!

Der Beitrag Checkliste: 15 einfache Dinge für reibungslose A/B-Tests erschien zuerst auf konversionsKRAFT.