So optimierst du Popup- und Flyout-Formulare für Mobilgeräte

Übersicht

Erfahre, wie du deine Anmeldeformulare für Mobilgeräte nach Klaviyos Best Practices gestalten kannst, damit du sicherstellen kannst, dass deine Popup- und Flyout-Formulare für mobile Besucher*innen optimiert sind.

Online-Kund*innen nutzen zunehmend ihre Mobilgeräte, um neue Shops zu entdecken, Produkte zu durchsuchen und Käufe zu tätigen. Deshalb ist es wichtiger denn je, sicherzustellen, dass deine Website auf Mobilgeräten genauso gut aussieht wie auf Desktops – und dazu gehören auch deine Anmeldeformulare.

Bevor du anfängst

In Klaviyo kannst du Formulare erstellen, die auf allen Geräten angezeigt werden (d. h., sie sind auf Desktop- und Mobilgeräten sichtbar), oder du kannst reine Mobilformulare erstellen, die nur auf Mobilgeräten angezeigt werden.

Wenn dein Formular so eingestellt ist, dass es auf allen Geräten angezeigt wird, optimiert Klaviyo automatisch einige Elemente, wie z. B. Schriftgrößen und Bilder, um sein Erscheinungsbild für Käufer*innen auf Mobilgeräten zu verbessern. In diesem Leitfaden werden jedoch zusätzliche Best Practices behandelt, die du im Hinterkopf behalten solltest. Verwende den Ansichtsselektor oben rechts im Form Builder, um beim Erstellen deines Formulars zwischen der Desktop- und der Mobilansicht zu wechseln. Das Desktop-Symbol zeigt, wie das Formular für Desktop-Kund*innen aussieht, während das Mobile-Symbol zeigt, was Mobile-Kund*innen sehen.

Dieser Leitfaden behandelt Best Practices für die Erstellung von Popup- und Flyout-Formularen, die auf Mobilgeräten angezeigt werden. Diese sind hilfreich, unabhängig davon, ob dein Formular auf allen Geräten oder nur auf Mobilgeräten angezeigt wird. Für einen ausführlicheren Überblick über Anmeldeformulare speziell auf Mobilgeräten gehe zu Grundlagen: mobiles Formulardesign.

Allgemeine Best Practices für Formulare

Viele der Best Practices für Desktop-Formulare gelten auch für Mobilgeräte:

• Halte es kurz und bündig: Erwäge ein mehrstufiges Formular, wenn du viele Felder hast.
  • Wenn dein Formular SMS-Einwilligungen erfasst, erfasse im ersten Schritt E-Mail, gefolgt von SMS im zweiten Schritt mit Smart Opt-in, damit Besucher*innen auf Mobilgeräten auf die einfachste Weise abonnieren können.
• Stell sicher, dass sie sich leicht schließen lässt, damit Besucher*innen nicht frustriert sind und deine Website verlassen.
  • Die Verwendung eines Formular-Teasers gibt Käufer*innen die Möglichkeit, das Formular nach Bedarf zu schließen und wieder zu öffnen.
• Wenn dein Formular so eingestellt ist, dass es auf allen Geräten angezeigt wird (d. h., Shopper*innen auf Desktop und Mobilgeräten sehen es) und ein Seitenbild enthält, lass das Seitenbild nur auf Mobilgeräten anzeigen.
  

• Verwende prägnante Beschriftungen für jedes deiner Eingabefeld (z. B. E-Mail-Adresse, Telefonnummer usw.), die in eine einzige Zeile passen, damit Kund*innen leicht erkennen können, welche Informationen du abfragst.

SEO und mobile Formulare

Es ist wichtig, Best Practices für mobile SEO zu berücksichtigen, besonders wenn du Formulare auf deiner Homepage oder anderen Landingpages erstellst. Formulare, die auf häufigen organischen Such-Landingpages angezeigt werden, sollten den Content deiner Website nicht verdecken oder das Erlebnis von Besucher*innen beeinträchtigen; andernfalls kann die Seite von Suchalgorithmen abgestraft werden. Weitere Informationen zu aufdringlichen Interstitials und SEO findest du hier.

Um dies zu vermeiden:

• Lege im Tab Targeting und Verhalten das Timing deines Formulars auf Basierend auf Regeln fest und stelle dann eine längere Zeitverzögerung ein (z. B. wenn Besucher*innen die Seite verlassen).
• Füge einen Teaser hinzu, der Vor Anzeige des Formulars angezeigt wird.

Popups optimieren

Ein Pop-up-Formular erscheint in der Mitte des Bildschirms von Kund*innen, verdeckt häufig einen großen Teil der Seite und erschwert es ihnen, mit anderen Elementen der Seite zu interagieren, solange das Formular geöffnet ist. Dadurch sind Pop-ups störender, konvertieren aber auch besser.

