UX und HTML5: Helfen wir Benutzern beim Ausfüllen Ihres mobilen Formulars (Teil 1)

Formulare sind eine der grundlegendsten primären Interaktionen, die Benutzer mit Ihren Websites (und mobilen Apps) haben werden. Sie verbinden Menschen und lassen sie kommunizieren. Sie lassen sie Artikel kommentieren und dem Autor erklären, wie sehr sie mit dem, was sie geschrieben haben, nicht einverstanden sind. Sie lassen Leute direkt in einer Dating-App chatten, um „den Einen“ zu treffen. Ob für Foren, Produktbestellungen, Online-Communities, Kontoerstellung oder Online-Zahlungen, Formulare sind ein großer Teil des Online-Lebens der Benutzer.

Wir schreiben das Jahr 2018 und wir haben weltweit mehr mobile als Desktop-Benutzer . Dennoch behandeln wir diese Benutzer immer noch als Bürger zweiter Klasse des Internets. Jeder schreibt und spricht ständig über Benutzererfahrungen. Also, warum, warum, warum machen so viele Websites und Produkte immer noch etwas falsch? Warum ist ihre mobile Benutzererfahrung für die Hälfte der Welt beschädigt? Warum ist es immer noch mühsam, warum ist es immer noch superschwer, heute einen Flug zu buchen und ein Konto in mobiler Form zu registrieren? Benutzer erwarten Besseres!

Empfohlene Lektüre : World Wide Web, Not Wealthy Western Web

Dies ist der erste Teil einer Serie von zwei Artikeln. In diesem Beitrag fasse ich einige wesentliche Best Practices zur Verbesserung Ihrer mobilen Formulare zusammen, einschließlich Scanbarkeit und Lesbarkeit. Ich werde Sie durch die Platzierung, Größe und Optimierung von Etiketten und Eingaben führen. Wir werden sehen, wie man das richtige Formularelement auswählt, um die Interaktionskosten zu reduzieren. Abschließend erfahren Sie, wie Sie Fehler bei mobilen Formularen vermeiden und beheben können.

Im zweiten Teil werde ich einen genaueren Blick auf spezifische mobile Funktionen und HTML5-Formularelemente werfen, und wir werden über klassische Formularelemente hinausgehen, um einzigartige und ansprechende Webanwendungen und Websites zu erstellen.

Hinweis : Obwohl die meisten Codeverbesserungen in diesem Artikel webbezogen sind (da ich weder Swift noch Java kenne), gelten die Best Practices für die Benutzerfreundlichkeit auch für mobile Anwendungen .

Formulardesign 101: Priorisierung der Scanbarkeit und Lesbarkeit

„Ein Formular ist der Name, der Wert und die Paare in einer Struktur zum Speichern von Daten auf einem Computer, die als Etiketten und Eingabefelder für Menschen ausgegeben werden.“ Dies ist ein direktes Zitat von Luke Wroblewski auf einer Konferenz. Wie er glaube ich, dass die meisten Probleme mit der Benutzerfreundlichkeit von Formularen auf diese Tendenz zurückzuführen sind, den Benutzern die Struktur der Datenbank zur Verfügung zu stellen.

Starke Informationsarchitektur

Um bessere Formulare zu erstellen, müssen Sie sich zunächst ein paar Schritte von der Struktur Ihrer Datenbank entfernen. Versuchen Sie zu verstehen, wie Benutzer Formulare ausfüllen möchten. Hier ist es praktisch, einige Usability-Tests und Benutzerrecherchen für Ihre Formulare durchzuführen. User Mental Models ist ein UX-Konzept, das Ihnen dabei helfen kann. Die Nielsen Norman Group beschreibt es als „das, was der Benutzer über das vorliegende System glaubt“. Bitten Sie Ihren Tester, laut zu denken und Ihnen zu sagen, wie er das Formular ausfüllen würde. Welche Schritte erwarten sie? Was kommt zuerst? Was kommt als nächstes? Dadurch erhalten Sie eine bessere Vorstellung davon, wie Sie Ihr Formular benutzerfreundlicher gestalten können.

Das visuelle Gruppieren zusammengehöriger Felder hilft Benutzern auch beim Ausfüllen eines Formulars. Verwenden Sie im Code das fieldset -Tag, um sie programmgesteuert zu gruppieren. Es hilft auch Bildschirmlesern, die Hierarchie zu verstehen.

Wenn das Formular lang ist, stellen Sie standardmäßig nicht alles bereit . Seien Sie schlau über das, was Sie zeigen. Verwenden Sie die Verzweigung mit Bedacht, um nur die Felder anzuzeigen, die die Benutzer benötigen. Zeigen Sie beispielsweise in einem Checkout-Formular nicht alle Detailfelder für alle Versandoptionen an. Dies wird den Benutzer überfordern. Zeigen Sie genügend Informationen an, um ihnen bei der Auswahl der richtigen Versandoption zu helfen. Zeigen Sie dann nur die Details und Felder an, die sich auf diese Auswahl beziehen.

Die Aufmerksamkeitsspanne der Benutzer wird mit der Zeit kürzer: Fragen Sie am Ende des Formulars nach optionalen Dingen . Wenn es sich bei Ihrem Formular beispielsweise um eine Umfrage zur Kundenzufriedenheit handelt, fragen Sie am Ende nach demografischen Informationen. Besser noch, füllen Sie sie automatisch aus, wenn möglich. Fragen Sie Benutzer nur nach dem Notwendigen.

Planen Sie schließlich die Lokalisierung voraus: Was passiert, wenn Ihr Formular übersetzt wird? Was passiert, sagen wir, für Deutsch? Wird Ihr Design noch funktionieren?

Etikettenplatzierung und Eingabeoptimierung

Einspaltiges Layout funktioniert am besten

Aufgrund des Platzmangels stehen Ihnen auf mobilen Bildschirmen keine endlosen Möglichkeiten zur Platzierung von Beschriftungen und Feldern zur Verfügung:

• Präsentieren Sie Felder in einem einspaltigen Layout . Auf Mobilgeräten ist kein Platz für mehrere Spalten. Mehrspaltige Formulare sind auf dem Desktop sowieso keine gute Idee.
• Im Hochformat ist es besser, die Beschriftung über dem Feld zu platzieren, damit die Benutzer bei der Eingabe sehen können, was im Feld steht.

• Im Querformat wird die Höhe des Bildschirms reduziert. Vielleicht möchten Sie Labels auf der linken Seite und Eingaben auf der rechten Seite platzieren . Aber testen Sie es, um sicherzustellen, dass es funktioniert.

Weitere Informationen zur Beschriftungsplatzierung finden Sie in „Mobile Form Usability: Place Labels Above the Field“ des Baymard Institute.

