12 Best Practices für das Popup-Design, die Sie kennen müssen (für Mobilgeräte und Desktops)

Entgegen der landläufigen Meinung sind die Menschen heute mehr als glücklich, sich mit Popups zu beschäftigen.

Zugegeben, wenn Sie gute Popups zusammenstellen.

Und vertrauen Sie uns – wir haben aus erster Hand gesehen, wie effektiv sie dabei sind, Conversions zu steigern und Ihre Abonnentenliste zu erweitern.

Aber Marken müssen wissen, was ein stilvolles, aufmerksamkeitsstarkes Popup von etwas unterscheidet, das Besucher ärgert und sie abweist. Da können wir helfen.

In diesem Leitfaden erfahren Sie:

• Die Faktoren, die ein „gutes“ Desktop- oder Mobil-Popup ausmachen (mit dreizehn Beispielen)
• Drei große Fehler, die die Leistung eines ansonsten vielversprechenden Popups beeinträchtigen können
• Fünf Bonus-Popup-Designbeispiele zum Erweitern Ihrer E-Mail-Liste

Lassen Sie uns damit eintauchen!

Möchten Sie effektive Popups erstellen, die bei Ihren Besuchern Anklang finden? Laden Sie unsere Popup-Messaging-Checkliste herunter und verdreifachen Sie Ihre Popup-Konversionsrate!

Wenn es Ihr Ziel ist , mehr Abonnenten direkt von Ihrer Website zu gewinnen, kann ein E-Mail-Popup ausreichen.

Im Folgenden finden Sie einige Prinzipien zur Steigerung der Konversionsraten Ihrer Popups auf dem Desktop. (Außerdem arbeiten sie auch mit mobilen Besuchern.)

1. Erregen Sie die Aufmerksamkeit Ihrer Besucher mit auffälligen Farbkombinationen

Ein fesselndes Farbschema ist der einfachste Weg, um Ihre Popups unübersehbar zu machen.

Etwas Helles oder Ausgefallenes kann Besucher aufhalten. Zum Beispiel ist dieses Vollbild-Popup-Design von Visme.co hell, fett und hebt ihre Botschaft hervor.

Ihre Popup-Farben müssen nicht unbedingt hell oder gar „laut“ sein. Einfach ein starker Kontrast von Hell und Dunkel kann Ihren Popups helfen, gut, Pop zu machen .

Zum Beispiel ist dieses weiß-schwarze Farbschema von Thredup.com einfach, aber stilvoll und auffällig.

2. Locken Sie Besucher an, indem Sie Ihre wichtigsten Vorteilsphrasen fett darstellen

Seien wir ehrlich: Die Aufmerksamkeitsspanne der Käufer wird immer kürzer.

Daher ist es am besten, wenn Ihre Marketingbotschaften sofort verständlich sind.

Machen Sie einen Punkt:

• Halten Sie Ihre Popups kurz: Denken Sie „weniger ist mehr“ und vermeiden Sie Textwände.
• Schreiben Sie aussagekräftige Schlagzeilen mit schlagkräftigen Phrasen wie „kostenlos“, „jetzt“ oder „sparen“, um die Vorteile Ihres Angebots sofort hervorzuheben.
• Trennen Sie Ihren Popup-Text in klare Abschnitte (denken Sie an: Überschrift → Fließtext → Call-to-Action (CTA)-Schaltfläche), um Ihre Leser zum Opt-in zu führen.

Unten ist ein großartiges Beispiel für ein Angebot von Trade Coffee, das den oben genannten Best Practices für das Popup-Design folgt.

3. Präsentieren Sie Ihre Popups als personalisiertes Angebot (Tipp: keine Werbung)

Idealerweise sollten sich Ihre Popups nicht wie Werbung anfühlen .

Wir verstehen: Viele Verbraucher sind nicht gerade begeistert von Popups. Jahrelange lästige Werbung hat Popups mit einem schlechten Ruf hinterlassen.

Der Trick, um Spannungen abzubauen und Vertrauen bei Ihren Website-Besuchern aufzubauen? Präsentieren Sie Ihre Popups einfach als etwas, das Kunden helfen soll, nicht an sie zu verkaufen.

Ziehen Sie Angebote in Betracht, die Ihre Besucher nach ihrem Input und Wunsch fragen.

Auf Präferenzen basierende Popups eignen sich hervorragend zur Steigerung der Conversions. Angesichts der Tatsache, dass 57 % der Verbraucher gerne persönliche Informationen im Austausch für personalisierte Angebote weitergeben.

