Hoe je pop-up en fly-out formulieren optimaliseert voor mobiel

Wat je leert

Leer hoe je je mobiele aanmeldingsformulier ontwerpt met Klaviyo's best practices in gedachten, zodat je ervoor kunt zorgen dat je popup- en fly-outformulieren geoptimaliseerd zijn voor mobiele bezoekers. 

Online shoppers gebruiken steeds vaker hun mobiele apparaten om nieuwe zaken te ontdekken, door producten te bladeren en aankopen te doen, dus het is belangrijker dan ooit om ervoor te zorgen dat je website er op mobiel net zo goed uitziet als op desktops, en dat geldt ook voor je aanmeldingsformulier. 

Voordat je van start gaat

In Klaviyo kun je formulieren maken die op alle apparaten worden weergegeven (wat betekent dat ze zichtbaar zijn op desktop en mobiele apparaten), of je kunt alleen mobiele formulieren maken die alleen op mobiele apparaten worden weergegeven.

Als je formulier is ingesteld om op alle apparaten te worden weergegeven, optimaliseert Klaviyo automatisch een aantal elementen, zoals lettergroottes en afbeeldingen, om het er beter uit te laten zien voor kopers op mobiele apparaten. Gebruik de weergaveselector in de rechterbovenhoek van de formulierbouwer om te schakelen tussen desktop- en mobiele weergaven terwijl je je formulier maakt. Het bureaubladpictogram laat zien hoe het formulier eruitziet voor desktopkopers, terwijl het mobiele pictogram laat zien wat mobiele kopers zien.

Deze gids behandelt de best practices voor het maken van popup- en fly-outformulieren die op mobiele apparaten verschijnen. Het maakt niet uit of je formulier op alle apparaten wordt weergegeven of alleen op mobiele apparaten. Voor een meer diepgaand overzicht over aanmeldingsformulieren specifiek voor mobiele apparaten, ga je naar basics: ontwerp van mobiele formulieren.

Algemene best practices voor formulieren

Veel van de best practices voor desktopformulieren zijn ook van toepassing op mobiele apparaten: 

• Houd het kort en krachtig: overweeg een formulier met meerdere stappen als je veel velden hebt.
  • Als je formulier toestemming voor sms verzamelt, verzamel dan e-mail bij de eerste stap, gevolgd door sms bij de tweede stap met Smart Opt-in zodat bezoekers op mobiele apparaten zich op de makkelijkste manier kunnen aanmelden.
• Zorg ervoor dat hij gemakkelijk te sluiten is, zodat bezoekers niet gefrustreerd raken en je site verlaten. 
  • Met een formulier teaser kunnen shoppers het formulier naar wens sluiten en weer openen.
• Als je formulier is ingesteld om te worden weergegeven op alle apparaten (wat betekent dat desktop- en mobiele klanten het allemaal zien) en een zijafbeelding bevat, laat de zijafbeelding dan alleen op mobiel staan. 
  
• Gebruik beknopte labels voor elk van je invoerveld (bijv. e-mailadres, telefoonnummer, enz.) die op één regel passen zodat winkelend publiek gemakkelijk kan zien om welke informatie je vraagt.

SEO en mobiele formulieren 

Het is belangrijk om rekening te houden met mobiele SEO best practices, vooral bij het maken van formulieren op je homepage of andere landingspagina's. Formulieren die verschijnen op de gebruikelijke landingspagina's voor organische zoekopdrachten mogen de inhoud van je site niet bedekken of de ervaring van een bezoeker verstoren; anders kan de pagina worden bestraft door zoekalgoritmen. Meer informatie over opdringerige interstitials en SEO.

Om dit te voorkomen:

• Stel op het tabblad Doel en gedrag de timing van je formulier in op Gebaseerd op regels en stel vervolgens een langere tijdsvertraging in (bijvoorbeeld wanneer een bezoeker de pagina verlaat).
• Voeg een teaser toe die wordt weergegeven voordat het formulier wordt weergegeven.

Pop-ups optimaliseren

Een pop-upformulier verschijnt in het midden van het scherm van een shopper, bedekt vaak een groot deel van de pagina en belemmert hun mogelijkheid om met andere elementen van de pagina te interageren terwijl het formulier open staat. Dit maakt pop-ups meer storend, maar ook hoger-converterend. 

