t3n News 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 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 für Online-Shops solche Stolpersteine vermeiden können.

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

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

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von fimbim am 12.05.2013 (15:51 Uhr)

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

    Antworten Teilen
  2. von katharina am 13.05.2013 (13:22 Uhr)

    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 Teilen
  3. von brian am 13.05.2013 (15:49 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webdesign
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste … » weiterlesen

20 CSS-Cursor-Eigenschaften für bessere Usability
20 CSS-Cursor-Eigenschaften für bessere Usability

Schon mal darüber nachgedacht, den Cursor deinem Design anzupassen? Wir haben einige Beispiele rausgesucht, wie du mit dem Cursor deine Usability noch besser machen kannst. » weiterlesen

Mobile Payment: Payback lässt Kunden ab Juni an der Kasse mit dem Handy zahlen
Mobile Payment: Payback lässt Kunden ab Juni an der Kasse mit dem Handy zahlen

Das Rabattkartensystem Payback will seinen Kunden ab Juni das Zahlen per Smartphone-App ermöglichen. Damit könnte das Thema Mobile Payment in Deutschland deutlich an Schwung gewinnen. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?