Formular-Optimierung Reloaded: 21 Best Practices für mehr Conversion

Noch immer stoße ich auf Seiten, mit allem anderen als nutzerfreundlichen Formularen - deshalb habe ich meine Tipps zur Formular-Optimierung noch einmal hervorgekramt und sie um weitere Punkte ergänzt. Haltet Euch an diese Checkliste, nehmt die Best Practices zum Vorbild und seht, wie man es nicht macht (am Ende gibt es die Checkliste zum Download).

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.

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.

LinkedIn

LinkedIn fordert die User mit einem schlichten Formular zur Registrierung auf.

# Weniger ist mehr: Verzichte auf unnötigen Schnickschnack
# Setze die Felder möglichst linksbündig (v.a. mobile)
# Achte auf ausreichenden horizontalen und vertikalen Abstand der Felder

2) NEU: 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?

Tipp 2 - Formularname Facebook

Bei Facebook weiß der User eindeutig, dass er sich jetzt registriert.

# Jedes Formular hat einen Namen
# Halte erklärende Texte so kurz wie möglich
# Formuliere die Labels klar und prägnant

3) NEU : 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.

Tumblr

Zur ersten Registrierung benötigt Tumblr nur die E-Mail-Adresse, ein Passwort und einen Usernamen.

# Beschränke Dich auf die wirklich wichtigen Daten
# Besorge Dir weniger wichtige Daten erst im zweiten Schritt

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:

Tipp 4 Consorsbank Pflichtfelder

Consorsbank weist direkt oben im Formular darauf hin, dass alle Felder mit * Pflichtfelder sind.

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.

# Wenn Pflichtfelder, dann kennzeichne sie eindeutig!
# Spiele mit farblichen Hervorhebungen!

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.

Tipp 5 Relevanz Hannoversche

Die Hannoversche fragt zuerst den Bedarf ab, erst im nächsten Schritt werden die persönlichen Daten eingegeben.

# Frage den Kunden zuerst, was er will!
# Stelle nötige, aber für den Kunden irrelevante Fragen erst danach!

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.

Tipp 6 LinkedIn

Bei LinkedIn wird implizit aufgrund der Gestaltung klar, dass alles leicht auszufüllen ist.

# Positioniere die Labels Right- oder Top-Aligned für einen guten Lesefluss

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:

Tipp 7 Visuelle Hierarchie ARAG

ARAG zeigt, wie die visuelle Hierarchie dem Nutzer hilft, das Formular zu verstehen.

# Unterteile lange Formulare visuell und gebe hiermit Orientierung

8) NEU: 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).

Tipp 8 Wegweiser Amazon

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

Tipp 8 Aktives Feld kennzeichnen Amazon

Bei Amazon wird das aktive Feld farbig umrandet.

# Vermeide Scrollen
# Unterteile große Formulare in Schritte
# Visualisiere den Fortschritt
# Kennzeichne das aktive Feld

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.

Tipp 9 - Positives Feedback Consorsbank

Consorsbank gibt dem Nutzer nach jedem Abschnitt positives Feedback.

# Weise nicht nur auf Fehler hin, sondern gebe positives Feedback

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:

Tipp 10 - Consorsbank

Auch im Formular selbst gibt es bei jedem Feld eine echte Inline-Validierung.

# Positives Feedback ist auch innerhalb des Formulars möglich. Nutze es!

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:

Formular-Optimierung: Feldlänge und Position

links ein Ausschnitt aus einem Screenshot der zeigt, wie es nicht geht. Rechts der Vorschlag, wie es besser wäre (inkl. Position und Ausrichtung der Labels)

# Überlege vorab, welchen Platz die Inhalte der Felder benötigen!
# Mache das Feld nur so groß, wie Du es auch erwarten würdest!

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.

Tipp 12 - ARAG

Bei dem Online-Antrag der ARAG kommen die schwierigen Fragen erst weiter hinten.

# Beginne mit einfachen Fragen!
# Setze sensible und anspruchsvolle Fragen nach hinten

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. Hier ist ein gutes Beispiel:

Tipp 13 - Erkläre warum Info benötigt NIKE

NIKE erklärt direkt: Warum fragen wir das?

# Erkläre, weshalb Du die Daten benötigst!

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:

Dialog aufbauen

Lendingtree führt in diesem Formular einen direkten Dialog mit dem User.

