5 Tipps zum Entwerfen von mobilfreundlichen Formularen

Kontaktformulare sind ein wichtiger Bestandteil vieler Websites. Obwohl sie normalerweise einfach in der Funktionalität sind, müssen Sie dennoch sicherstellen, dass sie einfach zu verwenden sind, wenn Sie Leads sammeln und mit Ihren Benutzern in Kontakt bleiben möchten. Dies ist normalerweise kein Problem mit Desktop-Datenverkehr, aber die Verwendung von Formularen kann schwierig werden, wenn Sie ein mobiles Gerät verwenden.

In diesem Artikel werden wir ein wenig darüber sprechen, wie wichtig es ist, mobilfreundliche Formulare zu entwerfen. Anschließend führen wir Sie durch fünf Tipps, um sicherzustellen, dass Ihre Formulare auf Mobilgeräten einwandfrei funktionieren.

Lass uns zur Arbeit gehen!

Warum es wichtig ist, dass Ihre Formulare mobilfreundlich sind

Formulare gibt es in allen Formen und Größen. Am häufigsten haben Sie es mit Kontaktformularen zu tun:

Anmeldeformulare (oder Opt-Ins) sind ebenfalls bemerkenswert beliebt, da sie es Ihnen ermöglichen, E-Mails zu sammeln und sie während Kampagnen gezielt anzusprechen:

Formulare können jedoch für alle möglichen anderen Zwecke verwendet werden. Sie möchten beispielsweise Informationen mithilfe einer Online-Umfrage oder eines Quiz sammeln. In diesem Fall benötigen Sie Formulare für die Benutzer, um die Antworten einzugeben.

Anders ausgedrückt, Formulare sind sehr vielseitig und fast jede Site verwendet Formulare auf die eine oder andere Weise. Daher ist es wichtig, sicherzustellen, dass Ihre Formulare einfach zu verwenden sind (es sei denn, Sie möchten Ihren Besuchern eine frustrierende Erfahrung bieten).

Die Verwendung von Formularen von einem Desktop-Computer oder einem Laptop aus ist normalerweise sehr einfach. Sie haben eine Maus und eine Volltastatur, so dass die Auswahl des zu verwendenden Felds und die Eingabe von Daten kein Problem sein sollten. Das Surfen im Internet mit Ihrem Smartphone oder einem anderen Gerät mit kleinem Formfaktor kann jedoch zu Komplikationen führen.

Wenn Sie mit den Fingern auf einem kleinen Bildschirm arbeiten, kann die Interaktion mit Formularen aufgrund schlechter Designentscheidungen manchmal mühsam sein. Dies ist etwas, das Sie in Ihren eigenen Designs vermeiden müssen. Wenn mobile Nutzer nicht mit Ihren Formularen interagieren können, verlieren Sie möglicherweise Konversionen, Leads oder verärgern die Besucher ganz.

Es ist auch wichtig zu verstehen, dass mobiler Traffic jetzt genauso wichtig – wenn nicht sogar wichtiger – als Desktop-Quellen ist. Tatsächlich hat der mobile Datenverkehr letztere bereits in den letzten Jahren übertroffen. Das bedeutet, dass die Gestaltung einer mobilfreundlichen Website Ihr Hauptziel sein sollte, wenn Sie ein neues Projekt starten.

5 Tipps zum Entwerfen mobilfreundlicher Formulare

Glücklicherweise ist das Entwerfen von mobilfreundlichen Formularen nicht so schwierig, wie Sie sich vorstellen können. In den meisten Fällen genügt es, einige Grundlagen im Hinterkopf zu behalten und Ihre Formulare gründlich zu testen, bevor sie live gehen. Lassen Sie uns darüber sprechen, wie es geht!

1. Entfernen Sie alle unnötigen Abschnitte

