Ein Leitfaden für Anfänger zur Umwandlung mobiler Benutzer

Denken Sie an eine Zeit, als Sie im Zug saßen, am Flughafen saßen oder einfach auf der Couch lagen und ein Online-Formular auf Ihrem Smartphone ausfüllen mussten. Haben Sie jemals auf das mobile Formulardesign geachtet?

Wahrscheinlich haben Sie es nicht bemerkt. Das ist das Ziel – den Benutzern ein intuitives Erlebnis zu bieten, das sie dazu bringt, das Formular nahtlos auszufüllen und mit ihrem Tag fortzufahren.

In diesem Leitfaden werden wir die effektivsten Möglichkeiten dafür aufzeigen. Hier erfahren Sie, wie Sie mobile Formulare entwerfen, die nicht klobig oder falsch ausgerichtet sind, sondern dazu beitragen, die Conversions zu steigern und eine großartige Benutzererfahrung zu schaffen.

Inhaltsverzeichnis

Mobiles vs. Desktop-Formulardesign

Heutzutage durchsuchen Ihre Website-Besucher nicht nur Ihre Website, sehen sich Ihre Inhalte an und füllen Ihre Formulare von ihren Desktop-Computern aus. Sie erledigen diese Aufgaben auch von ihren Mobilgeräten aus.

Mobilgeräte waren von April bis Juni 2022 für fast 60 % des weltweiten Website-Verkehrs verantwortlich. Daher ist es entscheidend, dass Ihr Formular über ein Mobilgerät einfach zu überprüfen, auszufüllen und einzureichen ist.

Warum ist das Design mobiler Formulare wichtig?

Das beste Design für mobile Formulare ermöglicht eine positive Benutzererfahrung, die einen zufriedenen Website-Besucher sicherstellt, der mit größerer Wahrscheinlichkeit zu einem Kunden wird und ein wiederkehrender Benutzer wird.

Das Design, Layout und die Funktionalität Ihrer mobilen Formulare spielen eine große Rolle für die allgemeine Benutzererfahrung Ihrer Website.

Wenn Ihre Formulare nicht für Mobilgeräte geeignet sind, kann es zu weniger Conversions, einem Verlust an mobilem Website-Traffic und einer Zunahme unzufriedener und frustrierter Kunden kommen. Und wer will das?

Warum sollte sich das Design mobiler Formulare vom Desktop-Design unterscheiden?

„Auf Mobilgeräten funktioniert alles anders, daher müssen Vermarkter sicherstellen, dass alle Elemente ihrer Websites immer für Mobilgeräte optimiert sind“, sagt Lilach Bullock, eine preisgekrönte Marketing-Influencerin und -Strategin.

„Und dazu gehören natürlich auch Formulare – zumal es sich anfühlt, als müsste man ständig Formulare auf dem Handy ausfüllen.“

Denken Sie insbesondere an den Unterschied in der Anzeige- oder Bildschirmgröße zwischen einem mobilen Gerät wie einem Apple iPhone, das normalerweise zwischen 4,7 Zoll und 6,7 Zoll groß ist; und ein Mac-Laptop oder -Desktop, der normalerweise zwischen 13 und 24 Zoll groß ist. Man kann davon ausgehen, dass eine Form, die auf einen iPhone-Bildschirm passt, nicht perfekt auf einen Desktop-Bildschirm passt.

Wenn Ihre mobilen Besucher Ihr Formular nicht einfach lesen, ausfüllen und absenden können, verlieren Sie möglicherweise ihr Geschäft. Daher ist die Erstellung eines mobilfreundlichen Formulars, das auf den Bildschirm jedes mobilen Geräts passt, entscheidend für die Schaffung einer großartigen Benutzererfahrung, um einen bleibenden Eindruck bei Ihren Besuchern zu hinterlassen und Ihnen zu helfen, die Conversions zu steigern.

Was ist responsives Webdesign?

Wenn Sie beim Design mobiler Formulare einen Schritt weiter gehen und sicherstellen möchten, dass Ihre gesamte Website auf allen Arten von Geräten funktioniert, können Sie ein responsives Website-Design implementieren.

