Come ottimizzare i moduli popup e flyout per i dispositivi mobili

Imparerai

Impari a progettare i suoi moduli di iscrizione mobile tenendo conto delle best practice di Klaviyo, in modo da garantire che i suoi moduli popup e flyout siano ottimizzati per i visitatori mobili. 

Gli acquirenti online utilizzano sempre più spesso i loro dispositivi mobili per scoprire nuovi negozi, sfogliare i prodotti ed effettuare acquisti, per cui è più importante che mai assicurarsi che il suo sito web sia altrettanto bello su mobile che su desktop, e questo include i suoi moduli di iscrizione. 

Prima di iniziare

In Klaviyo, può creare moduli che vengono visualizzati su tutti i dispositivi (cioè sono visibili sui dispositivi desktop e mobili), oppure può creare moduli solo per dispositivi mobili, che vengono visualizzati solo sui dispositivi mobili.

Se il suo modulo è impostato per essere visualizzato su tutti i dispositivi, Klaviyo ottimizza automaticamente alcuni elementi, come le dimensioni dei caratteri e le immagini, per migliorarne l'aspetto per gli acquirenti su dispositivi mobili; tuttavia, questa guida tratterà ulteriori best practice da tenere a mente. Utilizzi il selettore di visualizzazione nell'angolo in alto a destra del costruttore di moduli per passare dalla visualizzazione desktop a quella mobile mentre costruisce il suo modulo. L'icona desktop mostrerà l'aspetto del modulo per gli acquirenti desktop, mentre l'icona mobile mostrerà ciò che vedono gli acquirenti mobile.

Questa guida illustra le migliori pratiche per la creazione di moduli popup e flyout che appaiono sui dispositivi mobili. Sono utili indipendentemente dal fatto che il suo modulo venga visualizzato su tutti i dispositivi o solo su quelli mobili. Per una panoramica più approfondita sui moduli di iscrizione, in particolare sui dispositivi mobili, consulti le nozioni di base: progettazione di moduli mobili.

Le migliori pratiche generali per i moduli

Molte delle migliori pratiche per i moduli desktop si applicano anche ai dispositivi mobili: 

• Sia breve e dolce: consideri un modulo a più fasi se ha molti campi.
  • Se il suo modulo raccoglie il consenso via SMS, raccolga l'e-mail nella prima fase, seguita dall'SMS nella seconda fase con Smart Opt-in, in modo che i visitatori su dispositivi mobili possano iscriversi con il metodo più semplice.
• Si assicuri che sia facile da chiudere, in modo che i visitatori non si sentano frustrati e abbandonino il suo sito. 
  • L'utilizzo di un modulo teaser offre agli acquirenti la possibilità di chiudere e riaprire il modulo a piacimento.
• Se il suo modulo è impostato per essere visualizzato su tutti i dispositivi (il che significa che gli acquirenti da desktop e da mobile lo vedranno tutti) e include un'immagine laterale, lasci l'immagine laterale per essere visualizzata solo su Mobile. 
  
• Utilizzi etichette concise per ciascuno dei suoi campi di inserimento (ad esempio, indirizzo e-mail, numero di telefono, ecc.) che si adattino ad una sola riga, in modo che gli acquirenti possano vedere facilmente quali informazioni le sta chiedendo.

SEO e moduli mobili 

È importante considerare le migliori pratiche SEO per i dispositivi mobili, in particolare quando crea dei moduli sulla sua homepage o su altre landing page. I moduli che appaiono nelle comuni pagine di destinazione della ricerca organica non devono coprire il contenuto del suo sito o interrompere l'esperienza del visitatore; altrimenti, la pagina potrebbe essere penalizzata dagli algoritmi di ricerca. Scopra di più sugli interstiziali intrusivi e sulla SEO.

Per evitare questo:

• Nella scheda Targeting e comportamenti, imposti la tempistica del suo modulo su In base alle regole, quindi imposti un ritardo più lungo (ad esempio, quando un visitatore esce dalla pagina).
• Aggiunga un teaser che viene visualizzato prima della visualizzazione del modulo.

Ottimizzazione dei popup

Un modulo popup appare al centro dello schermo dell'acquirente, spesso coprendo gran parte della pagina e ostacolando la sua capacità di interagire con altri elementi della pagina mentre il modulo è aperto. Questo rende i popup più dirompenti, ma anche a più alta conversione. 

Per ottimizzare il funzionamento dei popup sui dispositivi mobili:

1. Disabilita la chiusura del modulo quando un acquirente mobile fa clic al di fuori dell'area del modulo, per ridurre le chiusure accidentali del modulo.
   • Vada a Targeting e Comportamenti.
   • Scorra fino a Dispositivi.
   • Alla voce Fare clic sul modulo esterno per chiuderlo, disabiliti l'interruttore Mobile.
     
2. Si assicuri che l'icona di chiusura del suo modulo (il pulsante X) sia abbastanza grande, anche su uno schermo piccolo come quello di un dispositivo mobile.
   • Clicchi sull'icona di chiusura nell'anteprima del modulo per regolarne le dimensioni.
   • Provi l'aspetto del modulo sul suo dispositivo mobile per assicurarsi che sia facile da trovare e cliccare.
     Ad esempio, l'icona di chiusura nel modulo a sinistra potrebbe essere difficile da cliccare su un dispositivo mobile. Tuttavia, l'icona di chiusura nel modulo a destra è più grande e facile da trovare. 
     
3. Separa visivamente il suo popup dal resto del sito, utilizzando un colore di sovrapposizione, un'ombra o entrambi.
   • Si rechi nella scheda Stili.
   • Nella sezione Sfondo del modulo, imposti il Colore di sovrapposizione per utilizzare una sovrapposizione semi-opaca per attirare l'attenzione sul modulo e oscurare il contenuto del sito mentre il modulo è aperto.
   • Configuri una Drop Shadow per fornire un'ombreggiatura sottile intorno al suo modulo, per separarlo dal contenuto circostante.
4. Regoli i margini del suo modulo, in modo che appaia più simile a un modulo popup sui dispositivi mobili e che non si sposti da un bordo all'altro.
   
   1. Nella scheda Stili, scorra gli Stili del modulo.
   2. Aumenti il margine sinistro/destro in base a come appare nell'anteprima.

Ottimizzazione dei flyout 

Quando appare un modulo flyout, i visitatori mobili sono ancora in grado di interagire con il suo sito dietro il modulo, a meno che non sia attivata la funzione Mobile Overlay. Possono scegliere di chiudere il modulo, compilarlo o lasciarlo aperto mentre continuano a navigare. In generale, questo rende i flyout meno invadenti dei popup. 

Per ottimizzare il suo modulo flyout per un dispositivo mobile:

1. Imposti il suo modulo in modo che esca dalla parte superiore o inferiore dello schermo.
   • Si rechi nella sezione Stili.
   • Selezioni Mobile Flyout Position, quindi scelga Dock to Bottom o Dock to Top.
     Quando questa impostazione è selezionata, il suo modulo uscirà dalla parte superiore o inferiore dello schermo e coprirà una parte dello schermo da un bordo all'altro.
     
2. Separa visivamente il suo modulo flyout dal resto del sito utilizzando una sovrapposizione mobile, una drop shadow o entrambi.
   • Si rechi nella scheda Stili.
   • Scorra fino alle impostazioni dello Sfondo del modulo.
   • Attivi la funzione Mobile Overlay, in modo che gli acquirenti mobili non possano cliccare su altri elementi del suo sito finché non compilano o chiudono il modulo. Si noti che l'overlay Mobile non apparirà quando il modulo flyout viene visualizzato su un desktop.
   • Attivi Drop Shadow per fornire un'ombreggiatura sottile intorno al suo modulo, per separarlo dal contenuto circostante. Si noti che le impostazioni di Drop shadow influiscono sia sulla versione mobile che su quella desktop del suo modulo.
     

I prossimi passaggi

Una volta ottimizzati i suoi moduli per i dispositivi mobili, provi a fare dei test A/B per capire meglio le preferenze dei visitatori del sito. 

Risorse aggiuntive 

• Come iniziare a usare i moduli di iscrizione
• Comprendere le impostazioni di licenziamento dei moduli 
• Informazioni base: progettazione di moduli per dispositivi mobili
• Come utilizzare i moduli popup per raccogliere il consenso via SMS