Grundlagen: Gestaltung mobiler Formulare
Übersicht
Lerne die 6 grundlegenden Prinzipien zum Erstellen von Anmeldeformularen für Mobilgeräte.
Warum ist das Design mobiler Formulare wichtig?
Online-Käufer*innen nutzen zunehmend ihre Mobilgeräte, um neue Shops zu entdecken, Produkte zu durchsuchen und Käufe zu tätigen. Allein in den USA wurden bei mehr als 35 % der Online-Käufe Mobilgeräte verwendet, und diese Zahl steigt jedes Jahr weiter an.
Damit du diese Kund*innen zu Abonnent*innen machst, ist es entscheidend, dass deine Anmeldeformulare auf Mobilgeräten genauso gut aussehen wie auf dem Desktop.
Die 6 Grundlagen der Gestaltung mobiler Formulare
- Das Formular kurz und prägnant halten
- Strukturiere dein Formular so, dass es den Erwartungen von Nutzer*innen entspricht
- Nutzer*innen beim Navigieren durch dein Formular unterstützen
- Wähle Inhaltsblöcke aus, die auf Mobilgeräten gut funktionieren
- Sorge dafür, dass dein Formular auf Mobilgeräten leicht zu öffnen, zu lesen und auszufüllen ist
- Achte auf deine Farben und ihren Kontrast
Das Formular kurz und prägnant halten
Bei mobilen Formularen gilt: Weniger ist immer mehr. Auch wenn es verlockend sein kann, alles, was du über eine*n Abonnent*in wissen kannst, auf einmal zu erfahren (Name, E-Mail-Adresse, Geburtstag usw.), können lange Formulare auf Mobilgeräten zu einer niedrigeren Ausfüllrate führen.
Begrenze die Anzahl der Formularelemente oder Felder, die Kund*innen ausfüllen müssen, so weit wie möglich.
- Empfohlene Anzahl an Eingabefeldern: 1–3 pro Seite
- Empfohlene Anzahl an Call-to-Action-Buttons: 1–2 pro Seite
Was mache ich, wenn ich mehr als 3 Felder benötige?
Wenn du mehr als 3 Felder benötigst, z. B. wenn du gleichzeitig die Einwilligung für E-Mail und SMS erfassen möchtest, solltest du ein mehrstufiges Formular in Betracht ziehen.
Mit einem mehrstufigen Formular kannst du mehr Informationen erfassen, ohne potenzielle Abonnent*innen zu überfordern. Außerdem ist ein separater Schritt für SMS eine Compliance-Best-Practice, wenn du in 1 Formular mehrere Arten der Einwilligung einholst.
Alternativ kannst du mehr über deine Abonnent*innen erfahren, indem du sie später in der Customer Journey erneut ansprichst. Vielleicht fragst du nach dem Geburtstag deiner aktuellen Abonnent*innen, indem du ihnen nach 30 Tagen ein weiteres Formular anzeigst, oder du fragst im Rahmen deiner Welcome-Serie nach.
Strukturiere dein Formular so, dass es den Erwartungen von Nutzer*innen entspricht
Menschen erwarten, dass Formulare einer bestimmten Logik folgen, und es kann frustrierend (oder einfach nur seltsam) sein, wenn ein Formular das nicht tut.
Unten findest du Tipps zur Strukturierung eines Formulars für Mobilgeräte.
Bitte zuerst nach den weniger persönlichen Infos fragen.
Auch wenn alle Felder in einem Formular erforderlich sind, ist es dennoch seltsam, vor dem Namen nach dem Geburtstag von jemandem zu fragen.
Frag im Allgemeinen nach Informationen von am wenigsten bis am meisten persönlich. Zum Beispiel:
- Name
- E-Mail-Adresse oder Telefonnummer
- Geburtstag
Verwende auf Mobilgeräten eine einspaltige Struktur
Ein einspaltiges Layout bedeutet, dass alle Eingaben, Felder und Schaltflächen im Formular einer einzigen Linie folgen. Mehrspaltige Formate sind zwar auf dem Desktop in Ordnung, können aber dazu führen, dass mobile Formulare unübersichtlich oder überladen wirken. Einspaltige Formulare sind auf Mobilgeräten außerdem leichter zu überfliegen.
Einspaltiges Formular | Mehrspaltiges Formular |
 |  |
Platziere Call-to-Action-(CTA-)Buttons am unteren Rand eines Formulars
Der CTA-Button sollte am Ende des Scanverlaufs der Betrachter*innen stehen, damit er das Letzte ist, was sie sehen. Du möchtest nicht, dass sie nach oben scrollen müssen, um das Formular auszufüllen, oder nach der Schaltfläche suchen müssen.
In der Regel wird die CTA-Schaltfläche in der Mitte oder auf der linken Seite platziert.
Platziere die Schließen-Schaltfläche in der oberen rechten Ecke
Der Grund, warum sich die Schließen-Schaltfläche oben rechts befinden muss, ist schlicht, dass Nutzer*innen erwarten, sie dort zu sehen.
Wenn du es woanders platzierst, z. B. oben links oder weiter unten, verbringen Nutzer*innen möglicherweise Zeit damit, nach einer Möglichkeit zum Schließen des Formulars zu suchen, und sind frustriert, während sie suchen. Das könnte dazu führen, dass sie mit einem negativen Eindruck von deiner Marke abspringen, wodurch sie deine Website in Zukunft weniger wahrscheinlich besuchen oder zu Kund*innen werden.
Nutzer*innen beim Navigieren durch dein Formular unterstützen
Auf Mobilgeräten solltest du so klar wie möglich beschreiben, was jemand tun muss, wie es gemacht werden soll und was die Person bereits erledigt hat.
Platziere prägnante Beschriftungen über (und nahe bei) jedem Feld
Platziere ein Label direkt über jedem Feld in deinem Formular, das klar beschreibt, welche Informationen Kund*innen angeben sollen.
Platziere außerdem Beschriftungen nahe bei den Feldern, die sie beschreiben, damit klar ist, dass die beiden zusammengehören.
Jede Bezeichnung sollte auf jedem Mobilgerät weniger als eine einzelne Zeile einnehmen, daher ist es entscheidend, sich kurz zu fassen.
Platzhalter in jedem Texteingabefeld verwenden
Füge in jedem Feld, in dem Kund*innen Text oder Zahlen eingeben müssen, Platzhalter ein, damit deine Zielgruppe sieht, wie die Eingabe aussehen sollte (z. B. eine Beispiel-E-Mail-Adresse, ein Name, ein Datumsformat usw.).
Das hilft, die Anzahl der Fehler zu reduzieren, die jemand machen könnte. Die Zusammenarbeit von Bezeichnungen und Platzhaltern macht es Nutzer*innen leicht, durch dein Formular zu navigieren.
Verwende für Buttons eine aussagekräftige Call-to-Action
Profi-Tipp: Schaltflächen sollten auch Beschriftungen haben. Eine aussagekräftigere Schaltflächenbeschriftung hilft Nutzer*innen ebenfalls.
Statt beispielsweise eines einfachen Call-to-Action wie „Absenden“ sorgt „Newsletter abonnieren“ oder „Für SMS anmelden“ für eine klarere Vorstellung davon, was die Schaltfläche macht. Außerdem kann dir das helfen, wertvollen Platz im kleineren Formular zu sparen.
Gib an, welche Felder erforderlich sind und welche optional sind
Wenn du deinen Kund*innen mitteilst, welche Felder sie ausfüllen müssen und welche nicht, optimierst du die Nutzererfahrung. Du kannst bestimmte Formularelemente als erforderlich festlegen und andere optional,
Eine Erfolgsmeldung einfügen
Füge eine Erfolgsmeldung hinzu, nachdem jemand das Formular gesendet hat, damit die Person weiß, dass es erfolgreich war.
Wähle Inhaltsblöcke aus, die auf Mobilgeräten gut funktionieren
Bestimmte Arten von Formularblöcken sind mobilfreundlicher als andere. Unten listen wir auf, was du auf Mobilgeräten verwenden solltest und was nicht.
Gut für die Nutzung auf Mobilgeräten | Schlecht für die Nutzung auf Mobilgeräten |
Text- oder Zahleneingaben (E-Mail, Telefon, Datum) | Multi-Checkboxes |
Optionsfelder | Drop-downs |
Tap-to-Text-Schaltflächen (für SMS-Einwilligung) |
Sorge dafür, dass dein Formular auf Mobilgeräten leicht zu öffnen, zu lesen und auszufüllen ist
Im Allgemeinen sollte dein Formular auf Mobilgeräten einfach zu verwenden sein. Niemand sollte sich abmühen müssen, den Text zu lesen oder auf eine bestimmte Schaltfläche zu klicken. Wenn das passiert, könnten Nutzer*innen frustriert sein und das Formular oder deine Website komplett verlassen.
Es gibt mehrere Best Practices beim Design für Mobilgeräte.
Stelle die Schriftgröße auf mindestens 16 Pixel ein
Eine Schriftgröße von 16 oder mehr Pixeln trägt dazu bei, dass der Text lesbar ist. So müssen Benutzer*innen nicht hineinzoomen, um lesen zu können.
16 Pixel ist die empfohlene Mindestschriftgröße für jeden Text in deinem mobilen Formular, einschließlich Labels, Platzhaltern und Button-Text.
Füge zwischen Feldern, Buttons usw. mindestens 8 Pixel Abstand hinzu.
Lass in deinem Formular genug Platz zwischen einzelnen Aktionen, damit Nutzer*innen nicht Schwierigkeiten haben, in das gewünschte Feld zu klicken. Andernfalls entscheiden sie sich möglicherweise dafür, wegzugehen, statt weiter zu versuchen.
Während du dein Formular erstellst, versuche, es Nutzer*innen so schwer wie möglich zu machen, einen Fehler zu machen. Teste die User Experience auf verschiedenen Gerätetypen.
Mach Touch-Ziele mindestens 48 Pixel groß
Alle „Touch-Ziele“, z. B. Eingabefelder oder Schaltflächen, sollten groß und leicht anzuklicken sein.
Der durchschnittliche Finger eines Erwachsenen ist 11 mm, das sind etwa 41,6 Pixel. Um dem Rechnung zu tragen, ist es eine Best Practice, Touch-Ziele mindestens 48 Pixel groß zu machen.
Einen Formular-Teaser verwenden
Verwende einen Teaser, damit mobile Besucher*innen das Formular nach Wunsch öffnen und schließen können, während sie browsen, und damit das Formular die Inhalte deiner Website nicht verdeckt.
Beachte, dass Google Websites mit aufdringlichen Interstitials abstraft. Teaser helfen, diese Abstrafung zu vermeiden, aber du solltest bei Formularen auch eine lange Zeitverzögerung verwenden.
Achte auf deine Farben und ihren Kontrast
Du solltest immer darauf achten, dass die Farben deines Formulars zu deiner Marke passen, damit es deine Marke widerspiegelt.
Es ist jedoch genauso wichtig, die Farbkombinationen für alle Nutzer*innen barrierefrei zu gestalten. Andernfalls riskierst du, potenzielle Abonnent*innen oder Kund*innen zu vergraulen.
Bei der Auswahl deiner Farben gibt es 2 wichtige Aspekte.
Wähle Farben mit hohem Kontrast aus
Farbkontrast ist der Unterschied in der Helligkeit zwischen Text oder Objekten im Vordergrund und dem Hintergrund. Ein guter Farbkontrast verbessert die Lesbarkeit deines Formulars und ist eine wichtige Komponente der Barrierefreiheit. Verwende einen Farbkontrast-Checker, um deinen Farbkontrast zu prüfen.
Der kleinste Kontrast ist 1:1 und ist unmöglich zu lesen (z. B. weißer 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 Mindest farbkontrast 4,5:1 für kleinen Text, Bilder und Text in Bildern sowie 3:1 für großen Text oder wichtige Elemente.
Idealerweise sollte der Kontrast sogar noch größer sein. Laut WCAG ist ein besserer Mindestwert:
- 7:1 für kleineren Text, Bilder oder Bilder von Text
- 4,5:1 für größeren Text, wichtige visuelle Elemente usw.
Wähle farbenblindfreundliche Farben aus
Es ist wichtig, dass jede*r die Inhalte wertschätzen kann, an denen du so hart arbeitest. Die Verwendung bestimmter Farbkombinationen kann dazu führen, dass das Formular für einige Gruppen schwer oder sogar unmöglich zu lesen ist.
Farbenblindheitsfreundliche Kombinationen | |||
Blau und Orange |   | Blau und Gelb |  |
Blau und Rot |  | Orange und Gelb | |
Blau und Braun |  | ||
Wenn es darum geht, welche du nicht verwenden solltest, denk daran, dass es viele Arten von Farbenblindheit gibt (nicht nur Rot und Grün).
Farbkombinationen, die vermieden werden sollten | |||
Grün und Rot |  | Blau und Lila |  |
Rot und Orange | | Blau und Grau |  |
Grün und Orange | | Lila und Rot | |
Rot und Braun | | Blaugrün und Pink |   |
Grün und braun | | Blaugrün und Grau | |
Grün und Blau | | Gelb und Rosa | |
Hellgrün und Gelb |  | Rosa und Grau | |
Grün und Grau | | Grau und Braun | |
Grün und Schwarz |  | Orange und Braun | |
Rot und Schwarz | | ||
Weitere Ressourcen
- Getting started with sign-up forms
Learn how to create and customize sign-up forms in Klaviyo to publish on your website so you can engage shoppers, collect emails and phone numbers, and build long-lasting customer relationships.
- How to collect SMS consent with a tap-to-text form
Learn how to set up a tap-to-text sign-up form to collect phone numbers from new prospects. With tap-to-text, site visitors can click a button in your sign-up form to automatically open their text messaging app where Klaviyo has added a message. They only need to send the message to subscribe.
- How to create ADA-friendly sign-up forms
Learn how to use the accessibility assistant feature in the Form Alerts tab of the sign-up forms editor to avoid some of the most common web content accessibility guidelines (WCAG) compliance issues. Companies striving to make their websites ADA-friendly should reference and follow WCAG standards. The accessibility assistant guides you in creating sign-up forms that are accessible for all of your site visitors.