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.
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.
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.
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.
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.
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.
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.
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-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.
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.
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.
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.
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.
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%.
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.
