12 cele mai bune practici de design pop-up pe care trebuie să le cunoașteți (pentru mobil și desktop)

Publicat: 2021-08-26

🤫 Psst! Dacă doriți să generați 20% vânzări suplimentare în fiecare lună cu o strategie simplă, verificați aceasta. »

În ciuda credinței populare, oamenii de astăzi sunt mai mult decât fericiți să interacționeze cu ferestrele pop-up.

De acord, dacă creezi ferestre pop-up bune .

Și aveți încredere în noi – am văzut direct cât de eficienți sunt în creșterea conversiilor și în creșterea listei dvs. de abonați.

Dar mărcile trebuie să știe ce separă o fereastră pop-up elegantă, care atrage atenția de ceva care îi va enerva pe vizitatori și îi va îndepărta. Acolo putem ajuta.

În acest ghid, veți învăța:

  • Factorii care fac un pop-up desktop sau mobil „bun” (cu treisprezece exemple)
  • Trei greșeli majore care pot reduce performanța unui pop-up altfel promițător
  • Cinci exemple de design pop-up bonus pentru a vă crește lista de e-mail

Cu asta, să ne scufundăm!

Doriți să creați ferestre pop-up eficiente care să rezoneze cu vizitatorii dvs.? Descărcați Lista noastră de verificare a mesajelor pop-up și de trei ori rata de conversie a pop-up-ului!

Descărcați lista de verificare

Cele mai bune practici pentru proiectarea pop-up-urilor pentru desktop

Dacă scopul dvs. este să obțineți mai mulți abonați direct de pe site-ul dvs., un pop-up de e-mail poate face truc.

Mai jos sunt câteva principii pentru a crește ratele de conversie ale ferestrelor pop-up pe desktop. (În plus, funcționează și cu vizitatori mobili.)

1. Atrageți atenția vizitatorilor dvs. cu combinații de culori atrăgătoare

O schemă de culori captivantă este cea mai simplă modalitate de a face ferestrele pop-up să nu poată rata.

Ceva strălucitor sau ieșit din perete îi poate opri pe vizitatori. De exemplu, acest design pop-up pe ecran complet de la Visme.co este luminos, îndrăzneț și face mesajul lor să iasă în evidență.

popup best practices 01 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Culorile tale pop-up nu trebuie neapărat să fie luminoase sau chiar „tare”. Pur și simplu un contrast puternic de lumină versus întuneric vă poate ajuta ferestrele pop-up, ei bine, pop .

De exemplu, această schemă de culori alb și negru de la Thredup.com este simplă, dar elegantă și izbitoare.

popup best practices 02 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

2. Atrageți vizitatorii prin îndrăzneala frazelor-cheie de beneficii

Să recunoaștem: intervalele de atenție ale cumpărătorilor sunt din ce în ce mai scurte.

Deci, cel mai bine este dacă mesajele dvs. de marketing sunt de înțeles instantaneu.

Faceți un punct la:

  • Păstrați-vă ferestrele pop-up scurte: gândiți-vă „mai puțin înseamnă mai mult” și evitați pereții de text.
  • Scrieți titluri puternice cu expresii puternice precum „gratuit”, „acum” sau „salvați” pentru a evidenția imediat beneficiile ofertei dvs.
  • Separați textul pop-up în secțiuni clare (gândiți-vă: titlu → copie de text → buton îndemn la acțiune (CTA)) pentru a vă ghida cititorii să se înscrie.

Mai jos este un exemplu minunat de ofertă de la Trade Coffee care urmează cele mai bune practici de design pop-up menționate mai sus.

popup best practices 03 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

3. Prezentați ferestrele pop-up ca o ofertă personalizată (indiciu: nu o reclamă)

În mod ideal, ferestrele pop-up nu ar trebui să pară reclame.

Înțelegem: mulți consumatori nu sunt tocmai încântați de ferestrele pop-up. Ani și ani de reclame enervante au lăsat ferestrele pop-up cu o repetare proastă.

Trucul pentru a difuza tensiunea și a construi încrederea cu vizitatorii site-ului dvs.? Pur și simplu prezentați ferestrele pop-up ca pe ceva care este acolo pentru a ajuta clienții, nu pentru a le vinde.

Luați în considerare ofertele care solicită vizitatorilor dumneavoastră părerea și dorința lor.