Etiketten sollten klar und sichtbar sein und ohne Kontext funktionieren

Denken Sie daran, dass die Tastatur geöffnet wird, sobald ein Feld den Fokus erhält, und mindestens ein Drittel der Bildschirmfläche einnimmt. Auf kleinen mobilen Bildschirmen müssen Benutzer auch scrollen, um das Formular auszufüllen. Dies bedeutet, dass sie beim Ausfüllen des Formulars einen Teil des Kontexts verlieren. Planen Sie entsprechend:

• Ihre Etiketten sollten aus klarem, sichtbarem Text bestehen, der ohne Kontext gelesen und verstanden werden kann. Benutzer sollten in der Lage sein, jedes Label- und Feldpaar als separate Aufgabe abzuschließen, auch wenn sie den Kontext verlieren.

• Vermeiden Sie Fachjargon, Abkürzungen und branchenspezifische Sprache, wann immer Sie können.
• Sei konsequent. Wenn Sie „Kunde“ einmal in einem Etikett verwenden, bleiben Sie bei diesem Wort. Vermeiden Sie die spätere Verwendung von „Clients“, da dies die Benutzer verwirren könnte.
• Die Schriftgröße sollte groß genug sein. Testen Sie Ihr Formular so bald wie möglich auf echten Geräten und passen Sie die Größe entsprechend an.
• Text in Großbuchstaben kann für einige Benutzer schwer lesbar sein. Möglicherweise möchten Sie die Verwendung von Text in Großbuchstaben auf Etiketten vermeiden.
• Die Etikettenkopie sollte kurz und scanbar sein. Wenn ein Feld geklärt werden muss, fügen Sie es nicht in das Etikett ein. Verwenden Sie stattdessen eine Feldbeschreibung.

Best Practice für die Eingabegröße

Die Größe des Eingabeelements sollte nach Möglichkeit der Größe des erwarteten Inhalts entsprechen . Dies hilft Benutzern, das Formular schnell auszufüllen und zu verstehen, was erwartet wird.

Verwenden von Masken, um das Aufteilen von Eingaben auf Mobilgeräten zu vermeiden

Teilen Sie Eingaben nicht nur zum Zwecke der Formatierung auf . Es ist besonders ärgerlich auf Mobilgeräten, wo Benutzer die Tastatur nicht verwenden können, um zwischen den Feldern zu navigieren. Es erfordert zusätzliche Taps, nur um zum nächsten Feld zu gehen, um das Formular auszufüllen. Sie denken vielleicht: „Aber ich setze automatisch den Fokus auf das nächste Feld, wenn ich die erforderliche Anzahl von Zeichen in diesem Feld erhalte“. Das könnte funktionieren. Aber Sie haben die Kontrolle über die Benutzeroberfläche übernommen, die für den Benutzer unvorhersehbar wird. Außerdem wäre es mühsam, wenn Sie sie automatisch zum nächsten Feld schicken würden und sie im letzten Feld etwas korrigieren müssten. Schließlich ist es komplizierter zu erraten, was bei geteilten Eingängen obligatorisch ist. Hören wir also auf, das „Aber was wäre, wenn“-Spiel zu spielen, und teilen wir die Eingaben einfach nicht auf.

Ich verstehe: Sie möchten immer noch in der Lage sein, die Daten Ihrer Benutzer in kleinen Stücken zu formatieren, um ihnen beim Ausfüllen Ihrer Felder zu helfen. Und damit haben Sie vollkommen recht. Dazu könnten Sie Masken verwenden . Anstatt eine Eingabe aufzuteilen, legen Sie einfach eine Maske darüber, um dem Benutzer visuell zu helfen, sie zu füllen. Hier ist ein Videobeispiel dafür, wie eine Maske aussehen würde, um Benutzern beim Ausfüllen eines Kreditkartenfelds zu helfen:

Masken helfen, Fehler zu vermeiden, indem sie Benutzer zum richtigen Format führen. Vermeiden Sie es, sie nach und nach aufzudecken – zeigen Sie das Format direkt an. Vermeiden Sie es außerdem, falsche Werte in die Maske einzufügen . Benutzer könnten denken, dass es bereits gefüllt ist. Deshalb habe ich in meiner Demo die Zahlen durch ein kleines „X“ ersetzt. Finden Sie heraus, was für Ihren Eingabetyp am besten geeignet ist.

Denken Sie schließlich daran, dass einige Daten von Land zu Land unterschiedlich sein können und sich manchmal auch das Format ändert (z. B. Telefonnummern). Planen Sie entsprechend.

Effiziente Feldbeschreibungen

Das Anzeigen effizienter Feldbeschreibungen kann den Unterschied zwischen einer nahtlosen und einer schmerzhaften Formularerfahrung ausmachen.

Wofür können Beschreibungen verwendet werden?

Beschreibungen können Benutzern auf so viele Arten helfen. Hier sind ein paar Beispiele.

• Was genau verlangst du?
  

  Einige Speditionen fragen aus datenbankbezogenen Gründen nach den Feldern „Adresse 1“ und „Adresse 2“. Dies ist für Benutzer sehr verwirrend, aber Sie haben hier möglicherweise keine Wahl. Fügen Sie Beschreibungsfelder hinzu, damit Benutzer verstehen, was sie in jedes Feld eingeben müssen.

  

  Gleiches gilt für Akronyme und Abkürzungen. Ich weiß, dass ich gesagt habe, dass Sie sie vermeiden sollten, aber manchmal können Sie das nicht. Wenn Sie beispielsweise an komplexen Formularen für eine bestimmte Branche arbeiten, haben diese möglicherweise ihre eigenen Abkürzungen. Jeder neue Benutzer, der das Formular ausfüllen muss, ist möglicherweise (noch) nicht mit diesen Abkürzungen vertraut. Irgendwo eine Beschreibung verfügbar zu haben, wird ihnen helfen.

• Warum benötigen Sie diese Informationen?
  Benutzer sind möglicherweise nicht bereit, Ihnen persönliche Informationen zu geben, wenn sie nicht verstehen, warum Sie diese benötigen und was Sie damit tun werden . Manchmal müssen Sie jedoch aus rechtlichen Gründen nach solchen Informationen fragen (z. B. das Geburtsdatum für eine Website, die Alkohol verkauft). Die Verwendung von Feldbeschreibungen hier hilft Benutzern zu verstehen, warum diese Art von Informationen benötigt werden.
  
  

  Auf E-Commerce-Websites möchten Sie möglicherweise nach der Telefonnummer des Benutzers fragen, falls der Zusteller ihn kontaktieren muss. Dies ist ein legitimer Grund. Verwenden Sie also erneut Beschreibungen, um E-Commerce-Benutzern zu erklären, warum Sie ihre Telefonnummer benötigen.

  

„Wo finde ich die Informationen?“
Wenn Ihre Benutzer bestimmte Informationen woanders finden müssen, um ein Formular auszufüllen, teilen Sie ihnen mit, wo sie sie finden können. Ich habe an einer mobilen App gearbeitet, mit der Benutzer ihr Haus verfolgen können. Benutzer mussten die App mithilfe einer Seriennummer mit dem Überwachungsgerät koppeln. Es ist nicht ganz einfach, diese Seriennummer auf dem Gerät zu finden; es erfordert einige Anweisungen. Wir haben ein wenig hinzugefügt ? Schaltfläche neben dem Seriennummernfeld. Die Schaltfläche öffnet ein Modal, das ein Bild und einige Hinweise zeigt, damit der Benutzer versteht, wo sich die Seriennummer auf dem Überwachungsgerät befindet. E-Commerce-Websites machen dasselbe mit Promo-Codes: Sie geben Indikatoren, die den Benutzern sagen, wo sie die Codes finden können.



• „Wie soll ich die Informationen formatieren?“
  Einige Felder benötigen ein bestimmtes Format . Verwenden Sie in diesem Fall Beschreibungen, um Benutzern die Formatierungsregeln im Voraus mitzuteilen. Hier sind ein paar Beispiele:
  • Telefonnummer: muss ich die internationale Vorwahl (+xx) vor das Feld setzen?
  • Gibt es eine maximale Länge? Twitter auf dem Handy macht damit einen guten Job.
  • Wenn es um Geldbeträge geht, ist das Format ein Komma (wie 10.000) oder ein Leerzeichen (wie 10.000)?
  • Welches Format erwarten Sie für Daten? Ich lasse Sie auf Wikipedia nachsehen, was das für ein Alptraum ist. Der Unterschied zwischen TT MM JJ und MM TT JJ kann Benutzern bei der Online-Buchung *viel* Ärger bereiten.
  Beachten Sie, dass viele dieser Formatierungsprobleme durch Eingabemasken gelöst werden können. Wir werden später in diesem Artikel darauf zurückkommen (oder Sie können direkt einsteigen, wenn Sie ungeduldig sind).

  

So zeigen Sie Beschreibungen an

In den obigen Beispielen haben wir einige Möglichkeiten gesehen, Feldbeschreibungen anzuzeigen. Hier ist eine Zusammenfassung dessen, was zu tun ist:

• Inline-Beschreibungen sollten direkt sichtbar sein und neben dem Feld angezeigt werden.
• Wenn Sie ausführlichere Beschreibungen mit umfangreichem Inhalt benötigen, können Sie Tooltips oder Modals verwenden . QuickInfos werden im Allgemeinen beim Hovern auf dem Desktop und beim Antippen auf Mobilgeräten ausgelöst. Das Gleiche gilt für die Modals: Öffnen Sie sie, wenn der Benutzer beispielsweise auf das Hilfesymbol oder den Link „Mehr anzeigen“ tippt.

Seien Sie vorsichtig mit Platzhaltern

Ich verstehe: Es ist verlockend, Felder auf Mobilgeräten zu entfernen, um Platz zu gewinnen, und stattdessen Platzhalter zu verwenden. Wir sind alle diesen Weg gegangen. Aber bitte nicht. Die HML5-Spezifikation ist diesbezüglich eindeutig: „Das Platzhalterattribut stellt einen kurzen Hinweis (ein Wort oder eine kurze Phrase) dar, der dem Benutzer bei der Dateneingabe helfen soll“. Und hier ist der Grund:

• Der Platzhalter verschwindet, wenn der Benutzer mit der Eingabe beginnt. Der Benutzer muss sich dann auf das Kurzzeitgedächtnis verlassen, um sich daran zu erinnern, was er in das Feld eingeben soll . Wenn dies nicht möglich ist, müssen sie das Feld leeren, um die Anzeige zu sehen.
• Es ist für Benutzer schwierig, Felder vor dem Absenden noch einmal zu überprüfen, da die Felder keine Beschriftungsangaben mehr haben.
• Es ist schwierig, sich von Fehlern zu erholen, sobald ein Feld gesendet wurde, da es wiederum keine Bezeichnung gibt, die dem Benutzer hilft.

Auch wenn Sie Platzhalter mit Labels verwenden, treten möglicherweise immer noch Probleme auf. Es ist schwer, den Unterschied zwischen einem ausgefüllten Feld und einem Feld mit einem Platzhalter zu erkennen . Ich bin ein UX-Designer, der über das Design mobiler Formulare schreibt, und sogar ich wurde letzte Woche von einem davon ausgetrickst. Wenn es mir passiert, wird es Ihren Benutzern passieren – vertrauen Sie mir in diesem Fall. Schließlich haben die meisten Platzhalter hellgrauen Text, sodass Sie möglicherweise auch Kontrastprobleme haben.

Wenn Sie tiefer in dieses Thema einsteigen möchten, gibt es einen großartigen Artikel mit dem Titel „Platzhalterattribut ist kein Label“, und auch Joshua Winn und FeedbackGuru gehen detailliert darauf ein, warum dies eine schlechte Idee ist. Die Nielsen Norman Group hat auch einen Artikel zu diesem Thema mit dem Titel „Platzhalter in Formularfeldern sind schädlich“ geschrieben.

Platzhalter sind in HTML5 nicht obligatorisch . Aus Usability-Sicht brauchen Sie sicherlich nicht in jedem Feld Ihres Formulars einen Platzhalter. Aber mit der massiven Einführung von Bootstrap und anderen Frameworks sieht es so aus, als würden viele Leute einfach Komponenten kopieren und einfügen. Diese Komponenten haben Platzhalter, also fühlen sich die Leute wohl irgendwie verpflichtet, dem Platzhalter im Code etwas hinzuzufügen? Wenn die Platzhalter Ihres Formulars so aussehen: „Bitte füllen Sie Ihr — Etikett — hier aus“, machen Sie etwas falsch.

Beschriftungen innerhalb von Feldern könnten jedoch gut für Kurzformen funktionieren, in denen Felder vorhersagbar sind . Anmeldeformulare sind dafür ein guter Kandidat. Aber bitte verwenden Sie nicht den HTML5-Platzhalter, um dies zu codieren. Verwenden Sie ein echtes Label im Code und verschieben Sie es mit CSS und JavaScript.

Seit dem Erfolg des Materialdesigns von Android zeichnet sich ein Muster ab: das schwebende Etikett. Dieses Etikett befindet sich innerhalb des Felds, wenn das Feld nicht ausgefüllt ist, sodass auf Mobilgeräten etwas weniger vertikaler Platz benötigt wird. Wenn Benutzer beginnen, mit dem Feld zu interagieren, bewegt sich die Beschriftung über das Feld.