# Baue Deine Fragen in kurze Texte / Aussagen ein!
# Greife den inneren Dialog der Kunden auf! (gerne in „Ich“-Form)

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.

Ausnahmsweise ein Gegenbeispiel: Diese Auswahl provoziert offene Fragen in einem Buchungsprozess

Ausnahmsweise ein Gegenbeispiel: Diese Auswahl provoziert offene Fragen in einem Buchungsprozess

Consorsbank macht es vor: Hier gibt es zu jedem Feld eine Erklärung:

Tipp 15 - Erklärung damit keine neuen Fragen aufkommen - Consorsbank

Consorsbank erklärt, was in den einzelnen Feldern einzutragen ist.

# Durchforste Dein Formular nach möglichen Unklarheiten und beseitige diese

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:

Tipp 16 Mobile NIKE

Auf der mobilen Seite von NIKE ist zu sehen, wie sich das Tastaturlayout je nach Feld-Typ verändert.

# Denke bei der Formulargestaltung auch an Smartphone, Tablet & Co.!
# Biete zu jedem Feld die passende Tastatur!
# Reduziere die Eingabefelder nach Möglichkeit noch mehr!

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:

Tipp 17 Passwort sichtbar

Intelligent: Auf wordpress.com kannst Du auswählen, ob das Passwortfeld offen oder verdeckt angezeigt wird.

Tipp 17 - Vorauswahl treffen

Consorsbank hat „Deutschland“ noch vor die alphabetische Länderauflistung gesetzt.

# Verzichte auf Captchas!
# Stelle die Richtung der Tab-Taste sinnvoll ein!
# Setze die wahrscheinlichsten Antwortmöglichkeiten nach vorne!
# Höre auf, das Passwort zu verdecken!

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:

Bei Burberry sind die UX-Kontraste zwischen Produktseite und Checkout sehr deutlich

Bei Burberry sind die UX-Kontraste zwischen Produktseite und Checkout sehr deutlich

(TIPP: In seinem Beitrag Emotionen im Checkout stellt mein Kollege Manuel Ressel viele positive Beispiele zu diesem Thema vor.)

# Bleibe bis zum Schluss am Ball, denn vor dem letzten Klick kann noch viel passieren!
# Designe Deine Formulare schlicht, aber ansprechend und passend zu Deiner Seite!

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:

Tipp 19 Vertrauen Sicherheit Evrgreen

Evrgreen.de verstärkt die Hinweise zur Transaktionssicherheit im Checkout.

# Weise den Kunden darauf hin, was mit seinen Daten geschieht!
# Gib Hinweise zu Garantie, Versand, Reklamation und Umtausch!

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:

Tipp 20 1&1

Bei 1&1 werden die Value Propositions im Registierungsformular wiederholt.

Tipp 20 Pinterest

Bei Pinterest wird die Value Proposition auf impliziter und expliziter Ebene sehr schön gespielt. Dieses Beispiel vereint fast alle positiven Faktoren.

# Zeige dem Kunden, warum er hier ist!
# Hebe die Value Propositions auch im Formular hervor!

21) NEU: 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.

Tipp 21 - Social Media nutzen

Facebook ermöglicht es dem User, sich mit nur einem Klick bei Spotify zu registrieren.

# Verbinde Dein Formular mit Facebook & Co. und ermögliche so die Registrierung mit einem Klick!
# Ermögliche dem User dennoch weiterhin, sich über seine E-Mail-Adresse zu registrieren!

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

Checkliste Formular-Optimierung zum Download

Eine Checkliste zur Formular-Optimierung mit 44 To Dos für mehr Conversions gibt es hier kostenlos zum Download.

Quellen und 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/
//www.konversionskraft.de/tipps/3-geheimtipps-bessere-formulare.html
//www.konversionskraft.de/hintergrunde/antizipation-der-conversion.html

Neue Quellen (2016):

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

  • Send to Kindle
  • http://kKrft.ly/tty
André Morys André Morys ist Gründer und Vorstand der Web Arts AG und beschäftigt sich seit 1996 mit der Conversion Optimierung von Websites und Onlineshops. André Morys ist Dozent für User Experience an der TH Mittelhessen und Autor des Fachbuchs "Conversion Optimierung". Er ist häufiger Sprecher und Moderator auf Konferenzen. /// @morys auf Twitter folgen /// facebook /// Google+

,

25 Reaktionen auf  “Formular-Optimierung Reloaded: 21 Best Practices für mehr Conversion”

