Nutzer­freundlich (IBAN-)Eingaben ermöglichen

Da ist sie also, die IBAN. Diese unglaublich lange Nummer, die sich niemand merken kann.

Um so wichtiger also, dass Copy & Paste dieser Nummer auf unseren Geräten gut funktioniert.

Die hier gesammelten Tipps für Responsive Designer basieren auf Problemen, die ich im täglichen Gebrauch des Internet auch an Touchgeräten immer wieder antreffe. Wenn ihr weitere habt, freue ich mich auf Kommentare!

Nur ein Eingabefeld anbieten

Natürlich erhöht die Gruppierung von langen Nummern die Lesbarkeit. Telefon­nummern werden typischerweise in 2er-Blöcken geschrieben, noch längere Nummern mit 4er-Blöcken.

Solche Blöcke kann man sich beim Abtippen leichter merken, was die Bearbeitung der Aufgabe beschleunigt.

Man könnte NutzerIn zur schrittweisen Eingabe also einzelne Eingabefelder anbieten, die diesen Blöcken gleichkommen; Wie man das vielleicht von Produktschlüsseln noch kennt.

Wenn JavaScript verfügbar ist, und folgende Funktionen erfüllt, halte ich das für eine tolle Idee:

• Copy & Paste der kompletten Nummer ins erste Eingabefeld (auch mit Leerzeichen) zerlegt die Nummer automatisch und befüllt die Eingabefelder
• Der Fokus springt nach manueller Eingabe in einem Feld automatisch auf das nächste, so dass der Nutzer ausschließlich Ziffern zu tippen braucht
• Der Rücktaste (rückwärts entfernen) springt vom Anfang eines Feldes auch in das Vorige

Ohne JavaScript oder wenn diese Funktionen nicht geboten werden, ist ein einzelnes Eingabefeld wesentlich nutzerfreundlicher: der Fokus muss nicht ständig manuell gewechselt werden, Copy & Paste ist möglich.

Wenn außerdem die Nummer doch anders gruppiert hingeschrieben steht, als sie dann eingetragen werden muss, macht das die Aufgabe sehr schwierig.

Deshalb würde ich nur ein Eingabefeld mit Input-Mask vorschlagen, das auch ohne JavaScript gut benutzbar ist. jQuery.inputmask ist eine gute Basis dafür.

Übrigens habe ich auch schon bei einer Bank ein Überweisungformular gesehen, das die IBAN in 4 Eingafeldern erwartet – ohne Copy & Paste! Ein Albtraum!

Niemals eine Maxi­mal­länge festlegen

Weist man z.B. dem Eingabefeld für Bankleitzahlen mit maxlength="8" eine maximale Länge zu, lässt sich die Nummer nicht mehr von der Webseite der Bank oder aus der Rechnung kopieren.

Lange Nummern werden (leider) meist mit echten Leerzeichen gruppiert. Beim Kopieren der Nummer in das Eingabefeld werden überflüssige Ziffern dann einfach abgeschnitten – ein Fehler, der zunächst vielleicht noch nicht einmal auffällt, und später um so frustrierender wirkt.

Kopiert zum Beispiel mal meine BLZ in das Eingabefeld:

120 300 00

Fühlt sich frustrierend an, oder? (:

Es gibt zwar Daumenregeln, wie lange Nummern zu gruppieren sind, aber oft keine Norm und außerdem regionale Unterschiede. Deshalb lässt sich auch nicht vorhersagen, wie viele Leerzeichen beim Kopieren vorhanden sein könnten.

Länge des Ein­gabe­felds auf erwartete Nummern­länge festlegen

Bei sämtlichen Eingaben ist wichtig, dass die Größe des Eingabefeldes als optischer Hinweis genutzt wird, was für eine Eingabe erwartet wird. So kann NutzerIn beim Überfliegen des Formulars schon abschätzen, was erwartet wird.

Dazu dient das Attribut size. Nutzt es bitte!

Für Touch einen Ziffern­block anbieten

Das macht konkret für die IBAN keinen Sinn, weil diese ja mit dem Ländercode beginnt, also 2 Buchstaben.

Für andere lange Nummern wäre das standardkonforme Attribut für den Ziffernblock dann inputmode="numeric", was aber noch kein Browser unterstützt. Möglichkeiten, den Ziffernblock auszulösen, gibt es zumindest für iOS und Cordova aber.

Clientseitige Validierung nur mit JavaScript

Lange Nummern sind wie erwähnt oft durch Leerzeichen gruppiert, die bei Copy & Paste mitkopiert werden (siehe oben). Auch bei Abtippen könnte NutzerIn Leerzeichen verwenden, um die Kontrolle zu vereinfachen.

Bei der Validierung ist wichtig, dass solche Zeichen (bei Telefonnummern gerne auch mal / . oder -) erlaubt sind oder entfernt werden.

Benutzt man die neuen HTML5 Input-Typen oder das pattern-Attribut, validiert der Browser, und JavaScript muss die Sonderzeichen vorher entfernen. Das bedeutet das pattern-Attribut sollte nur per JavaScript gesetzt werden.

Lange Nummern ohne Leerzeichen gruppieren

Wenn ihr selbst solche langen Nummern am Bildschirm ausgeben müsst, verzichtet auf Leerzeichen zur Gruppierung (auch auf geschützte), damit Nutzer sie kopieren und auf anderen Seiten verwenden können, die keine Leerzeichen bei der Eingabe erlauben (wie zum Beispiel einige Online-Banking-Seiten).

Per CSS könnt ihr die Nummer optisch gruppieren:

.long-numer span { margin-right: .2em; }

Kopiert diese so gruppierte Nummer mal und fügt sie ins Eingabefeld ein:

12030000

Auch für IBAN nur ein Eingabefeld

Ich hatte eine Weile darüber nachgedacht, die IBAN-Eingabe in zwei Feldern anzubieten: und zwar für Touchgeräte die Eingabe von

1. Ländercode (z.B. DE) mit der normalen Tastatur
2. Ziffernteil mit dem Ziffernblock

Allerdings muss NutzerIn dann zwischen den Eingabefeldern wechseln statt zwischen Tastaturen – also ist das kaum ein Gewinn. Und mit physischen Tastaturen wäre das sogar mehr Aufwand.

Ich hab es also bei einem Feld für beide Teile belassen.

Fazit

Entwickler neigen oft dazu, Eingaben sehr stark einzuschränken.

Das führt aber leider dazu, dass Nutzer sich damit quälen müssen, die richtige Syntax zu finden. Oder dazu dass beim Copy & Paste Ziffern abgeschnitten werden.

Die wesentlich elegantere Lösung ist also, generell verschiedene Formatierungen zu erlauben, und erst bei der Verarbeitung/Speicherung dann das Wunschformat herzustellen.

Erspart Euren Nutzern also diese Frustration bei Formulareingaben – damit erhaltet ihr auch mehr Abschlüsse.