Selbst die besten, kreativsten, unterhaltsamsten und teuersten Werbeanzeigen können einfach nur stören. Niemand, der sie zu sehen bekommt, hat nach ihnen gefragt und meistens will man sie auch nicht sehen. Aber Pop-up-Anzeigen haben den Ruf, besonders aufdringlich zu sein. Sie sind eine ähnliche angenehme Überraschung, wie wenn im Horrorfilm plötzlich jemand um die Ecke springt. Deshalb ist ein außergewöhnliches Pop-up Design besonders wichtig: Es kann dafür sorgen, dass das Pop-up nicht nur erträglich, sondern sogar überzeugend ist.

illustration: Pop-up Designs springen aus dem Bildschirm
Design von OrangeCrush

Trotz ihres Potenzials, User in Rage zu versetzen, gibt es Pop-ups noch immer und das aus gutem Grund: Ihre Conversion Rate kann laut einer Untersuchung von Sumo im Idealfall bei durchschnittlich 9% liegen. Dadurch ist ein gutes Pop-up Design nicht nur essenziell, um User weniger zu frustrieren, sondern auch um unternehmerisch erfolgreich zu sein. Lass uns daher einige bewährte Vorgehensweisen ansehen, wie man Pop-up Designs kreiert, die die Menschen überzeugen.

1. Wäge deine Optionen für verschiedene Pop-up Designstile ab

Das einfachste und häufigste Pop-up ist das quadratische Fenster, das in der Mitte des Bildschirms erscheint. Der Vorteil hier ist, dass es einem unmöglich entgehen kann. Das liegt natürlich nur daran, weil es direkt im Sichtfeld des Users erscheint. Während an sich nichts falsch an einem klassischen Pop-up ist, wird es häufig standardmäßig verwendet, obwohl es so viele andere (potenziell wirkungsvollere) Möglichkeiten gibt.

Pop-up-Anzeige für Reisemarke mit großem Bild
Dieses Pop-up geht einen ungewöhnlichen Weg, indem es die Bilder über die anderen Elemente stellt. Design von Tamara via Dribbble.

Ein Pop-up kann an jeder Stelle des Bildschirms auftauchen und jede Position sagt etwas über die Art der Information aus. Der klassische Ansatz, bei dem das Pop-up in der Mitte erscheint, zeigt an, dass es sich um etwas so Wichtiges handelt, dass du dafür sogar bereit bist, den User beim Browsen zu stören. Es wird in der Regel für direkte Käufe oder Paywalls (wie bei Nachrichtenseiten) genutzt.

Im Gegensatz dazu können Pop-ups auch vom oberen oder unteren Rand des Bildschirms aus erscheinen und erlauben es den Usern, weiterhin mit der Seite zu interagieren, während das Pop-up präsent ist. Bei dieser Herangehensweise können die User entscheiden, wann sie sich mit dem Pop-up auseinandersetzen wollen, und werden dazu ermutigt, es lieber früher als später zu tun, falls das Pop-up genügend Platz auf der Seite einnimmt, um abzulenken. Dieser Ansatz wird häufig für weniger dringliche Dinge genutzt, zum Beispiel um jemanden dazu zu bewegen, eine E-Mail-Adresse einzugeben.

Und schließlich kann ein Pop-up an der Seite oder in der Ecke einer Website erscheinen. Da diese Herangehensweise sehr unaufdringlich ist, wird sie häufig für optionalen Content wie Anleitungen genutzt.

Animiertes Popup-Fenster
Design von Yana Peiganovich via Dribbble.

Design von Burhan Khawaja via Dribbble.

Eine weitere, manchmal übersehene Option, ist die Animation – wie ein Pop-up auf dem Bildschirm erscheint, kann großen Einfluss darauf haben, wie es aufgenommen wird. Eine langsame Einblendung ist sehr viel angenehmer als ein plötzliches Auftauchen. Eine Animation, bei der das Pop-up buchstäblich aufploppt und auf dem Bildschirm herumspringt, wirkt dagegen witzig und freundlich. Aufwendigere Pop-ups – zum Beispiel solche, bei denen die verschiedenen Elemente durch einzelne, einzigartige Animationen erscheinen – sorgen dafür, dass sich das Pop-up weniger wie eine Werbung und mehr wie ein interessantes, kreatives Feature der Website anfühlen.

2. Sorge dafür, dass das Pop-up zum Branding passt

