Formulare auf dem Smartphone:
jedes Feld entscheidet über den Abbruch

Am Smartphone entscheidet jedes Feld über den Abbruch

Ein mobiles Formular ist ein Formular, das auf einem Bildschirm von etwa 390 Bildpunkten Breite mit dem Daumen ausgefüllt wird, während die Bildschirmtastatur die untere Hälfte der Anzeige einnimmt. Diese drei Bedingungen, schmale Anzeige, Daumen und Tastatur, unterscheiden es vom selben Formular am Rechner, und aus ihnen folgen alle Regeln dieses Beitrags.

Die Abbruchquote eines Formulars ist der Anteil der Besucher, die mit dem Ausfüllen beginnen und es nicht absenden. Sie lässt sich je Feld messen: Bei welchem Feld hören Besucher auf zu tippen, bei welchem Feld tritt der Fehler auf, nach dem sie die Seite verlassen. Wie diese Messung aufgebaut wird und wie sie sich von einer gestalterischen Einschätzung unterscheidet, beschreibt der Beitrag über das UX-Audit mit Messung der Abbruchstellen. Dieser Beitrag setzt eine Stufe davor an: bei den Eigenschaften der Felder, die den Abbruch auslösen, bevor jemand ihn misst.

Sieben Eigenschaften eines Formulars entscheiden am Smartphone über Abbruch oder Absenden: die Tastatur, die ein Feld öffnet; die Autovervollständigung, die das Gerät anbietet; der Ort und der Wortlaut der Fehlermeldung; die Reihenfolge und die Länge; die Zahl der Pflichtangaben; die Größe der Bedienflächen; und der Test, mit dem der Betrieb das alles prüft. Die folgenden Abschnitte gehen sie in dieser Reihenfolge durch.

Die passende Tastatur je Feld spart Tipparbeit

Die Bildschirmtastatur eines Smartphones hat mehrere Ansichten: Buchstaben, Ziffern mit Satzzeichen, eine reine Zifferntastatur für Telefonnummern und eine Variante mit dem Zeichen @ für E-Mail-Adressen. Welche Ansicht sich öffnet, bestimmt das Formularfeld über zwei Angaben im Quelltext der Seite.

Die erste Angabe ist der Feldtyp. Er sagt dem Browser, welche Art von Inhalt das Feld erwartet: eine Telefonnummer, eine E-Mail-Adresse, eine Zahl, ein Datum, eine Internetadresse oder freien Text. Die zweite Angabe ist der Eingabemodus. Er bestimmt unabhängig vom Feldtyp, welche Tastatur erscheint, etwa eine reine Zifferntastatur für eine Postleitzahl oder eine Kundennummer, die technisch Text ist, aber nur aus Ziffern besteht, oder eine Zifferntastatur mit Dezimaltrennzeichen für eine Menge in Metern. Beide Angaben gehören zum Standard für Webseiten, kosten nichts und werden von den Browsern aller gängigen Smartphones ausgewertet.

Ein Feld ohne diese Angaben öffnet die Buchstabentastatur, und der Besucher wechselt für jede Ziffer einer Telefonnummer die Ansicht. Dazu kommt die Autokorrektur: Bei Namen, Firmennamen, Kundennummern und E-Mail-Adressen wird sie für das Feld abgeschaltet, weil sie dort aus einer richtigen Eingabe eine falsche macht. Für Freitextfelder wie das Anliegen bleibt sie an. Die Weiter-Taste der Tastatur schließlich springt zum nächsten Feld und auf dem letzten Feld zum Absenden; auch das ist eine Angabe am Feld, die der Browser umsetzt.

Die Autovervollständigung füllt bekannte Angaben aus

Die Autovervollständigung ist die Funktion des Browsers oder des Betriebssystems, mit der gespeicherte Angaben des Nutzers, etwa Name, Telefonnummer, E-Mail-Adresse und Anschrift, in ein Formular eingetragen werden, sobald er ein passendes Feld antippt. Am Smartphone ersetzt sie das Tippen von vierzig Zeichen durch einen Fingertipp auf den Vorschlag über der Tastatur.