Responsive Webdesign berücksichtigt die Bildschirmgröße, Plattform, Ausrichtung und Umgebung des Benutzers. Dies ist eine einfache und effektive Möglichkeit, eine großartige Benutzererfahrung zu schaffen, da so viele Menschen ständig verschiedene Websites auf verschiedenen Geräten besuchen und durchsuchen.

Es gibt mehrere Möglichkeiten, wie Sie sicherstellen können, dass Ihre Website ein responsives Design hat. Wenn Sie beispielsweise ein WordPress-Benutzer sind, gibt es mehrere responsive WordPress-Designs, die Sie installieren und zum Entwerfen Ihrer Website verwenden können.

Wenn Sie Ihre Website außerdem mit Software wie Squarespace erstellen oder erstellt haben, verfügt Ihre Website möglicherweise automatisch über ein responsives Webdesign.

Heutzutage ist responsives Webdesign eine beliebte Wahl für Unternehmen aufgrund der schieren Anzahl von Menschen, die Websites über eine Vielzahl verschiedener mobiler Geräte besuchen. Aber lassen Sie uns zunächst auf das Design mobiler Formulare zurückkommen.

Design mobiler Formulare: 11 UX-Richtlinien

„Beim Entwerfen Ihrer mobilen Formulare“, erklärt Bullock, „ist es wichtig, die Dinge einfach zu halten und sie so schnell wie möglich zu machen. [Formulare] sind auf Mobilgeräten schwieriger auszufüllen und alles fühlt sich an, als würde es länger dauern, als es sollte.“

Mit anderen Worten, das Wichtigste ist die Einfachheit für den Endbenutzer. Beim Erstellen eines für Mobilgeräte optimierten Formulars sollten Sie einige Schritte unternehmen, um Ihren Besuchern die bestmögliche Benutzererfahrung zu bieten. Sehen wir uns 11 dieser Best Practices für das Design mobiler Formulare an, mit deren Implementierung Sie noch heute beginnen können.

1. Minimieren Sie die Anzahl der Formularfelder.

Schon mal das Sprichwort „Weniger ist mehr“ gehört? Nun, genau das sollten Sie beim Erstellen Ihres mobilen Formulars bedenken.

Angesichts der Größe des Bildschirms eines Mobilgeräts und der Menge an Inhalten, die Sie in Ihr Formular einfügen müssen, kann es leicht passieren, dass Ihr Formular versehentlich unübersichtlich wirkt. Denken Sie daran, unnötige Flusen zu entfernen. Behalten Sie nur die Formularfelder für Informationen bei, die Sie unbedingt benötigen .

Um den Prozess zu optimieren, sollten Sie Ihre Formularfelder auch klar und prägnant beschriften und optionale Felder als „optional“ markieren oder ein Sternchen neben den erforderlichen Feldern einfügen.

Bildquelle

Das Ziel ist es, das Ausfüllen des Formulars so einfach wie möglich zu gestalten, damit die Wahrscheinlichkeit steigt, dass Personen das Formular ausfüllen.

2. Automatisieren Sie Eingaben, wenn möglich.

Wenn Sie Ihre Adresse versehentlich falsch eingeben und das Formular die Schreibweise für Sie korrigiert, korrigiert das Formular Ihre Antwort automatisch.

Wenn Sie mit der Eingabe Ihrer Lieferadresse beginnen und ein Feld mit dem Rest Ihrer Adresse erscheint, in dem Sie gefragt werden, ob Sie die restlichen Formularfelder mit Ihrer gespeicherten Adresse „automatisch ausfüllen“ möchten, dann vervollständigt Ihr Formular Ihre Antwort automatisch für Sie.

Durch die Implementierung von Autokorrektur- und Autofill-Funktionen in Ihren mobilen Formularen verbessern Sie die Benutzererfahrung, indem Sie es den Benutzern ermöglichen, ihre Daten schnell, einfach und unkompliziert einzugeben.

Im folgenden Beispiel kann eine Person ihre Informationen einfach automatisch ausfüllen, indem sie auf das kleine Popup klickt, das angezeigt wird.

Bildquelle

3. Verwenden Sie ein einspaltiges Layout.

Wenn Sie ein langes oder mehrstufiges Formular erstellen, listen Sie Ihren gesamten Inhalt in einem einspaltigen Layout auf.

