Design pop-up: Prinde-l în timp ce este cald

Utilizarea formularelor de abonament prin e-mail este una dintre cele mai eficiente modalități de a obține mai mulți abonați. În acest articol, ne vom concentra pe formularele de abonament pop-up; în special, vă vom explica cum să vă îmbunătățiți designul pop-up și vă vom arăta câteva exemple excelente de pop-up pentru inspirație.

Rolul formelor pop-up în e-mail marketing

Ferestrele pop-up sunt formularele care apar în prim-planul conținutului site-ului și încurajează utilizatorii să se înscrie pentru a primi e-mailuri. De obicei, acestea constau dintr-un titlu, o scurtă descriere, un câmp pentru a completa adresa dvs. de e-mail, numele și alte detalii și un buton CTA.

Foarte adesea ferestrele pop-up oferă un magnet de plumb, cum ar fi o reducere, o carte electronică gratuită, o înregistrare webinar, un bilet la eveniment și alte cadouri gratuite. De exemplu, într-una dintre ferestrele lor pop-up, Kate Spade oferă o reducere de 15% tuturor abonaților de e-mail noi.

Dar cum pot pop-up-urile să aducă clienți potențiali dacă mulți dintre noi le consideră enervante? Există o explicație științifică simplă pentru asta.

Martin Lindstrom, scriitor, precum și expert în publicitate și branding, a împărtășit câteva rezultate interesante ale unui mare studiu de neuromarketing de 3 ani în cartea sa „Buyology: Truth and Lies About Why We Buy”. Pentru a rezuma, el a demonstrat că 90% din comportamentul de cumpărare al oamenilor este inconștient și că o mulțime de acțiuni ale utilizatorilor intră în conflict cu ceea ce pretind că cred. Deci, în ciuda opiniilor controversate despre ferestrele pop-up, acestea funcționează în continuare: s-ar putea să pretindem să fim deranjați de ferestre pop-up, dar încă reacționăm la ele și continuăm să ne înscriem.

Acum să aruncăm o privire asupra ferestrelor pop-up în acțiune. Sumo a analizat aproape două miliarde de ferestre pop-up în doi ani și a aflat ce elemente le fac un contribuitor valoros la rezultatele generale ale marketingului prin e-mail.

În acest experiment, rata medie de conversie pop-up a fost de 3,09%. Pop-up-urile cu 10% cele mai performante din top au avut o rată medie de conversie de 9,28%, unele dintre ele ajungând până la 50,2%.

Sumo a observat următoarele tendințe ale ratelor de conversie pop-up:

1. Ferestrele pop-up plasate într-un context adecvat au atins rate de conversie de peste 40%. Prin context adecvat, înțelegem că subiectul unei ferestre pop-up se potrivește cu subiectul unei pagini de site web pe care apare.
2. Momentul ferestrelor pop-up, care depinde pe deplin de context, a adus rate de conversie de 38,4% datorită unei întârzieri de 15 secunde pe o pagină de cărți electronice. Instrumente precum Google Analytics vă ajută să rezolvați misterul din spatele momentului cel mai potrivit în fiecare caz individual.
3. Luând în considerare contextul și calendarul, creând un CTA care să se potrivească contextului, încercând să fie clar și să aducă valoare, Sumo a reușit să atingă o rată de conversie de 60%.

După cum puteți vedea, dacă vă adânciți în fiecare aspect individual al unui formular pop-up și testați detaliile unul câte unul, puteți îmbunătăți semnificativ conversiile.

Sfaturi și trucuri pentru design pop-up

Designul este un aspect care nu trebuie trecut cu vederea atunci când vine vorba de generarea de conversii și atragerea mai multor clienți potențiali. Conform cărții „Buyology” menționată mai sus, consumatorii petrec de obicei cel mult 2 secunde pentru a lua o decizie de cumpărare. Primul lucru pe care îl văd oamenii sunt elementele de design și culorile și abia apoi încep să citească conținutul. Deci, aveți literalmente doar câteva secunde pentru a atrage atenția, a explica punctul dvs. de vedere și a încuraja un utilizator să-și lase adresa de e-mail în formularul dvs.

Să mergem mai departe și să analizăm detaliile unor exemple de ferestre populare care arată bine pentru a afla ce strategii de proiectare pop-up puteți utiliza pentru propriile formulare de abonament.

Faceți pop-up-urile dvs. în conformitate cu liniile directoare corporative

În primul rând, toate activele dvs. de proiectare utilizate în orice tip de suport media - fie că este un site web, e-mail sau rețele sociale - ar trebui să corespundă în totalitate orientărilor corporative ale companiei dvs., aceste active formează o impresie despre dvs. ca marcă. De aceea, este important să vă respectați culorile, fonturile, formele și alte elemente de design ale corporației.

Aruncați o privire la pagina Whole Whale About Us. Puteți vedea că paleta de culori este realizată din nuanțe de alb și gri completate cu nuanțe de albastru deschis și închis. Există mult spațiu negativ, un font sans serif fiind utilizat pe site.

Uită-te acum la design-ul pop-up, care se potrivește perfect cu designul site-ului lor web, deoarece există aceleași culori și fonturi aplicate în formular. În plus, o fotografie emoțională este folosită pentru a atrage mai multă atenție asupra ferestrei pop-up. Partea de text din stânga și partea din dreapta a imaginii sunt complet simetrice.

Whole Whale oferă trei produse diferite utile organizațiilor non-profit, unul dintre ele fiind Lighthouse, care este creat pentru a spori eficiența paginilor de donații. Observați modul în care designul pop-up al acestui produs se potrivește, de asemenea, cu orientările lor de design corporativ, ceea ce face un impact mai puternic în general.

Designul tău pop-up nu trebuie să fie la fel de neutru ca cel folosit de Whole Whale. Simțiți-vă liber să adăugați un pic mai mult caracter, mai ales dacă aveți un blog personal sau un site web.

De exemplu, site-ul Wait But Why este foarte diferit de cel al propriului Whole Whale. Este distractiv și luminos și are o mulțime de ilustrații asemănătoare schițelor.

Pop-up-ul lor nu face excepție - este și distractiv și personal. Glumind despre natura enervantă a ferestrelor pop-up, compania încurajează doar utilizatorii să se înscrie.

Puneți în practică teoriile percepției vizuale

Există mai multe teorii stabilite ale percepției vizuale care au fost folosite în proiectare de veacuri până în zilele noastre. Vom vorbi despre regula Golden Ratio și teoria Gestalt, două dintre cele mai semnificative teorii de proiectare.

Regula Golden Ratio

Raportul de aur este aproximativ un raport de 1: 1,61 care se găsește în natură și este utilizat pentru a crea imagini echilibrate vizual, evidențiind anumite părți ale unei imagini.

Cum puteți folosi acest lucru în practică? De exemplu, aceste proporții vă pot ajuta să împărțiți o imagine în secțiuni echilibrate, să puneți accentul pe elementele cele mai semnificative ale designului sau pur și simplu să decupați imaginile în modul cel mai atrăgător din punct de vedere vizual.

Imaginea de mai jos a fost decupată folosind principiul raportului de aur. Observați cum este plasată cea mai importantă parte a imaginii, un telefon mobil - în centrul spiralei, unde ochiul uman este atras în mod natural.

Când lucrați la designul pop-up, puteți plasa butoanele CTA în centrul spiralei, imaginea fiind situată la începutul spiralei, care ocupă cea mai mare parte a acesteia. Iată cum ar putea arăta un aspect de bază al ferestrei pop-up în acest caz:

Teoria Gestalt

Gestalt înseamnă „întreg unificat” și face esența întregii teorii, care explică modul în care oamenii percep obiectele pe baza plasării sale în spațiul bidimensional.

Există 6 principii comune ale Gestalt:

1. Asemănare . Obiecte similare sunt percepute ca un model sau un grup.
2. Continuare . Obiectele plasate pe o singură cale sunt percepute ca un grup, iar ochiul unui om este ghidat de aceste linii vizuale.
3. Închidere . Dacă un obiect lipsește în unele părți, îl percepem în continuare ca un întreg. Gândiți-vă doar la sigla WWF cu panda și veți înțelege acest principiu.
4. Apropierea . Obiectele care sunt amplasate una lângă alta sunt percepute ca un grup.
5. Figura / solul . Oamenii separă elementele de fundal, astfel încât cel mai mare dintre ele va fi perceput ca solul, în timp ce cel mai mic ca obiect sau figură. Acest principiu este adesea folosit în lucrările lui Escher.
6. Simetrie și ordine . Oamenii se simt mai siguri și mai calmi când văd modele simetrice.

Nu trebuie să înveți toate aceste principii pe de rost. Cu toate acestea, unele cunoștințe de bază despre acestea vă vor ajuta să înțelegeți de ce modelele asimetrice pot arăta mai dinamice și cele simetrice mai stabile și mai sigure, precum și de ce atenția utilizatorului va fi trasă către cele mai mari sau mai strălucitoare obiecte care se deosebesc de restul.

De exemplu, să ne uităm la exemplul de design pop-up realizat de SheSimplyShops. Compania oferă utilizatorilor să învârtă roata pentru a avea șansa de a câștiga o reducere. Fereastra pop-up apare în partea stângă a ecranului și este asimetrică: partea stângă pare „mai grea” decât cea dreaptă. Roata ia toată partea stângă a ferestrei pop-up, în timp ce textul și butonul CTA sunt plasate în dreapta înconjurat de spațiu negativ. Toate acestea creează o dispoziție dinamică și energică în jurul pop-up-ului.

În schimb, forma pop-up de Leia este complet simetrică și astfel arată mult mai calm decât exemplul anterior. Toate elementele sunt centrate, ducând vizual la un singur punct - butonul CTA.

Aveți grijă de lizibilitate

Dacă doriți ca ferestrele dvs. pop-up să transmită mesajul corect, acestea ar trebui să fie ușor de înțeles. Și când vine vorba de lizibilitate, capacitatea dvs. de a lucra cu textul și tipografia sunt cruciale.

