t3n News Design

Dialog-Design: 10 UX-Tipps und -Regeln, die du drauf haben solltest

Dialog-Design: 10 UX-Tipps und -Regeln, die du drauf haben solltest

Wir kennen sie alle: Diese Fenster, die meistens im falschen Moment auftauchen und nur nach Aufmerksamkeit schreien. Die Rede ist von Dialog-Fenstern. Doch mit dem richtigen Dialog-Design und Einsatz sind Dialog-Fenster effektive UI-Elemente und verhelfen dem Benutzer schneller und einfacher zum Ziel – ohne Frust und Verzweiflung.

Dialog-Design: 10 UX-Tipps und -Regeln, die du drauf haben solltest

Dialogfenster. (Grafik: Yura Yarokhovich, via Dribbble

Was ist ein Dialog?

Ein Dialog entsteht, sobald der Benutzer zum Interagieren aufgefordert und seine Antwort erzwungen wird – meist durch Overlays. Dialog-Fenster können Benutzer informieren, fordern auf, Entscheidungen zu treffen, oder umfassen mehrere Aufgaben – ohne das Verlassen der Seite.

1. Wenn möglich verzichten

Dialog-Fenster sind Unterbrechungen, verwende sie also sparsam. Das plötzliche Auftauchen unterbricht den Benutzer in seiner eigentlichen Arbeit und legt den Fokus auf das Dialog-Fenster. Bevor ein Besucher weiter klicken oder scrollen kann, muss er sich mit dem Dialog-Fenster auseinandersetzen. Das ist allerdings nur benutzerfreundlich, wenn wichtige Informationen bestätigt oder abgelehnt werden müssen oder vor Gefahren gewarnt wird – in allen anderen Fällen ist es überfällig und meist nur nervig.

2. Den Benutzer verstehen

Es ist sinnvoll, Dialog-Fenster dann einzusetzen, wenn der Benutzter etwas bestätigen muss, um fortzufahren – das kann zum Beispiel eine Warnung beim Löschen sein, denn der Verlust könnte gegebenenfalls groß sein.

3. Nicht überrumpeln

(Screenshot: babich.biz)
(Screenshot: babich.biz)

Niemals einfach Dialog-Fenster öffnen. Es gibt genug Websites, die den Besucher förmlich mit Dialog-Fenstern bombardieren. Kaum angekommen, folgt direkt ein „Newsletter abonnieren“-Fenster. Vor allem für Tablet- oder Smartphone-Benutzer ist das kleine Kreuz zum Schließen in der Ecke kein freundliches UI-Element – es ist schwer zu klicken und oft auf den ersten Blick nicht eindeutig – mehr dazu weiter unten.

4. Deutliche Aussagen

Damit deutlich wird, welcher Fall nach dem Klicken eintritt, müssen die Fragen und Aussagen im Dialog-Fenster klar und deutlich formuliert sein. Im besten Fall sprechen die Aussagen und Fragen für sich – wenn nicht, dann sollte ein Erklärungstext hinzugefügt werden.

5. Dialog-Arten

Bei Dialogen ohne Titel wird in einem oder zwei Sätzen die Aktion zusammengefasst – entweder als Frage oder Aussage. Im linken Beispiel wird deutlich, was passiert, wenn einer der beiden Buttons gedrückt wird. Im rechten Beispiel ist das nicht der Fall. Hier wird eine Frage gestellt, aber nicht deutlich gemacht, was anschließend passiert.

Dialog ohne Titel. (Screenshot: google.com)
Dialog ohne Titel. (Screenshot: google.com)

Die meisten Dialoge benötigen, außer in Risiko-Situationen, keine Titel. Wenn ein Titel nötig ist, dann muss dieser eine klare Frage oder Aussage mit einer Erklärung im Content-Bereich enthalten. Im linken Beispiel wird eine spezifische Frage mit klarer Aussage über die Auswirkung gestellt, im rechten Beispiel sieht man eine zweideutige Frage und die Auswirkung ist nicht klar.

Dialog mit Titel. (Screenshot: google.com)
Dialog mit Titel. (Screenshot: google.com)

6. Feedback

(Screenshot: materialup.com)
(Screenshot: materialup.com)

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Design
Psychologie im Design: Diese 5 Tipps helfen dir bei besserem Interaction-Design
Psychologie im Design: Diese 5 Tipps helfen dir bei besserem Interaction-Design

Mit jedem Tag wird es wichtiger, dass du dich durch deine Designs mehr mit deinen Nutzern verbindest und ein „menschliches Element“ integrierst. Das Website- und User-Experience-Design-Erlebnis … » weiterlesen

Flat Design: 10 Tipps und Infos für bessere Grafiken
Flat Design: 10 Tipps und Infos für bessere Grafiken

Flat-Design ist ein Trend, über den man in den letzten Jahren viel gehört hat. Gucken wir uns diesen Trend doch mal genauer an: Wir zeigen dir, was Flat Design genau ist, wo es her kommt und wie du … » weiterlesen

Ist responsives Design besser für SEO?
Ist responsives Design besser für SEO?

Es gibt Aussagen, die verselbstständigen sich so schnell, dass sie bald nicht mehr hinterfragt werden. „Responsives Design ist besser für SEO“ ist eine davon. Wir schauen genauer hin. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?