Als ob Pop-ups nicht schon genug Aufmerksamkeit auf sich ziehen würden, verleiten sie (und der Wunsch nach sofortiger Conversion) häufig dazu, sie mit möglichst viel Schnickschnack auszuschmücken. Dies kann zu Designs führen, die den Call-to-Action (CTA) zu sehr hervorheben, manchmal mit buchstäblichen Pfeilen oder mehreren Textzeilen oder indem zu viel Rot verwendet wird, um sicherzustellen, dass er den Usern nicht entgeht.

Solche Taktiken erinnern häufig an die wilden Zeiten des Internets der 90er Jahre, als die damals noch neuen Pop-ups laut und auffällig waren, mit grellen Farben und blinkendem Text. Tatsächlich waren sie so schlecht, dass der Erfinder der Pop-ups sich mittlerweile sogar für sie entschuldigt hat. Darüber hinaus werden Pop-ups nicht nur von Marken genutzt – Betrüger verwenden häufig allgegenwärtige Pop-ups mit alarmierenden, Aufmerksamkeit erregenden Designs, um User dazu zu verleiten, schädliche Software herunterzuladen.

Pop-up-Fenster für eine Dating-App
Von Olha Uzhykova

Aus diesen Gründen sollte man beim Designen von Pop-ups darauf achten, dass sie zum Rest des Brandings der Seite passen, selbst wenn dies in einem dezenteren Stil resultiert. Nutze visuelle Hierarchie, um Informationen der Wichtigkeit nach zu ordnen, und interessante Bilder, um die Aufmerksamkeit der User zu erregen. Dies wird nicht nur zu einem saubereren Design führen, sondern auch die Glaubwürdigkeit des Pop-ups steigern, damit es sich nach einer Gelegenheit und nicht nach einem Trick anfühlt. Im Großen und Ganzen signalisieren Designs einen Mangel an Vertrauen in den Wert des Pop-ups, wenn sie auf Effekthascherei und markenfremde Techniken setzen.

Pop-up-Fenster für Shopping-Website
Pop-ups, die zum Branding passen, fühlen sich weniger wie eine Störung und mehr wie ein Teil der Seite an. Design von Alex Burnstein via Dribbble.
Pop-up-Fenster für Hautpflegemarke
Obwohl es größtenteils grau ist, zeigt dieses Pop-up eine saubere, elegante Komposition, indem es zum Branding des Produkts passt. Design von Anastasia via Dribbble.

3. Nutze Farbe und Formensprache effektiv

Der Text eines Pop-ups – vorausgesetzt er ist gut geschrieben – sollte User dazu verleiten, etwas zu tun. Aber Worte sind nicht das einzige Kommunikationsmittel deines Pop-ups: Visuelle Designelemente wie Farben und Formen können User auf einer emotionalen Ebene erreichen.

Wenn du die möglicherweise durch ein Pop-up hervorgerufene Irritation verringern möchtest, kannst du dies mit einer beruhigenden Farbe wie Blau oder Grün oder einem Pastellton tun. Reines Weiß kann dagegen ein sauberes und aufgeräumtes Feeling erzeugen, besonders wenn es mit viel Platz zwischen den Elementen kombiniert wird. was die Form betrifft, sind Pop-up-Fenster – wie alle Computerfenster – von Hause aus rechteckig oder quadratisch. Eine abgerundete Form lässt das Design aufgrund der fehlenden scharfen Kanten aufgeschlossen und freundlich erscheinen.

Pop-up-Design für Chat-Fenster
Abgerundete Formen vermitteln Freundlichkeit und Aufgeschlossenheit. Design von Alison Danis via Dribbble.
Pop-up-Fenster für die E-Mail-Erfassung
Weiche Farben wie Grün oder Gelb haben eine beruhigende Wirkung. Design von Cindy Wang via Dribbble.

Egal für welche Farbe oder Form du dich entscheidest, du musst dir darüber im Klaren sein, dass deine Auswahl zu den Betrachtern spricht, ob du willst oder nicht.

Pop-up-Fenster mit Shopping-Tag-Formen
Kreative Formen können großen Einfluss darauf haben, wie das Pop-up wahrgenommen wird. Design von ROY.L via Dribbble.

4. Achte auf klaren Content und komme direkt auf den Punkt

