Eine Frau hat auf ihrem Handy deine Seite gefunden, sie hat gelesen, sie ist überzeugt. Sie tippt auf „Kontakt“, das Formular öffnet sich, sie will ihre E-Mail-Adresse eintragen. Und dann tippt sie sich durch drei Tastatur-Ebenen, um das @-Zeichen zu finden. Beim Punkt vor der Domain dasselbe Spiel. Vielleicht macht sie es. Vielleicht legt sie das Handy kurz zur Seite, um es später am Rechner zu machen, und dann kommt das Leben dazwischen.
Solche Abbrüche passieren selten, weil das Angebot nicht überzeugt. Sie passieren, weil die Technik der Besucherin im Weg steht, an einer Stelle, die du auf deinem großen Monitor nie zu sehen bekommst. Genau das macht diesen Fehler so tückisch: Er ist auf dem Desktop unsichtbar, und über die Hälfte deiner Besucherinnen kommt vom Handy.
Warum am Handy scheitert, was am Rechner funktioniert
Der Grund liegt in einer einzigen Einstellung, die in den meisten Baukästen als Voreinstellung durchläuft. Ein Eingabefeld hat einen Typ, und der Standardtyp heißt schlicht „Text“. Ein Textfeld erwartet irgendwelche Zeichen, Buchstaben, Zahlen, Sonderzeichen, alles gleich wahrscheinlich. Am Rechner ist das kein Problem. Du hast eine physische Tastatur mit allen Zeichen gleichzeitig vor dir, das @ liegt eine Taste weit weg.
Am Smartphone gibt es diese Tastatur nicht. Der Bildschirm blendet je nach Feldtyp eine passende Tastatur ein, und bei einem reinen Textfeld ist das die normale Buchstaben-Ansicht. Das @-Zeichen und die Zifferntasten liegen dort auf einer zweiten oder dritten Ebene, die deine Besucherin erst über Umschalttasten erreicht. Für einen Satz ist das egal. Für eine E-Mail-Adresse oder eine Telefonnummer wird jede Eingabe zur kleinen Fingerakrobatik.
Progressive Enhancement: dem Browser sagen, was du erwartest
Die Lösung trägt einen sperrigen Namen, dahinter steckt ein einfacher Gedanke. Der UX-Experte Uwe Mutz beschreibt das Prinzip als Progressive Enhancement: Du gibst dem Browser genauer an, welche Art von Daten du in einem Feld erwartest, und das Gerät verbessert daraufhin von selbst die Darstellung, so weit es kann. Ein Handy, das die passende Tastatur einblenden kann, tut es. Ein älteres Gerät, das das nicht kann, zeigt weiterhin ein normales Textfeld. Nichts geht kaputt.
Statt jedes Feld pauschal auf „Text“ zu lassen, bekommt es den Typ, der zu seinem Inhalt passt. Ein E-Mail-Feld holt bei der mobilen Tastatur das @-Zeichen und den Punkt direkt in die Hauptansicht, und der Browser prüft nebenbei, ob die Eingabe überhaupt wie eine E-Mail-Adresse aussieht. Ein Telefonfeld blendet sofort das große Ziffernfeld ein, wie beim Wählen. Ein Zahlenfeld öffnet den Nummernblock. In allen drei Fällen liegt genau das bereit, was die Besucherin gerade braucht, ohne dass sie eine einzige Umschalttaste sucht. Aus Tipp-Akrobatik werden ein paar flüssige Sekunden.
Warum Google und Screenreader denselben Handgriff belohnen
Der Effekt hört bei der Bequemlichkeit nicht auf. Was das Feld dem Handy mitteilt, versteht auch jede andere Software, die deine Seite liest. Für Menschen mit Sehverlust, die einen Screenreader nutzen, ist das keine Kleinigkeit. Ihre Vorlesesoftware ist darauf angewiesen, dass ein Feld sich als das zu erkennen gibt, was es ist. Ein Feld, das sich ehrlich als E-Mail-Feld deklariert, wird korrekt angesagt, und die Besucherin weiß, was von ihr erwartet wird. Die Regeln für barrierefreies Webdesign, die WCAG, verlangen genau diese saubere Auszeichnung.
Suchmaschinen lesen mit derselben Logik. Ein Feld, dessen Zweck maschinell eindeutig ist, hilft Google, den Sinn deiner Seite zu erfassen. Du machst also mit einem einzigen Handgriff die Eingabe für deine Kundin leichter, und im selben Schritt hilfst du Screenreadern und Google.
So prüfst und behebst du es in deinem Baukasten
Du brauchst dafür keinen Code anzufassen. Die gängigen Baukästen, WordPress, Squarespace, Wix und ihre Verwandten, bieten den Feldtyp in den Einstellungen des jeweiligen Formularfeldes an. Der Weg dorthin ist überall ähnlich.
Nimm zuerst dein Handy und öffne dein eigenes Kontaktformular so, wie eine Besucherin es sieht. Tippe nacheinander in jedes Feld und schau, welche Tastatur aufklappt. Kommt beim E-Mail-Feld die normale Buchstabentastatur ohne @ in der Hauptansicht, hast du den Fehler gefunden. Geh dann in deinem Baukasten in die Einstellungen des Formulars und stell den Feldtyp um, beim E-Mail-Feld auf „E-Mail“, beim Telefonfeld auf „Telefon“, bei reinen Zahlenfeldern auf „Zahl“. Speichern, das Formular am Handy neu laden und dieselbe Runde noch einmal machen. Wenn jetzt beim E-Mail-Feld das @ bereitliegt und beim Telefonfeld der Ziffernblock erscheint, sitzt es. Diese fünf Minuten sind der Unterschied zwischen einer Besucherin, die dir schreibt, und einer, die das Handy weglegt.
Schreibe einen Kommentar