Damit das funktioniert, muss das Feld dem Browser sagen, welche Angabe es erwartet. Dafür gibt es am Feld eine Kennzeichnung des Zwecks mit festen Bezeichnern: Vorname, Nachname, Firma, E-Mail-Adresse, Telefonnummer, Straße, Postleitzahl, Ort. Trägt ein Feld die Kennzeichnung, schlägt der Browser den gespeicherten Wert vor. Trägt es keine oder eine falsche, rät der Browser anhand der Beschriftung, und oft rät er falsch: Dann landet die E-Mail-Adresse im Firmenfeld, oder es kommt gar kein Vorschlag.

Die Kennzeichnung hat einen zweiten Nutzen. Die Richtlinien für barrierefreie Webinhalte verlangen in ihrer Fassung 2.1 unter dem Kriterium zur Erkennbarkeit des Eingabezwecks genau diese Angabe, damit Hilfsmittel die Felder erkennen und Nutzer mit motorischen oder kognitiven Einschränkungen sie ausfüllen lassen können. Ein Formular, das für die Autovervollständigung gekennzeichnet ist, erfüllt dieses Kriterium nebenbei.

Die Fehlermeldung steht am Feld und sagt, was zu tun ist

Eine Fehlermeldung ist der Hinweis des Formulars, dass eine Eingabe fehlt oder nicht der erwarteten Form entspricht. Am Rechner sieht der Besucher das ganze Formular und findet die rot markierte Stelle mit einem Blick. Am Smartphone sieht er einen Ausschnitt von wenigen Feldern, und eine Meldung, die nicht sagt, wo der Fehler liegt, zwingt ihn, das Formular abzusuchen. Vier Regeln ergeben sich daraus.

Die Prüfung läuft beim Verlassen des Felds

Sobald der Besucher ein Feld verlässt, prüft das Formular die Eingabe und zeigt einen Fehler sofort an, solange das Feld noch im Bild ist. Eine Prüfung erst beim Absenden führt dazu, dass der Besucher nach dem Tippen von acht Feldern zu Feld zwei zurückscrollt. Geprüft wird beim Verlassen, nicht bei jedem Tastendruck: Eine Meldung, die schon nach dem ersten Zeichen einer E-Mail-Adresse erscheint, weil das @ noch fehlt, stört beim Tippen.

Die Meldung steht direkt unter dem Feld

Der Text erscheint unmittelbar unter dem betroffenen Feld, in der Nähe des Daumens und im Blickfeld. Eine Sammelmeldung am Seitenanfang oder neben dem Absenden-Knopf steht am Smartphone mehrere Bildschirmhöhen vom Feld entfernt. Beim Absenden springt die Ansicht zum ersten fehlerhaften Feld und setzt den Eingabefokus dorthin, sodass die Tastatur für die Korrektur bereits offen ist.

Der Wortlaut nennt den Fehler und die richtige Form

„Ungültige Eingabe" sagt nichts. „Die Telefonnummer braucht eine Vorwahl, zum Beispiel 05121 …" sagt, was fehlt und wie es aussieht. Der Text ist kurz, benennt das Feld und gibt ein Beispiel. Farbe allein genügt als Kennzeichnung nicht, weil ein roter Rahmen bei Sonnenlicht und bei eingeschränkter Farbwahrnehmung verloren geht; der Text und ein Symbol tragen die Meldung, die Farbe unterstützt sie.

Eingaben bleiben nach einem Fehler erhalten

Nach einer Fehlermeldung, nach dem Wechsel in eine andere App und nach dem Zurückkehren bleibt stehen, was der Besucher getippt hat. Ein Formular, das sich nach einem Fehler leert, wird am Smartphone kein zweites Mal ausgefüllt.

Reihenfolge und Länge bestimmen die Abbruchquote

Am Smartphone sieht der Besucher das Formular nie ganz. Er weiß deshalb nicht, wie viele Felder noch kommen, und jedes weitere Feld ist eine neue Gelegenheit zum Aufhören. Reihenfolge und Länge werden darum nach drei Grundsätzen festgelegt.