Kommentare

  1. RemoF RemoF

    Danke André, super Artikel der mal wieder zwei, drei ungenutzte Optimierungspotenziale auf unserer eigenen Webseite aufzeigt.

  2. Alfons Burtscher Alfons Burtscher

    Sehr gelungener Artikel.
    Wenn sich die Webseitenbetrieber nur an die Hälfte der genannten Punkte halten würde, müsste man sich nicht so oft ärgern.
    Teilweise muss man sich fragen, ob sich überhaupt irgendjemand ein zweites Mal auf bestimmte Webseiten traut.
    Im Durchschnitt liegen geschätzt 70% der Webseiten mit mehr als der Hälfte der genannten Punkte daneben.
    Tolle Zusammenstellung – weiter so.
    Erfolgsgrüße
    Alfons Burtscher
    http://xn--firmengrndung24-6vb.net/

  3. Basti Basti

    Wie verhält es sich mit der Herausforderung, wenn das Label im Input drin steht?
    Grad beim Namen sieht der Kunde in der Kontrolle vor dem Abschicken nicht mehr, ob Vor- und Nachname im richtigen Feld drin stehen, wenn das Label wegen dem Value verschwindet.
    Auf der anderen Seite ist das eine gute Möglichkeit um Platz zu sparen.

  4. Alexander Holl Alexander Holl

    Super wirklich tolle Zusammenstellung Andre,
    Darf ich hier mal was für ein Seminar verwenden?
    Beste Grüße
    Alexander

    PS. Natürlich nur unter Nennung der Quelle 🙂

  5. André Morys André Morys

    Hallo Basi, aus diesem Grund ist die Verwendung von Labels in dem Feld nur bei sehr kleinen Formularen empfehlenswert. Wunderlist hat eine schöne Lösung bei der kleine Icons noch die Bedeutung erhalten auch wenn das Feld schon befüllt ist.

  6. André Morys André Morys

    @Alexander: Aber gerne, Du darfst das! 🙂

  7. Alexander Holl Alexander Holl

    Danke Andre 🙂

  8. Filip Filip

    Hi André,

    sehr schöner Artikel! Ein Beispiel hätte ich noch anzumerken und mich würde deine Meinung dazu interessieren.
    Und zwar geht es um Formulare, die wie Lückentexte aufgebaut sind, z.B. wie bei http://www.torbenleuschner.de/#kontakt

    Hast du Erfahrungen damit?

    Viele Grüße,
    Filip

  9. André Morys André Morys

    Hi Filip,

    Erfahrungen aus A/B-Tests oder Eyetracking habe ich nicht. Es ist aber naheliegend, dass diese Art der Gestaltung zwar sehr kreativ/dialogisch ist – allerdings auch nicht besonders erwartungskonform. Es dauert eine Weile, bis der Nutzer verstanden hat, welche Angaben wo benötigt werde , im Zweifel muss der ganze Text gelesen werden.

    Für kleine Formulare, die kreativ wirken sollen, ist diese Form also OK – wer wirklich auf Performance achtet, der sollte so eine Form genauer analysieren.

    Ich hoffe, die Einschätzung ist ausreichend 🙂

    VG André

  10. Filip Filip

    Hi André,

    vielen Dank, vollkommen ausreichend! 🙂

    Dann werde ich das bei Gelegenheit einfach mal testen, denn ich finde den Ansatz nicht schlecht.

    Gruß,
    Filip

  11. Torben Leuschner Torben Leuschner

    Hi Filip,

    da Du mich schon so nett verlinkt hast… 😉

    Bislang habe ich noch keine Rückschlüsse gezogen, ob diese Art der Formular-Darstellung nun besonders gut performed oder nicht. Dazu fehlt mir auf meinem Portfolio der Traffic und die Vergleichswerte. Ich kann nur sagen, dass ich rein subjektiv mit der Anzahl an Konversions/Anfragen durchaus zufrieden bin.

    Ich sehe es aber genau wie André; ich bin das Experiment mit dem Inline-Formular eingegangen, da die Besucher meines Portfolios überdurchschnittlich internetaffin sein dürften und die Anzahl an Feldern recht überschaubar ist. Wären es beispielsweise doppelt so viele, wäre das Ergebnis meines Erachtens schon wesentlich nutzerunfreundlicher als eine klassische Darstellungsform.

    Zusätzlich muss ich erwähnen, dass ich beim Anlegen der responsiven Variante des Formulars durch die Inline-Darstellung auf wesentlich mehr Probleme gestoßen bin als üblich. Wer also auch auf mobile Besucher angewiesen ist, sollte auf jeden Fall zur klassischen Version greifen.

    Beste Grüße,
    Torben

  12. Yann Yann

    Wie sollte ein Feld für internationale Telefonnummern ausschauen?
    Beispiele 4) und 14) zeigen Vorwahl + Telefon
    Beispiel 5) wiederum 1 Feld ?

    Hast Ddu Erfahrungen damit?

  13. André Morys André Morys

    Hallo Yann, sofern die Plausibilität der Nummer intelligent geprüft werden kann, ist ein Feld effizienter für den Nutzer. Das Eingabeformat kann z.B. inline angezeigt werden.

  14. Andreas Herrmann Andreas Herrmann

    Definitiv einer der besten Artikel über Konversion-Optimierung die ich gelesen habe. Vielen Dank an den Autor! Ich kann allem beschriebenen nur beipflichten und habe auch einige Sachen noch dazu gelernt! Respektvolle Grüße!

  15. Julia Fricks Julia Fricks

    Ein sehr hilfreicher und nützlicher Artikel, danke,

    LG,
    Julia Fricks

  16. Melanie Melanie

    Ein wirklich toller Artikel, den ich gerne ich meine Sammlung für Best Practices aufnehme! Ich kann meinen Vor-Kommentatoren nur zustimmen: Wenn sich nur alle daran halten würden … 🙂
    Vielen Dank dafür!

    Ich habe noch eine Anmerkung zur Markierung von Pflichtfeldern: Wieso nicht an Prinzip 1 (keep it simple) orientieren und bei einer überwiegenden Menge an Pflichtfeldern nur die optionalen Felder markieren?
    Durch die Kennzeichnung der optionalen Felder reduziert man das optische Rauschen noch weiter. Zudem besteht für das bekannte und beliebte Sternchen (*) nicht die Gefahr einer Doppelbelegung, wenn es im weiteren Formular noch zusätzliche Hinweise gibt.
    Mein Kollege hat dies schon einmal bei uns in einem Artikel beschrieben: http://www.usabilityblog.de/2009/11/kennzeichnung-von-pflichtfeldern-in-formularen-wann-man-auf-den-verzichten-kann/

