Come ottimizzare i moduli popup e i moduli flyout per dispositivi mobili

Cosa imparerai

Scopri come progettare i moduli d'iscrizione per dispositivi mobili seguendo le best practice di Klaviyo, così puoi assicurarti che i moduli popup e flyout siano ottimizzati per chi visita da mobile.

Gli acquirenti online usano sempre più spesso i dispositivi mobili per scoprire nuovi negozi, sfogliare prodotti ed effettuare acquisti, quindi è più importante che mai assicurarti che il tuo sito web sia bello su mobile tanto quanto su desktop, e questo include i moduli d'iscrizione.

Prima di iniziare

In Klaviyo, puoi creare moduli che vengono mostrati su tutti i dispositivi (ovvero sono visibili su desktop e dispositivi mobili) oppure puoi creare moduli solo per dispositivi mobili, che vengono mostrati solo su dispositivi mobili.

Se il modulo è impostato per essere visualizzato su tutti i dispositivi, Klaviyo ottimizza automaticamente alcuni elementi, come le dimensioni del carattere e le immagini, per migliorarne l’aspetto per chi acquista da dispositivi mobili. Questa guida tratterà ulteriori best practice da tenere a mente. Usa il selettore di visualizzazione nell’angolo in alto a destra del generatore di moduli per passare dalla visualizzazione desktop a quella mobile mentre crei il modulo. L’icona desktop mostrerà l’aspetto del modulo per chi acquista da desktop, mentre l’icona mobile mostra ciò che vede chi acquista da dispositivi mobili.

Questa guida illustra le best practice per creare moduli popup e flyout che vengono visualizzati sui dispositivi mobili. Questi suggerimenti sono utili indipendentemente dal fatto che il tuo modulo venga mostrato su tutti i dispositivi o solo su dispositivi mobili. Per una panoramica più approfondita sui moduli d'iscrizione in particolare sui dispositivi mobili, vai a nozioni di base: progettazione di moduli per dispositivi mobili.

Procedure consigliate generali per i moduli

Molte delle best practice per i moduli desktop si applicano anche ai dispositivi mobili:

• Mantienilo breve e semplice: valuta un modulo in più passaggi se hai molti campi.
  • Se il modulo raccoglie il consenso per e-mail e SMS, raccogli l’e-mail nel primo passaggio, seguito da SMS nel secondo passaggio. Usa Smart Opt-in per un’esperienza di opt-in da mobile più semplice. Smart Opt-in richiede che SMS sia abilitato nel tuo account e un piano SMS a pagamento; consulta la guida collegata per i requisiti di configurazione.
• Assicurati che sia facile da chiudere, così chi visita non si frustra e non abbandona il sito.
  • Utilizzando un form teaser, chi acquista può riaprire un modulo che ha chiuso. Imposta il teaser su Mostra dopo la chiusura del modulo oppure Mostra prima della visualizzazione del modulo e dopo la chiusura del modulo.
• Se il tuo modulo è impostato per essere visualizzato su tutti i dispositivi (ovvero sia chi acquista da desktop sia da mobile lo vedrà) e include un’ immagine laterale, lascia l’immagine impostata su Desktop in Modifica stili > Immagine laterale. In questo modo l’immagine laterale viene nascosta sui dispositivi mobili, lasciando più spazio ai contenuti del tuo modulo.
  

• Usa etichette concise per ciascun campo di inserimento (ad esempio, indirizzo e-mail, numero di telefono, ecc.) che stiano su una sola riga, così gli acquirenti possono vedere facilmente quali informazioni stai chiedendo.

SEO e moduli per dispositivi mobili

È importante considerare le best practice SEO per dispositivi mobili, soprattutto quando crei moduli nella home page o in altre landing page. I moduli che compaiono nelle comuni landing page della ricerca organica non devono coprire i contenuti del tuo sito o interrompere l'esperienza di chi lo visita; in caso contrario, la pagina potrebbe essere penalizzata dagli algoritmi di ricerca. Scopri di più sugli interstitial intrusivi e sulla SEO.

Per evitare questo:

• Apri Targeting e comportamento > Visualizzazione. In Tempistica, imposta Mostra modulo su In base alle regole, attiva Dopo un ritardo e inserisci il ritardo in secondi. Se abiliti altre regole di tempistica, attiva Mostra solo se tutte le condizioni selezionate sono soddisfatte per evitare che un’altra regola di tempistica mostri il modulo prima che sia trascorso il ritardo.
• Aggiungi un teaser e imposta la sua opzione di visualizzazione su Mostra prima della visualizzazione del modulo e dopo la chiusura del modulo.

Ottimizzazione dei popup

Un modulo popup appare al centro dello schermo di chi acquista, spesso coprendo gran parte della pagina e ostacolando la possibilità di interagire con altri elementi della pagina mentre il modulo è aperto. Questo rende i popup più invasivi, ma anche con tassi di conversione più elevati.