Ferestrele pop-up bazate pe preferințe sunt excelente pentru creșterea conversiilor. Având în vedere că 57% dintre consumatori sunt bucuroși să împărtășească informații personale în schimbul unor oferte personalizate.

De exemplu, această fereastră pop-up de înscriere pentru e-mail de la Vuori permite înscrierilor să primească e-mailuri personalizate pe baza preferințelor personale de identificare a sexului unei persoane.

Acest tip de mesaj nu numai că îl face pe abonat să simtă că primește o ofertă, dar înseamnă și că este mai probabil să trimiteți oferte relevante în viitor.

popup best practices 04 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Iată un alt exemplu de la Uniqlo. Observați cum mesajul se încadrează ca o mână de ajutor („ajutați-ne să personalizăm mesajele pentru dvs.”):

popup best practices 05 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Mesajele personalizate ca acesta acționează ca o modalitate de a încuraja vizitatorii să petreacă mai mult timp pe site-ul dvs. și să interacționeze cu marca dvs. Acest lucru este similar cu ferestrele pop-up gamificate .

Câteva secunde suplimentare la fața locului ar putea să nu pară prea multe, dar reprezintă timp prețios pentru a construi o conexiune cu noi clienți potențiali.

4. Conectați-vă cu potențialii clienți printr-o copie conversațională

Construirea încrederii este o soluție pentru ferestrele pop-up.

De aceea, comunicarea unui ton prietenos și pozitiv este atât de importantă în copierea dvs. pop-up.

În mod implicit, ferestrele pop-up ale site-ului web nu ar trebui să fie înfundate sau vândute. Vorbește cu potențialii tăi clienți mai degrabă ca un prieten decât ca o țintă de vânzări.

Această fereastră pop-up de la Quip este un exemplu minunat despre ceea ce vorbim. Prietenos și primitor, fără jargon sau „vorbire de afaceri”.

popup best practices 06 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

5. Invitați vizitatorii să facă clic fără a întrerupe experiența utilizatorului

Ferestrele pop-up nu trebuie să fie complet în față pentru a fi eficiente.

De fapt, uneori, subtilitatea poate ajuta la construirea listei dvs.

Nu căutați mai departe decât popularitatea mesajelor laterale și a barelor lipicioase ca dovadă.

În loc să riscați să vă întrerupeți vizitatorii în timp ce navighează pe site-ul dvs., aceste formate pop-up servesc ca un mic impuls și o invitație pentru a vă verifica oferta.

Consultați exemplul de la Free People de mai jos:

popup best practices 07 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Vizitatorii care se înscriu din aceste tipuri de ferestre pop-up fac acest lucru fără presiune, ceea ce înseamnă că sunt mai probabil să fie entuziasmați de ceea ce oferiți.

În plus, este mai puțin probabil ca aceste ferestre pop-up să perturbe fluxul sau estetica site-ului dvs.

6. Asigurați-vă că pop-up-ul dvs. ajunge la oameni la momentul potrivit

Aceasta este una dintre cele mai importante practici pop-up când vine vorba de ceea ce se întâmplă în culisele ofertelor dvs.

Ferestrele pop-up nu ar trebui să se declanșeze la întâmplare. Vă recomandăm să așteptați câteva secunde (cel puțin cinci) înainte de a prezenta orice fel de ferestre pop-up vizitatorilor.

Puteți edita și personaliza cu ușurință controalele de timp ale ferestrelor pop-up prin OptiMonk. Abilitatea de a modifica și de a testa instantaneu sincronizarea pop-upului vă poate ajuta să determinați ce funcționează cel mai bine pentru vizitatorii dvs.

De asemenea, comenzile fac mai ușor să respectați cele mai bune practici pop-up cu intenție de ieșire și să împiedice să respingă traficul care ar fi pierdut.

Cele mai bune practici de design pop-up mobile pentru a câștiga abonați din mers

Un uluitor de 63% din traficul de comerț electronic vine de pe dispozitive mobile. Acest lucru înseamnă că literalmente nu vă puteți permite să ignorați abonații care vin de pe smartphone-uri.

Mai jos este o detaliere a celor mai bune practici pop-up pentru a vă ajuta să vă creșteți ratele de conversie pe dispozitive mobile.

7. Încurajați vizitatorii să acționeze rapid, fiind scurt cu copia dvs

A fi economic cu cuvintele tale este un pariu sigur pentru ferestrele pop-up.

Este deosebit de important atunci când încercați să ajungeți la vizitatori care folosesc ecrane mai mici.

