Grundlagen: Mobile Formulargestaltung

Online-Käufer/innen nutzen zunehmend ihre mobilen Geräte, um neue Läden zu entdecken, Produkte zu durchsuchen und Einkäufe zu tätigen. Allein in den USA wurden mehr als 35 % der Online-Einkäufe über ein mobiles Gerät getätigt, und diese Zahl steigt jedes Jahr weiter an. 

Um sicherzustellen, dass du diese Kunden in Abonnenten umwandelst, ist es wichtig, dass dein Anmeldeformular auf dem Handy genauso gut aussieht wie auf dem Desktop. 

Wenn du mehr als 3 Felder brauchst, z.B. wenn du die Zustimmung per E-Mail und SMS gleichzeitig einholen willst, solltest du ein mehrstufiges Formular in Betracht ziehen. 

Ein mehrstufiges Formular ermöglicht es dir, mehr Informationen zu sammeln, ohne den potenziellen Abonnenten zu überfordern. Außerdem ist ein separater Schritt für SMS eine bewährte Praxis, wenn mehrere Arten von Einwilligungen in einem Formular gesammelt werden. 

Alternativ kannst du mehr über deinen Abonnenten erfahren, indem du ihn später in der Customer Journey erneut ansprichst. Vielleicht fragst du nach dem Geburtstag deines aktuellen Abonnenten, indem du ihm nach 30 Tagen ein weiteres Formular zeigst, oder du fragst ihn im Rahmen deines Willkommensflusses.

Auch wenn alle Felder eines Formulars Pflichtfelder sind, ist es seltsam, nach dem Geburtstag einer Person zu fragen, bevor sie ihren Namen angibt. 

Frag in der Regel nach Informationen, die am wenigsten oder am meisten persönlich sind. Zum Beispiel: 

1. Name
2. E-Mail oder Telefonnummer
3. Geburtstag

Einspaltig bedeutet, dass alle Eingabefelder und Schaltflächen einer einzigen Zeile im Formular folgen. Während mehrspaltige Formate für den Desktop gut geeignet sind, können sie mobile Formulare unübersichtlich oder überfüllt aussehen lassen. Einspaltige Formulare sind auch auf dem Handy leichter zu scannen.

Einspaltiges Formular	Mehrspaltiges Formular

Die CTA-Schaltfläche sollte am Ende des Scanvorgangs des Betrachters stehen, damit sie das Letzte ist, was er sieht. Du willst nicht, dass sie nach oben scrollen müssen, um das Formular auszufüllen, oder nach der Schaltfläche suchen müssen. 

Normalerweise wird der CTA-Button in der Mitte oder auf der linken Seite platziert. 

Der Grund, warum der Schließen-Button in der oberen rechten Ecke sein muss, ist einfach, weil die Nutzer ihn dort erwarten. 

Wenn du sie an einer anderen Stelle platzierst, z. B. oben links oder in der Nähe des unteren Randes, kann es sein, dass deine Nutzer Zeit damit verbringen, nach einem Weg zu suchen, um das Formular zu schließen, und dass sie frustriert sind, während sie suchen. Das könnte dazu führen, dass sie mit einem negativen Eindruck von deiner Marke nach Hause gehen, was bedeutet, dass sie deine Seite in Zukunft weniger häufig besuchen oder Kunde werden.

Platziere ein Etikett direkt über jedem Feld in deinem Formular, das klar beschreibt, welche Informationen sie angeben sollen. 

Setze die Beschriftungen außerdem in die Nähe der Felder, die sie beschreiben, damit klar ist, dass sie zusammengehören.

Jedes Etikett sollte weniger als eine Zeile umfassen, wenn es auf einem mobilen Gerät angezeigt wird, daher ist es wichtig, sich kurz zu fassen.

In allen Feldern, in denen du Text oder Zahlen eingeben musst, solltest du Platzhalter einfügen, um deiner Zielgruppe zu zeigen, wie ihre Eingabe aussehen sollte (z. B. eine Beispiel-E-Mail, ein Name, ein Datumsformat usw.).

Das hilft, die Anzahl der Fehler zu reduzieren, die jemand machen könnte. Die Zusammenarbeit mit Beschriftungen und Platzhaltern macht es den Nutzern leicht, durch dein Formular zu navigieren. 

Pro-Tipp: Schaltflächen sollten auch Beschriftungen haben. Ein anschaulicherer Text in der Schaltfläche hilft dem Nutzer ebenfalls. 

Wenn du zum Beispiel "Newsletter abonnieren" oder "Für SMSanmelden" sagst, anstatt einfach "Abschicken" zu sagen, wird klarer, was der Button bewirkt. Außerdem kannst du so in der kleineren Form wertvollen Platz sparen. 

Wenn du deinen Kunden sagst, welche Felder sie ausfüllen müssen und welche nicht, wird das Nutzererlebnis optimiert. Du kannst bestimmte Formularelemente als obligatorisch und andere als optional kennzeichnen, 

Füge eine Erfolgsmeldung ein, nachdem jemand das Formular abgeschickt hat, damit der Nutzer weiß, dass er erfolgreich war. 

Wenn du eine Schriftgröße von 16 oder mehr Pixeln verwendest, ist der Text gut lesbar. Auf diese Weise müssen die Nutzer nicht heranzoomen, um zu lesen.

16 Pixel ist die empfohlene Mindestschriftgröße für jeden Text in deinem mobilen Formular, einschließlich Beschriftungen, Platzhalter und Schaltflächentext. 

Lasse genug Platz zwischen den einzelnen Aktionen in deinem Formular, damit die Nutzer/innen sich nicht abmühen müssen, in das gewünschte Feld zu klicken. Andernfalls kann es sein, dass sie lieber weggehen, als es weiter zu versuchen. 

Wenn du dein Formular erstellst, solltest du es den Nutzern so schwer wie möglich machen, einen Fehler zu machen. Teste das Nutzererlebnis auf verschiedenen Geräten. 

Alle "Touch-Ziele", wie Eingabefelder oder Buttons, sollten groß und leicht zu klicken sein. 

Der durchschnittliche Finger eines Erwachsenen ist 11 MM+, das sind etwa 41,6 Pixel. Um dies zu berücksichtigen, ist es am besten, wenn die Berührungsziele mindestens 48 Pixel groß sind. 

Verwende einen Formular-Teaser, damit mobile Besucher das Formular nach Belieben öffnen und schließen können, während sie surfen, und damit das Formular den Inhalt deiner Website nicht verdeckt.
Beachte, dass Google Websites mit aufdringlichen Interstitials abstrafen kann. Teaser helfen, diese Strafe zu vermeiden, aber du solltest auch eine lange Zeitverzögerung bei Formularen verwenden. 

Der Farbkontrast ist der Lichtunterschied zwischen Text oder Objekten im Vordergrund und im Hintergrund. Ein guter Farbkontrast verbessert die Lesbarkeit deines Formulars und ist ein wichtiger Bestandteil der Barrierefreiheit. Verwende einen Farbkontrast-Checker, um deinen Farbkontrast zu überprüfen.

Der kleinste Kontrast beträgt 1:1 und ist unmöglich zu lesen (denk an weißen Text auf weißem Hintergrund). Der höchste verfügbare Kontrast ist 21:1, also schwarzer Text auf weißem Hintergrund. Mit anderen Worten: Je größer das Verhältnis, desto besser ist der Kontrast. 

Gemäß den Web Content Accessibility Guidelines (WCAG) beträgt der Mindestfarbkontrast 4,5:1 für kleinen Text, Bilder und Text in Bildern und 3:1 für großen Text oder wichtige Elemente. 

Im Idealfall sollte der Kontrast noch größer sein. Nach den WCAG ist ein besseres Minimum:

• 7:1 für kleineren Text, Bilder oder Bilder von Text
• 4,5:1 für größeren Text, wichtige visuelle Elemente usw. 

Es ist wichtig, dass alle die Inhalte schätzen können, an denen du so hart arbeitest. Die Verwendung bestimmter Farbkombinationen kann die Lesbarkeit des Formulars für manche Gruppen erschweren oder sogar unmöglich machen. 

Bei der Frage, welche du nicht verwenden solltest, solltest du bedenken, dass es viele Arten von Farbenblindheit gibt (es gibt nicht nur Rot und Grün).