Je mehr Felder Ihre Formulare enthalten, desto schwieriger ist die Verwendung auf Mobilgeräten. Das liegt daran, dass die Verwendung von Formularen auf Mobilgeräten, so gut sie auch sein mögen, einfach komplizierter ist. Indem Sie die Anzahl der Felder oder Abschnitte reduzieren, die Ihre Formulare enthalten, können Sie Ihre Chancen maximieren, dass Besucher sie ausfüllen.

Hier ist ein kurzes Beispiel für ein Kontaktformular mit einigen zusätzlichen Feldern, auf das es verzichten könnte:

In den meisten Fällen benötigen Sie für ein hervorragendes Kontaktformular nur einen Namen, eine E-Mail und den Nachrichtentext, den Sie erhalten möchten. Alles andere hängt davon ab, welche Art von Website Sie betreiben und ob Sie versuchen, Leads zu sammeln.

Letztendlich gilt: Je weniger Felder Ihr Formular enthält, desto einfacher ist es für mobile Besucher, sie zu verwenden. Schließlich kann die Auswahl eines Feldes über einen Touchscreen schwierig sein, selbst wenn es gut gestaltet ist.

Ihr Ziel in dieser Phase ist es, einen Blick auf die vorhandenen Formulare Ihrer Website zu werfen. Gehen Sie jeden ihrer Abschnitte durch und überlegen Sie, ob Sie wirklich zusätzliche Felder benötigen, die über die zuvor genannten hinausgehen. Wenn ein überflüssiges Feld vorhanden ist, schneiden Sie es einfach ab.

2. Verwenden Sie nach Möglichkeit Dropdown-Listen

Die meisten von uns können bequem auf mobilen Geräten tippen und Touchscreens verwenden. Einem Freund eine SMS zu schreiben und ein Kontaktformular auszufüllen sind jedoch zwei sehr unterschiedliche Erfahrungen. Bei letzterem besteht die Möglichkeit, dass Sie frustriert werden, wenn Sie viele Informationen eingeben müssen.

Eine Möglichkeit, das Leben Ihrer mobilen Besucher zu erleichtern, besteht darin, die Entscheidungen zu vereinfachen, die sie in Bezug auf die Elemente Ihrer Website treffen müssen. Um Ihnen eine Vorstellung davon zu geben, wovon wir sprechen, bauen wir auf unserem früheren Beispiel für eine Restaurantreservierung auf:

Um eine Reservierung vorzunehmen, müssen Sie wahrscheinlich einen Namen, eine E-Mail-Adresse, ein Telefon und eine Uhrzeit sowie die Anzahl der Personen angeben, die teilnehmen werden. Es gibt zwei Möglichkeiten, ein Formularfeld zu erstellen, um eine Reservierungszeit zu validieren:

1. Richten Sie ein Feld ein, das nur numerische Eingaben akzeptiert.
2. Entwerfen Sie eine Dropdown-Liste mit allen verfügbaren Zeiten für eine Reservierung.

Wie Sie sich vorstellen können, ist letzteres für mobile Benutzer benutzerfreundlicher. Bei diesem Ansatz müssen sie keine Zahlen eingeben und können einfach aus den Optionen auswählen, die für sie am besten geeignet sind.

Die Idee für Sie, einen Blick auf Ihre Formulare zu werfen und zu sehen, ob sie Felder enthalten, die Sie durch Dropdown-Menüs ersetzen könnten. Dies wird nicht immer der Fall sein, da Sie keine Dropdown-Menüs verwenden können, um Namen oder E-Mails zu sammeln, aber es gibt andere Optionen, bei denen sie funktionieren könnten.

Unabhängig von ihrem Anwendungsfall möchten Sie sicherstellen, dass Ihre Dropdown-Menüs Optionen enthalten, die auf mobilen Geräten einfach ausgewählt werden können. Mit anderen Worten, machen Sie das Menü so groß, dass niemand nach der richtigen Option suchen muss.

3. Stellen Sie sicher, dass Ihre Übermittlungsschaltflächen leicht zu berühren sind

