Kontaktformulare sind eine Schlüsselkomponente vieler Websites. Obwohl sie im Allgemeinen unkompliziert sind, müssen Sie 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 dem Büroverkehr, aber die Verwendung von Formularen kann schwierig sein, wenn Sie ein mobiles Gerät verwenden.

In diesem Tutorial werden wir ein wenig darüber sprechen, wie wichtig es ist, mobilfreundliche Formulare zu entwerfen. Als Nächstes führen wir Sie durch fünf Tipps, um sicherzustellen, dass Ihre Formulare auf Mobilgeräten reibungslos funktionieren.

Lass uns zur Arbeit gehen!

Warum ist es wichtig, dass Ihre Formulare für Mobilgeräte optimiert sind?

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

Beispiel für Kontaktformular.png

Registrierungsformulare (Abonnementformulare) sind ebenfalls sehr beliebt, da Sie damit E-Mails sammeln und während Kampagnen gezielt darauf abzielen können:

Ziel-E-Mails während campaigns.png

Formulare können jedoch für alle Arten anderer Zwecke verwendet werden. Zum Beispiel können Sie Informationen mit sammeln eine Online-Umfrage oder ein Fragebogen In diesem Fall benötigen Sie Formulare, mit denen Benutzer Antworten eingeben können.

Mit anderen Worten, Formulare sind sehr vielseitig und fast alle Websites verwenden Formulare auf die eine oder andere Weise. Daher ist es wichtig, dass Ihre Formulare einfach zu verwenden sind (es sei denn, Sie möchten Ihren Besuchern ein frustrierendes Erlebnis bieten).

Die Verwendung von Formularen von einem Desktop- oder Laptop-Computer ist normalerweise sehr einfach. Sie haben eine vollständige Maus und Tastatur, daher sollte die Auswahl des gewünschten Felds und die Eingabe von Daten kein Problem darstellen. Das Surfen im Internet von Ihrem Smartphone oder einem anderen kompakten Gerät aus hat jedoch Komplikationen.

Wenn Sie mit Ihren Fingern auf einem kleinen Bildschirm arbeiten, kann die Interaktion mit Formularen aufgrund schlechter Entwurfsentscheidungen manchmal überwältigend sein. Dies sollten Sie bei Ihren eigenen Entwürfen vermeiden. Wenn mobile Benutzer nicht mit Ihren Formularen interagieren können, verlieren Sie möglicherweise Conversions, Leads oder ärgern Besucher.

Es ist auch wichtig zu verstehen, dass mobiler Datenverkehr jetzt, wenn nicht sogar wichtiger als Desktop-Quellen ist. Tatsächlich hat der mobile Verkehr diesen in den letzten Jahren bereits überholt. Das bedeutet, dass das Entwerfen einer mobilfreundlichen Website Ihr Hauptziel sein sollte, wenn Sie ein neues Projekt starten.

5-Tipps für die Gestaltung benutzerfreundlicher mobiler Formulare

Glücklicherweise ist das Entwerfen mobiler Formulare nicht so schwierig, wie Sie sich vorstellen können. In den meisten Fällen müssen Sie nur einige Grundlagen berücksichtigen und Ihre Formulare gründlich testen, bevor Sie sie verwenden. Sprechen wir darüber, wie es geht!

1. Löschen Sie alle unnötigen Abschnitte

Je mehr Felder Ihr Formular enthält, desto schwieriger wird es, es auf Mobilgeräten zu verwenden. In der Tat ist die Verwendung von Formularen auf Mobilgeräten einfach komplizierter. Indem Sie die Anzahl der Felder oder Abschnitte in Ihren Formularen verringern, können Sie die Wahrscheinlichkeit maximieren, dass Besucher sie ausfüllen.

Hier ist ein kurzes Beispiel für a Kontaktformular mit einigen zusätzlichen Feldern, die auf Mobilgeräten nicht erforderlich sind:

Felder werden auf mobile.png nicht benötigt

In den meisten Fällen alles, was Sie für einen großartigen brauchen Kontaktformular ist ein Name, eine E-Mail-Adresse und der Text der Nachricht, die Sie erhalten möchten. Alles andere hängt von der Art der Website ab, die Sie verwenden, und davon, ob Sie versuchen, Leads zu sammeln.

Je weniger Felder das Formular enthält, desto einfacher ist es für mobile Besucher, diese zu verwenden. Schließlich kann die Auswahl eines Felds über einen Touchscreen schwierig sein, egal wie gut es gestaltet ist, um die Anzahl der Hops zu minimieren, die Benutzer ausführen müssen.

Ihr Ziel an dieser Stelle ist es, vorhandene Formulare auf Ihrer Website zu überprüfen. Gehen Sie die einzelnen Abschnitte durch und stellen Sie fest, ob Sie wirklich andere als die zuvor genannten Felder benötigen. Wenn ein überflüssiges Feld vorhanden ist, löschen Sie es einfach.