Bildquelle

Einspaltige Formularlayouts sind:

a. Leichter zu lesen.

Wenn Sie alle Ihre Formularfelder in einem einspaltigen Format platzieren, können sich Ihre Besucher jeweils nur auf ein Element konzentrieren, wodurch Ihr Formular leichter lesbar wird.

b. Weniger einschüchternd.

Wenn Sie ein Formular betrachten, insbesondere auf engstem Raum, wie Sie es auf einem Mobilgerät tun würden, und eine große Menge an Inhalten zusammengewürfelt sehen, fühlen Sie sich möglicherweise überfordert. Aus diesem Grund lassen Sie Ihren Inhalt weniger einschüchternd aussehen und sich weniger einschüchternd anfühlen, wenn Sie Ihre Inhalte nach Zeilen trennen und Ihre Formularfelder in einem einspaltigen Format platzieren.

c. Schneller fertig.

Wenn Sie Ihr mehrstufiges Formular in einer einzelnen Spalte platzieren, können Leads es schneller ausfüllen als bei einem mehrspaltigen Formular. Das liegt daran, dass das Format das Formular einfacher zu lesen und Schritt für Schritt zu bearbeiten macht.

Werfen Sie einen Blick auf dieses Anmeldeformular auf der HubSpot-Website, wenn Sie es auf einem Desktop oder Laptop anzeigen.

Bildquelle

Das zweispaltige Layout macht hier Sinn, da auf dem breiteren Bildschirm viel Platz zum Arbeiten ist. Sehen Sie sich jetzt dasselbe Formular an, wenn es von einem mobilen Gerät aus angezeigt wird.

Bildquelle

Dieses einspaltige Layout lässt das Auge natürlich fließen und verhindert gleichzeitig ein Durcheinander auf dem kompakten mobilen Bildschirm.

4. Konsistenz ist wichtig (und auch das Erscheinungsbild der Form).

Wie schließen Sie einen Ordner oder einen geöffneten Tab auf Ihrem Laptop?

Durch Klicken auf die Schaltfläche „x“ in der oberen rechten Ecke.

Aber was ist, wenn die Schaltfläche in einer bestimmten Anwendung nicht angezeigt wird? Wie würden Sie sich fühlen, wenn Sie das Fenster schließen würden?

Verwirrt oder irritiert vielleicht. Sie könnten ein oder zwei Minuten damit verbringen, herauszufinden, wie Sie die Anwendung schließen können.

Dies ist nur ein grobes Beispiel, dient aber gut dazu, die Bedeutung von Konsistenz zu veranschaulichen. Sehen Sie sich dieses Video an, um mehr zu erfahren.

Konsistenz im Formulardesign bezieht sich nicht nur auf den Stil (Farben, Typografie, Logo usw.), sondern auch auf allgemein anerkannte Konventionen, an die Menschen gewöhnt sind.

Hier sind einige Tipps, um ein konsistentes Erlebnis zu gewährleisten:

• Passen Sie das Erscheinungsbild Ihres Formulars an Ihre Marke und Website an.
• Stellen Sie sicher, dass Stil und Formatierung Ihres Formulars konsistent und komplementär sind (nichts sollte störend oder fehl am Platz aussehen).
• Richten Sie Ihre Formularfeldeingaben linksbündig aus.
• Bringen Sie jede Beschriftung über dem entsprechenden Eingabefeld an und richten Sie sie linksbündig aus.
• Verwenden Sie ein Sternchen, um obligatorische Fragen anzuzeigen.

Bildquelle

Der erste Eindruck hinterlässt einen bleibenden Eindruck (im Leben und im Geschäft). Das gilt für Ihre mobilen Formulare. Niemand möchte ein dunkles, schwer lesbares, überladenes und unattraktives Formular ausfüllen.

Ihre mobile Form sollte sowohl hochfunktional als auch ästhetisch ansprechend sein. Sein Erscheinungsbild sollte zu seiner Lesbarkeit und positiven Benutzererfahrung beitragen. Um dies zu erreichen, verwenden Sie einen einfachen und leicht lesbaren Schriftstil und eine einfache Größe, eine Farbpalette, die sich nicht überwältigend anfühlt, und minimale Formularfelder.

5. Denken Sie an das Berührungserlebnis.

Denken Sie darüber nach, wie Sie Ihr Telefon halten, während Sie eine SMS schreiben.

Höchstwahrscheinlich greifen Sie das Telefon mit zwei Händen, während Sie mit den Daumen mit dem Bildschirm interagieren. Oder Sie können es sogar im Alleingang tun oder mit Ihrem Zeigefinger tippen.

Wir interagieren mit Smartphones ganz anders als mit einem Laptop oder Desktop (Stichwort SMS-Daumen), und das Design mobiler Formulare sollte dies widerspiegeln.

Hier sind einige Vorschläge, die Sie beachten sollten:

• Verwenden Sie ausreichend Leerraum, um das Formular übersichtlich zu halten und versehentliches Drücken von Schaltflächen zu vermeiden.
• Stellen Sie sicher, dass die Schaltflächen logisch positioniert sind (z. B. die Senden-Schaltfläche am unteren Rand des Formulars, damit Benutzer nicht nach oben scrollen müssen, um sie zu finden).
• Überprüfen Sie, ob der Text (Schriftgröße und -stil) auf dem kleinen mobilen Bildschirm lesbar ist (niemand möchte seinen Bildschirm kneifen und hineinzoomen, um den Text lesen zu können).
• Stellen Sie sicher, dass die Formularfelder und Schaltflächen groß genug sind, um bequem mit dem Finger angetippt werden zu können.
• Lassen Sie das Formular nach Möglichkeit im unteren Teil des Bildschirms erscheinen, damit es leicht zu erreichen ist.

Bildquelle

6. Nutzen Sie Eingabebeschränkungen.

Eingabebeschränkungen schränken die Art der Antwort ein, die eine Person in ein Formularfeld eingeben kann. Dies kann eine Wortbeschränkung (z. B. beim Ausfüllen eines Bewerbungsformulars) oder die Möglichkeit beinhalten, nur Ziffern eingeben zu können (im Fall einer Telefonnummer).

Dies ist im folgenden Formular zu sehen, wo eine numerische Tastatur erscheint, wenn eine Person ihre Telefonnummer eingibt.

Bildquelle

Eingabebeschränkungen maximieren die Formulareffizienz, indem sie unbeabsichtigte Fehler, Verzögerungen oder Verwirrung einschränken. Wenn beispielsweise jemand versucht, einen Tisch in einem Restaurant zu reservieren und versehentlich ein Datum in der Vergangenheit ausgewählt hat, würde die Einschränkung verhindern, dass er dieses Datum tatsächlich auswählen und bestätigen kann.

Dies ist besonders wichtig, wenn Sie für Mobilgeräte entwerfen, da kleinere Bildschirme die genaue Eingabe von Informationen erschweren. Indem Sie Eingabebeschränkungen festlegen, sparen Sie Zeit beim Ausfüllen Ihrer Formularfelder und verhindern, dass Sie langatmige oder ungültige Antworten erhalten.

Hier ist ein weiteres Beispiel für eine Eingabebeschränkung.

Bildquelle

7. Erstellen Sie klare Aktionsschaltflächen.

Schaltflächen sind ein unterschätzter Aspekt des Designs mobiler Formulare. Denken Sie darüber nach: Sie erhalten eine Formularübermittlung oder -konvertierung erst, nachdem die richtige Schaltfläche gedrückt wurde. Sie können dieses Element also wirklich nicht übersehen.

Dieser UI-Spickzettel und der UX Planet-Blog sind großartige Ressourcen zum Entwerfen effektiver Schaltflächen. Hier ist ein kurzer Überblick über einige der erwähnten Prinzipien, die Sie auf Ihre mobilen Formulare anwenden können.