Trackbacks/Pingbacks

  1. […] Formular-Optimierung: 17 Best Practices für mehr Conversion Via: Konversionskraft […]

  2. […] 17 Best Practices für mehr Conversion – Formular-Optimierung ist eigentlich gar nicht schwer. Denn Konversion heißt: Vor dem Bildschirm sitzt ein Mensch und wägt ab, ob der Aufwand, das Formular auszufüllen, sich für ihn lohnt oder nicht. Weiter… […]

  3. […] Wer im ersten Schritt lediglich die E-Mail-Adresse abfragt, kann dies direkt an Ort und Stelle tun und die Newsletter-Anmeldung so in einem Schritt abschließen. Werden mehrere Felder abgefragt, sollten diese inline validiert und Fehler direkt kommuniziert werden – dies spart dem Abonnenten wertvolle Zeit bei der Registrierung. Weitere Tipps zur Gestaltung von guten Formularen gibt es bei  konversionsKRAFT. […]

  4. […] Dieser Artikel wurde erstmals am 9. Juli 2013 auf www.konversionskraft.de unter dem Titel „Formular-Optimierung: 17 Best Practices für mehr Conversion“ veröffentlicht. […]

  5. […] hoffe, dieser Impuls heute war im Vergleich zu den sonst so beliebten “38 Dinge für bessere Blablabla” nicht zu abstrakt und freue mich über […]

  6. […] einem gesonderten Artikel über Formular Optimierung beschäftige sich André Morys bereits mit der Frage, welche Faktoren für ein perfektes Formular […]

  7. […] Weitere Tipps zum großen Feld der Formularoptimierung finden Sie auch in diesem Artikel. […]

  8. […] in der (Formular) Conversion Optimierung wie Andre Morys, die ganz ohne diesen speziellen Trick sehr viel aus Formularen herausholen können. Bei der Optimierung steht man dabei immer vor der Diskrepanz zwischen der benötigten […]

  9. […] die Sie bei der Optimierung eines Formulars beachten sollten, um die Abbruchraten zu senken. Bei konversionskraft.de finden Sie noch mehr […]

Hinterlassen Sie einen Kommentar