Worauf man bei der Nutzung von modalen Fenstern achten sollte

Pop-Ups richtig in die eigene Website implementieren
Kommentare

Bei Pop-Ups denken viele zunächst an die unbeliebten, überladenen, bunten Fenster, die aus dem nichts aufploppen und auf die man gut und gerne verzichten könnte. Nun ist diese Assoziation nicht grundlegend falsch, Tatsache ist aber: Pop-Up- oder modale Fenster funktionieren – zumindest, wenn sie richtig umgesetzt werden.

Wie nutzt man solche Fenster dann aber richtig, ohne die User Experience seiner Website-Besucher zu stark einzuschränken? Die Antwort darauf hat James George, der in seinem Artikel How to successfully implement modal windows einige Tipps zur richtigen und erfolgreichen Nutzung von Pop-Ups zusammengetragen hat.

Pop-Ups richtig implementieren

Pop-Ups und modale Fenster sind für viele User nervig – insbesondere, wenn sie falsch in eine Website implementiert werden. Es gibt verschiedene Möglichkeiten, wie man sie einbinden kann und was ihr Aufploppen auslöst.

So können sie etwa durch das Klicken auf ein Element getriggert oder mithilfe eines Timers nach einer bestimmten Zeit geöffnet werden. Genauso können Pop-Ups auftauchen, wenn der User den sichtbaren Browsing-Bereich verlässt. Dabei hat jede Methode ihre Vor- und Nachteile – je nachdem, was man mit dem modalen Fenster erreichen möchte:

Funktion Beschreibung
OnClick OnClick ist natürlich die offensichtlichste und einfachste Implementierungsmöglichkeit für Pop-Up-Fenster. So können zum Beispiel Call-to-Action-Buttons das Öffnen eines modalen Fensters auslösen, wenn der User sie klickt.
Timer Modale Fenster, die nach einer bestimmten Zeit auftauchen, sind die am wenigsten beliebte Variante – und die, die am meisten Fehlerpotenzial bietet. Dabei erscheinen die Pop-Ups erst nach einigen Sekunden, wenn der User möglicherweise bereits mitten im Lesen des Contents ist. Hierbei sollte dringend darauf geachtet werden, die User Experience nicht unnötig einzuschränken.
Exit-Trigger Bei dieser Lösung wird das Pop-Up ausgelöst, wenn der User die Maus aus dem Haupt-Contentbereich bewegt, etwa in Richtung der Adresszeile oder des Schließen-Buttons des Tabs. Gerade diese Art von Pop-Up funktioniert meist recht gut, weil der User häufig für ihre Nutzung empfänglicher ist, wenn er bereits den Content gefunden hat, nach dem er gesucht hat.

Bei der eigentlichen Implementierung von modalen Fenstern gibt es zwei Key-Features, auf die man achten sollte, um die Website-Besucher nicht zu vergraulen: die Möglichkeit, das Pop-Up zu schließen und die Garantie, dass User es für eine bestimmte Zeit nicht mehr sehen.

Angesichts der Tatsache, dass Pop-Up-Fenster für viele Website-Besucher sowieso schon ein nerviges Übel sind, sollte man darauf achten, dass sie leicht weggeklickt werden können – entweder mit einem Schließen-Button oder der Möglichkeit, durch Klicken auf den Hintergrund des modalen Fensters zum eigentlichen Content zurückzukehren.

Trotzdem gibt es zahlreiche Websites, die Pop-Ups ohne eine Schließen-Option integrieren, um Likes und Follows für ihre Social-Media-Seiten zu erzwingen. Auch mit einem Timer dafür zu sorgen, dass Pop-Ups nicht durch den User ausgeblendet werden können, ist eine häufig angewandte Praktik, die meist aber nur für eins sorgt: nämlich dass der User auf nimmer Wiedersehen die Website verlässt.

Genauso ist es wenig sinnvoll das gleiche Pop-Up schon kurz nachdem der User es weggeklickt hat nochmal anzuzeigen. Stattdessen sollte eine längere Zeitspanne zwischen dem Einblenden einzelner Pop-Ups liegen.

Das richtige Design

Wie designt man so ein Pop-Up nun aber richtig? Zunächst sollte man sich darüber klar werden, was man mit dem modalen Fenster eigentlich erreichen will – zum Beispiel die Steigerung der Conversion-Rate – und welche Art Content im Pop-Up zum eigenen Projekt passt. James George nennt etwa die folgenden vier Prinzipien, deren Umsetzung bei der Gestaltung von modalen Fenstern nützlich sein können:

  • Pop-Ups visuell aufbrechen, beispielsweise mit verschieden großen Textarten und Überschriften
  • Nicht zu viele Informationen vom User verlangen und Formulare so knapp wie möglich halten
  • Submit-Buttons farblich abheben
  • Bilder einbinden, um dem User eine Vorschau vom den zu bieten, was er nach dem Sign-up erhält

Das eigentliche Design sollte also auffällig, aber nicht zu überladen wirken. Wichtig ist es vor allem, Pop-Ups als Hilfsmittel zur Interaktion von User und Website zu betrachten und nicht nur als notwendiges Übel, das durch die falsche Implementierung dem User eine schlechte User Experience beschert – denn genau das sollte durch Pop-Ups eben nicht erreicht werden.
Aufmacherbild: Illustration depicting a computer dialogue box with an annoying pop up concept. von Shutterstock / Urheberrecht: Sam72

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -