Pop-Up-Design: Fangen Sie es ein, solange es heiß ist

Die Verwendung von E-Mail-Abonnementformularen ist eine der effektivsten Möglichkeiten, um mehr Abonnenten zu gewinnen. In diesem Artikel konzentrieren wir uns auf Popup-E-Mail-Abonnementformulare. Insbesondere erklären wir Ihnen, wie Sie Ihr Pop-up-Design verbessern können, und zeigen einige großartige Pop-up-Beispiele zur Inspiration.

Die Rolle von Popup-Formularen im E-Mail-Marketing

Pop-ups sind die Formulare, die im Vordergrund des Website-Inhalts erscheinen und Benutzer dazu anregen, sich für den Empfang von E-Mails anzumelden. Sie bestehen normalerweise aus einem Titel, einer kurzen Beschreibung, einem Feld zum Ausfüllen Ihrer E-Mail-Adresse, Ihres Namens und anderer Details sowie einer CTA-Schaltfläche.

Sehr oft bieten Pop-ups einen Lead-Magneten wie einen Rabatt, ein kostenloses E-Book, eine Webinar-Aufzeichnung, ein Event-Ticket und andere Werbegeschenke an. In einem ihrer Pop-ups bietet Kate Spade beispielsweise allen neuen E-Mail-Abonnenten einen Rabatt von 15%.

Aber wie können Pop-ups Leads bringen, wenn viele von uns sie als lästig empfinden? Dafür gibt es eine einfache wissenschaftliche Erklärung.

Martin Lindstrom, Autor sowie Werbe- und Markenexperte, teilte in seinem Buch „Buyology: Truth and Lies About Why We Buy“ einige interessante Ergebnisse einer großen 3-jährigen Neuromarketing-Studie. Zusammenfassend hat er bewiesen, dass 90 % des Kaufverhaltens der Menschen unbewusst sind und viele Handlungen der Benutzer im Widerspruch zu dem stehen, woran sie glauben. Trotz kontroverser Meinungen über Pop-ups funktionieren sie also immer noch: Wir können behaupten über Pop-ups genervt zu sein, aber wir reagieren trotzdem darauf und melden uns weiter an.

Schauen wir uns nun die Pop-ups in Aktion an. Sumo analysierte in zwei Jahren fast zwei Milliarden Pop-ups und fand heraus, welche Elemente sie zu einem wertvollen Beitrag zu den gesamten E-Mail-Marketing-Ergebnissen machen.

In diesem Test betrug die durchschnittliche Pop-up-Conversion-Rate 3,09 %. Die 10 % der Pop-ups mit der höchsten Leistung hatten eine durchschnittliche Conversion-Rate von 9,28 %, einige von ihnen erreichten bis zu 50,2 %.

Sumo hat die folgenden Trends bei den Pop-up-Conversion-Raten festgestellt:

1. Pop-ups, die im richtigen Kontext platziert wurden, erreichten über 40 % Conversion-Rate. Mit dem richtigen Kontext meinen wir, dass das Thema eines Pop-ups mit dem Thema einer Website-Seite übereinstimmt, auf der es erscheint.
2. Das Timing von Pop-ups, das vollständig vom Kontext abhängt, brachte dank einer Verzögerung von 15 Sekunden auf einer E-Book-Seite 38,4% Conversion-Raten. Tools wie Google Analytics helfen dabei, das Rätsel um das im Einzelfall am besten geeignete Timing zu lösen.
3. Durch die Berücksichtigung von Kontext und Timing, die Erstellung eines CTAs, der dem Kontext entsprach, versuchten, klar zu sein und einen Mehrwert zu schaffen, gelang es Sumo, eine Conversion-Rate von 60 % zu erreichen.

Wie Sie sehen, können Sie die Conversions erheblich verbessern, wenn Sie sich eingehender mit jedem einzelnen Aspekt eines Pop-up-Formulars befassen und die Details einzeln testen.

Tipps und Tricks zum Pop-up-Design

Design ist ein Aspekt, der nicht übersehen werden sollte, wenn es darum geht, Conversions zu steigern und mehr Leads zu gewinnen. Laut dem oben erwähnten Buch „Buyology“ verbringen Verbraucher in der Regel maximal 2 Sekunden, um eine Kaufentscheidung zu treffen. Das erste, was die Leute sehen, sind Designelemente und Farben, und erst dann beginnen sie, den Inhalt zu lesen. Sie haben also buchstäblich nur ein paar Sekunden Zeit, um Aufmerksamkeit zu erregen, Ihren Standpunkt zu erklären und einen Benutzer zu ermutigen, seine E-Mail-Adresse in Ihrem Formular zu hinterlassen.