Dieser Tipp ist ziemlich einfach, aber dennoch erwähnenswert. Jedes von Ihnen entworfene Formular muss eine Möglichkeit enthalten, mit der Benutzer bestätigen können, dass sie die von ihnen eingegebenen Daten übermitteln möchten. In den meisten Fällen bedeutet dies das Erstellen einer Übermittlungsschaltfläche:

Wenn Sie einen normalen Computer verwenden, ist das Klicken auf eine Übermittlungsschaltfläche die natürlichste Sache der Welt. Wir sind jedoch auf ein paar Formulare auf Mobilgeräten gestoßen, bei denen das Drücken einer Taste viel schwieriger ist, als es sein sollte.

Wenn Ihre Besucher die Informationen, die sie in Ihre Formulare eingegeben haben, nicht übermitteln können, sind alle Ihre Bemühungen umsonst. Außerdem sieht nichts so unprofessionell aus wie ein Absenden- Button, der nicht wie beabsichtigt funktioniert.

Um bessere Übermittlungsschaltflächen für Mobilgeräte zu entwerfen, sind hier drei schnelle Tipps, die Sie beachten müssen:

1. Stellen Sie sicher, dass sie groß genug sind, um sie bei Verwendung eines Mobilgeräts problemlos drücken zu können.
2. Platzieren Sie Ihre Schaltflächen nicht zu nahe an anderen Elementen, damit Benutzer nicht das falsche treffen.
3. Heben Sie Ihre Schaltflächen auf irgendeine Weise hervor, z. B. durch kontrastierende Farben oder kreative Typografie.

Abgesehen davon sollten Sie Ihre Schaltflächen auch gründlich testen, bevor Ihre Website live geht. Wir werden in einer Minute näher darauf eingehen, wie das geht. Lassen Sie uns zunächst über die Leistung sprechen.

4. Stellen Sie sicher, dass Ihre Formulare schnell geladen werden

Wir sprechen in mehreren unserer Artikel viel über die Website-Performance, und das nicht, weil wir Geschwindigkeit brauchen. Tatsache ist, dass die meisten Leute keine langsamen Websites mögen, was absolut sinnvoll ist.

Da die Internetgeschwindigkeiten immer schneller werden, kann es eine lästige Pflicht sein, zu lange auf das Laden einer Website zu warten. Außerdem variieren die Geschwindigkeiten des mobilen Internets in der Regel viel stärker als bei normalen Heimverbindungen. Das bedeutet, dass Ihre Website hochgradig für mobile Geräte optimiert sein muss, wenn Sie diese Benutzer zufrieden stellen möchten, da nicht alle über einen geeigneten (dh schnellen) Internetzugang verfügen.

Dieser spezielle Tipp kann für Ihre gesamte Website im Allgemeinen gelten, ist aber auch für die mobilen Seiten wichtig, auf denen Ihre Formulare angezeigt werden. Wenn das Laden dieser Teile Ihrer Website zu lange dauert, verlieren Sie Leads und Gelegenheiten, mit Ihren Besuchern in Kontakt zu treten. Als Faustregel gilt, dass das Laden einer Website nicht länger als zwei Sekunden dauern sollte. Sobald Sie diese Linie überschritten haben, steigen die Absprungraten tendenziell dramatisch an, was für Sie eine schreckliche Nachricht ist.

Angesichts der Natur des Surfens auf Mobilgeräten ist es ein Segen, diese Zeit so weit wie möglich zu reduzieren. Vor diesem Hintergrund gibt es viele Möglichkeiten, die Gesamtleistung Ihrer Website zu steigern. Sie können beispielsweise auf einen besseren Hosting-Plan upgraden, ein reaktionsschnelles Design verwenden, das auf Geschwindigkeit optimiert ist, und Ihre Bilder komprimieren. Diese helfen natürlich allen Benutzern, sind aber insbesondere für diejenigen von Vorteil, die kleinere Geräte verwenden.

5. Testen Sie Ihre Formulare, bevor Sie sie veröffentlichen

Da Formulare für die meisten Websites ein so wichtiges Element sind, liegt es nahe, dass Sie Ihre Formulare gründlich testen sollten, bevor Sie sie veröffentlichen. Mit WordPress ist dieser Prozess einfach genug. Sie können bestimmte Seiten entwerfen, um Ihre Formulare anzuzeigen, und sie erst veröffentlichen, wenn Sie sie vollständig getestet haben.

Natürlich liegt es an Ihnen, welches Plugin oder Thema Sie verwenden möchten (sofern es bei der Entwicklung mobiler Websites helfen kann). Was die Testphase angeht, empfehlen wir Ihnen jedoch, die Dinge einfach zu halten und etwas wie die Chrome Dev Tools zu verwenden, um die Arbeit zu erledigen.

Gehen wir ein kurzes Beispiel durch. Wenn Sie Chrome verwenden, können Sie eine Vorschau der Seite anzeigen, die das zu testende Formular enthält. Klicken Sie anschließend mit der rechten Maustaste auf eine beliebige Stelle auf dieser Seite und wählen Sie die Option Inspect . Chrome zeigt Ihnen eine Reihe von Tools, mit denen Sie den Quellcode der Seite überprüfen und bearbeiten können. Rechts und links sehen Sie eine Vorschau, wie er auf einem Mobilgerät aussehen würde:

Am oberen Bildschirmrand befindet sich ein Menü, mit dem Sie zwischen verschiedenen Auflösungen wechseln können. Chrome enthält Einstellungen für mehrere gängige Mobilgeräte, aber Sie können auch eine benutzerdefinierte Auflösung eingeben.

An dieser Stelle sollten Sie überprüfen, wie Ihr Kontaktformular auf mehreren Geräten aussieht und sich verhält. Nehmen Sie das Beispiel unten – das Formular funktioniert einwandfrei, aber Sie können sehen, dass es nicht so skaliert, wie es sollte. Achten Sie besonders auf Texte und Symbole, die zu nah am Bildschirmrand liegen:

Eine Möglichkeit, dieses Problem zu vermeiden, besteht darin, Ihre Formulare einfach zu halten, wie wir im ersten Tipp beschrieben haben. Im folgenden Beispiel verwendet das Formular mehrere Dropdown-Listen und erfordert nur drei Felder. Das macht es einfach zu bedienen und vor allem ist das Formular so einfach, dass es auf jedem Gerät perfekt skalieren sollte:

Wenn Sie Probleme mit einem Ihrer Formulare haben, sollten Sie diese natürlich sofort beheben. Andernfalls riskieren Sie, Ihr mobiles Publikum zu entfremden, was wir in erster Linie vermeiden möchten!

Abschluss

Es ist von größter Bedeutung, dass Ihre Website mobilfreundlich ist, um den Verkehr zu halten und Ihre Besucher nicht zu frustrieren. Insbesondere müssen Ihre Formulare auf mobilen Geräten einfach zu verwenden sein, wenn Sie nicht darauf verzichten möchten, Nachrichten zu erhalten oder wertvolle Leads zu sammeln.

Wenn es um die Gestaltung mobilfreundlicher Formulare geht, finden Sie hier fünf schnelle Tipps, die Ihnen das Leben erleichtern:

1. Entfernen Sie alle unnötigen Abschnitte.
2. Verwenden Sie nach Möglichkeit Dropdown-Listen.
3. Stellen Sie sicher, dass Ihre Übermittlungsschaltflächen leicht zu drücken sind.
4. Stellen Sie sicher, dass Ihre Formulare schnell geladen werden.
5. Testen Sie Ihre Formulare, bevor Sie sie veröffentlichen.

Haben Sie Fragen zum Erstellen mobilfreundlicher Formulare mit Divi? Fragen Sie in den Kommentaren unten!

Miniaturansicht des Artikels von Irina Adamovich / shutterstock.com.