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 Schriftgrößen und Bilder, um sein Erscheinungsbild für Shopper*innen auf Mobilgeräten zu verbessern. In diesem Leitfaden werden zusätzliche Best Practices behandelt, die du im Hinterkopf behalten solltest. Verwende den Ansichtsselektor oben rechts im Formular-Builder, um während der Erstellung deines Formulars zwischen Desktop- und Mobilansicht zu wechseln. Das Desktop-Symbol zeigt, wie das Formular für Desktop-Shopper*innen aussieht, während das Mobil-Symbol zeigt, was Mobil-Shopper*innen sehen.

In diesem Leitfaden geht es um 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. Wenn du dir einen detaillierteren Überblick über Anmeldeformulare speziell auf Mobilgeräten verschaffen möchtest, gehe zu Grundlagen: Design mobiler Formulare.

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 eine Einwilligung für E-Mail und SMS erfasst, erfasse im ersten Schritt E-Mail und im zweiten Schritt SMS. Verwende Smart Opt-in für ein einfacheres Mobile-Opt-in-Erlebnis. Für Smart Opt-in muss SMS in deinem Konto aktiviert sein und du brauchst einen kostenpflichtigen SMS-Tarif; siehe die verlinkte Anleitung für die Setup-Anforderungen.
• Stell sicher, dass sie sich leicht schließen lässt, damit Besucher*innen nicht frustriert sind und deine Website verlassen.
  • Mit einem Formular-Teaser können Shopper*innen ein Formular erneut öffnen, das sie geschlossen haben. Lege den Teaser auf Nach dem Schließen des Formulars anzeigen oder Vor dem Anzeigen und nach dem Schließen des Formulars anzeigen fest.
• Wenn dein Formular so eingestellt ist, dass es auf allen Geräten angezeigt wird (d. h., alle Kund*innen auf Desktop und Mobilgeräten sehen es) und ein Seitenbild enthält, belasse das Bild unter Stil bearbeiten > Seitenbild auf Desktop. Dadurch wird das Seitenbild auf Mobilgeräten ausgeblendet, sodass mehr Platz für den Inhalt deines Formulars bleibt.
  

• 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:

• Öffne Targeting und Verhalten & > Anzeige. Lege unter Timing Formular anzeigen auf Basierend auf Regeln fest, aktiviere Nach Zeitverzögerung und gib die Verzögerung in Sekunden ein. Wenn du andere Timing-Regeln aktivierst, aktiviere Nur anzeigen, wenn alle ausgewählten Bedingungen erfüllt sind, damit eine andere Timing-Regel das Formular nicht anzeigt, bevor die Verzögerung abgelaufen ist.
• Füge einen Teaser hinzu und lege die Anzeigeoption auf Vor Anzeigen und nach Schließen des Formulars anzeigen fest.

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 > Anzeige.
   • Scrolle nach unten zu Zum Schließen außerhalb des Formulars klicken.
   • Deaktiviere Auf Mobilgeräten, damit Taps außerhalb des Pop-ups dieses nicht schließen.
     

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.
   • Wähle Stile bearbeiten aus, um das Bedienfeld Stile zu öffnen.
   • Wähle im Abschnitt Overlay-Farbe eine halbtransparente Farbe aus, 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 verleihen und es so von den umgebenden Inhalten 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. Wähle Stile bearbeiten aus und scrolle dann nach unten zu Rand.
   2. Erhöhe die horizontalen Ränder basierend darauf, wie das Formular in der Mobilgeräte-Vorschau aussieht.

Flyouts optimieren

Wenn ein Flyout-Formular angezeigt wird, können Besucher*innen auf Mobilgeräten weiterhin mit deiner Website hinter dem Formular interagieren, es sei denn, Mobiles Overlay ist aktiviert. Sie können das Formular schließen, es ausfüllen oder es geöffnet lassen, während sie weiter browsen. Im Allgemeinen macht das Flyouts weniger aufdringlich als Pop-ups.

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.
   • Wähle Stile bearbeiten aus, um das Bedienfeld Stile zu öffnen.
   • Wähle Mobile Flyout-Position aus und wähle dann entweder Unten andocken oder Oben andocken.
     Auf Mobilgeräten im Hochformat wird dein Formular vom oberen oder unteren Rand des Bildschirms als Flyout eingeblendet und bedeckt einen Teil des Bildschirms von Rand zu Rand. Im Querformat verwendet es die reguläre Flyout-Position.
     

2. Trenne dein Flyout-Formular visuell vom Rest deiner Website, indem du ein mobiles Overlay, einen Schlagschatten oder beides verwendest.
   • Wähle Stile bearbeiten aus, um das Bedienfeld Stile zu öffnen.
   • Scrolle zu den Einstellungen Mobiles Overlay und Schattenwurf.
   • Aktiviere Mobiles Overlay, um die Interaktion mit dem Rest deiner Website zu blockieren, während das Flyout-Formular geöffnet bleibt. Das Overlay wird nicht angezeigt, wenn das Flyout-Formular auf einem Desktop angezeigt wird.
   • Aktiviere Drop shadow, um deinem Formular eine dezente Schattierung zu geben und es vom umgebenden Inhalt abzuheben. Beachte, dass die Einstellungen für Drop shadow sowohl die Mobil- als auch die Desktop-Version deines Formulars betreffen.
     

Nächste Schritte

Wenn du bereit bist, deine Änderungen live zu schalten:

1. Klicke im Formular-Editor auf Veröffentlichen oder planen.
2. Behebe alle blockierenden Warnmeldungen. Wenn Optionen für die Zeitplanung angezeigt werden, wähle Jetzt veröffentlichen. Klicke auf Jetzt veröffentlichen, um deine Änderungen zu veröffentlichen.

Prüfe das veröffentlichte Formular auf deinem Mobilgerät und stelle sicher, dass du seine Targeting- und Anzeigevoraussetzungen erfüllst.

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 holst du die SMS-Einwilligung mit einem Tap-to-Text-Formular ein.