Da Pop-ups von Natur aus stören, besteht die übliche Reaktion der User darin, sie sofort zu schließen. Es ist selbst unter Idealbedingungen schwer genug, die Leute davon zu überzeugen, einen CTA anzuklicken, aber Pop-ups haben ein besonders kleines Zeitfenster, um ihr Ziel zu erreichen. Dies führt dazu, dass Pop-ups größtenteils minimalistisch designt sind – klar und auf den Punkt. Der Wert der Aktion, die die User ausführen sollen, sollte auf den ersten Blick ersichtlich sein.

Pop-up-Fenster für E-Mail-Abonnement
Design von Daria Tulupova via Dribbble.

Pop-ups sollten in ihrer Grundstruktur folgende Dinge enthalten:

  • Eine Überschrift, die das Angebot oder Thema des Pop-ups ankündigt
  • Zusätzlicher Text, der weiter auf den Wert des Angebots eingeht
  • Ein interessantes Bild
  • CTA
  • „Schließen“-Button

In der Realität benötigen manche Pop-ups zusätzliche Dinge (z. B. ein Eingabefeld für E-Mail-Adressen) und viele verzichten auch auf manches (z. B. auf den Zusatztext oder das Bild). Letzten Endes hängt es davon ab, was du erreichen möchtest und wie wahrscheinlich es ist, dass die User auf der Seite bleiben, um sich anzuhören, was du zu sagen hast. Springe zu Schritt 7, um Tipps zu erhalten, wie du deine User besser verstehst.

Ein minimalistisches Pop-up-Fenster-Design
Ein minimalistischer Ansatz kann gleichermaßen Aufmerksamkeit erregen. Design von Paul Flavius Nechita via Dribbble.

5. Vernachlässige nicht den „Schließen“-Button

Pop-ups sollen für Conversions sorgen und nicht geschlossen werden. Aber natürlich ist es wichtig, dass man es auch schließen kann. Es ist Teil einer guten User Experience, sicherzustellen, dass die User das tun können, was sie tun wollen, selbst wenn es etwas ist, das du nicht unbedingt möchtest.

Ein simples X in der oberen rechten Ecke ist in der Regel ausreichend. Selbst wenn das nicht die originellste Idee ist, ist das die Stelle, an der die User meistens danach suchen werden. Viele Designer und Designerinnen grauen den „Schließen“-Button aus und das kann durchaus eine nützliche Taktik sein – die Möglichkeit das Pop-up zu schließen, sollte nicht versteckt sein, aber muss auch nicht unbedingt das Auffälligste an einem Pop-up sein.

Pop-up-Fenster für E-Mail-Abonnement
Ein ausgegrautes X in der oberen rechten Ecke reicht in der Regel als „Schließen“-Button aus. Design von Elena Akimova via Dribbble.

Alternativ wird der „Schließen“-Button manchmal zusammen mit dem CTA als klassischer, rechteckiger Button angezeigt. Dies lenkt unweigerlich vom CTA ab und zeigt, dass man eine Entscheidung treffen muss. Gleichzeitig kann dies ein guter Ansatz sein, wenn der Text auf dem „Schließen“-Button verdeutlicht, dass man das Pop-up nicht nur schließt, sondern sich gleichzeitig eine Gelegenheit entgehen lässt („Ich möchte nicht 15 % sparen“). Manchmal wird dies in kleinerer Schrift unterhalb des CTA angezeigt.

Grünes, belaubtes Popup-Fenster für Newsletter-Anmeldung
Der Text des „Schließen“-Buttons kann verdeutlichen, dass man sich eine Gelegenheit entgehen lässt. Design von Dag Margo via Dribbble.

Wenn der User das Pop-up schließen möchte, sollte das Design ihm dies letzten Endes auch ermöglichen, da jeder zusätzliche, durch das Pop-up verursachte Frust auch auf die Marke übertragen wird. Mit anderen Worten, wenn du die Schlacht verlierst, versuche, den Krieg durch gute User Experience zu gewinnen.

6. Designe separat für Mobilgeräte

Eine Mobilversion eines Pop-ups zu erstellen, erfordert weit mehr, als nur das Design zu verkleinern. Das Erlebnis auf Mobilgeräten unterscheidet sich drastisch von dem auf dem Desktop.

Mobiles Pop-up-Fenster-Design
Der Text eines Pop-ups für Mobilgeräte muss hochkant gut lesbar sein. Design von Anna Lazareva via Dribbble.

