Entwicklung & Design

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

  • HTML5 New Input Types – w3schools.com
  • 100 Usability Tipps – Webdesignblog
  • Kurioses Usability-Konzept „Der betrunkene Nutzer“ – t3n News
  • „Können wir es uns noch leisten, nicht in Usability zu investieren?“ [Interview] – t3n News
  • 9 zeitsparende und nützliche HTML5-Attribute – t3n News
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

8 Kommentare
fimbim

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

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
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

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