Dies scheint eine interessante Möglichkeit zu sein, etwas Platz zu gewinnen, ohne auf die oben genannten Probleme „Platzhalter anstelle von Labels“ zu stoßen. Dennoch löst es nicht das Problem, dass Benutzer einen Platzhalter möglicherweise mit ausgefülltem Inhalt verwechseln.

Reduzierung der Interaktionskosten für erfolgreiche Formulare

Die Verringerung der Interaktionskosten (dh die Anzahl der Taps, Swipes usw.) von Benutzern, die ihre Aufgabe erfüllen, hilft Ihnen dabei, ein nahtloses Formularerlebnis zu schaffen. Um das zu erreichen, gibt es verschiedene Techniken. Sehen wir uns einige davon im Detail an.

Eine magische Studie im Internet hat mir geraten, die Anzahl der Felder zu reduzieren

Mehr Felder bedeuten weniger Conversions, richtig? Möglicherweise sind Sie auf die Studie „Wir haben unser Abonnementformular von 11 auf 4 Felder reduziert und die Conversions um 160 % gesteigert“ gestoßen. Es ist ein Klassiker. Und wenn Sie sich ihr Kontaktformular ansehen, macht es irgendwie Sinn. Warum sollten Benutzer 11 Felder ausfüllen, nur um das Unternehmen zu kontaktieren? So ein großes Engagement kann man doch nicht von Menschen verlangen, die einen kaum kennen, oder?

Beginnen Sie damit, nur nach nützlichen Informationen zu fragen. Warum benötigen Sie das Geschlecht einer Person, um ein Konto für sie zu erstellen? Warum haben Sie zwei Zeilen für die Adresse, wenn Ihr Abonnementformular für einen Onlinedienst bestimmt ist?

Fragen Sie nur nach den Informationen, die Sie benötigen. Und fragen Sie dann nach den Informationen im Kontext. Wenn Sie eine E-Commerce-Website haben, sind Benutzer möglicherweise eher geneigt, Ihnen ihre Adresse im Versandbereich des Bestellvorgangs anzugeben, als wenn sie sich registrieren. Es wird das Ausfüllen Ihres E-Commerce-Registrierungsformulars auf dem Handy so viel einfacher machen!

Vertrauen Sie auch nicht blind jeder Statistik und Studie, die Sie im Internet finden. Erinnern Sie sich an die 11-Felder-zu-4-Studie? Nun, eine neuere Studie zeigte, dass durch die Reduzierung der Felder von 9 auf 6 die Conversions um 14 % zurückgingen. Schockierend, nicht wahr? Warum? Nun, sie haben die interessantesten Felder entfernt. Um es kurz zu machen, sie gingen dann zurück zu 9 Feldern, setzten die wichtigsten an die Spitze und voila, die Conversions stiegen um 19,21 %.

Das Fazit ist, dass diese Studien zwar interessant sind, diese Websites jedoch nicht Ihre Website sind. Vertrauen Sie nicht blind der erstbesten Studie, die Sie im Internet finden.

Also was kannst du tun? Prüfen. Prüfen. Und testen!

• Führen Sie einige Benutzertests durch, um die Zeit bis zum Ausfüllen Ihres mobilen Formulars zu sehen.
• Aussetzer messen.
• Messen Sie Probleme mit bestimmten Feldern.
• Messen Sie die Frustration, die mit bestimmten Bereichen verbunden ist. Wie bereit sind die Nutzer, diese Informationen zu geben? Wie persönlich sind diese Informationen?

Optimierung von Touch-Interaktionen

Bedienelemente berührungsfreundlich gestalten

Wenn Ihre Felder zu klein oder schwer zu erreichen sind, werden Benutzer Fehler machen und zusätzliche Interaktionen benötigen, um ihre Ziele zu erreichen. Erinnerst du dich an Fitts Gesetz? Sie können es auch auf das mobile Design anwenden: Machen Sie Ihre Beschriftungen, Felder und Formularsteuerelemente einfach anzutippen, indem Sie die Größe des Berührungsziels erhöhen . Bei Etiketten im Web kann etwas mehr Polsterung den berührbaren Bereich vergrößern. Manchmal müssen Sie auch einige Ränder zwischen Elementen hinzufügen, um verpasste Taps zu vermeiden.

Vergessen Sie auch nicht, Labels mit ihren Komponenten zu verknüpfen, indem Sie for und ID-Werte paaren. Auf diese Weise erhält das entsprechende Feld immer noch den Fokus, wenn der Benutzer einen Tipp auf das Etikett verpasst.

Steven Hoober führte einige Benutzerstudien zu Berührungsbereichen durch. Eine Zusammenfassung finden Sie in „Designing for Touch“. Basierend auf seinen Entdeckungen baute er ein kleines Lineal aus Plastik: die mobile Touch-Vorlage. Das Tool könnte Ihnen helfen, sicherzustellen, dass Ihre Berührungsflächen groß genug für mobile Formulare und allgemeiner für mobiles Design sind.

Um mehr über das Design für Touch zu erfahren, können Sie Folgendes lesen:

• „Fingerfreundliches Design: Ideale Zielgrößen für mobile Touchscreens“
• „Die Daumenzone: Design für mobile Benutzer“

Feedback geben

Mobile Benutzer haben keine Maus (kein Scherz), daher erhalten sie nicht das „Klick“-Feedback, das Desktop-Benutzer erhalten, wenn sie eine Taste drücken. Benutzer mobiler Formulare benötigen klares Feedback, wenn sie mit Elementen interagieren:

• Stellen Sie einen Fokusstatus für das Formularfeld bereit, mit dem der Benutzer interagiert.
• Bieten Sie visuelles Feedback, wenn der Benutzer mit einer Schaltfläche interagiert .

Ich bin kein großer Fan des Welleneffekts des Materialdesigns auf Knöpfe. Aber ich muss zugeben, dass die Animationen auf Android ein klares Feedback geben, wenn der Benutzer mit einer Schaltfläche interagiert.

Beachten Sie die Reihenfolge der nächsten und vorherigen Schaltflächen

Beachten Sie schließlich die Schaltflächen „Weiter“ und „Zurück“ auf mobilen Tastaturen. Benutzer können sie verwenden, um schnell durch Felder zu navigieren. Die tabindex Reihenfolge sollte der visuellen Reihenfolge von Feldern und Komponenten entsprechen.

Vermeiden Sie nach Möglichkeit Dropdowns auf Mobilgeräten

