12 best practice per la progettazione di popup che devi conoscere (per dispositivi mobili e desktop)

Nonostante la credenza popolare, le persone oggi sono più che felici di interagire con i popup.

Certo, se stai mettendo insieme buoni popup.

E fidati di noi: abbiamo visto in prima persona quanto sono efficaci nell'aumentare le conversioni e far crescere il tuo elenco di iscritti.

Ma i marchi devono sapere cosa separa un popup elegante e accattivante da qualcosa che infastidirà i visitatori e li allontanerà. Ecco dove possiamo aiutare.

In questa guida imparerai:

• I fattori che rendono "buono" un desktop o un popup mobile (con tredici esempi)
• Tre errori principali che possono affondare le prestazioni di un popup altrimenti promettente
• Cinque esempi di design popup bonus per far crescere la tua lista di email

Detto questo, tuffiamoci!

Ti piacerebbe creare popup efficaci che risuonano con i tuoi visitatori? Scarica la nostra lista di controllo dei messaggi popup e 3 volte il tuo tasso di conversione dei popup!

Se il tuo obiettivo è ottenere più iscritti direttamente dal tuo sito Web, un popup di posta elettronica può fare il trucco.

Di seguito sono riportati alcuni principi per aumentare i tassi di conversione dei tuoi popup su desktop. (Inoltre, funzionano anche con i visitatori mobili.)

1. Cattura l'attenzione dei tuoi visitatori con combinazioni di colori strabilianti

Una combinazione di colori accattivante è il modo più semplice per rendere imperdibili i tuoi popup.

Qualcosa di luminoso o fuori dal muro può fermare i visitatori nelle loro tracce. Ad esempio, questo design popup a schermo intero di Visme.co è luminoso, audace e fa risaltare il loro messaggio.

I tuoi colori popup non devono necessariamente essere luminosi o addirittura "forte". Semplicemente un netto contrasto tra luce e buio può aiutare i tuoi popup, beh, pop .

Ad esempio, questa combinazione di colori bianco e nero di Thredup.com è semplice ma elegante e sorprendente.

2. Attira i visitatori mettendo in grassetto le frasi chiave dei vantaggi

Ammettiamolo: la soglia di attenzione degli acquirenti si sta accorciando sempre di più.

Quindi, è meglio se i tuoi messaggi di marketing sono immediatamente comprensibili.

Fai attenzione a:

• Mantieni brevi i tuoi popup: pensa "less is more" ed evita muri di testo.
• Scrivi titoli potenti con frasi incisive come "gratuito", "ora" o "salva" per evidenziare immediatamente i vantaggi della tua offerta.
• Separa il testo popup in sezioni chiare (pensa a: titolo → body copy → pulsante Call-to-Action (CTA)) per guidare i tuoi lettori a partecipare.

Di seguito è riportato un fantastico esempio di un'offerta di Trade Coffee che segue le migliori pratiche di progettazione dei popup sopra indicate.

3. Presenta i tuoi popup come un'offerta personalizzata (suggerimento: non un annuncio)

Idealmente, i tuoi popup non dovrebbero sembrare annunci.

Abbiamo capito: molti consumatori non sono esattamente entusiasti dei popup. Anni e anni di annunci fastidiosi hanno lasciato i popup con una cattiva reputazione.

Il trucco per dissipare la tensione e creare fiducia con i visitatori del tuo sito web? Presenta semplicemente i tuoi popup come qualcosa che è lì per aiutare i clienti, non per venderli.

Considera le offerte che chiedono ai tuoi visitatori il loro contributo e il loro desiderio.

I popup basati sulle preferenze sono ottimi per aumentare le conversioni. Dato che il 57% dei consumatori è felice di condividere informazioni personali in cambio di offerte personalizzate.

Ad esempio, questo popup di iscrizione e-mail di Vuori consente di ricevere e-mail personalizzate in base alle preferenze personali di identificazione del sesso di un individuo.

Questo tipo di messaggio non solo fa sentire l'abbonato come se stessero ottenendo un affare, ma significa anche che è più probabile che invii offerte pertinenti in futuro.

Ecco un altro esempio di Uniqlo. Nota come il messaggio si configura come una mano d'aiuto ("aiutaci a personalizzare i messaggi per te"):

Messaggi personalizzati come questo agiscono come un modo per incoraggiare i visitatori a trascorrere più tempo sul tuo sito e interagire con il tuo marchio. Questo è simile ai popup gamificati .

Qualche secondo in più sul posto potrebbe non sembrare molto, ma rappresentano un tempo prezioso per costruire una connessione con nuovi contatti.

4. Connettiti ai potenziali clienti attraverso una copia colloquiale

Costruire la fiducia è una svolta per i tuoi popup.

Ecco perché comunicare un tono amichevole e positivo è così importante in tutta la tua copia popup.

I popup del sito Web non dovrebbero essere soffocanti o commerciali per impostazione predefinita. Parla con i tuoi potenziali clienti come un amico piuttosto che come un obiettivo di vendita.

Questo popup di Quip è un ottimo esempio di ciò di cui stiamo parlando. Cordiale e accogliente senza alcun gergo o "parlare di affari".

5. Invita i visitatori a fare clic senza interrompere l'esperienza dell'utente

I popup non devono essere totalmente diretti per essere efficaci.

In effetti, a volte, la sottigliezza può fare molto per costruire la tua lista.

Non guardare oltre la popolarità dei messaggi secondari e delle barre adesive come prova.

Piuttosto che rischiare di interrompere i tuoi visitatori mentre navigano nel tuo sito, questi formati popup servono come una piccola spintarella e un invito a controllare la tua offerta.

Dai un'occhiata all'esempio di Free People di seguito:

I visitatori che aderiscono a questi tipi di popup lo fanno senza pressioni, il che significa che è più probabile che siano entusiasti di ciò che offri.

Inoltre, è meno probabile che questi popup interrompano il flusso o l'estetica del tuo sito.

6. Assicurati che il tuo popup raggiunga le persone al momento giusto

Questa è una delle migliori pratiche popup più importanti quando si tratta di ciò che sta accadendo dietro le quinte delle tue offerte.

I tuoi popup non dovrebbero attivarsi a caso. Ti consigliamo di attendere qualche secondo (almeno cinque) prima di presentare qualsiasi tipo di popup ai visitatori.

Puoi facilmente modificare e personalizzare i controlli temporali sui popup tramite OptiMonk. La possibilità di modificare istantaneamente e testare i tempi dei popup può aiutarti a determinare cosa funziona meglio per i tuoi visitatori.

I controlli rendono anche più facile attenersi alle best practice per i popup di intento di uscita e impediscono al tuo potenziale traffico perso di rimbalzare.

Uno sbalorditivo 63% del traffico di e-commerce proviene da dispositivi mobili. Ciò significa che non puoi letteralmente permetterti di ignorare gli abbonati provenienti da smartphone.

Di seguito è riportata un'analisi delle migliori pratiche popup per aiutarti ad aumentare i tassi di conversione da dispositivi mobili.

7. Incoraggia i visitatori ad agire in fretta essendo brevi con la tua copia

Essere parsimoniosi con le tue parole è una scommessa sicura per i popup.

È particolarmente importante quando stai cercando di raggiungere i visitatori che utilizzano schermi più piccoli.

Se devi includere un disclaimer, assicurati che non distragga dalla sostanza del tuo messaggio. Quindi non usare mezzi termini.

Ad esempio, questo popup di abbonamento e-mail di Casetify va dritto al punto.

Dai un'occhiata al popup di Skullcandy qui sotto. Lo slogan luminoso e audace parla da sé e non richiede un sacco di chiarimenti per i visitatori indecisi sull'adesione.

8. Rendi i tuoi popup il più semplici possibile

Interagire con il tuo popup dovrebbe essere semplice per gli utenti mobili.

Detto questo, saresti sorpreso di quanti popup mobili siano un incubo da navigare.

Troppi posti da toccare. Colori confusi. Scorrimento inutile. La lista potrebbe continuare all'infinito.

Sebbene le offerte mobili siano generalmente minimaliste, devi comunque tenere a mente alcune delle migliori tecniche. Ciò comprende:

• Pulsanti definiti (sia per l'attivazione che per l' uscita, se necessario)
• Un titolo chiaro e una copia leggibile, che si adatta idealmente a una singola pagina (non è richiesto lo scorrimento)
• Colori che separano i vari elementi del tuo popup

Questo spiega la popolarità dei popup mobili a schermo intero che spuntano le caselle sopra.

Ad esempio, questa offerta di Skechers è chiara e facile da navigare, indipendentemente dal fatto che qualcuno sia interessato o meno.

Lo stesso per questo popup mobile di Pura Vida:

9. Fai le tue offerte senza sforzo e richiedi meno campi modulo

Non è un caso che tutti gli esempi di popup mobili in questo post richiedano solo un indirizzo email per iscriversi.

I singoli campi significano meno sforzo e meno distrazioni per i visitatori del tuo sito. Questo alla fine rende il processo di opt-in rapido e indolore.

Risparmiare pochi secondi preziosi con meno campi potrebbe fare la differenza tra un nuovo iscritto e un visitatore rimbalzato.

10. Scegli un potente CTA (frase di invito all'azione) che attiri i tuoi visitatori

Le frasi CTA sono un elemento cruciale dell'ottimizzazione delle conversioni.

Più convincente è il tuo CTA, più è probabile che tu ottenga un opt-in.

Il CTA di Nectar Sleep ("Risparmia $ 399") promette enormi risparmi e rende la loro offerta più preziosa.

Chiedere semplicemente ai visitatori del sito di "fare clic qui" è un'opportunità sprecata per evidenziare i vantaggi.

11. Usa i numeri per evidenziare i risparmi seri al più presto

Puoi anche cavalcare l'esempio sopra. I numeri sono popolari da cospargere nei popup sia per mostrare i risparmi che per comunicare un valore immediato.

Per il nostro cervello è più facile elaborare i numeri che leggere il testo. Hai notato quanti popup mobili fanno affidamento su "$ 10 DI SCONTO" o "RISPARMIA IL 10%" come fulcro della loro offerta?

Ecco un titolo basato su numeri che incoraggia le persone a iscriversi a una newsletter di Arctic Fox. Nota anche il design accattivante:

12. Verifica che i tuoi popup siano compatibili con Google

Sebbene i popup non influiscano direttamente sulla posizione del tuo sito con Google, il motore di ricerca ha preso posizione sui contenuti "intrusivi" .

I tuoi popup non dovrebbero ostacolare la tua esperienza utente o impedire loro di accedere al contenuto del tuo sito.

Questo spiega perché dovresti prestare attenzione ai popup a schermo intero, presentandoli solo dopo che i visitatori hanno avuto la possibilità di navigare.

Immagina che qualcuno stia visitando il tuo sito per la prima volta tramite dispositivo mobile. Non vuoi segnalare il tuo sito come spam o allontanare immediatamente nuovi visitatori, giusto? Ciò potrebbe essere una cattiva notizia per la tua frequenza di rimbalzo.

Buona domanda! A volte il modo migliore per attenersi alle migliori pratiche popup più importanti è sapere cosa non fare.

Diamo un'occhiata agli errori più grandi che potrebbero potenzialmente rovinare le prestazioni dei tuoi popup.

1. Comunicazione di contenuti irrilevanti o non necessari

I popup "occupati" possono essere fastidiosi. Assicurati di limitare il tuo testo ed evitare più messaggi. Attenersi a una o due frasi con un unico tema. È meno probabile che travolga i visitatori del sito.

2. Presentare un'offerta deludente

Chiediti: quale valore stai fornendo ai potenziali abbonati in cambio dei loro indirizzi email? Sconti elevati, spedizione gratuita e premi per l'acquirente per la prima volta sono spesso necessari per impressionare gli acquirenti e spingerli ad iscriversi.

Ottieni incentivi creativi e di brainstorming che vanno oltre gli aggiornamenti di base o uno sconto del 5%.

3. Fare affidamento su design popup di spam della vecchia scuola

Qui a OptiMonk, siamo in una crociata contro i cattivi popup.

Impegnato. Spam. Salesiano. Conosci quelli di cui stiamo parlando.

Le buone notizie? La creazione di popup eleganti e degni di un clic è possibile per qualsiasi marchio, grazie a strumenti come OptiMonk.

Quando si tratta di design popup, una piccola ispirazione può fare molto per creare fantastiche offerte.

Ecco cinque fantastici esempi di design popup che aiutano a far crescere la tua lista di e-mail (e un'analisi di ciò che fanno bene).

1. Tentree

Questo messaggio laterale di Tentree è un brillante esempio di popup non invadente.

Nota come il pulsante CTA dell'offerta si distingue dal resto della combinazione di colori del sito? Mentre la sottigliezza del messaggio laterale fa sembrare che sia effettivamente parte della home page.

2. Nero e grassetto

Questa offerta è, abbastanza appropriatamente, audace con un titolo diretto che è difficile da perdere.

La possibilità di scegliere tra le opzioni di drink evidenzia anche come utilizzare la personalizzazione e le preferenze per siglare l'accordo con i visitatori per la prima volta.

3. Bailly

A volte vale la pena mantenerlo semplice. Questo popup di posta elettronica di Bailly dimostra che un design popup non deve essere necessariamente una scienza missilistica.

Un'offerta semplice in cambio dell'e-mail dei tuoi visitatori è sempre un gioco leale.

4. Prendi Green Home

Questo è un altro esempio di popup semplice ma efficace che aiuta a far crescere la tua lista di email.

Il linguaggio di conversazione ("Vuoi un'offerta speciale sul tuo primo ordine?") e CTA ("SI PREGO") mostrano come le scelte di copia di base possono convincere i visitatori a fornire le loro informazioni.

5. Cucchiaio magico

Idealmente, la tua offerta popup dovrebbe essere in grado di parlare da sola. Questo annuncio di Magic Spoon promette qualcosa di importante con la possibilità di vincere cereali gratis per un mese, usando un linguaggio chiaro e parole potenti ("gratis", "vincere") per fare una dichiarazione.

E con questo, concludiamo la nostra guida!

Quando si tratta di creare un "buono" popup, ci sono tonnellate di pezzi mobili da gestire.

Si spera che la nostra lista ti abbia suggerito su cosa devi concentrarti. Questi suggerimenti possono guidarti verso più iscritti e conversioni sia che tu stia ottimizzando le tue campagne attuali o che tu stia ricominciando da zero.

Per ulteriori informazioni sulla creazione di popup ad alta conversione, consulta la nostra Guida definitiva ai popup.