• Zu viele Schaltflächen verderben den Brei (genauso wie Formularfelder, behalte nur die wesentlichen Schaltflächen).
• Gestalten und beschriften Sie Ihre Schaltflächen einheitlich (Großschreibung, Formatierung, Ausrichtung usw.).
• Lassen Sie den Fokus auf der primären Schaltfläche (der Hauptaktion, die der Benutzer ausführen soll) leuchten, indem Sie sie durch Größe oder Farbe hervorheben.
• Rechts ist rechts – eine gängige Faustregel für Mobilgeräte lautet, den Hauptknopf auf der rechten Seite und den zweiten auf der linken Seite zu positionieren (obwohl dies je nach individuellen Bedürfnissen variieren kann).
• Bestimmte Labels sind fast immer die Antwort („Diese Seite bearbeiten“ über „Bearbeiten“).

Bildquelle

8. Bereitstellung von Kartenscannern für Zahlungen.

Haben Sie versucht, Ihre Kreditkartendaten über Ihr Smartphone in ein Formular einzugeben? Das Eingeben einer Reihe von Zahlen auf einem kleinen Bildschirm mit einer kleinen Tastatur kann ein mühsamer Prozess sein.

Kartenscan-Apps wie Microblink werden genau aus diesem Grund immer beliebter. Wenn Sie einen Kauf tätigen, können Ihre Besucher auf eine Schaltfläche klicken, die sie zu einem Bildschirm führt, auf dem sie mit der Kamera ihres Mobilgeräts ein sicheres Foto der Vorder- und Rückseite ihrer Karte machen können, unabhängig davon, ob es sich um ihren Führerschein oder ihre Kreditkarte handelt.

Bildquelle

Mit nur ein paar Bildern werden Ihre Leads mit einem der zeitaufwändigsten Teile des Prozesses zum Ausfüllen mobiler Formulare fertig gestellt – damit Ihre Besucher effizient sowie frustrations- und fehlerfrei bleiben.

9. Erklären Sie die Notwendigkeit spezifischer Informationen.

Wurden Sie beim Ausfüllen einer einfachen E-Mail-Anmeldung oder eines Registrierungsformulars jemals aufgefordert, persönliche Informationen anzugeben, die nichts mit dem Anmeldeformular selbst zu tun haben?

Dies tritt häufig bei allen Arten von Formularen auf (nicht nur bei Mobilgeräten). Jemanden nach persönlichen oder anderen sensiblen Informationen zu fragen, ohne zu erklären, dass Sie diese benötigen, kann skizzenhaft erscheinen.

Wenn Sie eine Frage stellen, die sich nicht direkt auf den Grund bezieht, warum Ihr Besucher das Formular ausfüllt, ist es wichtig, ein Zusammenfassungsfeld (mit zusätzlichen Informationen) zu erstellen, auf das die Person klicken kann, um zu verstehen, warum Sie nach diesen Informationen fragen.

Solche Indikatoren können auch dazu beitragen, zusätzliche Anleitungen zum Ausfüllen eines Formularfelds zu geben, wenn die Anweisungen nicht sofort ersichtlich sind. In der Abbildung unten erscheint ein Zusammenfassungsfeld, wenn eine Person den Mauszeiger über das Symbol bewegt.

Bildquelle

Diese kleinen Details sorgen dafür, dass sich Ihr Formular professionell und durchdacht anfühlt, und verringern gleichzeitig die Wahrscheinlichkeit, dass der Benutzer die Seite verlässt.

10. Sammeln Sie Validierung und Feedback.

Die Benutzererfahrung ist das Herzstück eines guten Designs für mobile Formulare. Und Validierung und Feedback spielen eine wichtige Rolle bei der Bereitstellung einer großartigen UX.

Die Validierung lässt die Leute wissen, ob die von ihnen eingegebenen Informationen richtig sind (oder nicht). Beachten Sie die grünen Häkchen in den Formularfeldern unten.

Bildquelle

Beim Ausfüllen mobiler Formulare machen Ihre Besucher bestimmt hier oder da einen Fehler. Das Formular sollte diese Fehler in Echtzeit anzeigen, damit der Benutzer sie sofort korrigieren kann.

Wenn beispielsweise jemand die falsche Postleitzahl neben seiner Adresse hinzufügt, sollte das mobile Formular eine Fehlermeldung anzeigen. Dieser sollte – in leicht verständlicher Sprache – die Fehlerstelle angeben und wie die Person ihn beheben kann (wie im Bild unten zu sehen).

Bildquelle