So optimierst du, wie Popups auf Mobilgeräten funktionieren:

1. Deaktiviere, dass sich das Formular schließt, wenn mobile Shopper*innen außerhalb des Formularbereichs klicken, um versehentliche Formularschließungen zu reduzieren.
   • Navigiere zu Targeting und Verhalten.
   • Scrolle nach unten zu Geräte.
   • Deaktiviere unter Zum Schließen außerhalb des Formulars klicken den Schalter Mobil.
     

2. Stelle sicher, dass das Schließen-Symbol (die X-Schaltfläche) deines Formulars groß genug ist, auch auf einem kleinen Bildschirm wie bei einem Mobilgerät.
   • Klicke im Formularvorschau auf das Schließen-Symbol, um die Größe anzupassen.
   • Teste, wie das Formular auf deinem eigenen Mobilgerät aussieht, um sicherzustellen, dass es leicht zu finden und anzuklicken ist.
     So kann zum Beispiel das Schließen-Symbol im Formular links auf einem Mobilgerät schwer anzuklicken sein. Das Schließen-Symbol im Formular rechts ist dagegen größer und leicht zu finden.
     

3. Hebe dein Popup visuell vom Rest deiner Website ab, indem du eine Overlay-Farbe, einen Schlagschatten oder beides verwendest.
   • Navigiere zur Registerkarte Styles.
   • Lege im Abschnitt Form Background die Overlay-Farbe so fest, dass ein halbtransparentes Overlay verwendet wird, um den Fokus auf dein Formular zu lenken und die Inhalte deiner Website abzudunkeln, während das Formular geöffnet ist.
   • Konfiguriere einen Schlagschatten, um deinem Formular eine dezente Schattierung zu geben und es vom umgebenden Inhalt abzuheben.
4. Passe die Ränder deines Formulars so an, dass es auf Mobilgeräten eher wie ein Pop-up-Formular aussieht und nicht von Rand zu Rand geht.
   
   1. Scrolle im Tab Styles nach unten zu den Form Styles.
   2. Erhöhe den linken/rechten Rand basierend darauf, wie es in der Vorschau aussieht.

Flyouts optimieren

Wenn ein Flyout-Formular angezeigt wird, können mobile Besucher*innen weiterhin mit deiner Website hinter dem Formular interagieren, es sei denn, Mobile Overlay ist aktiviert. Nutzer*innen können das Formular schließen, ausfüllen oder offen lassen, während sie weiter browsen. Im Allgemeinen macht das Flyouts weniger aufdringlich als Popups.

So optimierst du dein Flyout-Formular für ein Mobilgerät:

1. Lege fest, dass dein Formular von oben oder unten aus dem Bildschirm herausflyoutet.
   • Navigiere zum Abschnitt „Stile“.
   • Wähle Mobile Flyout Position aus und entscheide dich dann für An Unterseite andocken oder An Oberseite andocken.
     Wenn diese Einstellung ausgewählt ist, wird dein Formular von oben oder unten auf dem Bildschirm ausgeklappt und deckt einen Teil des Bildschirms von Rand zu Rand ab.
     

2. Trenne dein Flyout-Formular visuell vom Rest deiner Website, indem du ein mobiles Overlay, einen Schlagschatten oder beides verwendest.
   • Navigiere zur Registerkarte Styles.
   • Scrolle zu den Einstellungen für Formularhintergrund.
   • Aktiviere Mobile Overlay, damit mobile Shopper*innen nicht auf andere Elemente auf deiner Website klicken können, bis sie das Formular ausgefüllt oder geschlossen haben. Beachte, dass Mobile overlay nicht angezeigt wird, wenn das Flyout-Formular auf einem Desktop angezeigt wird.
   • Aktiviere Schattenwurf, um dezente Schattierungen um dein Formular herum zu erzeugen und es von den umgebenden Inhalten abzuheben. Beachte, dass sich die Einstellungen für Schattenwurf sowohl auf die mobile als auch auf die Desktop-Version deines Formulars auswirken.
     

Nächste Schritte

Sobald du deine Formulare für Mobilgeräte optimiert hast, probiere A/B-Tests deiner Formulardesigns aus, um die Vorlieben deiner Website-Besucher*innen besser zu verstehen.

Weitere Ressourcen

• Erste Schritte mit Anmeldeformularen
• Grundlegendes zu Einstellungen zum Schließen von Formularen
• Grundlagen: Gestaltung mobiler Formulare
• So nutzt du Pop-up-Formulare, um die SMS-Einwilligung zu erfassen