5 sfaturi ușor de implementat pentru a crea o fereastră pop-up convingătoare (cu 24 de exemple)

Publicat: 2022-06-28

Popup-urile și alte mesaje la fața locului apar de obicei în cel mai premium „spațiu de vânzare cu amănuntul” pe care trebuie să-l comunicați cu clienții: site-ul dvs. Ele apar pentru persoanele care sunt cel mai interesate de produsele dvs. – de aceea au dat clic, nu? Și asta înseamnă că sunt cei mai deschiși la orice oferte grozave din partea ta.

Cu toate acestea, mulți agenți de marketing prezintă ferestre pop-up incredibil de simple, lipsite de imaginație și chiar de-a dreptul urâte.

De ce?

Pentru că ferestrele pop-up sunt puternice și obțin rezultate... chiar și atunci când nu depui mult efort în proiectarea lor. Specialiștii de marketing care sunt obișnuiți cu rate de clic mai mici de 1% sunt adesea mulțumiți de o rată de conversie de 3-5% pentru ferestrele lor pop-up. Pare „destul de bun”.

În realitate, acești agenți de marketing stau pe o mină de aur - pur și simplu nu și-au dat seama încă. Cu câteva modificări simple, ar putea dubla sau tripla ratele de conversie ale ferestrelor pop-up. Cu ceva mai multă muncă (cum ar fi personalizarea mesajului pentru segmentele cheie), ar putea crea ferestre pop-up cu rate de conversie de 30-50%.

Cât de mult ar face asta pentru afacerile lor?

Design-ul este foarte puternic cu ferestrele pop-up, iar punerea laolaltă a unui pop-up frumos și bine proiectat poate fi cea mai mare rentabilitate a investiției în activitatea dvs. ca agent de marketing. Investește doar câteva minute din timpul tău acum și poți avea un activ care să-ți genereze bani pentru lunile sau anii următori!

În loc să petreceți ore și ore în micro-optimizarea reclamelor Facebook pentru o creștere cu 5% a CTR, vă recomand să petreceți o fracțiune din acest timp optimizării mesajelor dvs. la fața locului.

Să vedem cum poți profita la maximum de designul ferestrelor pop-up!

Comenzi rapide ✂️

  • De ce contează designul pop-up?
  • Utilizați culorile potrivite
  • Nu te complica
  • Potriviți-vă marca
  • Utilizați contrastul pentru a concentra atenția
  • Utilizați elementele vizuale pentru a vă sublinia mesajul

De ce contează designul pop-up?

În primul rând: de ce contează deloc designul unui pop-up? Nu este doar un simplu mesaj, în care conținutul luptă pe design?

În timp ce mesajul și propunerea de valoare a pop-up-ului dvs. sunt foarte importante, un design excelent poate crește cu adevărat eficacitatea oricărui mesaj. De obicei, ferestrele pop-up apar din senin și au doar câteva secunde pentru a impresiona vizitatorul. Și în lumea noastră care solicită atenție, impresionarea unui vizitator al site-ului web nu este o sarcină ușoară.

Având un pop-up frumos și unic, precum cel de mai jos, ar putea obține rate de conversie de până la 50%! Între timp, prezentarea aceleiași oferte (o reducere obișnuită de 10%) într-un mod plictisitor, doar text ar fi norocos să obții o rată de conversie de 10%. Asta este o diferență de 400%!

popup design example 01 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Chiar și mărcile mari uneori greșesc.

Uită-te la acest pop-up de la Mailchimp. Cel mai probabil, conversia este sub 2%, ceea ce înseamnă că 98% dintre vizitatorii lor au fost perturbați (și, prin urmare, enervați) în mod inutil.

popup design example 02 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Acum că știm de ce contează designul pop-up și am văzut un exemplu de design pop-up prost pe care nu doriți să-l copiați, să trecem la lucrurile bune: cum să proiectați ferestre pop-up convingătoare și câteva exemple stelare pentru inspirație.

1. Folosiți culorile potrivite

Spre deosebire de unele mituri de marketing online, nu există o singură combinație de culori care să fie superioară tuturor celorlalte.

Există, totuși, doi factori importanți atunci când alegeți culori:

  • Ar trebui să poți crea contrast (și astfel să te concentrezi) pe elementele tale cele mai importante
  • Alegerile dvs. de culoare ar trebui să se potrivească cu brandingul dvs. și să creeze o experiență uniformă și fluidă.

Vom discuta ambele sfaturi mai detaliat în secțiunile următoare.

Dar, ca regulă de bază, puteți alege un fundal alb și puteți utiliza culoarea principală a mărcii dvs. ca titlu și culoare pentru butonul CTA. Aceasta este o soluție foarte clasică, cu risc scăzut.

Consultați acest exemplu de la Enro:

popup design example 03 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Dacă preferați să utilizați culorile mărcii dvs. ca fundal, Mented Cosmetics oferă un exemplu frumos. Nu numai că se potrivește cu culorile mărcii lor, dar subliniază și mai mult valorile companiei lor:

popup design example 04 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

De asemenea, puteți utiliza palete de culori inversate cu fundal întunecat. În aceste cazuri, fonturile ar trebui să fie în mare parte albe sau gri deschis. Folosirea de culori mai saturate ar reduce lizibilitatea mesajelor dvs.

popup design example 05 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

2. Păstrați-o simplu

„Less is more” – este o vorbă prea adevărată când vine vorba de ferestre pop-up.

Deoarece aveți un timp foarte limitat pentru a atrage atenția și a genera interes, mesajul și designul dvs. trebuie să fie super simple.

popup design example 06 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Încercați să fiți nemilos cu fiecare cuvânt și element din pop-up și asigurați-vă că fiecare dintre ele este absolut necesar.

Când crezi că este suficient de simplu, încearcă să mergi și mai simplu până când nu mai rămâne nimic decât o propunere principală de valoare și un CTA.

S-ar putea să vă întrebați: înseamnă asta că ar trebui să ne limităm la ferestre de tip pop-up alb-negru doar text, precum cel de mai jos?

popup design example 07 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Răspunsul este un NU răsunător!

Majoritatea oamenilor vor citi doar câteva cuvinte din conținutul pop-up înainte de a decide dacă să citească mai departe sau pur și simplu să închidă fereastra pop-up. Asta înseamnă că designul mesajului tău (culori, imagini, estetică etc.) va avea cel puțin același impact asupra eficienței mesajului tău ca și titlul tău.

Desigur, dacă esența mesajului tău este concentrată pe anumite produse, atunci (ca pe o pagină de destinație de categorie) trebuie să păstrezi restul mesajului cât mai simplu posibil pentru a lăsa concentrarea să rămână pe produse.

Vezi mai jos cum face Burberry: folosesc un mesaj simplu, super-simplu, cu un contrast perfect și se concentrează pe trei produse vizionate recent.

popup design example 08 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

3. Potriviți-vă marca

Mesajele dvs. la fața locului nu apar în vid, ci ca parte a site-ului dvs. web, chiar dacă apar într-o suprapunere. Prin urmare, este important ca ferestrele pop-up să se îmbine perfect cu tema mărcii tale.

Aceasta înseamnă că ar trebui să alegeți elemente (fonturi, imagini etc.) care sunt similare cu cele utilizate pe site-ul dvs.

ClickUp este un exemplu grozav al modului de a crea ferestre pop-up simple, dar eficiente, care se potrivesc perfect cu ghidul de stil al mărcii:

popup design example 09 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Puteți păstra cu ușurință ferestrele pop-up pe marcă utilizând fonturile și logo-ul mărcii dvs., așa cum face Ramp:

popup design example 10 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Chiar dacă vă aflați în lumea B2C în care promovați alte mărci, puteți extrage elemente de la ambele mărci, așa cum face Sephora cu acest pop-up legat de Gucci:

popup design example 11 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

4. Utilizați contrastul pentru a concentra atenția

Este important ca ferestrele pop-up să se îmbine cu tema mărcii tale, da. Cu toate acestea, este de asemenea esențial ca acestea să iasă în evidență și să atragă privirea privitorului.

Dacă aveți mult conținut (de exemplu, o listă cu marcatori a lucrurilor incluse în oferta dvs.), asigurați-vă că propunerea dvs. de valoare este clară în copia antetului.

De asemenea, asigurați-vă că culoarea CTA iese în evidență față de restul pop-up-ului și că butonul este mare și lizibil. Titlul și CTA sunt de obicei cele mai importante două elemente ale ferestrelor pop-up, așa că asigurați-vă că au suficient contrast.

popup design example 12 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

De exemplu, puteți alege o culoare strălucitoare și contrastantă pentru butonul CTA. Acest lucru îl va face mult mai atrăgător, iar vizitatorii tăi vor avea mai multe șanse să facă clic pe el.

Dacă fereastra pop-up este în mare parte neagră, ați putea lua în considerare utilizarea portocaliu sau roz aprins pentru butonul de îndemn.

Utilizarea diferitelor dimensiuni de font este cea mai ușoară modalitate de a vă concentra atenția publicului asupra însăși esența pop-up-ului dvs. Chiar dacă aveți mai multe tipuri de texte în același pop-up, puteți utiliza dimensiunile fonturilor, culorile și alte tehnici de creștere a contrastului pentru a pune accent pe valoarea principală a mesajului dvs., așa cum face Komily:

popup design example 13 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Dacă aveți un site întunecat, deseori trebuie să introduceți un anumit contrast jucându-vă cu culoarea casetei de iluminat (știți, acea zonă gri, pe jumătate transparentă din jurul ferestrelor pop-up).

De exemplu, dacă fereastra pop-up are o culoare închisă, puteți utiliza o suprapunere mai deschisă în timp ce este afișată.

Sau puteți utiliza o versiune pe ecran complet a ferestrei dvs. de tip pop-up, care acoperă 100% din ecran - acest lucru vă asigură că pop-ul dvs. va fi vizibil, ca în exemplul de mai jos:

Dacă aveți mai multe butoane, puteți utiliza diferite culori pentru butoane pentru a sublinia CTA principal, indicând utilizatorilor într-un mod subtil care opțiune este o alegere mai bună pentru ei:

O altă strategie presupune inserarea de elemente vizuale, cum ar fi săgețile care indică către butonul de îndemn. Puteți folosi obiecte direcționale luminoase, desenate manual pentru a vă indica îndemnul la acțiune, ca în fereastra pop-up de mai jos:

popup design example 16 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

O altă modalitate de a vă sublinia oferta prin designul pop-up este utilizarea unor forme de șablon neobișnuite. Acestea sparg tiparul ferestrelor pop-up dreptunghiulare generice pe care oamenii le văd pe tot web și atrag interesul pur și simplu pentru că sunt unice.

popup design example 17 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Aveți grijă să nu puneți accent pe prea multe elemente. Dacă aveți o fereastră pop-up de sondaj ca cea de mai jos, asigurați-vă că utilizați un stil de buton secundar, mai puțin agresiv pentru butoanele dvs.:

5. Folosiți elementele vizuale pentru a vă sublinia mesajul

După cum se spune, „o imagine valorează cât o mie de cuvinte”. Acest lucru este cu siguranță adevărat pentru ferestrele pop-up!

De fapt, creierul uman procesează imaginile de 60.000 de ori mai repede decât textul, iar 90% din informațiile transmise creierului sunt vizuale.

De aceea, unele imagini excelente pot îmbunătăți eficiența mesajelor dvs. la fața locului. Scopul este de a alege elementele vizuale potrivite pentru a amplifica mesajul scris, așa cum face acest pop-up:

popup design example 19 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Trebuie să găsiți imagini de înaltă calitate pentru pop-up-ul dvs. Cel mai bine este să folosiți fotografii reale ale produselor dvs. în loc de imagini de stoc, cum face BlendJet:

popup design example 20 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Cea mai bună abordare este să parcurgeți imaginile produsului/marcii și să alegeți o imagine relevantă care să fie aliniată cu mesajul dvs., cum ar fi acest pop-up The Oodie:

popup design example 21 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Dacă desfășurați vânzări sezoniere, este o practică bună să vă actualizați mesajele cu anotimpurile. A fi relevant și în timp util creează sentimentul că aceste oferte sunt limitate în timp, crescând teama de a pierde (și, prin urmare, conversii):

Chiar dacă nu aveți nimic specific de oferit, doar actualizarea mesajelor pentru a se potrivi cu sezonul curent ar putea îmbunătăți considerabil ratele de conversie, la fel ca acest mesaj:

Dacă produsele tale par distractive sau utile în fotografii, oamenii vor avea mai multe șanse să le cumpere și să se înscrie pentru listele tale de e-mail sau SMS în schimbul reducerilor.

Dacă încercați să încurajați vizitatorii să solicite un cadou gratuit, puteți folosi cuvinte și imagini care să vă conecteze mesajul cu inimile publicului, așa cum face Castlery:

popup design example 24 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

rezumat

Sper că ați găsit utile lista mea de bune practici și exemple de design pop-up!

Importanța unui design pop-up excelent este adesea trecută cu vederea. Dar, sperăm că, acum că ați văzut ce impact poate avea designul inteligent, nu vă veți mai întoarce niciodată la pop-up-uri plictisitoare, ho-hum! Investind ceva timp în proiectarea ferestrelor pop-up uimitoare, pe marcă, va avea un impact URIAȘ asupra ratelor de conversie și vă va ridica rentabilitatea investiției.

Nou în ferestre pop-up? Începeți cu unul dintre șabloanele noastre gata de utilizat aici!

register free optimonk account - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Imparte asta

Distribuiți pe Facebook
Distribuie pe twitter
Distribuie pe linkedin
Anterior Postarea anterioară 7 exemple amuzante de e-mail pentru magazinele de comerț electronic
Articolul următor Cum să faci un pop-up Mailchimp care îți va dubla lista de abonați Următorul

Compus de

Csaba Zajdo

Csaba Zajdo este fondatorul OptiMonk. Ca veteran al comerțului electronic, Csaba are peste 15 ani de experiență în lucrul cu magazinele de comerț electronic. Misiunea lui este de a reinventa industria comerțului electronic și de a ajuta magazinele, creând experiențe de cumpărături încântătoare pentru fiecare client.

AȚI PUTEA DORI, DE ASEMENEA

how to make a mailchimp popup banner 300x169 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

Cum să faci un pop-up Mailchimp care îți va dubla lista de abonați

Vezi postarea
easy to implement tips to design a popup banner 300x157 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

5 sfaturi ușor de implementat pentru a crea o fereastră pop-up convingătoare (cu 24 de exemple)

Vezi postarea
7 funny email examples banner 300x157 - 5 Easy-to-Implement Tips to Design a Compelling Popup (With 24 Examples)

7 exemple amuzante de e-mail pentru magazinele de comerț electronic

Vezi postarea