Kontextabhängige Keyboards für mobile Endgeräte

Warum kontextabhängige Keyboards für mobile Endgeräte fragst du dich? Formulare mit einem mobilen Gerät auszufüllen stellt für viele Nutzer eine Herausforderung dar, insbesondere Smartphones machen es deinen Nutzern durch ihre überladenen und sehr kleinen Keyboards schwer ein Formular fehlerfrei und flüssig auszufüllen.

Wie kannst du deine Nutzer bestmöglich dabei unterstützen Formulare auf Smartphones auszufüllen?

Ein erster Ansatz ist natürlich die Anzahl der zu befüllenden Formularfelder auf ein Minimum zu reduzieren. Damit wird die Hürde „Dateneingabe“ zwar verkleinert, die Wahrscheinlichkeit von „Vertippern“ und damit einhergehend die mögliche Frustration deiner Nutzer aber nicht wesentlich reduziert.

Um das Nutzungserlebnis Dateneingabe per Smartphone entscheidend zu verbessern musst du deine Nutzer in jeder Situation unterstützen. Kontextabhängige Keyboards, also Keyboard-Varianten die dem Nutzungskontext angepasst sind, können eine große Hilfe beim Ausfüllen von Formularfeldern sein.

Erläutern will ich das Prinzip Kontextabhängige Keyboards für mobile Geräte am Beispiel eines Formularfeldes welches die Kreditkartennummer eines Nutzers erfasst.

<form>
<input type="text">
</form>

Das gängige input-field vom type=text wird von einem Smartphone folgendermaßen interpretiert

Ein ganz normales Eingabefeld! 

Dein Nutzer kann jetzt ohne Weiteres seine Kreditkartennummer eintippen. STOP! Kann er das wirklich? Nein, das Keyboard Layout hindert ihn daran, die Eingabe von Zahlen spielt für Input-Felder des Typ Text eine untergeordnete Rolle. Dein Nutzer muss zum Zahlen-Keyboard wechseln und kann erst danach mit der Eingabe loslegen.

<form>
<input type="number">
</form>

Mit einem Input-Field vom Typ „Number“ kann man den Nutzer dann aber wohl angemessen unterstützen. Das Ergebnis sieht folgendermaßen aus.

Perfekt, das Keyboard für die Eingabe von Zahlen wird angezeigt. Deinen Nutzer hast du bei der Bewältig seiner Aufgabe jetzt bestens unterstützt?

Es geht aber noch besser. Für die Eingabe einer Kreditkartennummer sind Zeichen wie &, @, € usw. vollkommen irrelevant, sie im Keyboard zu zeigen bedeutet Platz zu verschwenden, Platz für das Wesentliche. Zur Bewältigung der Aufgabe „Tippe eine Kreditkartennummer ein“ benötigt dein Nutzer tatsächlich nur die erste Zeile des Keyboards die Ziffern 1,2,3,4,5,6,7,8,9,0. Aus Nutzersicht und um Fehler bei der Eingabe schon im Vorfeld zu vermeiden wäre es sinnvoll du zeigst ihm auch nur die Ziffern 0-9.

<form>
<input type="text" pattern="[0-9]*">
</form>

Das Input-Field vom Typ „text“ mit dem Pattern [0-9]* wird von einem Smartphone folgendermaßen interpretiert

Dieses Keyboard-Layout bietet dem Nutzer maximale Unterstützung zur Bewältigung der Aufgabe eine Kreditkartennummer in das Formular einzutragen. Dem Nutzer werden nur die Optionen an die Hand gegeben, die er auch nutzen darf um die Aufgabe erfolgreich auszuführen.

Weiter Unterstützen kannst du deine Nutzer in dem du das Format einer Kreditkartennummern während der Eingabe berücksichtigt (Artikel zum Aufbau von Kreditkartennummern). Mit dem jQuery Plugin Input Mask kannst du die Eingabe exakt auf das Format einer Kreditkartennummer abstimmen. Dadurch gewährleistest du Lesbarkeit, Kontrollierbarkeit und Wiedererkennbarkeit.

Fazit, kontextabhängige Keyboards für mobile Endgeräte

Um deine Nutzer beim Befüllen von Formularen auf einem mobilen Gerät bestmöglich zu unterstützen, solltest du dir für jedes einzelne Eingabefeld Gedanken über

  • benötigte Informationen
  • Format/Struktur der erfassten Informationen
  • und das dazu passende Keyboard-Layout

machen. Kontextabhängige Keyboards für mobile Endgeräte erleichtern den Umgang deiner Nutzer mit Formularen und tragen dazu bei deren Nutzungserlebnis positiv zu beeinflussen.

 

A.Schramm

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.