Beispielsweise ermöglicht dieses E-Mail-Anmelde-Popup von Vuori Opt-Ins für den Erhalt personalisierter E-Mails basierend auf den persönlichen Präferenzen zur Geschlechtsidentifikation einer Person.

Diese Art von Nachricht gibt dem Abonnenten nicht nur das Gefühl, ein Geschäft zu machen, sondern bedeutet auch, dass Sie in Zukunft mit größerer Wahrscheinlichkeit relevante Angebote senden werden.

Hier ist ein weiteres Beispiel von Uniqlo. Beachten Sie, wie sich die Nachricht als helfende Hand gestaltet („Helfen Sie uns, Nachrichten für Sie anzupassen“):

Personalisierte Nachrichten wie diese dienen dazu, Besucher dazu zu ermutigen, mehr Zeit auf Ihrer Website zu verbringen und mit Ihrer Marke zu interagieren. Dies ist vergleichbar mit gamifizierten Popups .

Ein paar zusätzliche Sekunden vor Ort mögen nicht viel erscheinen, aber sie stellen wertvolle Zeit dar, um eine Verbindung zu neuen Leads aufzubauen.

4. Stellen Sie über eine Konversationskopie eine Verbindung zu potenziellen Kunden her

Der Aufbau von Vertrauen ist ein Make-or-Break für Ihre Popups.

Aus diesem Grund ist es so wichtig, in Ihrer Popup-Kopie einen freundlichen und positiven Ton zu kommunizieren.

Website-Popups sollten standardmäßig nicht stickig oder verkaufsfördernd sein. Sprechen Sie mit Ihren potenziellen Kunden wie mit einem Freund und nicht mit einem Verkaufsziel.

Dieses Popup von Quip ist ein großartiges Beispiel dafür, wovon wir sprechen. Freundlich und einladend ohne Fachjargon oder „Geschäftssprache“.

5. Laden Sie Besucher zum Durchklicken ein, ohne die Benutzererfahrung zu unterbrechen

Popups müssen nicht völlig aufdringlich sein, um effektiv zu sein.

In der Tat kann Subtilität manchmal einen großen Beitrag zum Erstellen Ihrer Liste leisten.

Schauen Sie nicht weiter als die Popularität von Sidemessages und Sticky Bars als Beweis.

Anstatt zu riskieren, Ihre Besucher beim Surfen auf Ihrer Website zu unterbrechen, dienen diese Popup-Formate als kleiner Anstoß und Einladung, sich Ihr Angebot anzusehen.

Schauen Sie sich das Beispiel von Free People unten an:

Besucher, die sich für diese Art von Popups anmelden, tun dies ohne Druck, was bedeutet, dass sie mit größerer Wahrscheinlichkeit von Ihrem Angebot begeistert sein werden.

Darüber hinaus ist es weniger wahrscheinlich, dass diese Popups den Fluss oder die Ästhetik Ihrer Website stören.

6. Stellen Sie sicher, dass Ihr Popup die Leute im richtigen Moment erreicht

Dies ist eine der wichtigsten Best Practices für Popups, wenn es darum geht, was hinter den Kulissen Ihrer Angebote passiert.

Ihre Popups sollten nicht zufällig ausgelöst werden. Wir empfehlen, ein paar Sekunden (mindestens fünf) zu warten, bevor Sie den Besuchern irgendeine Art von Popups präsentieren.

Sie können Zeitsteuerungen in Popups über OptiMonk einfach bearbeiten und anpassen. Die Möglichkeit, das Popup-Timing sofort zu ändern und zu testen, kann Ihnen dabei helfen, festzustellen, was für Ihre Besucher am besten funktioniert.

Kontrollen machen es auch einfacher, sich an Best Practices für Exit-Intent -Popups zu halten und verhindern, dass Ihr potenziell verlorener Traffic abprallt.

Erstaunliche 63 % des E-Commerce-Verkehrs stammen von Mobilgeräten. Das bedeutet, dass Sie es sich buchstäblich nicht leisten können, Abonnenten zu ignorieren, die von Smartphones kommen.

Nachfolgend finden Sie eine Aufschlüsselung der Best Practices für Popups, mit denen Sie Ihre mobilen Conversion-Raten steigern können.

7. Ermutigen Sie die Besucher, schnell zu handeln, indem Sie sich mit Ihrem Exemplar kurz fassen

Mit Ihren Worten sparsam umzugehen, ist eine sichere Sache für Popups.

Dies ist besonders wichtig, wenn Sie versuchen, Besucher zu erreichen, die kleinere Bildschirme verwenden.