Dropdowns (das HTML-Auswahlelement) im Web erfordern viele Registerkarten und Interaktionen. Daher sollten sie, wie Luke Wroblewski sagte, die UI der letzten Instanz sein. Viele andere UI-Komponenten funktionieren in vielen Situationen besser als Dropdowns.

Segmentsteuerelemente und Optionsfelder sind gute Alternativen zu Dropdowns, wenn Sie zwischen zwei und vier Optionen haben. Warum die Optionen unter einem Dropdown verstecken, wenn Sie sie alle direkt auf einem Bildschirm anzeigen können? Beachten Sie, dass sich Segmentsteuerelemente wie Optionsfelder gegenseitig ausschließen.

Eine Länderliste ist ein guter Kandidat für eine Komponente. Ein Dropdown-Menü mit über hundert Ländern ist ein Albtraum für die Interaktion auf Mobilgeräten. Es ist in Ordnung, wenn Sie nach Afghanistan (am Anfang der Liste) oder Simbabwe (am Ende der Liste) suchen. Wenn Sie nach Luxemburg suchen, landen Sie in einem Spiel des Scrollens, um die Mitte der Liste zu erreichen, gehen zu weit zum Buchstaben M, versuchen, zu L zurückzukehren, und so weiter.

Lange Dropdowns können durch Texterkennungsfelder ersetzt werden . Wenn der Benutzer beginnt, L einzugeben, würde die Schnittstelle neun Länder vorschlagen. Wenn sie ein U hinzufügen – voila! — Luxemburg ist es. Vier Interaktionen statt zwei, gegenüber bis zu sechs oder sieben Scroll-Interaktionen mit dem Dropdown-Menü.

Wenn Sie möchten, dass Benutzer ein Datum auswählen, vergessen Sie es, es in ein Dropdown-Menü für Tag, Monat und Jahr aufzuteilen, wie es die Leute von Papierformularen gewohnt sind. Ersetzen Sie mehrere Datums-Dropdowns durch eine Datumsauswahl . Die HTML5-Eingabe type=date funktioniert in den meisten Fällen. Aber vielleicht haben Sie einige spezielle Bedürfnisse und bauen am Ende Ihre eigene Datumsauswahl in JavaScript, insbesondere wenn Sie im Buchungsgeschäft tätig sind (Hotels, Autos, Flüge).

In seinem Artikel „Mobile DropDowns Revisited“ erklärt Klaus Schaefers, wie die Verwendung einer Datumsauswahl für Ankunfts- und Abreisedaten die Interaktionen um 60 % beschleunigte.

Bleiben wir beim Buchungsgeschäft. Angenommen, der Benutzer muss mehrere Reisende zu seinem Reiseplan hinzufügen. Sie können das Dropdown-Menü durch einen *Stepper** ersetzen, um die Anzahl der Passagiere auszuwählen. Ein Stepper ist ein Steuerelement, mit dem der Benutzer Werte erhöhen und verringern kann, indem er einfach auf die Schaltflächen + und - tippt. Das geht tendenziell schneller, wenn weniger als sechs Personen hinzugefügt werden müssen. Es ist auch intuitiver. Unten sehen Sie ein Beispiel für einen Stepper, der in der Android-nativen Airbnb-App zur Auswahl von Gästen und auf der für Mobilgeräte optimierten Website von Kayak zum Hinzufügen von Passagieren verwendet wird.

Eine letzte Alternative zu Dropdowns ist die Listenansicht. Die Optionen würden in einer bestimmten Unteransicht aufgelistet, beispielsweise als Optionsfelder . So funktionieren hauptsächlich die Android-Einstellungen.

Clever werden mit automatischer Vervollständigung

Wenn Sie die Interaktionskosten Ihres Formulars senken möchten, seien Sie schlau. Fragen Sie nicht nach Informationen, die Sie anhand anderer Informationen, die Ihnen Benutzer gegeben haben, automatisch erkennen oder erraten können. Automatische Vervollständigung und Vorausfüllung so viel wie möglich.

Orte und Adressen

Wenn der Benutzer nach einem Ort sucht oder eine Adresse eingeben muss, können Sie die automatische Vervollständigung anbieten, um ihm zu helfen. Während sie tippen, füllt eine API den Rest der Adresse für sie aus. Dadurch werden auch Fehler reduziert.

Du könntest benutzen:

• Google Places-API
• Algolia Places, das auf OpenStreetMap basiert

In Frankreich und vielen anderen Ländern können Sie die Stadt anhand der Vorwahl erraten. Wenn also ein französischer Benutzer eine Vorwahl eingibt, könnten Sie die Stadt automatisch vervollständigen oder zumindest vorschlagen. Mein Land, Luxemburg, ist klein (mach dich nicht über mich lustig). Meine Vorwahl ist mit meiner Straße verknüpft. Wenn ich also meine Vorwahl eingebe, sollte das Formular sogar meine Straße vorschlagen können.

Kreditkarten

Ein weiterer Bereich, in dem die automatische Erkennung einfach ist, sind Kreditkarten. Sie müssen den Benutzer nicht fragen, welche Art von Kreditkarte er hat. Sie können dies anhand der eingegebenen Anfangszahlen automatisch erkennen. Es gibt sogar eine Bibliothek, die die Arbeit für Sie erledigen kann.

Verwenden der automatischen HTML5-Vervollständigung (Autofill)

Das HTML-Autocomplete-Attribut kann Felder basierend auf früheren Eingaben des Benutzers vorausfüllen. Dieses Attribut hat einen Ein- und einen Aus-Zustand. Einige kluge Köpfe haben begonnen, an einer Spezifikation zu arbeiten, um dies leistungsfähiger zu machen und das Autocomplete-Attribut für Formularfelder zu erweitern. Die WHATWG hat auch eine interessante Liste.

Chrome und andere mobile Browser unterstützen bereits einige der erweiterten Werte für Kreditkarten und Namen. Das bedeutet, dass Benutzer Formulare mit ihrem Namen und Kreditkartendaten vorausfüllen können, die sie auf anderen Websites verwenden.

Kurz gesagt, wenn Sie zwischen verschiedenen Systemen wählen müssen, zählen Sie die Anzahl der Interaktionen, die für jedes erforderlich sind.

Fehler passieren: Umgang mit Fehlern in mobilen Formularen

Der letzte Schritt auf unserem Weg zu besseren mobilen Formularen ist der Umgang mit Fehlern und Irrtümern. Wir können versuchen, Fehler zu reduzieren, um die kognitive Belastung des Benutzers zu verringern. Wir können ihnen auch dabei helfen, sich von Fehlern zu erholen, denn egal wie gut Ihr Formulardesign ist, Fehler passieren.

Vermeidung von Fehlern beim Ausfüllen der Formulare

