Entwicklung & Design

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

Seite 2 / 2

Wenn der Prozess abgeschlossen ist, sollte ein visuelles Feedback eingeblendet werden. Der Besucher soll wissen, dass alles erfolgreich erledigt ist und über die nächsten Schritte informiert werden – ob sich zum Beispiel jemand telefonisch oder via E-Mail melden wird.

7. Streben nach Minimalismus

Es sollten sich nicht zu viele Informationen im Dialog-Fenster befinden – folge dem „KISS-Prinzip“. Aber Minimalismus bedeutet nicht limitiert: Alle Informationen sollten nützlich und relevant sein. Stellt man fest, dass es zu viele Informationen für einen Dialog sind, ist ein Dialogfenster wahrscheinlich generell nicht die richtige Wahl.

Ein Dialog sollte nicht mehr als zwei Aktionen enthalten. Eine dritte Option wie „Mehr erfahren“ leitet den Benutzer weg vom Dialog und lässt gegebenenfalls wichtige Tasks offen. Also: Fragen oder Aussagen so deutlich wie möglich stellen, damit keine weitere Erklärung nötig ist.

In dem Fall führt das "Learn more" weg von der Seite. (Screenshot: google.com)
Dialog-Design: Das „Learn More“ führt weg von der Seite und der Task bleibt unerledigt. (Screenshot: google.com)

8. Scrolling statt Steps

Wenn das Dialog-Fenster aus einem Formular besteht, sollten zum einen nur die wichtigsten Daten abgefragt werden und zum anderen darf das Formular nicht auf mehrere Dialog-Fenster verteilt werden – hier bietet es sich an, innerhalb eines Dialog-Fensters zu scrollen oder eine eigene Seite zu erstellen.

9. Die richtige Dialog-Art finden

Es gibt zwei Arten von Dialogen. Der erste Typ wird nur in dringenden Fällen, wie dem Löschen eines Accounts, verwendet und beansprucht die volle Aufmerksamkeit des Besuchers, um fortzufahren. Dabei ist der umliegende Kontext nicht relevant für die Entscheidung des Benutzers, eindeutige Buttons wie „Bestätigen“ oder „Abbrechen“ müssen vorhanden sein und das Dialog-Fenster schließt sich nicht, wenn außerhalb geklickt wird. Der zweite Typ ist ein Dialog-Fenster, das jederzeit weggeklickt werden kann – zum Beispiel ein Info-Dialog-Fenster.

10. Visuelle Konstanz

Dialog durch Overlay

Wenn ein Dialog-Fenster geöffnet wird ist es wichtig, dass die Seite dahinter leicht abgedunkelt wird und sich somit vom Dialog-Fenster unterscheidet. Das hat zwei Vorteile: Zum einen wird so der Fokus auf das Dialog-Fenster gelegt, zum anderen ist dem Benutzer immer noch ersichtlich, wo er sich befindet.

Klare Schließfunktion

Eine Schließfunktion muss immer vorhanden sein – meistens haben Dialog-Fenster rechts oben in der Ecke ein kleines „x“, das zum Schließen führt. Aber das kleine „x“ ist für den Durchschnitts-Benutzer nicht immer erkennbar genug – gerade auf mobilen Geräten ist es zudem nicht immer leicht, es auf Anhieb zu „treffen“, so dass das Schließen des Fensters Zeit und Aufwand erfordert. Das frustriert den Nutzer.

Getreu dem Motto „User Experience is about humans, not about technology“ sollte es Nutzern immer dann, wenn die Art des Dialogs es hergibt, möglich sein, die Seite zu schließen, indem sie in den ausgegrauten Hintergrundbereich klicken.

Startseite
  • Seite:
  • 1
  • 2

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung