edgy circle

Benutzerfreundlichere Mobile Webseiten in 5 Minuten

Es benötigt weniger als 5 Minuten Arbeit um die Formulare einer Webseite benutzerfreundlicher zu machen.

Smartphones und Tablets sind aus unserem Alltag nicht mehr wegzudenken. Da überrascht es nicht, dass ein großer Teil der Besucher einer Webseite, das mit solch einem Gerät tut.

Viele dieser Besucher interagieren mit der Webseite, meistens über Formulare. Sie wollen sich registrieren um auf der Kino Webseite Karten zu reservieren, sich bei ihrem E-Mail Account einzuloggen oder etwas bei Pizzalieferanten Online zu bestellen.

Alle diese Tätigkeiten involvieren Formulare. Ein Feld in welches man seine E-Mail Adresse eingibt, ein anderes für das Passwort und die Menge an Pizzen muss man auch festlegen können. Das ausfüllen solcher Formulare ist auf einem Smartphone oder Tablet meist komplizierter und umständlicher als es sein müsste.

Nehmen wir folgendes Beispiel: Ich will mich bei GMX anmelden um meine E-Mails zu lesen.

Bild 1: Den ersten Teil meiner E-Mail Adresse, "david.strauss", kann ich ohne Probleme auf der eingeblendeten Tastatur eintippen. Aber es gibt keine Taste für das "@" Symbol welches ich als nächstes brauche. Dazu muss ich zu der Tastatur mit Sonderzeichen umschalten.

Test

Bild 2: Die Sonderzeichen Tastatur hat das "@" Symbol. Nachdem ich es eingetippt habe, muss ich wieder zur vorherigen Tastatur umschalten um meine E-Mail Adresse fertig eintippen zu können.

Test

Bild 3: Mit der Buchstaben Tastatur kann ich schließlich "david.strauss@gmx.at" vervollständigen und zum Passwort Feld wechseln.

Test

Für eine einfache Aufgabe wie das eingeben einer E-Mail Adresse war das ein komplizierter Prozess. Ich musste insgesamt zweimal die Tastatur wechseln um das "@" Symbol verwenden zu können.

Das sind zwei Schritte zuviel.

Es gibt eine einfache Möglichkeit mit der man sicherstellen kann, dass das "@" Symbol bei der Buchstaben Tastatur zusätzlich angezeigt wird. Im folgenden Bild kann man sehen, dass das "@" Symbol mit eingeblendet wird wenn man in einem E-Mail Feld ist.

Test

Zum selbst ausprobieren einfach diesen Blog auf einem Smartphone oder Tablet besuchen. In der rechten Spalte gibt es ein E-Mail Formularfeld für den Newsletter.

Wie funktioniert das?

Es gibt verschiedene Typen von Formularfeldern. Die zwei bekanntesten Typen sind Text und Passwort Felder. Diese beiden Feldtypen und ihre Funktion sind jedem bekannt. In beide Felder kann man Text eingeben, im Gegensatz zum normalen Textfeld wird bei einem Passwortfeld der eingegebene Text unleserlich gemacht.

Leider gibt es nur wenige Personen die wissen dass es weitere Feldtypen gibt. Ein Beispiel dafür ist das E-Mail Feld. Es funktioniert genauso wie ein normales Textfeld und sieht auch so aus. Wenn man das Feld auf einem mobilen Gerät verwendet gibt es jedoch einen großen Unterschied.

Da das Gerät weiß, dass es sich um ein E-Mail Feld handelt, kann es die Eingabe für den Benutzer erleichtern indem es das "@" Symbol als extra Taste zur Tastatur hinzufügt. Wenn das Formularfeld ein normales Textfeld ist, funktioniert das nicht.

Diese kleine Änderung erleichtert das Leben aller Menschen die Ihre Webseite mit einem mobilen Gerät besuchen.

Und das beste daran ist, dass es wirklich in 5 Minuten geändert ist. Man muss im HTML lediglich den Typ des Formularfeldes ändern. Überall wo Benutzer ihre E-Mail Adresse eingeben müssen, ändert man das "type" Attribut des Feldes.

Vorher:
<input type="text" name="email-feld">

Nacher:
<input type="email" name="email-feld">

Wer mehr über die Technik oder die anderen Feldtypen wie URL und Datum erfahren will, kann das hier nachlesen.

Zurück zum Blog