Dacă trebuie să includeți o declinare a răspunderii, asigurați-vă că nu vă distrage atenția de la conținutul mesajului dvs. Deci nu toca cuvintele.

De exemplu, această fereastră pop-up pentru abonamentul prin e-mail de la Casetify ajunge direct la obiect.

popup best practices 08 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Consultați mai jos fereastra pop-up Skullcandy. Sloganul strălucitor și îndrăzneț vorbește de la sine și nu necesită o grămadă de clarificări pentru vizitatorii din gard cu privire la înscriere.

popup best practices 09 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

8. Faceți ferestrele pop-up cât mai prietenoase cu atingerea posibilului

Interacțiunea cu pop-up-ul dvs. ar trebui să fie simplă pentru utilizatorii de telefonie mobilă.

Acestea fiind spuse, ați fi surprins de câte ferestre pop-up mobile sunt un coșmar de navigat.

Prea multe locuri pentru a atinge. Culori confuze. Defilare inutilă. Lista continuă și continuă.

Deși ofertele mobile sunt de obicei minimaliste, trebuie totuși să țineți cont de cele mai bune tehnici. Aceasta include:

  • Butoane definite (atât pentru înscriere, cât și pentru ieșire, dacă este necesar)
  • Un titlu clar și o copie lizibilă, potrivită în mod ideal pe o singură pagină (nu este necesară derularea)
  • Culori care separă diferitele elemente ale pop-upului

Aceasta explică popularitatea ferestrelor pop-up mobile pe ecran complet care bifează casetele de mai sus.

De exemplu, această ofertă de la Skechers este clară și ușor de navigat indiferent dacă cineva este interesat sau nu.

popup best practices 10 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Același lucru pentru acest pop-up mobil de la Pura Vida:

popup best practices 11 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

9. Faceți-vă ofertele fără efort și solicitați mai puține câmpuri de formular

Nu este o coincidență că toate exemplele de pop-up mobile din această postare necesită doar o adresă de e-mail pentru a te abona.

Câmpurile unice înseamnă mai puțin efort și mai puține distrageri pentru vizitatorii site-ului dvs. Acest lucru face ca procesul de înscriere să fie rapid și nedureros.

Salvarea a câteva secunde prețioase cu mai puține câmpuri ar putea fi diferența dintre un nou abonat și un vizitator respins.

10. Alegeți un CTA (expresie îndemn) puternică care să-ți atragă vizitatorii

Frazele CTA sunt o piesă crucială pentru optimizarea conversiilor.

Cu cât îndemnul tău este mai convingător, cu atât este mai probabil să obții o înscriere.

CTA de la Nectar Sleep („Save $399”) promite economii masive și face ca oferta lor să se simtă mai valoroasă.

popup best practices 12 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Pur și simplu le cere vizitatorilor site-ului să „dai clic aici” este o oportunitate pierdută de a evidenția beneficiile.

11. Folosiți numerele pentru a evidenția economiile serioase cât mai curând posibil

Puteți, de asemenea, să utilizați exemplul de mai sus. Numerele sunt populare pentru a presăra în ferestrele pop-up atât pentru a prezenta economii, cât și pentru a comunica valoarea imediată.

Este mai ușor pentru creierul nostru să proceseze numere decât să citească text. Observați cât de multe ferestre pop-up mobile se bazează pe „REDUCERE DE 10 USD” sau „SAVE 10%” ca element central al ofertei lor?

Iată un titlu bazat pe numere care încurajează oamenii să se înscrie la un buletin informativ de la Arctic Fox. Rețineți și designul atrăgător:

popup best practices 13 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

12. Verificați din nou dacă ferestrele pop-up sunt compatibile cu Google

Deși ferestrele pop-up nu influențează direct poziționarea site-ului dvs. față de Google, motorul de căutare a adoptat o poziție față de conținutul „intruziv” .

Ferestrele pop-up nu ar trebui să vă împiedice experiența utilizatorului sau să îi împiedice în alt mod să acceseze conținutul de pe site-ul dvs.

Acest lucru arată de ce ar trebui să fii atent la ferestrele pop-up pe ecran complet, prezentându-le doar după ce vizitatorii au avut șansa de a răsfoi.

Imaginați-vă că cineva vă vizitează site-ul pentru prima dată prin mobil. Nu doriți să semnalați site-ul dvs. ca spam sau să refuzați imediat noi vizitatori, nu? Acest lucru ar putea fi o veste proastă pentru rata de respingere.

„Care sunt cele mai mari greșeli pop-up pe care mărcile ar trebui să le evite?”

Buna intrebare! Uneori, cel mai bun mod de a respecta cele mai importante practici pop-up este să știi cenu faci.

Să ne uităm la cele mai mari greșeli care ar putea reduce performanța ferestrelor pop-up.

1. Comunicarea de conținut irelevant sau inutil

Ferestrele pop-up „ocupat” pot fi tulburătoare. Asigurați-vă că vă limitați textul și evitați mai multe mesaje. Rămâneți la una sau două propoziții cu o singură temă. Este mai puțin probabil să copleșească vizitatorii site-ului.

2. Prezentarea unei oferte dezamăgitoare

Întrebați-vă: ce valoare oferiți potențialilor abonați în schimbul adreselor lor de e-mail? Reducerile mari, transportul gratuit și recompensele pentru primul cumpărător sunt adesea necesare pentru a face o impresie asupra cumpărătorilor și pentru a-i determina să se aboneze.

Obțineți stimulente creative și de brainstorming care depășesc actualizările de bază sau o reducere de 5%.

3. Bazându-vă pe design-uri pop-up de tip spam vechi

Aici, la OptiMonk, suntem într-o cruciadă împotriva ferestrelor pop-up proaste.

Ocupat. Spam. Salesy. Le știi despre cele despre care vorbim.

Veștile bune? Crearea de ferestre pop-up elegante, demne de clic este posibilă pentru orice marcă, datorită instrumentelor precum OptiMonk.

5 exemple de design pop-up bonus pentru a vă crește lista de e-mail

Când vine vorba de design pop-up, puțină inspirație poate contribui în mare măsură spre crearea de oferte minunate.

Iată cinci exemple grozave de design pop-up care vă ajută să vă creșteți lista de e-mail (și o detaliere a ceea ce fac bine).

1. Tentree

Acest mesaj lateral de la Tentree este un exemplu strălucitor de pop-up non-intruziv.

Observați cum butonul CTA al ofertei iese în evidență față de restul schemei de culori a site-ului? În timp ce subtilitatea mesajului lateral îl face să pară că face parte de fapt din pagina de pornire.

popup best practices 15 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

2. BLK & Bold

Această ofertă este, în mod adecvat, una îndrăzneață, cu un titlu direct care este greu de ratat.

Abilitatea de a alege între opțiunile de băutură evidențiază, de asemenea, modul de utilizare a personalizării și a preferințelor pentru a încheia înțelegerea cu vizitatorii pentru prima dată.

popup best practices 16 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

3. Bailly

Uneori merită să fie simplu. Acest pop-up de e-mail de la Bailly demonstrează că un design pop-up nu trebuie să fie științific.

O ofertă simplă în schimbul e-mailului vizitatorilor dvs. este întotdeauna un joc corect.

popup best practices 17 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

4. Prinde Green Home

Acesta este încă un exemplu de pop-up simplu, dar eficient, care vă ajută să vă creșteți lista de e-mail.

Limbajul conversațional („Vrei o ofertă specială la prima ta comandă?”) și CTA („DA VA ROG”) arată modul în care alegerile de bază de copiere pot convinge vizitatorii să-și furnizeze informațiile.

popup best practices 18 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

5. Lingura magica

În mod ideal, oferta dvs. pop-up ar trebui să poată vorbi de la sine. Acest anunț de la Magic Spoon promite ceva mare, cu șansa de a câștiga cereale gratuite timp de o lună, folosind un limbaj clar și cuvinte puternice („gratuit”, „câștigă”) pentru a face o declarație.

popup best practices 19 - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)

Și cu asta, încheiem ghidul nostru!

Respectați aceste bune practici pop-up?

Când vine vorba de crearea unui pop-up „bun”, există o mulțime de piese în mișcare de gestionat.

Să sperăm că lista noastră v-a indicat pe ce trebuie să vă concentrați. Aceste sfaturi vă pot ghida către mai mulți abonați și conversii, indiferent dacă vă optimizați campaniile actuale sau dacă începeți total de la zero.

Pentru a afla mai multe despre crearea ferestrelor pop-up cu conversie mare, consultați Ghidul nostru final pentru ferestre pop-up.

popup guide johnsonbox - 12 Popup Design Best Practices You Need to Know (for Mobile and Desktop)