Stabiliți o ierarhie vizuală, în care elemente precum titlurile, descrierile și butoanele sunt separate vizual - utilizând fonturi complementare, dimensiuni și greutăți diferite, precum și spațierea. Conducerea, un spațiu între linii și kerning, un spațiu între litere, ar trebui să ghideze cititorul prin formularul dvs. Cele mai importante bucăți de informații ar trebui să fie întotdeauna cele mai proeminente.

Pentru a crea un contrast mai mare, puteți amesteca diferite greutăți ale unui singur font, precum și serif și sans serif. Cu toate acestea, încercați să nu respectați mai mult de două fonturi, astfel încât formularul să nu pară dezordonat.

Un formular pop-up pe blogul Tim Ferris este un exemplu excelent de tipografie bună. Puteți vedea clar diferența dintre logotip, titlu, subtitrare, numele autorului și două butoane, cel mai proeminent dintre acestea fiind CTA dorit.

Titlul atrage cea mai mare atenție datorită contrastului dintre fundal și text. După aceea, ochiul tău se deplasează direct la butonul CTA. Apoi, vă deplasați înapoi pentru a citi detaliile - subtitrarea și numele autorului.

Social Triggers, la rândul lor, oferă o formă pop-up mai ușoară bazată pe tipografie îndrăzneață. În primul rând, vedeți titlul interesant sub forma unei întrebări, cu ochii mișcați imediat către butonul CTA. Descrierea este separată vizual cu un divizor și este scrisă într-un font de dimensiuni mai mici.

Fiți conștienți de alegerile dvs. de culoare

O culoare este un instrument puternic care poate fi folosit pentru a schimba complet starea de spirit a formelor dvs. pop-up. Nuanțele pastelate vor aduce mai mult o dispoziție romantică și ușoară, în timp ce culorile puternice și vibrante ar putea face pop-up-ul dvs. mai extravagant.

Pentru a alege culorile care se combină bine împreună, utilizați instrumente precum Adobe Color. Este gratuit și vă permite să creați palete de culori unice de la zero, să le extrageți din imagini sau pur și simplu să explorați culorile și tendințele pentru a găsi inspirație.

Un exemplu de pop-up al lui Tommy Hilfiger prezintă un contrast deosebit între roșu, albastru și alb. Titlul este scris cu majuscule aldine, cea mai importantă parte a acestuia fiind evidențiată cu roșu. Imediat vă atrage atenția din titlu în butonul de înscriere.

Dacă vi se par mai atrăgătoare alegerile de design minimalist, puteți utiliza o singură culoare primară pentru fundal și o culoare secundară pentru text și alte elemente.

De exemplu, studiourile Horizn nu se tem să introducă o formă complet neagră, deoarece folosesc text și butoane albe pentru a contrasta fundalul monocromatic. Un astfel de contrast, precum și fundalul estompat al unui site web fac acest formular bine vizibil.

Elvie și Leo, invers, folosesc o formă complet albă cu text negru. Este simplu, dar elegant, datorită alegerii inteligente a unui font serif pentru mesajul principal și a butonului negru, care contrastează cu restul formularului.

Site-ul My Deal oferă o altă opțiune minimalistă, cu un accent de culoare. Un plan de hârtie roșie este îndreptat spre dreapta - acolo este amplasat un buton roșu de înscriere. Observați modul în care tipografia este utilizată pentru a evidenția mesajul principal al formularului.

Experimentați cu forme și interactivitate

Adăugați ceva mai distractiv pop-up-urilor dvs. pentru a spori implicarea. De exemplu, Jackpot Candles vă oferă să participați la o loterie rotativă pentru a câștiga.

Când rotiți roata, puteți câștiga unul dintre cele patru premii. Așa arată fereastra pop-up când este activată:

Jocul cu forme vă permite să atrageți mai multă atenție asupra ferestrei pop-up. E-mailul luni, de exemplu, a recurs la forma neobișnuită a formularului de abonament - un cerc. Combinându-l cu un cerc mai mic, care arată fotografia fondatorului site-ului, marca poate avea toate șansele de a obține mai mulți clienți potențiali.

Randul tau

Pentru a face formularele dvs. de abonament atrăgătoare, amintiți-vă aceste principii simple de proiectare pop-up:

• asigurați-vă că formularele dvs. pop-up sunt proiectate în stilul corporativ al companiei dvs.
• amintiți-vă despre raportul de aur și teoriile Gestalt atunci când plasați elemente de design și lucrați cu tipografia formei dvs.;
• asigurați-vă că textul pop-up-urilor dvs. este ușor de citit;
• folosiți înțelepciunea culorilor pentru a pune accent pe cele mai importante părți ale unei ferestre pop-up;
• adăugați interactivitate și jucați-vă cu diferite forme pentru a face ferestrele populare distractive și extraordinare pentru utilizatori.

Sunteți gata să vă creați primul formular pop-up gratuit cu SendPulse?