Wenn Sie einen Haftungsausschluss einfügen müssen, stellen Sie sicher, dass er nicht vom Inhalt Ihrer Nachricht ablenkt. Also kein Blatt vor den Mund nehmen.

Dieses E-Mail-Abonnement-Popup von Casetify bringt es beispielsweise direkt auf den Punkt.

Sehen Sie sich unten das Popup-Fenster von Skullcandy an. Der helle, fette Slogan spricht für sich selbst und erfordert nicht viel Klärung für Besucher auf dem Zaun über die Anmeldung.

8. Gestalten Sie Ihre Popups so benutzerfreundlich wie möglich

Die Interaktion mit Ihrem Popup sollte für mobile Benutzer unkompliziert sein.

Allerdings werden Sie überrascht sein, wie viele mobile Popups ein Albtraum sind.

Zu viele Stellen zum Tippen. Verwirrende Farben. Unnötiges Scrollen. Die Liste geht weiter und weiter.

Obwohl mobile Angebote normalerweise minimalistisch sind, müssen Sie dennoch einige bewährte Techniken beachten. Das beinhaltet:

• Definierte Schaltflächen (sowohl zum Opt-in als auch zum Exit-out, falls erforderlich)
• Eine klare Überschrift und lesbarer Text, idealerweise auf einer Seite (kein Scrollen erforderlich)
• Farben, die die verschiedenen Elemente Ihres Popups trennen

Dies erklärt die Popularität von mobilen Vollbild-Popups, die die oben genannten Kästchen ankreuzen.

Dieses Angebot von Skechers zum Beispiel ist übersichtlich und einfach zu navigieren, egal ob jemand interessiert ist oder nicht.

Gleiches gilt für dieses mobile Popup von Pura Vida:

9. Machen Sie Ihre Angebote mühelos und benötigen Sie weniger Formularfelder

Es ist kein Zufall, dass für alle mobilen Popup-Beispiele in diesem Beitrag nur eine E-Mail-Adresse zum Abonnieren erforderlich ist.

Einzelne Felder bedeuten weniger Aufwand und weniger Ablenkung für Ihre Website-Besucher. Dies macht den Prozess der Anmeldung letztendlich schnell und schmerzlos.

Ein paar wertvolle Sekunden mit weniger Feldern einzusparen, könnte den Unterschied zwischen einem neuen Abonnenten und einem abgesprungenen Besucher ausmachen.

10. Wählen Sie einen leistungsstarken CTA (Call-to-Action-Satz), der Ihre Besucher fesselt

CTA-Phrasen sind ein entscheidender Teil der Conversion-Optimierung.

Je überzeugender Ihr CTA, desto wahrscheinlicher ist es, dass Sie ein Opt-in erzielen.

Der CTA von Nectar Sleep („Save $399“) verspricht massive Einsparungen und lässt ihr Angebot wertvoller erscheinen.

Die Website-Besucher einfach zu bitten, „hier zu klicken“, ist eine verschenkte Gelegenheit, die Vorteile hervorzuheben.

11. Verwenden Sie Zahlen, um so schnell wie möglich ernsthafte Einsparungen hervorzuheben

Sie können auch auf das obige Beispiel zurückgreifen. Zahlen werden gerne in Popups eingestreut, um sowohl Einsparungen zu demonstrieren als auch den unmittelbaren Wert zu kommunizieren.

Für unser Gehirn ist es einfacher, Zahlen zu verarbeiten, als Text zu lesen. Beachten Sie, dass so viele mobile Popups auf „10 $ RABATT“ oder „10 % SPAREN“ als Kernstück ihres Angebots setzen?

Hier ist eine auf Zahlen basierende Überschrift, die Menschen dazu ermutigt, sich für einen Newsletter von Arctic Fox anzumelden. Beachten Sie auch das auffällige Design:

12. Überprüfen Sie noch einmal, ob Ihre Popups Google-freundlich sind

Obwohl Pop-ups das Ansehen Ihrer Website bei Google nicht direkt beeinflussen, hat die Suchmaschine eine Haltung gegenüber „aufdringlichen“ Inhalten eingenommen .

Ihre Pop-ups sollten Ihre Benutzererfahrung nicht beeinträchtigen oder sie anderweitig daran hindern, auf die Inhalte Ihrer Website zuzugreifen.

Dies spricht dafür, warum Sie auf Vollbild-Popups achten sollten und sie nur präsentieren sollten, nachdem die Besucher die Möglichkeit hatten, sich umzusehen.

Stellen Sie sich vor, jemand besucht Ihre Website zum ersten Mal mobil. Sie möchten Ihre Website nicht als Spam kennzeichnen oder neue Besucher sofort abweisen, oder? Dies könnte sich negativ auf Ihre Absprungrate auswirken.

