happyforms domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php on line 6114
Warning: Cannot modify header information - headers already sent by (output started at /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php:6114) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php:6114) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php:6114) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php:6114) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php:6114) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php:6114) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php:6114) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/functions.php:6114) in /mnt/web402/c2/55/59531355/htdocs/WordPress_SecureMode_01/wp-includes/rest-api/class-wp-rest-server.php on line 1893
{"id":342,"date":"2019-06-25T07:29:56","date_gmt":"2019-06-25T07:29:56","guid":{"rendered":"http:\/\/uxconversion.de\/?p=342"},"modified":"2019-08-04T20:26:49","modified_gmt":"2019-08-04T20:26:49","slug":"teil-1-web-formulare-optimieren-zahlreiche-best-practices-fuer-user-experience-conversions","status":"publish","type":"post","link":"https:\/\/onlineconversion.de\/teil-1-web-formulare-optimieren-zahlreiche-best-practices-fuer-user-experience-conversions\/","title":{"rendered":"Teil 1 – Web-Formulare optimieren: Zahlreiche Best Practices f\u00fcr User Experience & Conversions"},"content":{"rendered":"F\u00fcr die Optimierung von Online-Formularen gelten ein paar einfache, aber wichtige Regeln.<\/p>\n
Formulare sind f\u00fcr deren Benutzer von Natur aus eine H\u00fcrde auf dem Weg zur Conversion. Bereits der Anblick kann Ablehnung und Frust hervorrufen. Um den ersten Eindruck und die User Experience angenehm und sogar zu einem Erfolgserlebnis werden zu lassen, sollte f\u00fcr eine Optimierung jedes Formular auf den Pr\u00fcfstand gestellt werden.<\/p>\n
Noch heute nutzen viele Unternehmen und Website-Betreiber altmodische und un\u00fcbersichtliche Formulare, die sie um viele Conversions bringen.<\/p>\n
Im Folgenden werden 15 Themen und zahlreiche Best Practices zur Optimierung vorgestellt.<\/p>\n
Formulare werden im Internet f\u00fcr die verschiedensten Zwecke verwendet. Hier ein paar Beispiele:<\/p>\n
Die Motivation zur Nutzung unterscheidet sich je nach Anwendungsfall. Die Faktoren, die erfolgreiche Conversions beg\u00fcnstigen sind allerdings universeller. Im Folgenden werden wir diese genauer betrachten.<\/p>\n
Jedes Formular bedarf einer Einleitung, die den Anreiz des Ausf\u00fcllens klar offen legt. Es gilt den Betrachter in k\u00fcrzester Zeit zu \u00fcberzeugen und die gro\u00dfen Fragen im Hinterkopf zu zerstreuen: Was habe ich davon? Welchen Anreiz habe ich um von meiner Rolle als Betrachter zu der eines interaktiven Nutzers zu werden? Also den deutlichen Nutzen aufzeigen, der die M\u00fche rechtfertigt. Je nach Bekanntheitsgrad des Anbieters variiert der Bedarf an Erkl\u00e4rungen. Daraus sollte man nicht schlussfolgern, dass sehr gro\u00dfe Unternehmen getrost auf Erkl\u00e4rung verzichten. Auch diese k\u00f6nnen davon profitieren.<\/p>\n
![http:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/einleitung-facebook-registrierung.jpg<\/a>“ info=“none“ info_place=“top“ info_trigger=“hover“]<\/p>\n2. Anzahl der Felder<\/h3>\nWer kennt es nicht. Es \u00f6ffnet sich eine Seite mit einem langen Formular und schon m\u00f6chte man diese am liebsten gleich wieder verlassen. Hier z\u00e4hlt der erste Eindruck, ob der Aufwand den Nutzen rechtfertigt. Die durchschnittliche menschliche Aufmerksamkeitsspanne liegt mittlerweile nur noch bei ca. 8 Sekunden. Selbst ein Goldfisch liegt mit 9 Sekunden noch dar\u00fcber.<\/p>\nBeispiel<\/strong><\/span>: Exemplarisches Registrierungsformular f\u00fcr einen E-Mail-Anbieter, welches von L\u00e4nge und Struktur eine kognitive H\u00fcrde darstellt.<\/p>\n[image type=“none“ float=“none“ src=“https:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/form-very-long.jpg“ alt=“Very Long Form“ info=“none“ info_place=“top“ info_trigger=“hover“]<\/p>\nBeispiel<\/span><\/strong>: Reduzierte Version des Formulars f\u00fcr einen E-Mail-Anbieter.\n[image type=“none“ float=“none“ src=“https:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/form-register-shorter.jpg“ alt=“Form Register Shorter“ info=“none“ info_place=“top“ info_trigger=“hover“]<\/p>\nEs gilt sich auf die n\u00f6tigsten Abfragen zu beschr\u00e4nken, s\u00e4mtliche Pflichtfelder zu \u00fcberdenken und die bisweilen optionalen Felder nach M\u00f6glichkeit komplett zu entfernen.<\/p>\nM\u00f6chte man aus Betreibersicht m\u00f6glichst viel \u00fcber die Nutzer wissen, ist es abzuw\u00e4gen, wie wichtig die einzelnen Details im Verh\u00e4ltnis zu dem Formularabschluss an sich sind. Ist der Erstkontakt hergestellt, lassen sich weitere Einzelheiten auch sp\u00e4ter in Erfahrung bringen.<\/p>\nBeispiel<\/strong><\/span>: Der Dienst AxureShare reduziert den Erstkontakt der Registrierung auf lediglich zwei Felder.\n[image type=“rounded“ float=“none“ src=“https:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/axure-registrierung.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]Welche Felder besondere H\u00fcrden darstellen, ist durch Tools wie etracker messbar. So l\u00e4sst sich nachvollziehen, wie viele der Seitenbesucher das Formular benutzen, wie viele es davon abgeschlossen haben und welche Bearbeitungsdauer und Abbruchrate die Felder verzeichnen.<\/p>\nInfo<\/strong><\/span>: etracker-Analyse der Abbruchraten<\/p>\n[image type=“rounded“ float=“none“ src=“https:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/etracker-formularabbrueche.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]<\/p>\nIst es nicht m\u00f6glich auf bestimmte Felder zu verzichten, sollte erkl\u00e4rt werden, f\u00fcr welchen Zweck diese ben\u00f6tigt werden.<\/p>\n3. Layout<\/h3>\nEin klares Layout, welches dem nat\u00fcrlichem Lesefluss und einer gleichm\u00e4\u00dfigen Ausrichtung entspricht, verringert die kognitive Arbeit. Das Auge des Betrachters sucht automatisch einfach zu erfassende Strukturen, die dem nat\u00fcrlichen Lesefluss entsprechen. Man hat nur eine sehr kurze Zeitspanne bis die Betrachtung den Nutzer erm\u00fcdet. Eine erh\u00f6hte Zahl an Fixationen der Augen, wie sie durch Eyetracking erfasst werden k\u00f6nnen, strengen das menschliche Gehirn schnell an und es versucht die Arbeit tunlichst zu vermeiden. Es gibt verschiedene M\u00f6glichkeiten den Blick des Nutzers zu lenken und das Erfassen somit zu vereinfachen.<\/p>\nBeispiel<\/strong><\/span>: Formular mit unn\u00f6tig vielen Fixationen, durch ungleichm\u00e4\u00dfige Ausrichtung der Felder.<\/p>\n[image type=“none“ float=“none“ src=“https:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/Form-Ausrichtung.gif“ alt=“Formular ungleichm\u00e4\u00dfige Ausrichtung“ info=“none“ info_place=“top“ info_trigger=“hover“]<\/p>\nL\u00e4ngere Formulare werden durch das Aufteilen in mehrere thematisch passende Bl\u00f6cke \u00fcbersichtlicher. Es bietet sich an, diese auf mehrere Seiten verteilt und mit einer visuellen Prozessleiste darzustellen. Feedback \u00fcber bereits erledigte Schritte gibt hier positive Best\u00e4rkung.<\/p>\nBeispiel<\/span><\/strong>: Mehrseitiges Formular mit Prozessvisualisierung und Feedback \u00fcber den Fortschritt<\/p>\n[image type=“rounded“ float=“none“ src=“https:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/form-mehrseitig.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]<\/p>\nDurch das anf\u00e4ngliche Investieren von Zeit und Arbeit mit leichteren \/ interessanteren Aufgaben (z.B. Kalkulator zum Berechnen einer H\u00e4userd\u00e4mmung), kann die Hemmschwelle f\u00fcr letzte gr\u00f6\u00dfere H\u00fcrden, wie das Ausf\u00fcllen ausf\u00fchrlicher Kontakt- oder Zahlungsdaten sinken.<\/p>\n4. Nutzerf\u00fchrung<\/h3>\nAls gute F\u00fchrung der Augen, dient auch das Hervorheben aktiver Felder. Hier ist auch das Aktivieren des ersten Formularfeldes bei Betreten der Seite ein gutes Mittel, dem Betrachter zu zeigen, wo es los geht und durch den blinkenden Balken im Feld wird die M\u00f6glichkeit zur Texteingabe noch offensichtlicher.<\/p>\nBeispiel<\/span><\/strong>: Hier wird nicht nur das Feld hervorgehoben, sondern auch interaktiv durch eine Grafik auf das jeweilige Formularfeld gezeigt.\n[image type=“rounded“ float=“none“ src=“https:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/basecamp-register.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]<\/p>\n5. Kontrast<\/h3>\nEbenso wichtig wie Farben ist der Kontrast. F\u00fcr eine m\u00f6glichst stressfreie kognitive Verarbeitung ist die ausgewogene Abstufung der Farben f\u00fcr Formularfelder und Buttons unumg\u00e4nglich. Umrandung, F\u00fcllung, Schrift und Abst\u00e4nde sollten in einem optimalen Verh\u00e4ltnis zueinander stehen.<\/p>\nBeispiel<\/span><\/strong>: Klarer Kontrast zur Verst\u00e4rkung des logischen Verst\u00e4ndnisses<\/p>\n[image type=“rounded“ float=“none“ src=“https:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/google-form-contrast.jpg“ info=“none“ info_place=“top“ info_trigger=“hover“]<\/p>\nIn Anbetracht der Tatsache, dass fast 10% der m\u00e4nnlichen und knapp 1% der weiblichen Bev\u00f6lkerung unter einer Farbsehst\u00f6rung<\/a> leiden oder sich dieser gar nicht bewusst sind, ist ein eindeutiger Kontrast um so wichtiger.<\/p>\n[button class=“mbn“ class=“navButton“ type=“flat“ block=“false“ size=“small“ href=“\/blog\/teil-2-web-formulare-optimieren-zahlreiche-best-practices-fuer-user-experience-conversions\/“ title=“hier Klicken um Teil 2 zu lesen“ icon=“check-sign“ info=“tooltip“ info_place=“top“ info_trigger=“hover“ info_content=“hier Klicken um zu Teil 2 des Artikels zu gelangen“ shape=“square“ float=“right“]Weiter zu Teil 2 des Artikels [icon type=“chevron-right“][\/button]<\/p>\n","protected":false},"excerpt":{"rendered":"F\u00fcr die Optimierung von Online-Formularen gelten ein paar einfache, aber wichtige Regeln. Formulare sind f\u00fcr deren Benutzer von Natur aus eine H\u00fcrde auf dem Weg zur Conversion. Bereits der Anblick kann Ablehnung und Frust hervorrufen. Um den ersten Eindruck und die User Experience angenehm und sogar zu einem Erfolgserlebnis werden zu lassen, sollte f\u00fcr eine […]<\/p>\n","protected":false},"author":1,"featured_media":344,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[8,6,12,11,10,4,3],"class_list":["post-342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-formular-optimierung","tag-best-practice","tag-conversion-optimization","tag-conversion-optimierung","tag-form-optimization","tag-formular-optimierung","tag-user-experience","tag-ux"],"_links":{"self":[{"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/posts\/342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/comments?post=342"}],"version-history":[{"count":5,"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/posts\/342\/revisions"}],"predecessor-version":[{"id":451,"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/posts\/342\/revisions\/451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/media\/344"}],"wp:attachment":[{"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/media?parent=342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/categories?post=342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onlineconversion.de\/wp-json\/wp\/v2\/tags?post=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}](\"http:\/\/onlineconversion.de\/wp-content\/uploads\/2019\/06\/einleitung-facebook-registrierung.jpg\"){kind=link}