Wie man Popup- und Flyout-Formulare für Mobilgeräte optimiert

Du wirst lernen

Lerne, wie du dein mobiles Anmeldeformular unter Berücksichtigung der Best Practices von Klaviyo gestaltest, damit du sicherstellen kannst, dass deine Popup- und Flyout-Formulare für mobile Besucher optimiert sind. 

Online-Shopper nutzen zunehmend ihre mobilen Geräte, um neue Läden zu entdecken, Produkte zu durchstöbern und Einkäufe zu tätigen. Deshalb ist es wichtiger denn je, dass deine Website auf mobilen Geräten genauso gut aussieht wie auf Desktops, und das gilt auch für dein Anmeldeformular. 

Bevor du beginnst

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. die Schriftgröße und die Bilder, um das Erscheinungsbild für Käufer auf mobilen Geräten zu verbessern; in diesem Leitfaden werden jedoch weitere Best Practices behandelt, die du beachten solltest. Verwende den Ansichtswähler in der oberen rechten Ecke des Formularerstellers, um zwischen der Desktop- und der mobilen Ansicht zu wechseln, während du dein Formular erstellst. Das Desktop-Symbol zeigt, wie das Formular für Desktop-Kunden aussieht, während das Handy-Symbol zeigt, was die Kunden auf dem Handy sehen.

In diesem Leitfaden geht es um Best Practices für die Erstellung von Popup- und Flyout-Formularen, die auf mobilen Geräten angezeigt werden. Es ist egal, ob dein Formular auf allen Geräten oder nur auf mobilen Geräten angezeigt wird. Einen ausführlicheren Überblick über Anmeldeformulare speziell für mobile Geräte findest du unter Grundlagen: Mobiles Formulardesign.

Allgemeine Best Practices für Formulare

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

• Mach es kurz und bündig: Wenn du viele Felder hast, solltest du ein mehrstufiges Formular verwenden.
  • Wenn dein Formular SMS-Einwilligung sammelt, sammle E-Mail im ersten Schritt, gefolgt von SMS im zweiten Schritt mit Smart Opt-in damit Besucher auf mobilen Geräten sich auf die einfachste Weise anmelden können.
• Achte darauf, dass sie leicht zu schließen ist, damit die Besucher nicht frustriert sind und deine Seite verlassen. 
  • Wenn du einen Formular-Teaser verwendest, können die Kunden das Formular nach Belieben schließen und wieder öffnen.
• Wenn dein Formular so eingestellt ist, dass es auf allen Geräten angezeigt wird (d.h. Desktop- und mobile Kunden sehen es alle) und ein Seitenbild enthält, lass das Seitenbild nur auf mobilen Geräten anzeigen. 
  
• Verwende prägnante Bezeichnungen für jedes Eingabefeld (z.B. E-Mail-Adresse, Telefonnummer usw.), die in eine einzige Zeile passen, damit die Kunden leicht erkennen können, nach welchen Informationen du fragst.

SEO und mobile Formulare 

Es ist wichtig, die Best Practices für mobiles SEO zu berücksichtigen, besonders wenn du Formulare auf deiner Homepage oder einer anderen Landing Page erstellst. Formulare, die auf einer gewöhnlichen Landing Page für die organische Suche erscheinen, sollten den Inhalt deiner Website nicht verdecken oder das Erlebnis des Besuchers stören, sonst kann die Seite von den Suchalgorithmen abgestraft werden. Erfahre mehr über aufdringliche Interstitials und SEO.

Um dies zu vermeiden:

• In der Registerkarte Zielgruppen und Verhalten stellst du die Zeitsteuerung deines Formulars auf Basierend auf Regeln ein und legst dann eine längere Zeitverzögerung fest (z. B. wenn ein Besucher die Seite verlässt).
• Füge einen Teaser hinzu, der angezeigt wird , bevor das Formular angezeigt wird.

Popups optimieren

Ein Pop-up-Formular erscheint in der Mitte des Bildschirms des Kunden und verdeckt oft einen großen Teil der Seite und behindert die Interaktion mit anderen Elementen der Seite, während das Formular geöffnet ist. Das macht Popups zwar störender, aber auch konversionsstärker. 

Optimierung der Funktion von Popups auf mobilen Geräten:

1. Deaktiviere das Schließen des Formulars, wenn ein mobiler Kunde außerhalb des Formularbereichs klickt, um versehentliche Formularschließungen zu vermeiden.
   • Navigiere zu Zielsetzung und Verhalten.
   • Scrolle nach unten zu Geräte.
   • Deaktiviere unter Click outside form to close den Schalter Mobile.
     
2. Achte darauf, dass das Symbol zum Schließen deines Formulars (die X-Schaltfläche) groß genug ist, auch auf einem kleinen Bildschirm wie einem mobilen Gerät.
   • Klicke auf das Schließen-Symbol in der Formularvorschau, um seine Größe anzupassen.
   • Teste, wie das Formular auf deinem eigenen mobilen Gerät aussieht, um sicherzustellen, dass es leicht zu finden und anzuklicken ist.
     Das Symbol zum Schließen des Formulars auf der linken Seite kann zum Beispiel auf einem mobilen Gerät schwer zu klicken sein. Das Schließen-Symbol im Formular auf der rechten Seite ist jedoch größer und leicht zu finden. 
     
3. Trenne dein Popup optisch vom Rest deiner Website, indem du eine Overlay-Farbe, einen Schlagschatten oder beides verwendest.
   • Navigiere zur Registerkarte " Stile".
   • Im Abschnitt Formularhintergrund stellst du die Überlagerungsfarbe ein, um eine halb-opake Überlagerung zu verwenden, die den Fokus auf dein Formular lenkt und den Inhalt deiner Website verdunkelt, während das Formular geöffnet ist.
   • Konfiguriere einen Schlagschatten, um dein Formular von den umgebenden Inhalten abzugrenzen.
4. Passe die Ränder deines Formulars an, damit es auf mobilen Geräten eher wie ein Pop-up-Formular aussieht und nicht von Rand zu Rand verläuft.
   
   1. Scrolle auf der Registerkarte " Stile" nach unten zu den Formularstilen.
   2. Erhöhe den linken/rechten Rand, je nachdem, wie es in der Vorschau aussieht.

Optimieren von Flyouts 

Wenn ein Flyout-Formular erscheint, können mobile Besucher immer noch mit deiner Website hinter dem Formular interagieren, es sei denn, Mobile Overlay ist aktiviert. Sie können wählen, ob sie das Formular schließen, ausfüllen oder offen lassen, während sie weitersurfen. Das macht Flyouts im Allgemeinen weniger aufdringlich als Popups. 

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

1. Stelle dein Formular so ein, dass es am oberen oder unteren Rand des Bildschirms ausfliegt.
   • Navigiere zum Abschnitt "Stile".
   • Wähle die Position von Mobile Flyout aus und wähle dann entweder unten andocken oder oben andocken.
     Wenn du diese Einstellung wählst, fliegt dein Formular vom oberen oder unteren Rand des Bildschirms aus und bedeckt einen Teil des Bildschirms von Rand zu Rand.
     
2. Trenne dein Flyout-Formular optisch vom Rest deiner Website mit einem mobilen Overlay, einem Schlagschatten oder beidem.
   • Navigiere zur Registerkarte " Stile".
   • Scrolle zu den Einstellungen für den Formularhintergrund.
   • Aktiviere das Mobile Overlay, damit mobile Kunden kein anderes Element auf deiner Website anklicken können, bis sie das Formular ausgefüllt oder geschlossen haben. Beachte, dass das mobile Overlay nicht angezeigt wird, wenn das Flyout-Formular auf einem Desktop angezeigt wird.
   • Aktiviere den Schlagschatten, um dein Formular mit einer dezenten Schattierung zu versehen, die es vom umgebenden Inhalt abhebt. Beachte, dass die Schlagschatteneinstellungen sowohl die mobile als auch die Desktop-Version deines Formulars betreffen.
     

Nächste Schritte

Sobald du deine Formulare für mobile Geräte optimiert hast, solltest du A/B-Tests durchführen, um die Vorlieben deiner Besucher besser zu verstehen. 

Zusätzliche Ressourcen 

• Erste Schritte mit dem Anmeldeformular
• Einstellungen für die Formularentlassung verstehen 
• Grundlagen: Mobile Formulargestaltung
• Wie man Pop-up-Formulare zum Sammeln von SMS-Einwilligung verwendet