2. Verwenden Sie nach Möglichkeit Dropdown-Listen

Die meisten von uns tippen gerne auf mobilen Geräten und verwenden Touchscreens. Wenn Sie jedoch einem Freund eine SMS schreiben und eine ausfüllen Kontaktformular sind zwei sehr unterschiedliche Erfahrungen. Dadurch besteht eine gute Chance, dass Sie frustriert werden, wenn Sie viele Informationen eingeben müssen.

Eine Möglichkeit, Ihren mobilen Besuchern das Leben zu erleichtern, besteht darin, die Entscheidungen zu vereinfachen, die sie bezüglich der Elemente Ihrer Website treffen müssen. Um Ihnen eine Vorstellung davon zu geben, wovon wir sprechen, nutzen wir unser vorheriges Beispiel von Eine Reservierung Restaurant:

eine reservierung machen.png

Ein ... machen Eine Reservierung, müssen Sie wahrscheinlich einen Namen, eine E-Mail-Adresse und eine Telefonnummer hinterlassen  et  Geben Sie eine Uhrzeit sowie die Anzahl der anwesenden Personen an. Es gibt zwei Möglichkeiten, ein Formularfeld zur Validierung einer Tageszeit zu erstellen. Eine Reservierung:

  1. Konfigurieren Sie ein Feld, 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 von Ihnen angegebenen Optionen auswählen, was für sie am besten funktioniert.

Die Idee, dass Sie sich Ihre Formulare ansehen und prüfen, ob sie Felder enthalten, die Sie durch Dropdown-Menüs ersetzen können. Dies ist nicht immer der Fall, da Sie keine Dropdown-Menüs zum Sammeln von Namen oder E-Mails verwenden können. Es können jedoch auch andere Optionen verwendet werden.

Unabhängig von ihrem Anwendungsfall möchten Sie sicherstellen, dass Ihre Dropdown-Menüs Optionen enthalten, die auf Mobilgeräten einfach ausgewählt werden können. Mit anderen Worten, machen Sie das Menü so groß, dass niemand picken muss, um die richtige Option auszuwählen.

3. Stellen Sie sicher, dass Ihre Übermittlungstasten leicht zu berühren sind

Dieser Tipp ist recht einfach, muss aber noch erwähnt werden. Jedes von Ihnen entworfene Formular sollte eine Möglichkeit für Benutzer enthalten, zu bestätigen, dass sie die eingegebenen Daten senden möchten. In den meisten Fällen bedeutet dies, dass Sie eine Senden-Schaltfläche erstellen:

erstelle eine Submit button.png

Wenn Sie einen normalen Computer verwenden, ist das Klicken auf eine Senden-Schaltfläche die natürlichste Sache der Welt. Auf Mobilgeräten sind wir jedoch auf einige Formulare gestoßen, bei denen es viel schwieriger ist, einen Knopf zu drücken.

Wenn Ihre Besucher die in Ihren Formularen eingegebenen Informationen nicht übermitteln können, werden alle Ihre Bemühungen verschwendet. Außerdem sieht nichts so unprofessionell aus wie ein Knopf Abschicken  das funktioniert nicht wie erwartet.

Um bessere Einreichungsschaltflächen für Mobilgeräte zu erstellen, sind hier drei Tipps zu beachten:

  1. Stellen Sie sicher, dass sie groß genug sind, damit Sie problemlos auf ein mobiles Gerät tippen können.
  2. Platzieren Sie Ihre Schaltflächen nicht zu nahe an anderen Objekten, damit Benutzer sie nicht richtig berühren.
  3. Markieren Sie Ihre Schaltflächen, z. B. mit Kontrastfarben oder kreativer Typografie.

Darüber hinaus möchten Sie Ihre Schaltflächen testen, bevor Ihre Website online geht. Wir werden in einer Minute genauer darauf eingehen. Lassen Sie uns zunächst über die Leistung sprechen.

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

In vielen unserer Artikel wird viel über die Leistung von Websites gesprochen, und das nicht, weil wir Geschwindigkeit brauchen. Der Punkt ist, dass die meisten Leute langsame Websites nicht mögen, was durchaus Sinn macht.

Mit der Geschwindigkeit des Internets kann es schwierig sein, darauf zu warten, dass eine Website zu lange geladen wird. Darüber hinaus variieren die Geschwindigkeiten des mobilen Internets in der Regel viel stärker als bei normalen Heimverbindungen. Dies bedeutet, dass Ihre Website für mobile Geräte stark optimiert werden muss, wenn Sie diese Benutzer zufrieden stellen möchten, da nicht alle über einen Internetzugang verfügen (d. H. Schnell).

