So erstellst du benutzerfreundliche Formulare

Julian Ohlenschläger

Julian Ohlenschläger ist Frontend Developer bei der LässingMüller Werbeagentur. Neben Webprojekten initiierte...

Anhand einiger exemplarischen Kontaktformulare von Firmen worüber Neukunden Kontakt aufnehmen können, Kundenregistrierungen bei Onlineshops und Anmeldung bei Social Media-Portalen möchte ich Ideen und theoretische Ansätze aufzeigen um Teile der Eingabe-Prozedur schlanker zu halten und gleichzeitig weniger Frust und Hürden zu generieren.

Ich habe mich bemüht für Web-Entwickler, sowie Marketeer als auch für den Redakteur etwas zu integrieren. Gerne können Sie den Artikel also auch Ihrem Spezialisten weiterleiten und den Sinn und die Möglichkeiten im Einzelfall besprechen. Es ist für jeden Punkt abzuwägen. Testen, lernen und iterieren (LEAP*) lautet somit die Devise.
*Quelle: https://blog.twitter.com/2015/leap-a-guide-to-ab-testing-tips-and-resources

Sehen Sie folgende Gedanken über Formulare nicht als Maß an. Auch ein Standard-Kontakt-Formular wie es bei einem schönen Theme für WordPress mitkommt, kann seinen Zweck erfüllen und gut aussehen. Gerade bei knappem Budget oder einem anderen Focus aber auch eventuell schwer anpassbaren Systemen kann (und muss!) nicht jede Optimierung durchgeführt werden.

Zu Beginn werden einige interessante Ansätze aufgezeigt wie Formulare auch aussehen können.

Natural Language Forms

Eine neue Variante ist die “Natural Language Form”. Statt normalen gelabelten Eingabefeldern werden Auswahlfelder einem ~natürlichen Satzbau nachempfunden. Auch hier kann sich der Bereich dynamisch verhalten wie in folgenden Beispielen verdeutlicht:

Bei der Auswahl von “Angebote” kann anderer Inhalt ausgespielt werden also bei “Projekte”.

Quelle: http://www.staedelmuseum.de

Bei der Auswahl von “email” wird das Email-Feld ausgegeben oder das Telefonfeld.

Quelle: https://prospek.ca/en/contact-us/

Felder Positionierung

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Quelle: https://tympanus.net/Tutorials/NaturalLanguageForm/

Dynamische Felder

Quelle: http://www.theverge.com/tip-us

Eine Idee wäre, das nach Wahl des Grundes hierfür nicht benötigte Inhaltsfelder auch ein- und ausgeblendet werden, wie dies bei obigen Beispiel bereits im Einsatz ist.

Seit einiger Zeit ist “Tabbed Content” – Inhalt der sich bspw hinter Tabs befindet – auch für SEO kein Problem mehr.
Quelle: https://www.searchenginejournal.com/google-says-now-ok-put-content-behind-tabs/178020/

Felder-Anzahl

Trenne soweit wie möglich die Daten die du für die Registrierung benötigst von den optionalen Feldern. Wie bei einer Datenbank-Normalisierungs-Stufe kann man auch hier überlegen, welche Felder man vereinheitlichen und zusammenfassen kann. Dadurch wird keine weitere Aktipon wie das Drücken der Tab-Taste oder das Klicken der Maus/des Touchpads notwendig um in das andere Feld zu wechseln.

Es kann auch vorkommen, dass man unterwegs auf dem Smartphone gerne Produkte sucht aber den eigentlichen Bestellprozess daheim am Laptop vornimmt, da man dort vielleicht gewillter ist die Kreditkartendaten einzugeben als im öffentlichen WLAN oder im Blickwinkel von anderen Fahrgästen im Nahverkehr. Den Prozess des Einloggens oder die Bestellung zu einem späteren Zeitpunkt anzubieten, z.B von Zuhause aus, kann hier helfen.

Wie auch bei amazon mit ihrem “1 click”-Button, soll es schnell gehen.

Quelle: https://www.ebay-kleinanzeigen.de/m-benutzer-anmeldung.html

So wundert es auch nicht, dass trotz eventuellen Datenschutzbedenken das Einloggen mit dem eigenen Google-Konto genutzt wird.

Quelle: canva.com

Quelle: twitter.com