Gute Frage! Manchmal ist der beste Weg, sich an die wichtigsten Best Practices für Popups zu halten, zu wissen, was man nicht tun sollte.

Schauen wir uns die größten Fehler an, die möglicherweise die Leistung Ihrer Popups beeinträchtigen könnten.

1. Kommunizieren irrelevanter oder unnötiger Inhalte

„Beschäftigt“-Popups können störend sein. Achten Sie darauf, Ihren Text einzuschränken und mehrere Nachrichten zu vermeiden. Halten Sie sich an ein oder zwei Sätze mit einem einzigen Thema. Es ist weniger wahrscheinlich, dass Website-Besucher überfordert werden.

2. Präsentieren Sie ein überwältigendes Angebot

Fragen Sie sich: Welchen Wert bieten Sie potenziellen Abonnenten im Austausch für ihre E-Mail-Adressen? Steile Rabatte, kostenloser Versand und Erstkäuferprämien sind oft notwendig, um bei Käufern Eindruck zu hinterlassen und sie zum Abonnieren zu bewegen.

Holen Sie sich kreative und Brainstorming-Incentives, die über grundlegende Updates oder einen Rabatt von 5 % hinausgehen.

3. Sich auf Spam-Popup-Designs der alten Schule verlassen

Hier bei OptiMonk sind wir auf einem Kreuzzug gegen schlechte Popups.

Belebt. Spam. Salesy. Sie kennen die, über die wir sprechen.

Die guten Nachrichten? Das Erstellen stilvoller, klickwürdiger Popups ist für jede Marke möglich – dank Tools wie OptiMonk.

Wenn es um das Popup-Design geht, kann ein wenig Inspiration viel dazu beitragen, tolle Angebote zu erstellen.

Hier sind fünf großartige Popup-Designbeispiele, die Ihnen helfen, Ihre E-Mail-Liste zu erweitern (und eine Aufschlüsselung dessen, was sie gut machen).

1. Tentree

Diese Nebennachricht von Tentree ist ein leuchtendes Beispiel für ein unaufdringliches Popup.

Beachten Sie, wie sich die CTA-Schaltfläche des Angebots vom restlichen Farbschema der Website abhebt? Während die Subtilität der Seitennachricht das Gefühl vermittelt, dass sie tatsächlich Teil der Homepage ist.

2. SCHWARZ & Fett

Dieses Angebot ist passenderweise ein kühnes Angebot mit einer direkten Überschrift, die kaum zu übersehen ist.

Die Möglichkeit, zwischen Getränkeoptionen zu wählen, zeigt auch, wie Personalisierung und Vorlieben genutzt werden können, um den Deal mit Erstbesuchern abzuschließen.

3. Bailly

Manchmal lohnt es sich, es einfach zu halten. Dieses E-Mail-Popup von Bailly beweist, dass ein Popup-Design kein Hexenwerk sein muss.

Ein einfaches Angebot im Austausch für die E-Mail Ihrer Besucher ist immer faires Spiel.

4. Holen Sie sich Green Home

Dies ist ein weiteres Beispiel für ein einfaches, aber effektives Popup, mit dem Sie Ihre E-Mail-Liste erweitern können.

Die Konversationssprache („Möchtest du ein Sonderangebot für deine erste Bestellung?“) und CTA („JA, BITTE“) zeigt, wie einfache Textauswahl Besucher davon überzeugen kann, ihre Informationen bereitzustellen.

5. Zauberlöffel

Idealerweise sollte Ihr Popup-Angebot für sich selbst sprechen können. Diese Anzeige von Magic Spoon verspricht etwas Großes mit der Chance, einen Monat lang kostenloses Müsli zu gewinnen, indem sie eine klare Sprache und kraftvolle Wörter („kostenlos“, „gewinnen“) verwendet, um ein Statement abzugeben.

Und damit schließen wir unseren Leitfaden ab!

Wenn es darum geht, ein „gutes“ Popup zu erstellen, gibt es Unmengen an beweglichen Teilen zu bewältigen.

Hoffentlich hat Sie unsere Liste darauf hingewiesen, worauf Sie sich konzentrieren müssen. Diese Tipps können Sie zu mehr Abonnenten und Conversions führen, unabhängig davon, ob Sie Ihre aktuellen Kampagnen optimieren oder ganz von vorne anfangen.

Um mehr über das Erstellen von hochkonvertierenden Popups zu erfahren, lesen Sie unseren ultimativen Leitfaden für Popups.