Zuerst solltest du neben einer kleineren Größe auch das Seitenverhältnis beachten: Smartphones sind hochkant ausgerichtet, Desktopgeräte dagegen im Querformat. Das bedeutet, dass Designs (und besonders der Text) gut in einem höheren, engeren Fenster erkennbar sein müssen. Darüber hinaus bedienen die meisten Menschen ihr Telefon mit einer Hand und nur mit dem Daumen. Das bedeutet, dass Eingabefelder – die selbst bei Pop-ups auf Desktopgeräten begrenzt sein sollten – für User noch schwieriger zu bedienen sind. Dazu kommt, dass Pop-ups, die sich näher am unteren Ende des Bildschirms befinden, leichter mit dem Daumen zu erreichen sind.

Bei mobilem Design geht es allerdings nicht nur um Einschränkungen: Mobile Webseiten haben auch mehr Eingabemöglichkeiten als Desktops – z. B. Wischen, Pinchen und unterschiedliche starkes Tippen – und Pop-up Designs können dies für überraschendere Interaktionen nutzen.

Pop-up-Fenster für Mobilgeräte
Pop-ups auf Mobilgeräten können sich einzigartige Interaktionen wie Wischen zunutze machen. Design von ROY.L via Dribbble.

Auf Mobilgeräten werden Pop-ups in der Regel am unteren Ende des Bildschirms platziert. Design von Oğuz Yağız Kara via Dribbble.

Damit wollen wir sagen, dass selbst wenn du bereits eine Desktopversion deines Pop-ups entworfen hast, du ein eigenständiges Pop-up für Mobilgeräte entwerfen solltest. Viele Designer:innen verfolgen einen Mobile-First-Ansatz im digitalen Design (bei dem die Mobilversion noch vor der Desktopversion erstellt wird) und es gibt keinen Grund, Pop-ups nicht auf dieselbe Weise zu kreieren. Dies ermöglicht es dir, mit einer einfachen Version zu beginnen und diese nach und nach mit Details zu ergänzen, um sie an größere Bildschirmgrößen anzupassen (im Gegensatz zur Sisyphusarbeit, eine detaillierte Version des Designs zu vereinfachen).

7. Passe dein Pop-up Design basierend auf Tests an

Auch wenn Kunst beim Pop-up Design (wie bei allen Designs) durchaus eine Rolle spielt, geht es letzten Endes um Performance. Dein Design ist nur gut, wenn es funktioniert: Soll heißen, es muss aus Interessent:innen Käufer:innen machen. Die durchschnittliche Conversion Rate gelungener Pop-ups liegt bei ca. 3%.

Pop-up-Design für die Newsletter-Anmeldung
Design von Fida Tanaaz via Dribbble.

Deshalb sind Tests und Analysen der wichtigste Teil deines Pop-up Designprozesses. Sobald du die Performance deines Designs anhand deiner Ziele evaluiert hast (wozu du vergangene Conversions zusammen mit der zuvor erwähnten durchschnittlichen Conversion Rate nutzen kannst), solltest du deine Erkenntnisse umsetzen und das Design anpassen. Eine besonders beliebte Methode ist der A/B-Test, bei dem du zwei verschiedene Versionen eines Designs zwei verschiedenen Teilen deiner Zielgruppe präsentierst, um herauszufinden, welche Version besser abschneidet. Du kannst A/B-Tests nutzen, um bestimme Designelemente zu variieren und so zu sehen, welche zu mehr Conversions führen.

Im Endeffekt spielt es keine Rolle, wie gut dein Pop-up aussieht oder wie gut es in der Theorie designt ist – wichtig ist, was deine User denken.

Kreiere das perfekte Pop-up Design

Pop-ups sind nicht von Natur aus eine Plage, mit der User sich abgeben müssen. Wie bei vielen anderen Elementen der digitalen Welt bestimmt auch hier das Design, ob sie als Qual oder Freude wahrgenommen werden. Es ist alles eine Frage der Perspektive: Ein Pop-up Design kann User entweder mit einer Werbeanzeige stören oder sie auf eine Gelegenheit hinweisen. Während die Tipps in diesem Artikel ein guter Ausgangspunkt für Pop-ups sind, die deine User zu schätzen wissen, hängt gutes Pop-up Design letzten Endes davon ab, ob du mit einem gute Designer oder einer guten Designerin arbeitest.

Du möchtest das perfekte Pop-up Design für deine Website?
Dann arbeite mit unserer talentierten Design-Community.