Die Felder stehen in der Reihenfolge, in der der Besucher die Angaben ohnehin im Kopf hat: zuerst das Anliegen, dann die Person, dann der Kontaktweg. Wer das Anliegen zuerst beschreibt, hat etwas investiert und gibt den Kontakt danach eher an. Zusammengehörige Felder bilden Gruppen mit einer Zwischenüberschrift, und jedes Feld steht allein in einer Zeile; zwei Felder nebeneinander, etwa Postleitzahl und Ort, werden am Smartphone zu schmal und verschieben sich bei langen Eingaben.

Hat ein Formular mehr als sechs bis acht Felder, wird es in Schritte geteilt, mit einer sichtbaren Anzeige, in welchem Schritt der Besucher ist und wie viele folgen. Jeder Schritt hat eine Überschrift, die sagt, worum es geht, und die Rückkehr zum vorigen Schritt verwirft nichts. Ein einzelnes Freitextfeld für das Anliegen wächst mit der Eingabe mit, sodass der Besucher seinen Text sieht, statt in einem Kasten von drei Zeilen zu scrollen.

Jede Pflichtangabe kostet Anfragen

Ein Pflichtfeld ist ein Feld, ohne dessen Eingabe das Formular nicht abgeschickt werden kann. Jedes davon schließt die Besucher aus, die die Angabe gerade nicht zur Hand haben, nicht machen wollen oder nicht verstehen, wozu sie gebraucht wird. Die Zahl der Pflichtfelder ist deshalb die Stellschraube mit der größten Wirkung auf die Abbruchquote, und sie wird aus dem Zweck des Formulars abgeleitet.

Für einen Rückruf genügen Name, Telefonnummer und Anliegen; die E-Mail-Adresse bleibt freiwillig. Für ein schriftliches Angebot ist die E-Mail-Adresse Pflicht, die Telefonnummer freiwillig. Beides zugleich als Pflicht zu verlangen, ist der häufigste Fehler in Anfrageformularen, und er kostet genau die Anfragen von Besuchern, die unterwegs nur eines von beiden eintippen wollen. Jede Pflichtangabe trägt eine kurze Begründung unter dem Feld, etwa „für die Rückfrage zum Termin". Angaben, die der Betrieb später ohnehin erfragt, wie Anschrift oder Kundennummer, bleiben draußen oder freiwillig.

Dasselbe gilt für Anhänge. Ein Datei-Upload für Fotos und Pläne hilft der Kalkulation, aber als Pflicht hält er jeden auf, der gerade kein Foto zur Hand hat. Er bleibt freiwillig, und die Bestätigung nach dem Absenden bietet einen Link zum Nachreichen an.

Bedienflächen brauchen Platz für den Daumen

Eine Bedienfläche ist der Bereich, den der Besucher antippt, um ein Feld zu aktivieren, ein Kästchen anzukreuzen oder das Formular abzuschicken. Am Smartphone trifft der Daumen eine Fläche von etwa einem Quadratzentimeter; Flächen darunter werden verfehlt, und ein Fehltreffer auf das Nachbarfeld kostet eine Korrektur.

Die Richtlinien für barrierefreie Webinhalte nennen in ihrer Fassung 2.2 eine Mindestgröße von 24 mal 24 Bildpunkten für Bedienziele oder einen entsprechenden Abstand zu den Nachbarn. Für die Bedienung mit dem Daumen sind Eingabefelder und Schaltflächen in der Praxis höher, mindestens so hoch wie eine Taste der Bildschirmtastatur, und haben Abstand zueinander. Drei Stellen verdienen besondere Aufmerksamkeit:

• Auswahlkästchen und Optionsfelder: die gesamte Beschriftung ist antippbar, nicht allein das Kästchen von wenigen Millimetern
• Auswahllisten und Datumsfelder: sie nutzen die Auswahl des Betriebssystems, die für den Daumen gebaut ist, statt einer eigenen Nachbildung, die am Rechner entworfen wurde
• Die Absenden-Schaltfläche: sie ist breit, steht allein, ist nach dem letzten Feld ohne Scrollen erreichbar und hat keinen Knopf zum Zurücksetzen neben sich, der das Formular mit einem Fehltreffer leert

Die Telefonnummer im Formularkopf oder in der Bestätigung ist ebenfalls eine Bedienfläche: Wer am Smartphone merkt, dass er lieber anruft, soll das mit einem Fingertipp können. Wie die Nummer dafür eingebunden wird, zeigt der Beitrag über die Telefonnummer auf der Website.

Der Test braucht ein echtes Gerät in der Hand

Die verkleinerte Ansicht im Browser am Rechner zeigt, wie das Formular bei schmaler Breite umbricht. Sie zeigt nicht, welche Tastatur ein Feld öffnet, ob die Autovervollständigung anspringt, ob die Tastatur den Absenden-Knopf verdeckt und ob eine Bedienfläche unter dem Daumen trifft. Diese vier Fragen beantwortet nur ein Smartphone in der Hand.

Getestet wird auf Geräten verschiedener Hersteller und Betriebssysteme, weil Tastaturen, Autovervollständigung und Datumsauswahl sich zwischen ihnen unterscheiden. Getestet wird mit einer Hand, mit eingeschalteter Autokorrektur und mit gespeicherten Kontaktdaten im Gerät, weil das die Bedingungen der Besucher sind. Und getestet wird der ganze Weg bis zur Bestätigungsseite: Was steht dort, ist die Anfrage mit ihrem Inhalt wiederholt, und gibt es einen Weg zurück zur Website?

Der Test am Gerät findet die Ursachen; die Messung der Abbrüche je Feld zeigt danach, ob die Behebung gewirkt hat. Beides gehört zusammen: Ohne Messung bleibt offen, welches der korrigierten Felder den Unterschied gemacht hat, und ohne Test am Gerät zeigt die Messung einen Abbruch, dessen Grund niemand sieht.

Die Prüfung läuft in sechs Durchgängen

Ein bestehendes Formular wird Feld für Feld geprüft, ohne dass es neu gebaut werden muss. Sechs Durchgänge am eigenen Smartphone decken die Stellen ab, an denen Besucher abbrechen.

1. Tastatur je Feld: Jedes Feld antippen und notieren, welche Tastatur erscheint; Ziffernfelder ohne Zifferntastatur und Namensfelder mit Autokorrektur sind Befunde.
2. Autovervollständigung: Mit gespeicherten Kontaktdaten prüfen, ob Name, Telefonnummer, E-Mail-Adresse und Anschrift vorgeschlagen werden und im richtigen Feld landen.
3. Fehlermeldungen: Jedes Pflichtfeld leer lassen und jedes Formatfeld falsch füllen; die Meldung muss unter dem Feld stehen, den Fehler benennen und beim Absenden angesprungen werden.
4. Reihenfolge und Pflicht: Jedes Pflichtfeld gegen den Zweck des Formulars prüfen; was der Betrieb später ohnehin erfragt, wird freiwillig.
5. Bedienflächen und Tastatur-Überdeckung: Mit einer Hand ausfüllen; Kästchen über die Beschriftung antippen, Absenden-Knopf bei offener Tastatur erreichen.
6. Bestätigung und Messung: Die Bestätigungsseite auf Inhalt prüfen und die Messung der Abbrüche je Feld einrichten, um die Wirkung der Korrekturen nachzuhalten.

Fünf Fehler treiben die Abbruchquote am Smartphone

In Anfrageformularen wiederholen sich einige Fehler, die am Rechner unauffällig bleiben und am Smartphone Anfragen kosten. Sie betreffen die Tastatur, die Fehlermeldung und die Pflichtangaben.

Die Punkte 1 bis 3 kosten Anfragen, bevor der Besucher das Formular beendet hat, die Punkte 4 und 5 kosten die Qualität der Angaben und den zweiten Versuch.