Auch Felder die inhaltlich eigentlich getrennt sind aber sinnhaft zusammengehören können unter einer neuen Bezeichnung vereint werden. Bsp: Zum Login gibt es ein Eingabefeld für E-Mail, Telefon oder Benutzernamen – siehe Facebook/Twitter (…)

Quelle: https://twitter.com/?lang=de

Beim Registriervorgang kann für die ordentliche Validierung und das passend öffnende Tastaturlayout zwischen den Feldern auch getrennt oder wie bei Twitter hin- und her geschaltet werden.

Quelle: https://mobile.twitter.com/signup

Achtung: Beachte hierbei dass bei Abhängigkeiten sowie einem Zusammenspiel mit eventuell angebundener Warenwirtschaft- oder anderen Systemen von der Datenbank gewisse Felder benötigt werden können.

Feldüberschrift

Das Label sollte optimalerweise links neben oder oberhalb des Eingabefeldes sitzen. So ist die Wahrscheinlichkeit geringer, dass es beim Scrollen oder Springen durch Sprungmarken, als auch von der Handy-Tastatur, überdeckt wird. Evaluiere deine Seite, eventuell gibt es Social-Media-Icons oder andere mitlaufende Elemente wie einen Rückruf-/Chat-Button der dies überdecken könnte. Android Native Autocomplete-Vorschläge können darüber oder darunter aufgehen je nachdem wieviel Platz diese zur Verfügung haben.

Quelle: Quora.com

Tipp: Schaue dir daher das Formular auch mal mit einem richtigen Smartphone an und emuliere verschiedene Devices.

Alternativ: Browser-Screenshots mit Browserstack.

Wenn es links neben den Feldern stattfinden soll, dann am besten den Text rechts ausrichten, so dass er bei unterschiedlich langen Texten direkt neben dem Eingabefeld ist. Achte bei der Position auch auf die Sprache-Umschalt-Funktion deiner Webseite.

Achtung: Andere Länder haben womöglich anders lange Labels und können zu anderen Abständen und oder Umbrüchen führen.

Achte bei einer responsiven Website darauf, dass das label nicht unterhalb der Eingabemaske rutscht, insbesondere wenn du den Text rechts positioniert haben solltest. Darunter würde es von der Smartphone-Tastatur verdeckt werden können beim Scrollen. Am leichtesten für das Auge ist der geringste Abstand von Bezeichnung zur Eingabe.

Placeholder

Der Placeholder ist nicht als Feld-Bezeichnung geeignet und sollte als Feld-Eingabe-Beschreibungshilfe nur unterstützen.

Stelle dir mehrere Felder ohne Label nur mit Placeholder-Text vor, indem jedes Feld bereits ausgefüllt wurde. Weisst du noch genau was zu was gehört?

Quelle: dropbox.com

Zudem könnte es passieren, dass Felder mit Placeholder weniger beachtet werden da diese bereits ausgefüllt aussehen.

Felder Positionierung

Nicht nur für Mobilgeräte, auch auf dem Desktop ist eine Aufteilung der Spalten nicht immer notwendig. In einigen Fällen kann es auch angenehmer sein dies von oben nach unten zu lesen und zu navigieren. Andernfalls springt das Auge im Zick-Zack. Der rechte Platz auf dem Desktop kann auch für Hinweisfelder (wenn notwendig) genutzt werden. Dies dann nicht unbedingt von vornherein wie im Beispiel von Baidu.

Eine kompakte visuelle Darstellung ohne große Abstände hat sich für mich subjektiv als besonders angenehm gezeigt.

Quelle: http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

Eine gewohnte Reihenfolge der Felder ist ebenfalls sinnvoll. Dies kann sich in manchen Ländern unterscheiden, in Deutschland befindet sich das Feld “Plz” meinst links neben der “Stadt”.

Validierung

Ein Placeholder der als Input-Mask dient um eine visuelle Validierungs-Hilfe zu realisieren, kann auch erst bei Klick in das Feld initialisiert werden. So kann bspw. bei der Eingabe der Kreditkartennummer optisch nach jeder vierten Ziffer getrennt werden, sodass man dies bei der Eingabe besser abgleichen kann. Beachte, dass andere Eingabemethoden wie das Kopieren und Einfügen oder Spracheingaben auch möglich sein können. Zur eigenen Validierung des Codes kann das Formular auch Stresstests unterzogen werden wie hier mit Gremlin.js.

So sieht ein Formular aus, was in kurzen Intervall beschrieben wird:

Weitere Alternativen:

http://www.webpagetest.org/
https://mochajs.org/
https://jasmine.github.io/

Personalisierung

Beispiel: Email
Bei verteilter Leserschaft wäre es denkbar eine Segmentierung vorzunehmen und gezielte Postleitzahlenbereiche der Newsletter-Empfänger anzusprechen, die beim Klick auf die jeweilige Variante der Landingpage landen (Quelle: http://kb.mailchimp.com/lists/segments/all-the-segmenting-options)

Achtung: Beachte hierbei, dass auch wenn der Empfänger in einer Stadt wohnt aber nicht dort geboren wurde, noch lange nicht die dortige Dialektgruppe oder Sprache verstehen muss.
Beispiel: Stuttgart und Schwäbisch. Frankfurt a. M. und Hessisch usw.

Die Qualität der Daten ist hierbei wichtig.
Beispiel: Anzeigenschaltung
Über Facebook Ads können eine Reihe von Targeting-Möglichkeiten genutzt werden um gezielt auf bestimmte Seiten / Bereiche zu verlinken.

Quelle: https://de-de.facebook.com/business/a/online-sales/ad-targeting-details

Quelle: facebook.com

Wie wäre es mit einem Gruppen-Rabatt-Code für Facebook-”Freunde” von Personen mit bevorstehendem Geburtstag für Ihr Restaurant ?

Achtung: Bei Gewinnspielen kann es von Vorteil sein dass das Produkt zu der Zielgruppe passt. Technikgeschenke wie Ipads werden sicherlich auch von vielen ausgefüllt die keine potentiellen Kunden sind.

  • Geburtstage / Freunde von Geburtstagen -> Gratis (ab x Freunden)
  • Neue Arbeitsstelle -> Mit Kollegen essen -> Firmenrabatt
  • Mittagspause (10-13 Uhr) -> Rabatt
  • Wissen -> Wussten Sie dass (…). Mehr Weisheiten zu / in

Quelle: https://www.google.de/ads/displaynetwork/manage-your-ads/targeting-tools.html#tab=contextual-targeting

Quelle: https://ok.ru/

Je nach Zielgruppe kann es auch sinnvoll sein, mal ein Blick auf weitere Suchmaschinen und soziale Netzwerke zu werfen. Russisch-sprechende (auch in Deutschland lebende) verwenden bspw “odnoklassniki” statt- oder zusätzlich zu Facebook oder Yandex als Suchmaschine. Asiaten hingegen womöglich Baidu.
Beispiel: CMS
Es gibt auch einige Möglichkeiten personalisierten Inhalt in Ihrem CMS zu erstellen, in der Theorie wären das wie folgt u.a.:

  • Location – city, country, region
  • Device – iPhone, iPad, Android phone/tablet, Windows, Mac, Linux
  • Search keywords – did they arrive while searching for shoes or shirts?
  • Visitor frequency – First , second, third, fifth time visitor?
  • Date and time of day, proximity to payday
  • Referring URL – where did they come from?
  • Customer history – have bought before, what, how much did it cost?
  • Sessions behaviour – navigation clicks, page views

Achtung: Wägen Sie den Sinn und Einsatz aber gut ab, den Performance-Einbußen der Webseiten oder nervige Popup-Fenster mit der Abfrage der Location kann schnell stören.

Quelle: https://conversionxl.com/how-to-use-personalized-content-and-behavioral-targeting-for-improved-conversions/

 

Felder

Nun folgen einzelne Bereiche des Formulars mit den Optimierungsmöglichkeiten.

Betreff / Grund / Subject

 

 

Feldposition

Eine mögliche Optimierung wäre welche Felder welche Auswahl benötigt (siehe hierzu auch: Dynamische Felder in Teil 1).

Benötige ich wie in diesem Beispiel für Produktunterlagen die hier postalisch zugestellt werden (nicht als Download / PDF) ausser der Lieferadresse Felder wie Geburtsdatum, Telefonnummer oder die Email-Adresse ?
Ändern sich vielleicht auch die Definition was einer Pflichteingabe entsprechen sollte ? Oder gar andere Felder ? Einmalige Bestellung / Bei Neuerscheinung dauerhaft auf Widerruf als Radiobuttons.
Wann sind sie zu erreichen bei Zustellung ? Nachbar Abgabe ? Stockwerk ? Besonderheiten bei Lieferung Fahrstuhl. Brauche ich ein Nachrichtenfeld als Pflichtfeld wenn ich nur die Infobroschüre haben möchte ?

 

Anrede

Wie spreche ich Sie an ?

Quelle: MailChimp.com (Englisch)

Quelle: WordPress Backend (Deutsch)

IP-Basierende Abfragen ermöglichen umgangssprachlichen Context und könnten gemacht werden um so geo-basierenden Bezug herzustellen. Ob der Aufwand dies Wert ist, sollte man überdenken.

Ein “Gude” könnte Personen aus Hessen ansprechen, wenn dies thematisch und Zielgruppengerecht ist.

Wer dies testen möchte, findet hier einige Ansätze:

GeoIP Products


http://wordpress.stackexchange.com/questions/228628/location-based-content
https://wordpress.org/plugins/geotargeting/

http://freegeoip.net/json/?q=xx.x.xx.xxx
{“ip”:”xx.x.xx.xxx”,”country_code”:”DE”,”country_name”:”Germany”,”region_code”:”BW”,”region_name”:”Baden-Württemberg Region”,”city”:”Stuttgart”,”zip_code”:”70000″,”time_zone”:”Europe/Berlin”,”latitude”:xx.xxxx,”longitude”:xx.xxxx,”metro_code”:0}

Achtung: Bei Mobile kann dies zu starken Abweichungen kommen, so dass eine Zuordnung nicht sinnvoll sein kann.

So wurde eventuell bisher das männliche Geschlecht anders als das weibliche Geschlecht in der E-Mail angesprochen oder die E-Mail stereotypischer aufgebaut werden. Vielleicht auch andere Farben gewählt, andere Bilder oder sei es nur die Anrede die vom Geschlecht abgeleitet wurde. Die herkömmlichen Geschlechter-Auswahl muss nicht zwingend Rückschluss darauf geben, welche Attribute die Zielpersonen ansprechen.

Quelle: yahoo.com

Bei einer Umfrage in der UK wurden über 25 Vorschläge vorgestellt die ein Geschlecht beschreiben.

Ein Ausschnitt hiervon zeigt die Vielfalt:

  • Girl
  • Boy
  • Tomboy
  • Gender-fluid
  • Agender
  • (…)

Die ganze Liste können Sie auf folgende Url auf englisch nachlesen:
Quelle: https://blog.surveygizmo.com/how-to-write-survey-gender-questions

Dies wird aktuell (Stand 19.1.2017) bereits bei großen Webseiten berücksichtigt.
Ein Beispiel hierfür ist Facebook, wo dies bereits 2014 in einem Beitrag öffentlich Stelle genommen wurde.

Quelle: https://www.facebook.com/photo.php?fbid=567587973337709&set=a.196865713743272.42938.105225179573993&type=1

Das Registrierungsform bietet diese Optionen nicht, auch eine einfache dritte Auswahl wie eine “non-binary” (Nicht festlegen) nicht an. Auch kann man es nicht abwählen.

Ähnliches gilt übrigens für die akademischen Grade, wie in dessen mehrfacher Benutzung wie z.B. “Dr. prof. Med. (…)”.
https://de.wikipedia.org/wiki/Liste_akademischer_Grade_(Deutschland)

In einer Facebook-Gruppe für Psychologie-Studenten habe ich zusätzlich eine kleine Umfrage gestartet.

Das Ergebnis am 13.2.2017 um 20:14 war wie folgt:

Quelle: Facebook.com

Achtung: Eine Analyse nach weiteren möglichen Faktoren wie das Alter der Befragten wurde nicht durchgeführt !

Nach der Registrierung kann man bei Facebook das Geschlecht zwischen “männlich”, “weiblich” und “Benutzerdefiniert” wählen. Bei dessen Auswahl hat man dann die optimale angesprochene Vielfalt. Ein Autocomplete-Eingabefeld erleichtert das Vorgehen.

Quelle: facebook.com

Andere große Anbieter bieten ähnliche Machbarkeiten an oder verzichten gänzlich wie bspw twitter.

Das Geschlecht wird in den überwiegenden derzeitigen Formularen von KMUs allerdings benutzt um eine korrekte Anrede abzuleiten. So wird ein Mann mit “Sehr geehrter Herr” und eine Frau mit “Sehr geehrte Frau” angeredet.

Wegen Sie daher im Einzelfall (des Formulars) ab ob das entsprechendes Klientel / Zielgruppe benötigt – dies hat auch regionale und/oder internationalen Ansichten – eine gewisse förmliche aktive Anrede flächendeckend benötigt oder ob direkt auf das Geschlecht und/oder Anrede verzichtet werden kann.

Wird dies benötigt, gibt es noch andere Ansätze für eine optimale Anrede in der vom Formular generierten E-Mail.

Liegen bereits keine Daten von vorherigen Tracking/Analyse und Pixel vor, wäre ein UX-Optimiertes Feld sinnvoll.
Achten Sie hierbei darauf dass bei einem Dropdown-Feld ein weitere Klick hinzukommt und je nach Aufzählung Möglichkeiten ein scrollen hinderlich sein kann.

Um die minimalen optimalen Anforderungen zu erfüllen, wäre es daher sinnvoll zwischen “Keine Angabe” / Männlich und Weiblich zu unterscheiden. Somit kann keine Aussage getroffen werden. Bei einer bspw Bewerbung müsste man sich somit also auch direkt nicht festlegen, wenn man dies nicht möchte. Besser wäre allerdings direkt darauf zu verzichten.

Hier einige weitere Ansätze zur Erhebung der Daten:
Beispiel
Der Name kann(!) auf das Geschlecht schließen, aber wie oben erwähnt kann sich “der” Empfänger davon nicht angesprochen fühlen.

Hierfür gibt es einige Datenbanken (pro Land) die beispielsweise der Vorname “Peter” als Mann erkennen und eine “Julia” als Frau. Dies funktioniert teilweise sogar mit der E-Mail wenn entsprechende Namen vorkommen.

Testen Sie dies gerne mal unter folgenden Urls:
Quelle: https://www.npmjs.com/package/gender-detection

Quelle: sex/gender
https://html.spec.whatwg.org/multipage/forms.html#autofill

Bei Newslettern und einer überschaubarer Nutzerschaft wäre ebenfalls denkbar, eine eigene Anredezeile in Mailchimp zu definieren und nur wenn diese nicht existiert die Daten abfragen.

So kann gezielt die E-Mail personalisiert werden und auch Umgangssprache oder Spitznamen oder Fragen nach etwas was man vom letzten Telefonat weiß einbinden. “Wie geht es Ihrem xyz ? Ist Ihr/e xyz wieder gesund / Erkältung” etc.

http://kb.mailchimp.com/merge-tags/all-the-merge-tags-cheat-sheet

Zusätzliche Informationen hierzu:
Quelle: http://www.knigge.de/themen/kommunikation/briefe-11616.htm

Gedanke: Captcha-ähnlich könnte ein normales Bild beschrieben werden, nach dem Spiegel-Effekt in der Psychologie ließe sich dann möglicherweise gezielter auf den Charakter schließen. Aber das ist sicherlich ein etwas unkonventioneller Gedanke 🙂

 

Ihr Name

Felder-Anzahl
Statt mehreren Eingabefeldern für ein später zusammengefassten Wert wie womöglich verschiedene Vornamen, Mittelname, Titel und Nachnamen für den Namen kann hier eine Vereinfachung der Felder ermöglicht werden und zu einem werden.

Beispiel: “Peter Alexander Ferdinand Maximilian Neumayer”-
Auch interessant hierzu: https://css-tricks.com/peoples-names-break-websites/
Label
Evalierung
Der vollständige Name kann ebenfalls als Geschlecht (wenn notwendig!) evaluiert werden, ggf werden hier sogar eher noch weitere Name eingebracht.

Nachteil
Sollten Sie gezielt bei der Du-Form – wie gerade im englischen Raum üblich – den User begrüßen wird es hierbei schwierig ohne bei der Reihenfolge der Eingabe und dem Vor- und Nachnamen zu raten und den Namen technisch aufzuteilen.

 

PLZ, Wohnort

Bei Bau- oder Supermärkten wird man manchmal nach der PLZ gefragt. Aus Marketingsicht hier sinnvoll, denn so kann das Einzugsgebiet ermittelt werden. Eine Verteilung von Prospekten kann somit vermehrt oder weniger in den Gebieten getätigt werden. Auch der Bau eine weitere Filiale könnte zu einer Entscheidung womöglich – wenn auch im kleinen Teil – beitragen.
Quelle: http://zuhause.chip.de/an-der-kasse-nach-der-postleitzahl-gefragt-werden-das-steckt-dahinter_57356

Auch bei einem Kontaktformular könnte dies sicherlich zur Auswertung beitragen.

Wenn das Dorf keine eigene Postleitzahl hat, kann man auch die der dazugehörigen Stadt verwenden, trotzdem kann es Wohnorte geben die keine Postleitzahl haben. Nicht nur die Tillyschanze (Münden) hat keine Postleitzahl und wurde da ansonsten der behördliche Computer sonst die Annahme verweigerte zu 00000 🙂
Quelle: https://de.wikipedia.org/wiki/Tillyschanze_(M%C3%BCnden)

Für Schweizer-Adressaten wird bspw das “CH” vor die Postleitzahl gestellt.

Auch spanische Adressdaten können einige Zusätze aufweisen da oft keine Namensschildern an Türe oder Klingelschilder zu finden sind, alle mögliche Informationen dazu um die Haustüre zu finden. Bei der Postleitzahl (falls vorhanden) kann zur Validierung auch Buchstaben wie „E-“ davor. Oder „C.P.“ was soviel wie codigo postal (übersetzung) bedeutet.

Wenn es ein Postfach ist, dann heisste es Departamento postal Nº.

Eine Abfrage mit vielen Einzelfeldern wie Straße, Hausnummer, Plz, Wohnort ist unübersichtlich, wirkt überladen und benötigt eine hohe Aktionsrate (Tab, Tab, Tab, zurück).
Aus diesem Grund macht eine direkte postalische Anschrift durchaus Sinn.
Validierung
Je nach Validierung wäre eine Vereinfachung der Felder auch sinnvoll.
Es gibt hierfür spezielle Autofill-Libraries die bei Eingabe direkt Vorschläge machen und die Adresse vervollständigen können.
Die Daten basieren überwiegend auf Google Maps oder OpenStreetMaps.

Quelle: https://community.algolia.com/places/documentation.html
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=de

Platzierung

Die Adresse zählt zu den Daten die man womöglich weniger gerne mitteilt als andere, abgesehen von Ausnahmen mit positiven Erwartungen wie Essenslieferant-Bestellungen oder gratis T-Shirts zur Belohnung.

So wäre es bei gerade bei mehreren wichtigen Feldern vorteilhaft für die Conversion die Reihenfolge sinnvoll zu setzen. Die Adresse kann mit Hilfe von einer Multi-Step-Form sowie einem Fortschrittsbalken in einem späteren Bereich abgefragt werden. Falls es sich um einen Login handelt, können diese Informationen natürlich auch später im Profil nachgetragen werden.
Bei der WordPress-Registrierung – im folgenden Screenshot – reichen erstmal die Grunddaten aus um den Opt-In anzustoßen, das Profil kann man optional direkt im Anschluss weiter ausfüllen oder später – wenn man möchte.

 

Quelle: wordpress

Psychologisch sicherlich interessant wie die Bereitschaft für das ausfüllen von optionalen Feldern im Gegensatz zu Pflichtfeldern aussieht und ob so auch falsche Eingaben verzichtet werden kann. Kleiner Test, erinnern Sie sich wie oft Sie eine “0” als Telefonnummer eingegeben haben oder eine Wegwerf Email-Adresse weil Sie gezwungen waren etwas einzugeben ? Wie haben Sie sich beim Versuch dies zu umgehen gefühlt und wie oft haben Sie Daten mit Freude ausgefüllt obwohl Sie es nicht mussten ?

Weiteres hierzu: https://de.wikipedia.org/wiki/Verlustaversion

Pick-And-Carry ist ebenfalls eine gute Variante, hierbei kann man eine Filiale in seiner Nähe auswählen wo das gekaufte für Sie vorrätig gehalten wird, sodass eine Adresse nur eingegeben werden muss, wenn man keine in der Nähe hat oder dies nicht möchte.

Multi-Step-Form
Quelle: http://parsleyjs.org/doc/examples/multisteps.html
Fortschrittsbalken (…)
Datenschutz
Bedenken Sie bei brisanten Daten unbedingt den Datenschutz und die sichere Aufbewahrung.
Eine zusätzlicher SSL Verschlüsselung (Bspw LetsEncrypt) gibt es ebenfalls bei vielen Hosting-Anbietern.

https://html.spec.whatwg.org/multipage/forms.html#autofill

Quelle: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=de

Beachten Sie Eine Validierung im Browser sowie später per Server sind notwendig.

Um Missverständnisse zu vermeiden ist hier ratsam einen kurzen kleinen Text dazu zu schreiben oder mit Symbolik zu verdeutlichen was benötigt wird. Man sollte nicht groß nachdenken müssen was hier gebraucht wird.

Hier spontan einige möglichen Varianten:

  • Herkunftsland von der Formulare Ausfüllenden Person
  • Herkunftsland des Protagonisten bzw der im Auftrag handelten Person
  • Land wo möglicher Versand hin geht
  • Land wo mögliche Firma sitzt
  • Mehrere Standorte möglich
  • Land an welches das Formular/Anfrage geschickt werden soll
  • Land welches Teil der Anfrage wäre (Produktionsstätte)

Tipp: Beachten Sie dass das Land nicht gleichzusetzen ist mit Sprache bei einem Dropdown-Feld.
Feldauswahl
Ich habe bereits die passende tld aufgerufen, bspw de für deutschland und abgesehen von trendigen Ausnahmen wie .io wird mir auch automatisch
die deutsche sprache angezeigt. Theoretisch könnten die Länder nun auf deutschsprachige gefiltert werden ? Oder ist es überhaupt notwendig ?
Kann wenn es sein muss dann nicht bereits Deutschland vorausgewählt sein ? Die Reihenfolge der Wahrscheinlichkeiten anzupassen wäre auch einen Test wert.
Für die alphabetische Suche dann allerdings ebenfalls darunter auswählbar. Beispiel: Land 1 2 3 —- Land A B C
Mit der GeoIp oder nach der jeweiligen Sprache (WPML) ausgewählt.

Email

Validierung
Einige Top-Level-Domains (TLDs) – also das Ende der Domain, hinter dem letzten Punkt – haben zwei bis drei Zeichen, wie bspw:

  • .de
  • .com
  • .net
  • .org
  • .gov

Es gibt allerdings auch andere längere TLDs wie z.B.

  • .info
  • .blog
  • .chat
  • .berlin

So dass das die bisherige “Standard”-Validierung oder definierte Pattern (Angabe wie der korrekte Aufbau der erlaubten Eingabezeichen ist) hierfür nicht ausreichen könnten.

Quelle: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern4

Auch habe ich schon Validierung gesehen wo eine TLD nicht eingegeben werden musste. Das Formular begnügte sich mit „info@domain“ ohne „.de“ am Ende.
Hier kann ein Test im Hintergrund auf vorhanden E-Mail von Vorteil sein.
Eine doppelte Eingabe von E-Mail Feldern zu Abprüfung auf Schreibfehler kann man mit dieser Überprüfung auch vernachlässigen. Gerade bei langen E-Mail-Adressen ist die Chance groß dass diese nur kopiert und eingefügt wird statt erneut abgetippt.
Optimal hierfür ist eine Überprüfung beim tippen. Gibt man “max.mustermann@g” ein, folgen Vorschläge die man mit der Cursortaste nach rechts oder Tab schnell vervollständigen kann und so wird automatisch “@googlemail.com” dran gehängt.
Eine weitere praktische Vorgehensweise ist eine Validierung der Domain. So wird bei Tippfehlern bei “gm.xnet” oder ähnlich direkt “gmx.net” vorgeschlagne und ggbf bei Klick direkt gefixt.

Ein schönes Beispiel verwendet Facebook indem es in einem Feld eine Handynummer oder E-Mail-Adresse abfragt. Zwei Nachteile hat dies allerdings, denn mobile kann bei einem Eingabefeld mit dem Typ „Nummer“ auch das passende Keyboard mit Zahlen aufgehen statt dem Standard.

Quelle: facebook.com

Des Weiteren lassen einige Webseiten einige Email-Adressen mit dem Namen „Info“ nicht zu.
Wenn dies die derzeit einzige Geschäfts Email ist, kann dies ebenfalls eine Hürde darstellen.
Vorstellbar ist dass es sich hierbei um einen Schutz handelt.

Eine Zeitlang gab es @googlemail und @gmail.
Es ist dasselbe Google Konto, wird bei vielen Anbietern als verschiedene behandelt.
Bspw habe ich bei bei der Dropbox somit aus versehen zwei Konten angelegt und verwechsle es beim Login immer wieder. So wäre eine Alias-abfrage interessant.
Falls Sie vorhaben Cold Leads zu generieren die Sie auch nutzen wollen, könnten Sie auch gegen bekannte Einweg-E-Mail-Adressen oder Wegwerf-Email-Adressen validieren. Diese werden allerdings regelmäßig erweitert.

Telefon

Beachten Sie dass durch immer günstig werdende Flatrates die Anzahl der Festnetztelefone abnimmt. Bei steigender Zahl der Smartphone-Nutzer kann es aber auch vorkommen dass man wie ich seine eigene (neue) nicht auswendig weiss. Daher müsste man hier auf dem Gerät den Browser kurzfristig verlassen um nachzuschauen im Adressspeicher.
Womöglich möchte man auch keinen telefonischen Kontakt oder teilt sich den Anschluss. Auch aus Sicherheitsgründen wie bei einer Geheimnummer kann es schwierig sein. Lassen Sie die Kontaktmöglichkeit wenn möglich variable.

Alter

Das Alter wird eher im Profil als im Checkout abgefragt.

Das Feld kann als normales Eingabefeld, Nummernfeld oder wenn man den Geburtstag abfragt auch als Datumsfeld vorkommen.
Aufwendig wird es allerdings wenn die Felder getrennt werden und man drei Selectbox-Felder anklicken und auswählen muss.Um einen Bereich abfragen kann es auch Radiobutton oder Dropdown erscheinen.

Wofür benötigt man dies ?
Bei ValveTM wird dies obwohl die Daten im eingeloggten Profil gespeichert sind immer wieder bei jugendgefährdenden Artikeln abgefragt dass man von Google/Foren etc nicht direkt auf einem Artikel landet der vielleicht verstörende Bilder enthält.

Quelle: http://steamcommunity.com/discussions/forum/10/846940248118585609/

Das Alter abfragen kann aber auch für eine Segmentierung zu Marketingzwecken genutzt werden. Ist dies der Fall kann dies auch durch statistische Auswertung des Vornamens passieren. Kann sehr ungenau sein, aber dies wiederum kann man auch eine wiederholte Validierung vornehmen. Testen und optimieren.

Testen es gerne mal hier:
https://cebus.net/de/age.php

Wird das Alter in Form eines Geburtsdatum abgefragt, dann wäre eine Erklärung gut. Bekommt man an dem Tag ein Geschenk in Form von Guthaben/Prozenten ?

Das lange Scrollen gerade beim Jahr kann die Stimmung runterziehen.
Wir haben 2017, ich bin 1984 geboren. Das sind 33 Jahre, bei einem kleinen Display wo vielleicht 10 Jahre zu sehen sind, muss ich lange scrollen. Und ich bezeichne mich noch als jung. Werfen Sie mal ein Blick in Ihrer Auswertung.

Der derzeit statistisch älteste Mensch ist 145 Jahre alt und wurde 1870 geboren. Ich vermute mal dass er sicherlich mit seinem Alter bereits Schwierigkeiten hat sich im Internet zu registrieren 🙂 Gesundheit !

Quelle: tumbler

Die ein oder andere Werbung zeigt dass man für seine Kinder bereits Accounts anlegen kann, ein weitere nicht durchschnittlicher Fall aber bin gespannt auf den Test wenn das Kind noch kein Jahr alt ist. Oder auf den anstehenden Geburtstermin als Validierung.

Quelle:
https://login.yahoo.com/account/create
http://www.stern.de/gesundheit/gesundheitsnews/aeltester-mensch-der-welt-145-7030026.html

https://de.wikipedia.org/wiki/Liste_der_%C3%A4ltesten_Menschen#.C3.84lteste_Menschen_weltweit

Vielen Dank für das lesen meines ersten Artikels. Ich hoffe es war das ein oder andere für Sie dabei.

LG !

Julian Ohlenschläger

Julian Ohlenschläger

ist Frontend Developer bei der LässingMüller Werbeagentur. Neben Webprojekten initiierte er das soziale Projekt zur Mitarbeiterfortbildung mit dem Arbeitstitel “Wir packen mit an”. In seiner Freizeit entwickelt er spannende Projekte wie TaschenTeilen.de by Jolution.

Hinterlasse einen Kommentar

1 Kommentar auf "So erstellst du benutzerfreundliche Formulare"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Marina
Gast

Dieser Artikel zum Erstellen von Formularen hat mir richtig geholfen. Danke !

wpDiscuz