Schauen wir uns die Details einiger gut aussehender Popup-Beispiele an, um herauszufinden, welche Popup-Designstrategien Sie für Ihre eigenen Abonnementformulare verwenden können.

Gestalten Sie Ihre Pop-ups gemäß den Unternehmensrichtlinien

In erster Linie sollten alle Ihre Design-Assets, die in jeder Art von Medien verwendet werden – sei es eine Website, E-Mail oder Social Media – den Unternehmensrichtlinien Ihres Unternehmens entsprechen, da diese Assets insgesamt einen Eindruck von Ihnen als Marke vermitteln. Aus diesem Grund ist es wichtig, sich an Ihre Unternehmensfarben, Schriftarten, Formen und andere Designelemente zu halten.

Werfen Sie einen Blick auf die Seite Whole Whale About Us. Sie sehen, dass die Farbpalette aus Weiß- und Grautönen besteht, die mit hellen und dunkelblauen Tönen ergänzt werden. Es gibt viel negativen Raum, eine serifenlose Schriftart, die auf der gesamten Website verwendet wird.

Schauen Sie sich nun ihr Pop-up-Design an, das perfekt zu ihrem Website-Design passt, da im Formular dieselben Farben und Schriftarten verwendet werden. Darüber hinaus wird durch ein emotionales Foto mehr Aufmerksamkeit auf das Pop-up gelenkt. Der linke Textteil und der rechte Bildteil sind vollsymmetrisch.

Whole Whale bietet drei verschiedene Produkte an, die für gemeinnützige Organisationen nützlich sind, darunter Lighthouse, das entwickelt wurde, um die Effektivität von Spendenseiten zu erhöhen. Beachten Sie, dass das Pop-up-Design dieses Produkts auch den Corporate-Design-Richtlinien entspricht, was insgesamt eine stärkere Wirkung hat.

Ihr Pop-up-Design muss nicht so neutral sein wie das von Whole Whale. Fühlen Sie sich frei, ihm etwas mehr Charakter hinzuzufügen, besonders wenn Sie einen persönlichen Blog oder eine Website haben.

Zum Beispiel unterscheidet sich die Wait But Why-Website stark von derjenigen, die Whole Whale besitzt. Es macht Spaß und ist hell und hat viele skizzenartige Illustrationen.

Ihr Pop-up ist keine Ausnahme – es macht auch Spaß und ist persönlich. Das Unternehmen macht Witze über die nervige Natur von Pop-ups und ermutigt die Benutzer nur, sich anzumelden.

Setzen Sie die Theorien der visuellen Wahrnehmung in die Praxis um

Es gibt mehrere etablierte Theorien der visuellen Wahrnehmung, die bis heute im Design verwendet werden. Wir sprechen über die Regel des Goldenen Schnitts und die Gestalttheorie, zwei der bedeutendsten Designtheorien.

Die Regel des Goldenen Schnitts

Der Goldene Schnitt ist ungefähr ein 1:1,61-Verhältnis, das in der Natur vorkommt und verwendet wird, um visuell ausgewogene Bilder zu erstellen, die bestimmte Teile eines Bildes hervorheben.

Wie können Sie das in der Praxis nutzen? Diese Proportionen können Ihnen beispielsweise dabei helfen, ein Bild in ausgewogene Abschnitte zu unterteilen, die wichtigsten Elemente Ihres Designs hervorzuheben oder Bilder einfach optisch ansprechend zuzuschneiden.

Das Bild unten wurde nach dem Goldenen Schnitt-Prinzip zugeschnitten. Beachten Sie, wie der wichtigste Teil des Bildes, ein Mobiltelefon, platziert ist – in der Mitte der Spirale, wo das menschliche Auge auf natürliche Weise angezogen wird.

Wenn Sie am Pop-up-Design arbeiten, können Sie CTA-Buttons in der Mitte der Spirale platzieren, wobei sich das Bild am Anfang der Spirale befindet, die den größten Teil einnimmt. So könnte ein grundlegendes Layout Ihres Pop-ups in diesem Fall aussehen:

Gestalttheorie