Per ottimizzare il funzionamento dei popup sui dispositivi mobili:

1. Impedisci che il modulo si chiuda quando un utente mobile fa clic al di fuori dell'area del modulo, per ridurre le chiusure accidentali del modulo.
   • Vai a Targeting e comportamento > Visualizzazione.
   • Scorri verso il basso fino a Fai clic all'esterno del modulo per chiudere.
   • Deseleziona Su dispositivi mobili per evitare che i tocchi all’esterno del popup lo chiudano.
     

2. Assicurati che l’icona di chiusura del tuo modulo (il pulsante X) sia abbastanza grande, anche su uno schermo piccolo come quello di un dispositivo mobile.
   • Fai clic sull'icona di chiusura nell'anteprima del modulo per regolarne le dimensioni.
   • Verifica come appare il modulo sul tuo dispositivo mobile per assicurarti che sia facile da trovare e su cui fare clic.
     Ad esempio, l'icona di chiusura nel modulo a sinistra potrebbe essere difficile da toccare su un dispositivo mobile. Tuttavia, l'icona di chiusura nel modulo a destra è più grande ed è facile da trovare.
     

3. Distingui visivamente il tuo popup dal resto del tuo sito usando un colore di sovrapposizione, un'ombra esterna o entrambi.
   • Seleziona Modifica stili per aprire il pannello Stili.
   • Nella sezione Colore overlay, scegli un colore semiopaco per mettere in risalto il modulo e attenuare i contenuti del sito mentre il modulo è aperto.
   • Configura un effetto ombra per aggiungere una leggera sfumatura attorno al modulo e separarlo dai contenuti circostanti.
4. Regola i margini del modulo in modo che su dispositivi mobili assomigli di più a un modulo popup e non si estenda da un bordo all'altro.
   
   1. Seleziona Modifica stili, poi scorri verso il basso fino a Margine.
   2. Aumenta i margini orizzontali in base a come appare il modulo nell'anteprima mobile.

Ottimizzazione dei flyout

Quando viene visualizzato un modulo flyout, chi visita il tuo sito da mobile può comunque interagire con il sito dietro al modulo, a meno che Mobile overlay non sia attivato. Può scegliere di chiudere il modulo, compilarlo o lasciarlo aperto mentre continua a navigare. In generale, questo rende i flyout meno invasivi rispetto ai pop-up.

Per ottimizzare il tuo modulo flyout per un dispositivo mobile:

1. Imposta il modulo in modo che esca dall'alto o dal basso dello schermo.
   • Seleziona Modifica stili per aprire il pannello Stili.
   • Seleziona Posizione flyout su dispositivi mobili, quindi scegli Aggancia in basso o Aggancia in alto.
     Sui dispositivi mobili con orientamento verticale, il modulo comparirà come flyout dalla parte superiore o inferiore dello schermo e coprirà una porzione dello schermo da bordo a bordo. Con orientamento orizzontale, utilizza la posizione flyout standard.
     

2. Separa visivamente il tuo modulo flyout dal resto del sito usando una sovrapposizione mobile, un'ombra esterna o entrambe.
   • Seleziona Modifica stili per aprire il pannello Stili.
   • Scorri fino alle impostazioni Sovrapposizione per dispositivi mobili e Ombra esterna.
   • Attiva Sovrapposizione mobile per bloccare l’interazione con il resto del sito mentre il modulo flyout rimane aperto. La sovrapposizione non appare quando il modulo flyout viene visualizzato su desktop.
   • Attiva Ombra esterna per applicare un’ombreggiatura leggera intorno al modulo, così da separarlo dai contenuti circostanti. Tieni presente che le impostazioni di Ombra esterna influiscono sia sulle versioni mobile che desktop del modulo.
     

I prossimi passaggi

Quando sei pronto a pubblicare le modifiche:

1. Fai clic su Pubblica o programma nell’editor del modulo.
2. Risolvi eventuali avvisi bloccanti. Se vengono visualizzate le opzioni di pianificazione, seleziona Pubblica ora. Fai clic su Pubblica ora per pubblicare le modifiche.

Controlla il modulo pubblicato sul tuo dispositivo mobile, assicurandoti di soddisfare le condizioni di targeting e visualizzazione.

Dopo aver ottimizzato i moduli per i dispositivi mobili, prova il test A/B dei design dei moduli per capire meglio le preferenze delle persone che visitano il tuo sito.

Risorse aggiuntive

• Primi passi con i moduli di iscrizione
• Informazioni sulle impostazioni di chiusura dei moduli
• Informazioni base: progettazione di moduli per dispositivi mobili
• Come acquisire il consenso agli SMS con un modulo tap-to-text