Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Usability im M-Commerce: 5 Tipps für bessere Formulare

    Usability im M-Commerce: 5 Tipps für bessere Formulare

Bist du manchmal genervt, weil beim Einkaufen auf dem Handy die Adressengabe ständig von der Autokorrektur zerschossen wird oder weil sich bei numerischen Eingaben die QWERTZ-Tastatur öffnet anstatt der Ziffernblock? Wir verraten, wie Webdesigner für Online-Shops solche Stolpersteine vermeiden können.

Autokorrektur ausschalten für bessere Usability

mobile_usability_autocorrect

Die Autokorrektur ist ein hilfreicher Begleiter auf mobilen Endgeräten, nicht selten aber produziert diese Hilfsfunktion erstaunliche Fehler. Bei Abkürzungen, Straßennamen oder E-Mail-Adressen ist die Autokorrektur-Funktion besonders anfällig und kann, wenn vom User nicht bemerkt, größere Probleme verursachen.

Gut, dass ihr festlegen könnt, auf welchen Eingabefeldern die Autokorrektur-Funktion des Browsers eingreifen soll und auf welchen nicht. Mit dem Attribut autocorrect, kann dieses Verhalten gesteuert werden.

<input type="text" autocorrect="off">

Richtige Tastatur-Layouts anzeigen

mobile_usability_numbers_keyboard2

Bei numerischen Eingaben wie Kreditkarten- oder Telefonnummern braucht man kein alphanumerisches Tastatur-Layout. Zahlenfelder genügen, um die Eingabe zu tätigen. Für die Eingabe von E-Mail-Adressen werden Sonderzeichen wie das „@“ benötigt. Das Einblenden von speziell für solche Eingaben konzipierten Bildschirmtastaturen reduziert die Fehlerquote und erspart dem Nutzer den Wechsel zum korrekten Tastatur-Layout.

Mit Vergabe des Typs „email“ wird das @-Zeichen in der Bildschirmtastatur eingeblendet. Mit dem Typ „number“ wird ein Zahlen-Eingabefeld hinzugeschaltet oder bei einigen Telefonen sogar die komplette Tastatur durch ein Zahlen-Eingabefeld ersetzt.

<input type="email">
<input type="number">

Mehr Information zu Eingabe-Typen und dem Browser-Support gibt es bei der W3C-School.

Mehr Usability: Zurück- und Weiter-Button richtig belegen

mobile_usability_email_keyboard

Benutzer erwarten vom Vor- und Zurück-Button exakt das, was draufsteht. Somit solltest Du sicherstellen, dass Formularfelder in der korrekten Reihenfolge abgearbeitet werden und keine Sprünge beim Nutzen dieser Funktion entstehen.

Bei komplexeren Formularen kann es sinnvoll sein, den Tab-Index festzulegen. Dieser numerische Wert definiert, in welcher Reihenfolge Eingabefelder mit dem Tablutaor oder den jeweiligen Soft-Keyboard-Tasten durchlaufen werden.

<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">

Automatische Großschreibung deaktivieren

mobile_usability_autocapitalize

Automatische Großschreibung ist ebenfalls ein größerer Frustfaktor bei der Nutzung von Formularen auf mobilen Endgeräten. Bei E-Mail-Adressen, Captchas oder casesensitiven Passwörtern kann diese Funktion ein echtes Problem bedeuten.

Mit dem Attribut „autocapitalize“ lässt sich dieses Verhalten steuern.

<input type="text" autocapitalize="off">

Tastaturlayouts konsistent einbinden und auf Usability testen

Sei konsistent bei dem Einbinden von Tastatur-Layouts. Das Tastaturlayout für Zahleneingaben sollte nicht nur bei der Kreditkartennummer, sondern auch bei der Überprüfung von Sicherheitscode zum Einsatz kommen. Nicht jedes Gerät wird sich mit deinem Formular-Design anfreunden können. Das Testen auf den beliebtesten Gräten der Zielgruppe ist deshalb unabdingbar.

Weiterführende Links

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

3 Reaktionen
brian
brian

When you essentially do a translated version with new images of another persons article it's considered good practice to at least credit the "original". I've spotted this article "Mobile Commerce Optimization: 5 Tips for Touch Keyboards" published a month ago at GetElastic's blog:

http://www.getelastic.com/mobile-commerce-optimization-5-tips-for-touch-keyboards/

Antworten

katharina
katharina

Gerade im M-Commerce ist die Optimierung der Eingabefelder von Formularen extrem wichtig. Viele Kunden kaufen online und am mobilen Gerät, um Zeit zu sparen - das Bestellen im Online Shop läuft meistens neben bei. Da ist es besonders ärgerlich, wenn umständliche Autokorrektur-Funktionen und nicht zum Eingabefeld passende Tastatur-Layouts angeboten werden. RapidUsertests eigenen sich besonders gut, um Bedienprobleme dieser Art aufzudecken. Tester äußern ihre Meinung während des gesamten Tests. Mittels der Videoaufzeichnungen können anschließend auftretende Probleme wie zum Beispiel das Ausfüllen von Formularen erkannt und genau analysiert werden. (siehe http://rapidusertests.com/apid=37)

Antworten

fimbim
fimbim

Endlich schreibt das mal jemand auf! Sollte jeder dran denken, der was in die Richtung entwickelt, dann bestell ich auch mehr. Versprochen :)

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen