5 einfach umzusetzende Tipps zum Entwerfen eines überzeugenden Popups (mit 24 Beispielen)

Popups und andere Onsite-Nachrichten erscheinen normalerweise auf dem wertvollsten „Einzelhandelsplatz“, den Sie haben, um mit Ihren Kunden zu kommunizieren: Ihrer Website. Sie erscheinen den Personen mit dem größten Interesse an Ihren Produkten – deshalb haben sie sich durchgeklickt, richtig? Und das bedeutet, dass sie für tolle Angebote von Ihnen am aufgeschlossensten sind.

Dennoch präsentieren viele Vermarkter Popups, die unglaublich einfach, einfallslos und sogar geradezu hässlich sind.

Wieso den?

Weil Pop-ups leistungsfähig sind und Ergebnisse erzielen … selbst wenn Sie sich nicht viel Mühe geben, sie zu entwerfen. Vermarkter, die an Klickraten von weniger als 1 % gewöhnt sind, geben sich oft mit einer Konversionsrate von 3-5 % für ihre Popups zufrieden. Es scheint „gut genug“.

In Wirklichkeit sitzen diese Vermarkter auf einer Goldmine – sie haben es nur noch nicht bemerkt. Mit ein paar einfachen Anpassungen könnten sie die Konversionsraten ihrer Popups verdoppeln oder verdreifachen. Mit etwas mehr Arbeit (z. B. der Personalisierung der Nachricht für Schlüsselsegmente) könnten sie Popups mit 30-50 % Konversionsraten erstellen.

Wie viel Unterschied würde das für ihre Unternehmen machen?

Design ist bei Pop-ups äußerst leistungsfähig, und die Zusammenstellung eines gut gestalteten, schönen Pop-ups kann Ihre Aktivität mit dem höchsten ROI als Vermarkter sein. Investieren Sie jetzt nur ein paar Minuten Ihrer Zeit und Sie könnten einen Vermögenswert haben, der Ihnen für Monate oder Jahre Geld einbringt!

Anstatt Stunden um Stunden mit der Mikrooptimierung von Facebook-Anzeigen zu verbringen, um die CTR um 5 % zu steigern, empfehle ich, einen Bruchteil dieser Zeit für die Optimierung Ihrer Onsite-Nachrichten aufzuwenden.

Mal sehen, wie Sie das Design Ihrer Popups optimal nutzen können!

Zunächst einmal: Warum ist das Design eines Popups überhaupt wichtig? Ist es nicht nur eine einfache Botschaft, bei der der Inhalt das Design übertrumpft?

Während die Botschaft und das Wertversprechen Ihres Popups sehr wichtig sind, kann großartiges Design die Wirksamkeit jeder Botschaft wirklich steigern. Popups kommen normalerweise aus dem Nichts und haben nur wenige Sekunden, um den Besucher zu beeindrucken. Und in unserer aufmerksamkeitsstarken Welt ist es keine leichte Aufgabe, einen Website-Besucher zu beeindrucken.

Ein schönes, einzigartiges Popup wie das untenstehende könnte Konversionsraten von bis zu 50 % erzielen! In der Zwischenzeit würde die Präsentation des gleichen Angebots (normalerweise 10 % Rabatt) auf eine langweilige, reine Textform glücklich machen, um eine Konversionsrate von 10 % zu erzielen. Das sind 400 % Unterschied!

Selbst große Marken liegen manchmal falsch.

Schauen Sie sich einfach dieses Popup von Mailchimp an. Es wird höchstwahrscheinlich weniger als 2 % konvertieren – was bedeutet, dass 98 % ihrer Besucher unnötig gestört (und damit verärgert) wurden.

Jetzt, da wir wissen, warum Popup-Design wichtig ist, und wir ein Beispiel für schlechtes Popup-Design gesehen haben, das Sie nicht kopieren möchten, lassen Sie uns zu den guten Sachen übergehen: wie man überzeugende Popups entwirft und einige herausragende Beispiele zur Inspiration.

Im Gegensatz zu einigen Online-Marketing-Mythen gibt es keine einzelne Farbkombination, die allen anderen überlegen ist.

Es gibt jedoch zwei wichtige Faktoren bei der Farbauswahl:

• Sie sollten in der Lage sein, Kontraste zu schaffen (und sich somit auf Ihre wichtigsten Elemente zu konzentrieren).
• Ihre Farbauswahl sollte zu Ihrem Branding passen und ein konsistentes, reibungsloses Erlebnis schaffen.

Wir werden diese beiden Tipps in den nächsten Abschnitten ausführlicher besprechen.

Aber als Grundregel können Sie einen weißen Hintergrund wählen und die Hauptfarbe Ihrer Marke als Headline- und CTA-Button-Farbe verwenden. Dies ist eine sehr klassische, risikoarme Lösung.

Schauen Sie sich dieses Beispiel von Enro an:

Wenn Sie lieber Ihre Markenfarben als Hintergrund verwenden möchten, liefert Mented Cosmetics ein schönes Beispiel. Es passt nicht nur zu ihren Markenfarben, sondern unterstreicht auch ihre Unternehmenswerte:

Sie können auch umgekehrte Farbpaletten mit dunklen Hintergründen verwenden. In diesen Fällen sollten die Schriften meist weiß oder hellgrau sein. Die Verwendung gesättigterer Farben würde die Lesbarkeit Ihrer Nachrichten beeinträchtigen.

„Weniger ist mehr“ – ein Sprichwort, das nur allzu wahr ist, wenn es um Popups geht.

Da Sie nur sehr begrenzt Zeit haben, um Aufmerksamkeit zu erregen und Interesse zu wecken, müssen Ihre Botschaft und Ihr Design super einfach sein.

Versuchen Sie, mit jedem Wort und Element in Ihrem Popup rücksichtslos umzugehen, und stellen Sie sicher, dass jedes einzelne absolut notwendig ist.

Wenn Sie denken, dass es einfach genug ist, versuchen Sie, noch einfacher zu werden, bis nur noch ein Hauptwertversprechen und ein CTA übrig bleiben.

Sie fragen sich vielleicht: Bedeutet das, dass wir uns auf Popups beschränken sollten, die nur aus Schwarz-Weiß-Text bestehen, wie das untenstehende?

Die Antwort ist ein klares NEIN!

Die meisten Leute werden nur ein paar Worte Ihres Popup-Inhalts lesen, bevor sie entscheiden, ob sie weiterlesen oder das Popup einfach schließen möchten. Das bedeutet, dass die Gestaltung Ihrer Botschaft (Farben, Bilder, Ästhetik usw.) mindestens den gleichen Einfluss auf die Wirksamkeit Ihrer Botschaft hat wie Ihre Überschrift.

Wenn sich die Essenz Ihrer Botschaft auf bestimmte Produkte konzentriert, müssen Sie (wie auf einer Kategorie-Landingpage) den Rest Ihrer Botschaft natürlich so einfach wie möglich halten, damit der Fokus auf den Produkten bleibt.

Schauen Sie sich unten an, wie Burberry es macht: Sie verwenden eine nackte, supereinfache Botschaft mit perfektem Kontrast und konzentrieren sich auf drei kürzlich angesehene Produkte.

Ihre Onsite-Nachrichten erscheinen nicht in einem luftleeren Raum, sondern als Teil Ihrer Website, auch wenn sie in einem Overlay erscheinen. Daher ist es wichtig, dass sich Ihre Popups nahtlos in das Thema Ihrer Marke einfügen.

Das bedeutet, dass Sie Elemente (Schriftarten, Bilder usw.) auswählen sollten, die denen auf Ihrer Website ähneln.

ClickUp ist ein großartiges Beispiel dafür, wie man einfache, aber effektive Popups erstellt, die perfekt zum Styleguide der Marke passen:

Sie können Ihre Popups ganz einfach auf der Marke halten, indem Sie die Schriftarten Ihrer Marke und Ihr Logo verwenden, wie es Ramp tut:

Selbst wenn Sie in der B2C-Welt sind, wo Sie für andere Marken werben, können Sie Elemente von beiden Marken ziehen, wie es Sephora mit diesem Gucci-bezogenen Popup tut:

Es ist wichtig, dass Ihre Popups mit dem Thema Ihrer Marke verschmelzen, ja. Es ist jedoch auch entscheidend, dass sie auffallen und die Aufmerksamkeit des Betrachters auf sich ziehen.

Wenn Sie viele Inhalte haben (z. B. eine Liste mit Aufzählungszeichen von Dingen, die in Ihrem Angebot enthalten sind), stellen Sie sicher, dass Ihr Wertversprechen in der Kopfzeile klar ist.

Stellen Sie außerdem sicher, dass sich die CTA-Farbe vom Rest des Popups abhebt und dass die Schaltfläche groß und gut lesbar ist. Die Überschrift und der CTA sind normalerweise die beiden wichtigsten Elemente Ihrer Popups, also stellen Sie sicher, dass sie genügend Kontrast haben.

Sie könnten zum Beispiel eine helle, kontrastreiche Farbe für Ihren CTA-Button wählen. Dadurch wird es viel auffälliger und Ihre Besucher werden eher darauf klicken.

Wenn Ihr Popup größtenteils schwarz ist, können Sie Orange oder Pink für Ihren Call-to-Action-Button verwenden.

Die Verwendung unterschiedlicher Schriftgrößen ist der einfachste Weg, die Aufmerksamkeit Ihres Publikums auf die Essenz Ihres Popups zu lenken. Selbst wenn Sie mehrere Arten von Texten auf demselben Popup haben, können Sie Schriftgrößen, Farben und andere kontrasterhöhende Techniken verwenden, um den Hauptwert Ihrer Nachricht hervorzuheben, wie es Komily tut:

Wenn Sie eine dunkle Website haben, müssen Sie oft etwas Kontrast schaffen, indem Sie mit Ihrer Lightbox-Farbe herumspielen (Sie wissen schon, dieser graue, halbtransparente Bereich um Ihre Popups herum).

Wenn Ihr Popup beispielsweise eine dunkle Farbe hat, können Sie ein helleres Overlay verwenden, während es angezeigt wird.

Oder Sie können eine Vollbildversion Ihres Popups verwenden, die 100 % des Bildschirms abdeckt – dies stellt sicher, dass Ihr Popup sichtbar ist, wie im folgenden Beispiel:

Wenn Sie mehrere Schaltflächen haben, können Sie unterschiedliche Schaltflächenfarben verwenden, um den Haupt-CTA hervorzuheben und den Benutzern auf subtile Weise anzuzeigen, welche Option für sie die bessere Wahl ist:

Eine andere Strategie besteht darin, visuelle Elemente wie Pfeile einzufügen, die auf den Call-to-Action-Button zeigen. Sie könnten helle, handgezeichnete Richtungsobjekte verwenden, um auf Ihren Aufruf zum Handeln hinzuweisen, wie im Popup unten:

Eine weitere Möglichkeit, Ihr Angebot durch Popup-Design hervorzuheben, ist die Verwendung ungewöhnlicher Vorlagenformen. Diese brechen das Muster der generischen rechteckigen Popups, die die Leute überall im Internet sehen, und es weckt Interesse, einfach weil sie einzigartig sind.

Achten Sie darauf, nicht zu viele Elemente zu betonen. Wenn Sie ein Umfrage-Popup wie das untenstehende haben, stellen Sie sicher, dass Sie einen sekundären, weniger aggressiven Schaltflächenstil für Ihre Schaltflächen verwenden:

Wie das Sprichwort sagt: „Ein Bild sagt mehr als tausend Worte.“ Dies gilt sicherlich für Popups!

Tatsächlich verarbeitet das menschliche Gehirn Bilder 60.000 Mal schneller als Text, und 90 % der an das Gehirn übermittelten Informationen sind visuell.

Aus diesem Grund können einige großartige visuelle Elemente die Effektivität Ihrer Nachrichten vor Ort erheblich steigern. Das Ziel ist es, die richtigen visuellen Elemente auszuwählen, um die geschriebene Nachricht zu verstärken, wie es dieses Popup tut:

Sie müssen qualitativ hochwertige Bilder für Ihr Popup finden. Verwenden Sie am besten echte Fotos Ihrer Produkte anstelle von Stock-Bildern, wie es BlendJet tut:

Der beste Ansatz besteht darin, Ihre Produkt-/Markenbilder durchzugehen und ein relevantes Bild auszuwählen, das auf Ihre Botschaft ausgerichtet ist, wie dieses The Oodie-Popup:

Wenn Sie saisonale Schlussverkäufe durchführen, empfiehlt es sich, Ihre Nachrichten mit den Jahreszeiten zu aktualisieren. Relevanz und Aktualität schaffen das Gefühl, dass diese Angebote zeitlich begrenzt sind, was die Angst erhöht, etwas zu verpassen (und damit Konversionen):

Selbst wenn Sie nichts Besonderes zu bieten haben, könnte die bloße Aktualisierung Ihrer Nachrichten an die aktuelle Saison die Konversionsraten erheblich verbessern, genau wie diese Nachricht:

Wenn Ihre Produkte auf den Fotos lustig oder nützlich aussehen, werden die Leute sie eher kaufen und sich im Austausch für Rabatte für Ihre E-Mail- oder SMS-Listen anmelden.

Wenn Sie versuchen, Besucher zu ermutigen, ein kostenloses Werbegeschenk anzufordern, können Sie Wörter und Bilder verwenden, die Ihre Botschaft mit den Herzen Ihres Publikums verbinden, wie es Castlery tut:

Ich hoffe, Sie fanden meine Liste mit Best Practices und Beispielen für das Popup-Design hilfreich!

Die Bedeutung eines großartigen Popup-Designs wird oft übersehen. Aber jetzt, da Sie gesehen haben, welchen Einfluss intelligentes Design haben kann, werden Sie hoffentlich nie wieder zu langweiligen Popups zurückkehren! Wenn Sie etwas Zeit in die Gestaltung atemberaubender, markengerechter Popups investieren, wird dies einen RIESIGEN Einfluss auf die Konversionsraten haben und Ihren ROI in die Höhe schnellen lassen.

Neu bei Popups? Beginnen Sie hier mit einer unserer gebrauchsfertigen Vorlagen!