„Vorbeugen ist besser als heilen“, pflegte meine Mutter zu sagen. Das gilt auch für das Formulardesign: Das Vermeiden von Fehlern verbessert die Erfahrung Ihres mobilen Formulars.

Explizite Formatbeschränkung

„Sei konservativ in dem, was du tust. Sei großzügig in dem, was du von anderen akzeptierst.“ Dieses Robustheitsprinzip lässt sich auch auf Formularfelder anwenden. Lassen Sie den Benutzer nach Möglichkeit Daten in einem beliebigen Format eingeben.

Wenn Sie der Meinung sind, dass Sie einschränken müssen, was ein Benutzer in das Feld eingeben kann, fragen Sie sich zunächst „warum“. Auf dem Gebiet der Benutzererfahrung haben wir eine Technik, die „die drei Warums“ genannt wird. Wenn die Antwort „weil blah blah Datenbank“ lautet, ist es vielleicht an der Zeit, die Dinge zu ändern. Warum lehnen Sie beispielsweise Sonderzeichen wie e, a und o im Feld für den Benutzernamen ab? Ich habe einen Artikel geschrieben, in dem erklärt wird, wie unhöflich Formen für mich sind, wenn ich versuche, „Stephanie“ als Benutzernamen einzugeben. Ich versuche immer noch, einen guten Grund dafür herauszufinden (abgesehen von Datenbankgründen).

Wenn Sie einen guten Grund haben, ein bestimmtes Format von Benutzern zu verlangen, geben Sie dies im Voraus an . Sie können HTML5- Platzhalter verwenden, um Benutzern einen Hinweis darauf zu geben, wie die Daten aussehen sollten, aber seien Sie auch hier vorsichtig. Sie können auch alle am Anfang dieses Artikels erläuterten Feldbeschreibungstechniken verwenden . Schließlich können Eingabemasken Benutzer zum richtigen Format führen .

Kennzeichnung von Pflichtfeldern (und optionalen)

Warten Sie nicht darauf, dass Benutzer ein halb ausgefülltes Formular übermitteln, um sie über erforderliche Felder zu informieren. Wenn ein Feld obligatorisch ist, sollten Benutzer darüber Bescheid wissen . Die Kennzeichnung von Pflichtfeldern mit einem Sternchen ( * ) und einer Legende ist zu einem Standardmuster für Formulare geworden. Das Gute daran ist, dass es nicht viel Platz braucht. Das Problem ist, dass es keinen semantischen Wert hat, sodass es zu Problemen mit der Barrierefreiheit kommen kann, wenn es schlecht codiert ist und Sie sich bei der Formularinteraktion auf die Gewohnheiten der Menschen verlassen.

Sie könnten stattdessen sowohl obligatorische als auch optionale Felder explizit mit den Wörtern „required“ (oder „mandatory“) und „optional“ kennzeichnen . Darin sind sich sowohl das Baymard Institute als auch Luke Wroblewski einig. Dies vermeidet Mehrdeutigkeiten bei langen Formularen auf Mobilgeräten, z. B. wenn Sie einen Scroller verwenden, mit etwas anderem fortfahren, dann zurückkommen und sich nicht daran erinnern, ob Pflichtfelder mit einem Sternchen oder etwas anderem markiert wurden.

Letztendlich hängt die Entscheidung, wie diese Felder markiert werden sollen, vom Design und der Länge des Felds sowie vom Kontext ab. Der beste Weg, um zu wissen, ob Sie die richtige Entscheidung getroffen haben, ist wiederum, das Formular zu testen.

Sinnvolle Vorgaben

Seien Sie vorsichtig mit standardmäßig ausgewählten Optionen in Formularen . Als ich mich auf meine frühere Stelle beworben habe, gab es ein Informationsformular. Der Familienstand war optional. Sie haben das erste Element in der Dropdown-Liste, „geschieden“, zum Standardfeld gemacht. Also konnte ich entweder nicht antworten (weil es ein optionales Feld war) und das System glauben lassen, dass ich geschieden war, oder dies korrigieren und meinen tatsächlichen Familienstand offenlegen, auch wenn ich es nicht wollte.

Achten Sie auch auf das Geschlecht. Auch hier haben Sie eine Option für Leute, die es nicht offenlegen möchten; machen Sie deutlich, warum Sie nach ihrem Geschlecht fragen; noch besser, fragen Sie nach Pronomen oder fragen Sie nicht, wenn Sie nicht wirklich müssen. If you are interested in this topic, I recommend “Designing Forms for Gender Diversity and Inclusion.” And if the gender is optional, again, don't auto-check the first choice, otherwise people won't be able to uncheck that radio button and choose not to answer.

Smart defaults, on the other hand, can help users avoid mistakes when filling a form. Unless you're in a Dr. Who episode, you're not supposed to book a hotel in the past. Booking.com understands that. When you open the date-picker on the website, the default date is set to the current date and you can't select a date in the past. When you select a return date, the default is the day after the departure date.

Less Painful Password Experience

I've written about password-less authentication, but you can't always use those techniques. Users will eventually have to create a password and enter it in a mobile form. And most of the time, that experience sucks. Here are a few ideas on how to make it better and help users avoid mistakes.

• When Creating An Account
  I won't get into the details of what kind of passwords you should require and how many characters they should be composed of — plenty of articles on that topic are on the web — just make up your mind about your password criteria. When users create an account, be proactive, not reactive. For the love of Cthulhu, don't let people guess. Tell users your password criteria up front .
  
  A lot of websites now show you a gauge for password strength telling you in real time what is missing . This is an interesting and excellent pattern. KLM uses it in its sign-in form:

  

  But there are still some big problems with this design.

1. They don't tell users their password criteria up front. Users who want to generate a password (using a password manager, for instance) must first guess that they need to first interact with the field in other to see the password criteria.
2. They limit the password's length to 12 characters, but they never tell users how many characters are left. Sure, let's add "counting the dots" to the cognitive load of building a password with so many criteria. After 12 characters, you can keep on typing on the keyboard, and nothing will happen.
3. What happens if, like me, you reached the 12-character limit but haven't met all of the criteria? Well, you would just have to delete the entire password and start over again.
4. Finally, you must enter the password twice. How is a user supposed to remember and retype the password that they just created based on those criteria while counting the dots?
5. Back to 1, generating a password with a password manager.

If KLM wanted to make this form better, it could provide a mask/unmask option for the password. Doing so, it would not need to ask for the same password twice. Users could visually check that the password they typed is the one they want.

• Beim Einloggen
  In einem Anmeldeformular würde eine Option zum Maskieren/Unmaskieren des Passworts die Benutzererfahrung enorm verbessern.
  Amazon hat eine interessante Geschichte der Iteration von Passwörtern in seinem Anmeldeformular. Früher gab es eine Version, in der Sie das Passwort nicht sehen konnten. Die nächste Iteration ermöglichte es den Benutzern, es zu enthüllen. Dann wurde das Passwort standardmäßig angezeigt und Sie konnten es verbergen. So sah es 2015 aus:

  

  Amazon hat die letzte Version getestet und 60 % der Leute wurden misstrauisch. Also ersetzten sie das deaktivierte Kontrollkästchen „Kennwort verbergen“ durch ein aktiviertes Kontrollkästchen „Kennwort anzeigen“. Dies würde das Passwort in kleineren Zeichen unter dem Feld anzeigen, während der Benutzer tippt. So sieht es zum Zeitpunkt des Schreibens dieses Artikels aus:

  

  Wie Sie sehen, gibt es immer Raum für Verbesserungen.

Inline-Validierung

Wenn Sie mit Usability-Prinzipien vertraut sind, kennen Sie vielleicht das Gestaltgesetz der Nähe. Vermeiden Sie auf Mobilgeräten die Zusammenfassung der Fehler oben auf der Seite ohne Kontextinformationen, nachdem der Benutzer auf die Schaltfläche „Senden“ getippt hat.

Stattdessen sollten Fehlermeldungen in der Nähe der Fehler selbst platziert werden .

Echtzeit-Validierung

Sie müssen auch nicht warten, bis die Benutzer auf die Schaltfläche „Senden“ klicken. Sie können Felder validieren und Feedback anzeigen, während der Benutzer sie ausfüllt .

Einige Tipps:

• Wie bereits erwähnt, würden Passwortfelder von Echtzeit-Validierung und Feedback bei jedem Tastendruck profitieren.
• Möglicherweise möchten Sie Benutzernamen auch in Echtzeit validieren, wenn Konten erstellt werden, um sicherzustellen, dass sie verfügbar sind. Twitter macht da einen guten Job.
• Bestätigen Sie nicht jeden Tastendruck. Warten Sie, bis der Benutzer mit der Eingabe fertig ist. (Verwenden Sie JavaScript blur für Webformulare oder warten Sie einfach ein paar Sekunden, um Inaktivität zu erkennen.)

Hinweis : *Mihael Konjevic hat einen netten Artikel über „Inline Validation in Forms: Designing the Experience“ geschrieben. Er erklärt das Konzept „ früh belohnen, spät bestrafen “.*

„Wenn der Benutzer die Daten in das gültige Feld eingibt, führen Sie die Validierung nach der Dateneingabe durch.“

„Wenn der Benutzer die Daten in das Feld eingibt, das sich in einem ungültigen Zustand befand, führen Sie die Validierung während der Dateneingabe durch.“

Farbe ist wichtig

Ich sage nicht, dass Farbe wichtig ist, nur wegen meiner aktuellen Haarfarbe in Rot, Rosa und Lila. Farbe ist beim Formulardesign wirklich wichtig.

Es gibt einige Konventionen im Internet, die Sie nicht brechen möchten. Nicht farbenblinde Benutzer wissen, dass Rot für Fehler steht, Gelb für Warnungen und Grün fast immer für Bestätigung oder Erfolg. Bleiben Sie am besten bei diesen drei Farben. Rot kann Menschen jedoch ängstlich machen. Der Benutzer könnte denken, dass er einen wirklich schwerwiegenden Fehler gemacht hat. Die Verwendung von Orange oder Gelb für Fehlermeldungen könnte weniger Panik auslösen. Das Problem mit Gelb und Orange ist, dass es schwierig ist, farbenblinde Farbtöne zu finden.

Apropos Farbenblindheit: Farbe sollte nicht die einzige Möglichkeit sein, eine Fehlermeldung zu übermitteln . Dies ist ein Zugänglichkeitskriterium.

Im Beispiel unten links ist das fehlerhafte Feld orange und das korrigierte Feld grün. Ich habe ein farbenblindes Testtool verwendet, um den Screenshot in der Mitte aufzunehmen: Sie können nicht mehr zwischen dem standardmäßig grauen und dem grünen Rahmen unterscheiden. Das Hinzufügen einiger Symbole im letzten Screenshot stellt sicher, dass die Fehlermeldungen an farbenblinde Personen übermittelt werden.

Wiederherstellung nach Fehlern: Schreiben benutzerfreundlicher Fehlermeldungen

An dieser Stelle haben wir alles getan, um Benutzern beim Ausfüllen unserer Formulare zu helfen und Fehler zu vermeiden. Aber manchmal passieren trotz aller Bemühungen Fehler. Es ist an der Zeit herauszufinden, wie Sie Benutzern helfen können, sich von diesen Fehlern zu erholen.

Denken Sie zunächst daran: Übernehmen Sie nicht die Kontrolle über das System. Wenn ein Problem nicht kritisch ist, sollte der Benutzer in der Lage sein, mit so viel Rest der Oberfläche wie möglich weiter zu interagieren. Vermeiden Sie diese JavaScript-Warnfehlermeldungen und Modale, die Benutzer wann immer möglich blockieren. Wenn Ihr Formular eine Erlaubnis benötigt, fordern Sie diese im Nutzungsablauf an. Wenn die Berechtigung nicht erteilt wird, betrachten Sie dies nicht als Fehler, da dies nicht der Fall ist. Seien Sie vorsichtig mit der Kopie, die Sie hier verwenden.

Sie sind kein Roboter und Ihre Benutzer auch nicht

Roboter sind cool, ich weiß. Aber Sie sind kein Roboter, und Ihre Benutzer sind es auch nicht. Doch so viele Fehlermeldungen sind immer noch so schlecht geschrieben. Hier sind ein paar Tipps, wenn es um benutzerfreundliche Fehlermeldungen geht:

• Zeigen Sie niemals eine rohe Fehlermeldung wie „Ein Fehler des Typs 2393 ist aufgetreten. Der Server konnte den Vorgang nicht abschließen.“ Erklären Sie stattdessen in menschlicher Sprache, was passiert ist und warum es passiert ist .
• Niemals eine Sackgassen-Fehlermeldung wie „Ein Fehler ist aufgetreten“ anzeigen. Schlagen Sie stattdessen Möglichkeiten zur Behebung des Fehlers vor . Schreiben Sie eine umsetzbare Kopie.
• Zeigen Sie niemals eine vage Fehlermeldung wie „Ein Server mit dem angegebenen Hostnamen konnte nicht gefunden werden“ mit einer Schaltfläche „Erneut versuchen“ an. Gestalten Sie Fehlermeldungen stattdessen informativ und konsistent . Bitte klingen Sie nicht wie ein Roboter.
• Gehen Sie nicht davon aus, dass die Leute den Kontext einer Nachricht kennen. Ihre Benutzer sind keine technisch versierten Geeks. Erklären Sie ihnen stattdessen in einfacher Sprache und ohne Fachchinesisch, wie sie diesen Fehler beheben können .

Achten Sie auf die Sprache, die Sie in Nachrichten verwenden

Was auch immer du schreibst, vermeide es, den Leuten das Gefühl zu geben, wegen eines Fehlers dumm zu sein. Lassen Sie nach Möglichkeit negative Worte weg ; Sie neigen dazu, Menschen Angst zu machen und sie noch ängstlicher zu machen. Verwenden Sie stattdessen einen höflichen, positiven und bestätigenden Ton.

Machen Sie Benutzer nicht für Fehler verantwortlich ; beschuldige stattdessen das System. Das System wird keinen Groll hegen, das verspreche ich. Lenken Sie die Aufmerksamkeit des Benutzers darauf, warum das System die Aktion nicht verarbeiten konnte, und erklären Sie ihm, wie er eine Lösung finden kann .

Ein kleiner Trick besteht darin , die eigene Nachricht laut vorzulesen. Es wird Ihnen helfen zu hören, ob es funktioniert oder zu hart oder zu lässig usw. ist.

Sie können auch mit Fehlermeldungen kreativ werden und Bilder und Humor einbauen , um sie weniger bedrohlich zu machen. Dies hängt jedoch wirklich von der Identität und dem Ton Ihrer Marke ab.

Um Ihnen zu helfen, eine bessere Fehlermeldung zu schreiben, empfehle ich Ihnen, Folgendes zu lesen:

• „Eine 6-Punkte-Mikrokopie-Checkliste für Produktteams ohne UX-Autoren“
• „Die Kunst der Fehlermeldung: Klare, hilfreiche Texte schreiben, wenn etwas schief geht“

Zeit zum Absenden des Formulars

Der Benutzer hat das Formular ausgefüllt, es gibt keine Fehler mehr und alles sieht gut aus. Endlich ist es an der Zeit, das Formular abzusenden!

Die erste Regel lautet: Verbergen Sie die Schaltfläche „Senden“ nicht . Ernsthaft! Ich frage mich, welcher verdrehte Verstand auf diese Idee gekommen ist, aber ich habe sie in einigen Formen gesehen. Der Senden-Button wurde erst angezeigt, wenn alle erforderlichen Felder fehlerfrei ausgefüllt wurden. Es ist beunruhigend für den Benutzer, sich zu fragen, ob etwas nicht stimmt oder die Schaltfläche des Formulars nicht geladen wurde oder die Website kaputt ist und so weiter.

Wenn Sie nicht möchten, dass Benutzer die Senden-Schaltfläche drücken können, wenn Pflichtfelder fehlen oder Validierungsfehler vorliegen, verwenden Sie das disabled HTML-Attribut für die submit -Eingabe . Sie müssen die Schaltfläche mithilfe von JavaScript erneut aktivieren, sobald das Formular gültig und zur Übermittlung bereit ist.

Wenn Sie einen primären und sekundären Call-to-Action haben, verwenden Sie Farbe, Größe und Stil, um die Hierarchie darzustellen .

Wenn Sie sich fragen, ob der Bestätigungs-Button vor oder nach dem Abbruch-Button kommen soll, bin ich es (und viele andere Leute auch). Wenn Sie eine native App erstellen, halten Sie sich an die Richtlinien des Betriebssystems. Besonders lustig wird es, seit Android in seiner vierten Version die Tastenpositionen geändert hat. Im Web ist es komplizierter, weil es keine wirklichen Richtlinien gibt. Unabhängig vom Betriebssystem finden Sie hier einige allgemeine Richtlinien für für Mobilgeräte optimierte Senden-Schaltflächen:

• Geben Sie dem Call-to-Action beschreibende, umsetzbare Verben.
• Bieten Sie visuelles Feedback, wenn der Benutzer darauf tippt.
• Wenn Sie zwei Schaltflächen haben, heben Sie die primäre Aktion hervor .
• Vermeiden Sie eine Schaltfläche zum Zurücksetzen , es sei denn, Sie arbeiten an einem sehr spezifischen Backoffice-Unternehmensformular (in diesem Fall stehen Sie vor vielen Herausforderungen bei der Optimierung für Mobilgeräte). Benutzer könnten es mit dem Senden-Button verwechseln und versehentlich alle ihre Daten verlieren.

Fazit

In diesem ersten Teil habe ich viele kleine Techniken besprochen, um Ihr Formular auf die nächste Stufe zu heben und Benutzern beim Ausfüllen zu helfen. Einige dieser allgemeinen Richtlinien und Best Practices für Mobilgeräte funktionieren möglicherweise nicht zu 100 % – das ist der Haken mit Best Practices. Testen Sie Ihre Formulare daher immer auf echten Benutzern und echten Geräten und passen Sie die Richtlinien an die spezifischen Bedürfnisse und Erfahrungen Ihrer Benutzer an.

Führen Sie auch einige Regressions- und automatisierte Funktionstests durch – wiederum auf echten Geräten. Der mobile Emulator von Chrome reicht nicht aus, um berührungsoptimierte Formulare zu testen. Ich sage das, weil ich eine E-Commerce-Website mit einem Suchformular gestartet hatte, das auf Mobilgeräten nicht funktionierte. Wir haben nur automatisierte Tests mit einem Emulator durchgeführt. Folgendes ist passiert. Das Suchformular wurde unter einem Suchsymbol versteckt. Sie könnten auf die Schaltfläche tippen, die ein Feld mit dem Suchfeld öffnete. Es funktionierte, indem ein Maus-Hover als Touch-Ereignis emuliert wurde. Wir haben getestet, auf den Knopf zu tippen, und es öffnete sich die Box. Niemand hat versucht, eine Suche zu starten. Niemand (nicht einmal der Client) sah also, dass das Suchfeld verschwand, sobald Benutzer versuchten, damit zu interagieren. Was ist passiert? Wenn das Eingabeelement den Fokus erhielt, verlor die Schaltfläche den Schwebezustand, sodass die Box mit dem Feld geschlossen wurde. Automatisierte Tests konnten dies nicht erkennen, da die Eingabe den Fokus nicht verlor. Also haben wir eine E-Commerce-Website ohne Suchfunktion auf Mobilgeräten gestartet. Keine super Erfahrung.

Im zweiten Teil dieser Serie werden wir fortgeschrittenere mobilspezifische Techniken kennenlernen. Wir werden sehen, wie man coole HTML5-Funktionen zum Formatieren von Feldern verwendet und wie man mobile Funktionen nutzt, um die mobile Benutzererfahrung auf die nächste Stufe zu heben.