Dieser spezielle Tipp kann für Ihre gesamte Website gelten, ist aber auch wichtig für mobile Seiten, auf denen Ihre Formulare angezeigt werden. Wenn das Laden dieser Teile Ihrer Website zu lange dauert, Sie Konvertierungen verlieren und Möglichkeiten, mit Ihren Besuchern in Kontakt zu treten.

Im Allgemeinen sollte das Laden einer Website nicht länger als zwei Sekunden dauern. Sobald Sie dieses Limit überschritten haben, steigen die Absprungraten dramatisch an, was für Sie eine schreckliche Nachricht ist. Angesichts der Art des mobilen Surfens ist es am besten, diese Zeit so niedrig wie möglich zu halten. .

Vor diesem Hintergrund gibt es viele Möglichkeiten, die Gesamtleistung Ihrer Website zu verbessern. Sie können beispielsweise auf einen besseren Plan upgradenUnterkunft, verwenden Sie ein responsives Theme, das auf Geschwindigkeit optimiert ist und komprimiere deine Bilder. Diese helfen natürlich allen Benutzern, sind aber besonders nützlich für diejenigen, die kleinere Geräte verwenden.

5. Testen Sie Ihre Formulare vor der Veröffentlichung

Angesichts der Tatsache, dass Formulare ein wesentlicher Bestandteil der meisten Websites sind, ist es sinnvoll, sie vor dem Veröffentlichen gründlich zu testen. Mit WordPress ist dieser Prozess ziemlich einfach. 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 dies zur Entwicklung mobiler Websites beitragen kann). Wenn es jedoch um die Testphase geht, empfehlen wir, dass Sie es einfach halten und Tools wie verwenden outils der Entwicklung Chrome um die Arbeit zu erledigen.

Lassen Sie uns ein kurzes Beispiel durchgehen. Wenn Sie Chrome verwenden, zeigen Sie eine Vorschau der Seite mit dem Formular an, das Sie testen möchten. Klicken Sie dann mit der rechten Maustaste auf eine beliebige Stelle auf dieser Seite und wählen Sie die Option inspizieren . Chrome zeigt eine Reihe von Tools an, mit denen Sie den Quellcode der Seite rechts und links überprüfen und bearbeiten können. Sie können eine Vorschau des Erscheinungsbilds von einem mobilen Gerät aus anzeigen:

Eine Übersicht über Chrome-Entwicklungstools.

Am oberen Bildschirmrand können Sie über ein Menü zwischen verschiedenen Auflösungen wechseln. Chrome enthält Einstellungen für mehrere beliebte Mobilgeräte. Sie können jedoch auch eine benutzerdefinierte Auflösung eingeben.

Zu diesem Zeitpunkt sollten Sie das Erscheinungsbild und Verhalten Ihres Kontaktformulars auf mehreren Geräten überprüfen. Nehmen Sie das folgende Beispiel - das Formular funktioniert einwandfrei, aber Sie können sehen, dass es nicht so gut passt, wie es sollte. Achten Sie besonders auf Text und Symbole, die sich zu nahe am Bildschirmrand befinden:

Formularentwurf für mobile.png

Eine Möglichkeit, dieses Problem zu vermeiden, besteht darin, Ihre Formulare einfach zu halten, wie im ersten Tipp erwähnt. Im folgenden Beispiel verwendet das Formular mehrere Dropdown-Listen und benötigt nur drei Felder. Dies macht die Verwendung einfach und vor allem ist das Formular so einfach, dass es für alle Geräte perfekt geeignet sein muss:

Ein Beispiel für ein Formular ohne Skalierungsprobleme.

Wenn Sie Probleme mit einem Ihrer Formulare haben, müssen Sie diese offensichtlich sofort beheben. Andernfalls riskieren Sie, Ihr mobiles Publikum zu entfremden, was wir zunächst vermeiden möchten!

Zusammenfassung

Die Sicherstellung, dass Ihre Website mit Mobilgeräten kompatibel ist, ist der Schlüssel, um den Datenverkehr aufrechtzuerhalten und Ihre Besucher nicht zu frustrieren. Insbesondere sollten Ihre Formulare auf Mobilgeräten einfach zu verwenden sein, wenn Sie nicht auf den Empfang von Nachrichten oder das Sammeln wertvoller Leads verzichten möchten.

Wenn es darum geht, handyfreundliche Formulare zu entwerfen, finden Sie hier fünf Tipps, die Ihnen das Leben erleichtern sollen:

  1. Löschen Sie alle unnötigen Abschnitte.
  2. Verwenden Sie nach Möglichkeit Dropdown-Listen.
  3. Stellen Sie sicher, dass Ihre Übermittlungstasten 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.