De werking van pop-ups op mobiele apparaten optimaliseren:

1. Het formulier uitschakelen zodat het niet sluit wanneer een mobiele shopper buiten het formuliergebied klikt om het per ongeluk sluiten van formulieren te verminderen.
   • Navigeer naar Targeting en Gedrag.
   • Scroll naar beneden naar Apparaten.
   • Onder Klik buiten formulier om te sluiten, schakel je Mobiel uit.
     
2. Zorg ervoor dat het sluitpictogram van je formulier (de X knop) groot genoeg is, zelfs op een klein scherm zoals een mobiel apparaat.
   • Klik op het sluitpictogram in het voorbeeld van het formulier om de grootte aan te passen.
   • Test hoe het formulier eruit ziet op je eigen mobiele apparaat om er zeker van te zijn dat je het gemakkelijk kunt vinden en erop kunt klikken.
     Het sluitpictogram in het formulier links kan bijvoorbeeld moeilijk aan te klikken zijn op een mobiel apparaat. Het sluitpictogram in het formulier rechts is echter groter en gemakkelijk te vinden. 
     
3. Scheid je popup visueel van de rest van je site door een overlappende kleur, een slagschaduw of beide te gebruiken.
   • Navigeer naar het tabblad Stijlen.
   • Stel in het gedeelte Achtergrond van formulier de Overlay Color in om een semi-opaque overlay te gebruiken om de aandacht op je formulier te vestigen en de inhoud van je site te dimmen terwijl het formulier open staat.
   • Configureer een slagschaduw om een subtiele schaduw rond je formulier aan te brengen om het te scheiden van de omringende inhoud.
4. Pas de marges van je formulier aan zodat het er op mobiele apparaten meer uitziet als een pop-upformulier en niet van rand tot rand loopt.
   
   1. Blader op het tabblad Stijlen naar beneden naar Formulierstijlen.
   2. Verhoog de marge links/rechts op basis van hoe het eruit ziet in het voorbeeld.

Flyouts optimaliseren 

Wanneer een fly-out formulier verschijnt, kunnen mobiele bezoekers nog steeds interactie hebben met je site achter het formulier, tenzij Mobile Overlay is ingeschakeld. Ze kunnen ervoor kiezen om het formulier te sluiten, in te vullen of open te laten terwijl ze verder surfen. Over het algemeen maakt dit flyouts minder opdringerig dan popups. 

Je fly-out formulier optimaliseren voor een mobiel apparaat:

1. Stel in dat je formulier uit de boven- of onderkant van het scherm vliegt.
   • Navigeer naar de sectie Stijlen.
   • Selecteer Mobile fly-out Positie en kies vervolgens Dock to Bottom of Dock to Top.
     Als je deze instelling selecteert, vliegt je formulier uit de boven- of onderkant van het scherm en bedekt het een deel van het scherm van rand tot rand.
     
2. Scheid je fly-out formulier visueel van de rest van je site met een mobiele overlay, een slagschaduw of beide.
   • Navigeer naar het tabblad Stijlen.
   • Blader naar de instellingen voor Formulierachtergrond.
   • Schakel Mobile Overlay in zodat mobiele shoppers niet op een ander element op je site kunnen klikken totdat ze het formulier hebben ingevuld of gesloten. Merk op dat de mobiele overlay niet verschijnt als het fly-out formulier op een desktop wordt bekeken.
   • Schakel Slagschaduw in voor een subtiele schaduw rond je formulier om het te scheiden van de omringende inhoud. Merk op dat de instellingen voor Slagschaduw zowel de mobiele als de desktopversie van je formulier beïnvloeden.
     

Volgende stappen

Als je je formulieren hebt geoptimaliseerd voor mobiele apparaten, probeer dan je formulierontwerpen te A/B-testen om de voorkeuren van je websitebezoekers beter te begrijpen. 

Extra hulpbronnen 

• Aan de slag met aanmeldingsformulieren
• Instellingen voor ontslagformulieren begrijpen 
• Basisprincipes: ontwerp van mobiele formulieren
• Hoe pop-upformulier gebruiken om toestemming voor sms te verzamelen