7 Tipps im Umgang mit Dialogfenstern

Wer kennt diesen Moment nicht … Völlig unbedarft betritt man einen Onlineshop und “zack” öffnet sich direkt das erste Fenster. Der User wird dazu aufgefordert, den Newsletter der Seite zu abonnieren. Meist sogar, bevor er überhaupt weiß, auf welchem Onlineshop er gerade gelandet ist. Nach Schließen des ersten Fensters öffnet sich dann das nächste. Die Frühlingsaktion mit einem entsprechenden Rabattcode wird angepriesen, die Laune des Nutzers sinkt. Schließlich können diese aufpoppenden Fenster – die sogenannten Dialogfenster – ganz schön nervig sein.

Was hat es mit einem Dialogfenster auf sich?

Der Begriff “Dialogfenster” kommt nicht von ungefähr. Das System fordert den Benutzer dazu auf, in einen Dialog zu treten.

Man muss zwischen zwei Arten von Dialogen unterscheiden.

1. Dialoge, die ausschließlich informieren (z.B. Werbung)
2. Dialoge, die zu Handlungen auffordern (z.B. eine Sicherheitsabfrage)

Bei richtigem Einsatz helfen beide Dialogarten dabei, deinen Nutzer schneller ans Ziel zu bringen. Im Folgenden findest du 7 Tipps, die du beim Einsatz von Dialogen beachten solltest …

#1 Verwende Dialogfenster nur sparsam & bedacht

Immer, wenn ein Dialogfenster auftaucht, wird der User in seiner Handlung unterbrochen bzw. sogar „herausgerissen“. Die Konzentration liegt automatisch auf dem aufgepoppten Fenster. Durch die Störung fühlt sich allerdings nicht jeder User dazu berufen, den Inhalt des Fensters auch zu lesen. Die Konsequenz: Das Fenster wird einfach weggeklickt – ihr hättet euch also die Mühe für die Entwicklung des Pop-ups sparen können.

#2 Biete mit dem Dialog einen Mehrwert

Ein Dialog ist nur dann benutzerfreundlich, wenn du einen wirklichen Mehrwert bieten kannst. Dies gilt beispielsweise dann, wenn der Nutzer vor möglichen Gefahren bzw. schlimmen Konsequenzen bewahrt wird.

Ein Beispiel: Mit Klick auf einen Löschen-Button wird ein Dialogfenster mit einer Rückfrage angezeigt. Auf diese Weise können schwerwiegende Konsequenzen, die zum Beispiel durch versehentlich ausgeführte Klicks entstehen, verhindert werden.

#3 Benutze keine Dialoge, die sich automatisch öffnen

Es gibt Webseiten, die automatisch und fast gleichzeitig Dialoge anzeigen. Der User kann absolut nicht steuern, ob er diese Informationen lesen möchte oder nicht. Wenn das Schließen-Kreuz im Dialog zusätzlich schwer zu erreichen oder nicht klickbar ist, kann das (vor allem auf dem Smartphone) sehr frustrierend für deine Nutzer sein. Das Browser-Fenster wird geschlossen und dein Kunde sucht sich lieber eine Webseite ohne Pop-ups.

#4 Achte auf eindeutige & klare Formulierungen

Dem Nutzer sollte sofort klar sein, um was es in dem Dialog geht und welche Konsequenz folgt, wenn der Dialog bestätigt wird. Es empfiehlt sich, kurze, prägnante Aussagen zu platzieren, die für sich selbst sprechen. Im Zweifel hilft ein aufklärender Text. Eindeutig sollten außerdem die Aktionen sein, die mit Klick auf die Buttons ausgelöst werden, denn oft ist nicht ersichtlich, welche Aktion ausgeführt wird. Erst in Kombination mit der Überschrift wird klar, was gemeint ist. Lasse dem User also keinen Interpretationsspielraum, der ihn nur verunsichert.

#5 Entscheide, welche Informationen wirklich wichtig sind

Zeige nur das Wichtigste in deinem Dialog an. Wenn du sehr viele Informationen unterbringen musst, dann ist das ein Indiz dafür, dass du wahrscheinlich das falsche UI-Element benutzt. Generell empfiehlt es sich, nicht mehr als zwei Buttons in einem Dialog zu platzieren.

#6 Nutze scrollbare Dialoge

Wenn ein Dialog für lange Texte genutzt werden soll, kann es passieren, dass der Platz des Fensters nicht ausreicht (z.B. für Hilfetexte im Kontext von Formularfeldern). Man sollte Informationsflut in einem Pop-up grundsätzlich vermeiden. Im Falle eines Falles empfiehlt es sich aber scrollbare Dialoge zu verwenden.

#7 Halte dich an Konventionen in der Gestaltung

Beim Erscheinen eines Dialogs sollte die eigentliche Webseite leicht abgedunkelt werden. Das hat gleich zwei Vorteile:

• Der Fokus wird automatisch auf den Dialog gesetzt. Die Webseite im Hintergrund lenkt nicht weiter ab.
• Der Nutzer weiß trotz Kontextwechsel noch, wo er sich gerade befindet

Zudem sollte der Nutzer den Dialog jederzeit schließen können. Auf den meisten Dialogen findet sich oben rechts ein Schließen-Kreuz (X). Oft ist das X zu unscheinbar oder schwer mit Maus bzw. Finger zu treffen. Daher ist es von Vorteil, wenn der Nutzer auch jederzeit in den abgedunkelten Bereich der Webseite klicken kann, um das Fenster zu schließen.

 

(Titelbild: Unsplash)