Es ist auch wichtig, den Leuten Feedback zu geben, während sie das Formular durchgehen. Beispielsweise kann ein Fortschrittsbalken auf langen, mehrstufigen Formularen das Ausfüllen von Formularen ansprechender gestalten, indem Benutzern angezeigt wird, wie weit sie bereits gekommen sind und wie viel Zeit ihnen noch zum Ausfüllen bleibt.

Bildquelle

Stellen Sie sich eine Person vor, die das obige Formular ohne Fortschrittsbalken ausfüllt. Sie klicken auf die Schaltfläche „Weiter“, ohne zu wissen, wann das Formular endet, und brechen es möglicherweise sogar kurz vor dem letzten Schritt frustriert ab.

Sobald die Leute ihre Formulare eingereicht haben, sollten Sie sie zu einem anderen Bildschirm oder einer anderen Seite leiten, auf der so etwas wie „Erfolg!“ steht. oder „Danke“, damit sie wissen, dass ihre Einreichung funktioniert hat.

Hier ist ein Beispiel für eine Erfolgsseite auf HubSpot, die angezeigt wird, nachdem sich ein Benutzer für den Erhalt eines kostenlosen Google Ads-Kits angemeldet hat.

Bildquelle

11. Machen Sie Formulare barrierefrei.

Barrierefreiheit ist für die Benutzerfreundlichkeit Ihres Formulars von grundlegender Bedeutung. Formulare, die unter Berücksichtigung der Barrierefreiheit entwickelt wurden, können von einem breiteren Spektrum von Menschen verwendet werden, einschließlich Menschen mit visuellen, physischen, sensorischen und kognitiven Behinderungen.

Hier sind einige spezifische Empfehlungen zum Erstellen barrierefreier Formulare der World Wide Web Consortium Web Accessibility Initiative, WebAIM und The A11Y Project Checklist).

• Stellen Sie sicher, dass der Text nicht verpixelt oder unscharf wird, wenn Sie in Ihr Formular hineinzoomen (zur besseren Visualisierung).
• Beschriften Sie Ihre Formularelemente so, dass sie von einem Screenreader gelesen werden können.
• Stellen Sie sicher, dass Ihr Formular sowohl im Hoch- als auch im Querformat zugänglich ist.
• Vermeiden Sie (wenn möglich) die Verwendung einer Frist, um den Teilnehmern ausreichend Zeit zum Antworten zu geben.
• Fügen Sie Untertitel oder Transkripte für alle Video- oder Audiokomponenten in Ihr Formular ein.
• Beachten Sie den Farbkontrast. Hier ist ein kostenloses Tool, das dabei helfen kann.
• Stellen Sie sicher, dass Ihr Formular nur mit einer Tastatur vollständig nutzbar ist.

Eine großartige Möglichkeit, um sicherzustellen, dass alle oben genannten Strategien zum Entwerfen mobiler Formulare eingehalten werden, besteht darin, zu untersuchen, was Sie beim Entwerfen von Formularen nicht tun sollten. Das folgende Video zeigt einige Beispiele dafür, was Sie beim Entwerfen von Formularen auf Mobilgeräten und Desktops nicht tun sollten.

Zurück zu dir

Es ist kein Geheimnis, dass Ihre Website-Besucher Ihre Webformulare über ihre Mobilgeräte ausfüllen und übermitteln. Das liegt daran, dass es praktisch und effizient ist, da die meisten Menschen überall ein mobiles Gerät mit sich führen, weshalb es entscheidend ist, dass Ihre Formulare für Mobilgeräte geeignet sind.

Andernfalls sind Ihre Formulare schwer zu lesen, auszufüllen und einzureichen, was Ihre Leads frustrieren oder dazu führen kann, dass Sie ihr Geschäft ganz verlieren.

Indem Sie Ihr mobiles Formulardesign berücksichtigen und diese Richtlinien implementieren, verbessern Sie die Benutzererfahrung Ihres mobilen Formulars, bauen positive Beziehungen zu Ihren Leads und Kunden auf und steigern Ihre Conversions.

Anmerkung des Herausgebers: Dieser Beitrag wurde ursprünglich im Dezember 2018 veröffentlicht und aus Gründen der Vollständigkeit aktualisiert.