Pop-up- en fly-out-formulieren optimaliseren voor mobiel

Wat je leert

Lees hoe je je aanmeldingsformulier voor mobiel ontwerpt met Klaviyo's best practices in gedachten, zodat je zeker weet dat je popup- en fly-out-formulier geoptimaliseerd zijn voor mobiele bezoekers.

Online shoppers gebruiken steeds vaker hun mobiele apparaten om nieuwe winkels te ontdekken, producten te bekijken en aankopen te doen. Daarom is het 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 aanmeldingsformulieren.

Voordat je van start gaat

In Klaviyo kun je formulieren maken die op alle apparaten worden weergegeven (dus zichtbaar zijn op desktop- en mobiele apparaten), of je kunt formulieren alleen voor mobiel maken die alleen op mobiele apparaten worden weergegeven.

Als je formulier is ingesteld om op alle apparaten te worden weergegeven, optimaliseert Klaviyo automatisch sommige elementen, zoals lettergroottes en afbeeldingen, om het uiterlijk voor shoppers op mobiele apparaten te verbeteren; deze gids behandelt echter aanvullende best practices om in gedachten te houden. Gebruik de weergaveselector rechtsboven in de form builder om tijdens het bouwen van je formulier te wisselen tussen desktop- en mobiele weergaven. Het desktopicoon laat zien hoe het formulier eruitziet voor desktopshoppers, terwijl het mobiele icoon laat zien wat mobiele shoppers zien.

Deze gids behandelt best practices voor het maken van popup- en fly-out-formulieren die op mobiele apparaten verschijnen. Deze zijn handig, ongeacht of je formulier op alle apparaten of alleen op mobiel wordt weergegeven. Ga voor een uitgebreider overzicht van aanmeldingsformulier op mobiele apparaten naar basisprincipes: ontwerp van mobiele formulieren.

Algemene best practices voor formulieren

Veel van de best practices voor desktopformulieren gelden ook voor mobiele apparaten:

• Houd het kort en krachtig: overweeg een meertrapsformulier als je veel velden hebt.
  • Als je formulier sms-toestemming verzamelt, verzamel dan e-mail in de eerste stap en daarna sms in de tweede stap met Smart Opt-in, zodat bezoekers op mobiele apparaten zich op de eenvoudigste manier kunnen aanmelden.
• Zorg dat je het makkelijk kunt sluiten, zodat bezoekers niet gefrustreerd raken en je site verlaten.
  • Door een formulier-teaser te gebruiken, kunnen shoppers het formulier naar wens sluiten en opnieuw openen.
• Als je formulier is ingesteld om op alle apparaten te worden weergegeven (wat betekent dat shoppers op desktop en mobiel het allemaal te zien krijgen) en een afbeelding aan de zijkant bevat, laat de afbeelding aan de zijkant dan alleen op mobiel zien.
  

• Gebruik beknopte labels voor elk van je invoervelden (bijv. e-mailadres, telefoonnummer, enz.) die op één regel passen, zodat shoppers gemakkelijk zien om welke informatie je vraagt.

SEO en mobiele formulieren

Het is belangrijk om best practices voor mobiele SEO in gedachten te houden, vooral wanneer je formulieren maakt op je homepage of andere landingspagina's. Formulieren die verschijnen op veelvoorkomende landingspagina's vanuit organische zoekresultaten mogen de content van je site niet bedekken of de ervaring van een bezoeker verstoren; anders kan de pagina worden bestraft door zoekalgoritmen. Meer informatie over intrusieve interstitials en SEO.

Om dit te voorkomen:

• Stel op het tabblad Targeting and behaviors de timing van je formulier in op Based on rules en stel vervolgens een langere vertraging in (bijv. wanneer een bezoeker de pagina verlaat).
• Voeg een teaser toe die Vóór formulier weergeven toont.

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 de mogelijkheid om met andere elementen op de pagina te interageren zolang het formulier open is. Dit maakt pop-ups storender, maar zorgt ook voor een hogere conversie.

Om te optimaliseren hoe pop-ups werken op mobiele apparaten:

1. Voorkom dat het formulier wordt gesloten wanneer een mobiele shopper buiten het formuliergebied klikt om het aantal onbedoelde formulierafsluitingen te verminderen.
   • Navigeer naar Targeting en gedrag.
   • Scroll naar beneden naar Apparaten.
   • Schakel onder Klik buiten formulier om te sluiten de schakelaar Mobiel uit.
     

2. Zorg dat het sluitpictogram van je formulier (de X-knop) groot genoeg is, ook op een klein scherm zoals dat van een mobiel apparaat.
   • Klik op het sluitpictogram in het formuliervoorbeeld om de grootte aan te passen.
   • Test hoe het formulier eruitziet op je eigen mobiele apparaat om te zorgen dat het makkelijk te vinden en aan te klikken is.
     Het sluitpictogram in het formulier links kan bijvoorbeeld lastig zijn om aan te klikken op een mobiel apparaat. Het sluitpictogram in het formulier rechts is daarentegen groter en makkelijk te vinden.
     

3. Laat je pop-up visueel opvallen ten opzichte van de rest van je site door een overlaykleur, een slagschaduw of beide te gebruiken.
   • Navigeer naar het tabblad Stijlen.
   • Stel in de sectie Form Background de Overlay Color in om een semi-transparante overlay te gebruiken die de focus op je formulier legt en de content van je site dimt terwijl het formulier open is.
   • Configureer een Slagschaduw om subtiele schaduw rondom je formulier toe te voegen, zodat het loskomt van de omringende content.
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. Scroll in het tabblad Stijlen omlaag naar Formulierstijlen.
   2. Vergroot de linker-/rechtermarge op basis van hoe het eruitziet in de preview.

Fly-outs optimaliseren

Wanneer er een fly-out-formulier verschijnt, kunnen mobiele bezoekers nog steeds met je site interageren achter het formulier, tenzij Mobiele overlay is ingeschakeld. Ze kunnen ervoor kiezen om het formulier te sluiten, het in te vullen of het open te laten terwijl ze verder browsen. Over het algemeen maakt dit fly-out-formulieren minder opdringerig dan pop-ups.

Zo optimaliseer je je fly-out-formulier voor een mobiel apparaat:

1. Stel je formulier in om vanaf de boven- of onderkant van het scherm uit te vliegen.
   • Navigeer naar de sectie Stijlen.
   • Selecteer Positie van mobiel fly-out-formulier en kies vervolgens Vastzetten onderaan of Vastzetten bovenaan.
     Wanneer deze instelling is geselecteerd, zal je formulier van boven of onder in beeld schuiven en een deel van het scherm van rand tot rand bedekken.
     

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.
   • Scroll naar de instellingen voor Formulierachtergrond.
   • Schakel Mobiele overlay in zodat mobiele shoppers niet op andere elementen op je site kunnen klikken totdat ze het formulier invullen of sluiten. Let op: Mobiele overlay wordt niet weergegeven wanneer het fly-out-formulier op een desktop wordt bekeken.
   • Schakel Slagschaduw in om subtiele schaduw rondom je formulier toe te voegen, zodat je het onderscheidt van de omliggende content. Let op: de instellingen voor Slagschaduw hebben invloed op zowel de mobiele als de desktopversie van je formulier.
     

Volgende stappen

Zodra je je formulieren hebt geoptimaliseerd voor mobiele apparaten, kun je je formulierontwerpen A/B-testen om beter te begrijpen wat je sitebezoekers prefereren.

Extra hulpbronnen

• Aan de slag met aanmeldingsformulieren
• Inzicht in instellingen voor het sluiten van formulieren
• Basisprincipes: mobiele formulieren ontwerpen
• Pop-upformulier gebruiken om sms-toestemming te verzamelen