Gestalt bedeutet „vereinheitlichtes Ganzes“ und macht die Essenz der gesamten Theorie aus, die erklärt, wie Menschen Objekte aufgrund ihrer Platzierung im zweidimensionalen Raum wahrnehmen.

Es gibt 6 gemeinsame Prinzipien der Gestalt:

1. Ähnlichkeit . Ähnliche Objekte werden als Muster oder als Gruppe wahrgenommen.
2. Fortsetzung . Auf einem einzigen Weg platzierte Objekte werden als Gruppe wahrgenommen und das menschliche Auge wird von diesen Blicklinien geleitet.
3. Schließung . Fehlt ein Objekt an einigen Stellen, nehmen wir es dennoch als Ganzes wahr. Denken Sie nur an das WWF-Logo mit Panda und Sie werden dieses Prinzip verstehen.
4. Nähe . Objekte, die nahe beieinander platziert sind, werden als Gruppe wahrgenommen.
5. Figur/Grund . Menschen trennen Elemente vom Hintergrund, sodass das größere als Grund wahrgenommen wird, während das kleinere als Objekt oder Figur wahrgenommen wird. Dieses Prinzip wird in Eschers Werken häufig verwendet.
6. Symmetrie und Ordnung . Menschen fühlen sich sicherer und ruhiger, wenn sie symmetrische Designs sehen.

Sie müssen nicht alle diese Prinzipien auswendig lernen. Einige Grundkenntnisse helfen Ihnen jedoch zu verstehen, warum asymmetrische Designs dynamischer und symmetrische Designs stabiler und sicherer aussehen können und warum die Aufmerksamkeit des Benutzers auf die größten oder hellsten Objekte gelenkt wird, die sich von den anderen abheben.

Schauen wir uns zum Beispiel das Pop-up-Designbeispiel von SheSimplyShops an. Das Unternehmen bietet Benutzern an, das Rad zu drehen, um eine Chance auf einen Rabatt zu erhalten. Das Popup erscheint auf der linken Seite des Bildschirms und ist asymmetrisch: Der linke Teil erscheint „schwerer“ als der rechte. Das Rad nimmt den gesamten linken Teil des Pop-ups ein, während der Text und die CTA-Schaltfläche rechts von einem negativen Leerzeichen umgeben sind. All das erzeugt eine dynamische und energetische Stimmung rund um das Pop-up.

Die Pop-Up-Form von Leia hingegen ist vollsymmetrisch und wirkt dadurch deutlich ruhiger als das vorherige Beispiel. Alle Elemente sind zentriert und führen visuell zu einem einzigen Punkt – der CTA-Schaltfläche.

Auf Lesbarkeit achten

Wenn Sie möchten, dass Ihre Pop-ups die richtige Botschaft vermitteln, sollten sie leicht zu verstehen sein. Und wenn es um die Lesbarkeit geht, sind Ihre Fähigkeit, mit Text und Typografie zu arbeiten, entscheidend.

Richten Sie eine visuelle Hierarchie ein, in der Elemente wie Überschriften, Beschreibungen und Schaltflächen visuell voneinander getrennt sind – durch die Verwendung komplementärer Schriftarten, unterschiedlicher Größen und Gewichte sowie Abstände. Der Zeilenvorsprung, ein Leerzeichen zwischen den Zeilen, und das Kerning, ein Leerzeichen zwischen den Buchstaben, sollten den Leser durch Ihr Formular führen. Die wichtigsten Informationen sollten immer die herausragendsten sein.

Um einen größeren Kontrast zu erzielen, können Sie verschiedene Schriftstärken einer einzelnen Schrift sowie Serifen und Sans Serifs mischen. Versuchen Sie jedoch, sich an nicht mehr als zwei Schriftarten zu halten, damit das Formular nicht unordentlich aussieht.

Ein Pop-up-Formular auf dem Tim Ferris-Blog ist ein großartiges Beispiel für gute Typografie. Man sieht deutlich den Unterschied zwischen Logo, Titel, Untertitel, Autorenname und zwei Schaltflächen, von denen die prominentere der gewünschte CTA ist.

Der Titel zieht dank des Kontrasts zwischen Hintergrund und Text die meiste Aufmerksamkeit auf sich. Danach wandert Ihr Auge direkt zum CTA-Button. Dann gehen Sie wieder nach oben, um die Details zu lesen – den Untertitel und den Namen des Autors.

Social Triggers wiederum bieten ein leichteres Pop-up-Formular, das auf fetter Typografie basiert. Zuerst sehen Sie den faszinierenden Titel in Form einer Frage, und Ihr Blick wandert sofort zum Bucht-CTA-Button. Die Beschreibung wird optisch durch einen Trenner getrennt und in kleinerer Schrift geschrieben.

Seien Sie sich Ihrer Farbwahl bewusst

Eine Farbe ist ein starkes Werkzeug, mit dem Sie die Stimmung Ihrer Popup-Formulare vollständig ändern können. Pastelltöne bringen eher eine romantische und unbeschwerte Stimmung, während laute und lebendige Farben Ihr Pop-up extravaganter machen könnten.

Verwenden Sie Werkzeuge wie Adobe Color, um die Farben auszuwählen, die sich gut kombinieren lassen. Es ist kostenlos und ermöglicht es Ihnen, einzigartige Farbpaletten von Grund auf neu zu erstellen, sie aus Bildern zu extrahieren oder einfach Farben und Trends zu erkunden, um sich inspirieren zu lassen.

Ein Beispiel für ein Pop-up von Tommy Hilfiger zeigt einen großartigen Kontrast zwischen Rot, Blau und Weiß. Der Titel ist in fetten Großbuchstaben geschrieben, der wichtigste Teil ist rot hervorgehoben. Ihre Aufmerksamkeit wird sofort vom Titel auf den Anmeldebutton gelenkt.

Wenn Sie minimalistische Designoptionen ansprechender finden, können Sie eine einzelne Primärfarbe für den Hintergrund und eine Sekundärfarbe für den Text und andere Elemente verwenden.

Zum Beispiel scheuen sich die Horizn Studios nicht davor, ein komplett schwarzes Formular einzuführen, da sie weißen Text und weiße Schaltflächen verwenden, um den monochromen Hintergrund zu kontrastieren. Solche Kontraste sowie der verblasste Hintergrund einer Website machen diese Form gut sichtbar.

Elvie&Leo verwenden umgekehrt ein komplett weißes Formular mit schwarzem Text. Es ist einfach und dennoch edel dank der geschickten Wahl einer Serifenschrift für die Hauptbotschaft und der schwarzen Schaltfläche, die sich vom Rest des Formulars abhebt.

Die My Deal-Website bietet eine weitere minimalistische Option mit einem Hauch von Farbe. Ein roter Papierflieger wird nach rechts gerichtet – dort befindet sich eine rote Anmeldeschaltfläche. Beachten Sie, wie die Typografie verwendet wird, um die Hauptbotschaft des Formulars hervorzuheben.

Experimentieren Sie mit Formen und Interaktivität

Fügen Sie Ihren Pop-ups ein wenig mehr Spaß hinzu, um das Engagement zu erhöhen. Jackpot Candles bieten Ihnen beispielsweise die Möglichkeit, an einer Spin-to-Win-Lotterie teilzunehmen.

Wenn Sie das Rad drehen, können Sie einen der vier Preise gewinnen. So sieht das Popup im aktivierten Zustand aus:

Wenn Sie mit Formen spielen, können Sie mehr Aufmerksamkeit auf das Pop-up lenken. Email Monday zum Beispiel griff auf die ungewöhnliche Form des Anmeldeformulars zurück – einen Kreis. In Kombination mit einem kleineren Kreis, der das Foto des Website-Gründers zeigt, hat die Marke möglicherweise alle Chancen, mehr Leads zu erhalten.

Du bist dran

Um Ihre Abonnementformulare auffällig zu machen, denken Sie an diese einfachen Pop-up-Designprinzipien:

• Stellen Sie sicher, dass Ihre Popup-Formulare im Unternehmensstil Ihres Unternehmens gestaltet sind;
• Denken Sie an den Goldenen Schnitt und die Gestalttheorien, wenn Sie Designelemente platzieren und mit der Typografie Ihrer Form arbeiten;
• Stellen Sie sicher, dass der Text Ihrer Pop-ups leicht lesbar ist;
• Verwenden Sie Farben mit Bedacht, um die wichtigsten Teile eines Pop-ups zu betonen;
• Fügen Sie Interaktivität hinzu und spielen Sie mit verschiedenen Formen, um Ihre Pop-ups für die Benutzer unterhaltsam und außergewöhnlich zu gestalten.

Sind Sie bereit, kostenlos Ihr erstes Popup-Formular mit SendPulse zu erstellen?