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 mostrato su tutti i dispositivi, Klaviyo ottimizza automaticamente alcuni elementi, come dimensioni dei caratteri e immagini, per migliorarne l’aspetto per chi acquista da dispositivi mobili; tuttavia, 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 vista desktop a quella mobile mentre crei il modulo. L’icona desktop mostra l’aspetto del modulo per chi acquista da desktop, mentre l’icona mobile mostra ciò che vede chi acquista da dispositivo mobile.

Questa guida tratterà le best practice per creare moduli popup e flyout che appaiono sui dispositivi mobili. Sono utili indipendentemente dal fatto che il tuo modulo venga mostrato su tutti i dispositivi o solo su mobile. Per una panoramica più approfondita sui moduli d'iscrizione specifici per i dispositivi mobili, vai su nozioni di base: progettazione dei 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 tuo modulo raccoglie il consenso per gli SMS, raccogli l’e-mail al primo passaggio, poi gli SMS al secondo passaggio con Smart Opt-in, così chi visita da dispositivi mobili può iscriversi nel modo più semplice.
• Assicurati che sia facile da chiudere, così chi visita non si frustra e non abbandona il sito.
  • L'uso di un teaser del modulo offre agli acquirenti la possibilità di chiudere e riaprire il modulo quando desiderano.
• Se il tuo modulo è impostato per essere visualizzato su tutti i dispositivi (ovvero chi acquista da desktop e da mobile lo vedrà) e include un’ immagine laterale, lascia che l’immagine laterale venga mostrata solo su Mobile.
  

• 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:

• Nella scheda Targeting and behaviors, imposta la tempistica del modulo su Based on rules, quindi imposta un ritardo più lungo (ad esempio quando un visitatore sta uscendo dalla pagina).
• Aggiungi un teaser che viene visualizzato Prima che venga mostrato il 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.
   • Scorri verso il basso fino a Dispositivi.
   • In Fai clic all’esterno del modulo per chiuderlo, disattiva l’interruttore Mobile.
     

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.
   • Vai alla scheda Stili.
   • Nella sezione Sfondo del modulo, imposta il Colore sovrapposizione per utilizzare una sovrapposizione semi-opaca per mettere in risalto il modulo e attenuare i contenuti del sito mentre il modulo è aperto.
   • Configura un Drop Shadow per aggiungere una leggera ombreggiatura intorno al modulo e separarlo dal contenuto circostante.
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. Nella scheda Stili, scorri verso il basso fino a Stili del modulo.
   2. Aumenta il margine sinistro/destro in base a come appare nell’anteprima.

Ottimizzazione dei flyout

Quando viene visualizzato un modulo flyout, chi visita da mobile può comunque interagire con il tuo 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 dei popup.

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.
   • Vai alla sezione Stili.
   • Seleziona Posizione flyout per dispositivi mobili, quindi scegli Ancorato in basso o Ancorato in alto.
     Quando questa impostazione è selezionata, il modulo uscirà dall'alto o dal basso dello schermo e coprirà una parte dello schermo da un bordo all'altro.
     

2. Separa visivamente il tuo modulo flyout dal resto del sito usando una sovrapposizione mobile, un'ombra esterna o entrambe.
   • Vai alla scheda Stili.
   • Scorri fino alle impostazioni di Sfondo del modulo.
   • Attiva Mobile Overlay in modo che chi acquista da mobile non possa fare clic su altri elementi del tuo sito finché non compila o chiude il modulo. Tieni presente che Mobile overlay non verrà visualizzato quando il modulo flyout viene visualizzato su desktop.
   • Attiva Ombra esterna per applicare una leggera ombreggiatura intorno al tuo modulo, così da separarlo dai contenuti circostanti. Tieni presente che le impostazioni di Ombra esterna influiscono sia sulla versione mobile sia su quella desktop del tuo modulo.
     

I prossimi passaggi

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 utilizzare i moduli popup per raccogliere il consenso all'invio di SMS