How-To

Modals im UX-Design: So optimierst du die Kommunikation mit Website-Besuchern

(Abbildung: Shutterstock/ baranq)

Modals gehören zum kleinen Einmaleins des UX-Designs. Sie können Nutzern ­dabei ­helfen, ihre Ziele schneller zu erreichen. Das gelingt aber nur, wenn Designer die ­richtigen Patterns wählen und diese durchdacht gestalten.

Wo man im Netz auch hinschaut: Überall setzen sich sogenannte Modals, also Fenster der unterschiedlichsten Art, vor die Haupt­benutzerschnittstelle. Einige davon ergänzen unser Nutzer­erlebnis um hilfreiche Informationen oder Benachrichtigungen. Andere fordern eine Eingabe oder Entscheidung von uns. Und wieder andere wollen einfach nur unsere Aufmerksamkeit. Es gibt zahlreiche Lösungen – die sogenannten UI-Patterns –, um Websites und Apps mit solchen Fenstern auszustatten: Popups, Tooltips, Dialogs, Lightboxes, Popovers und noch viele mehr. Nicht immer ist klar, womit man es zu tun hat. Zumal sich die ­Lösungen überschneiden und optisch ähneln können. Gezielt eingesetzt, sind sogenannte „Dark Patterns“, die meist Marketingzwecken dienen, sogar eine Irreführung der Nutzer. Umso wichtiger ist es, dass Designer sich genau auskennen und zwischen den folgenden Begriffen differenzieren können.

Dialoge

Dialoge sind im Kontext digitaler Nutzeroberflächen Fenster, die der Kommunikation zwischen System und Anwender dienen. Sie informieren den Anwender oder fordern Informationen von ihm. Der Begriff „Dialog“ lässt sich daher synonym für alle Fenster nutzen. Deshalb ist eine weitere Einordnung je nach Einsatzzweck eines Dialogs wichtig. Dabei sprechen UX-Designer von modalen und nicht-modalen Dialogen.

Modale Dialoge

Die Bezeichnung „modal“ stammt vom englischen Begriff „mode“ für „Modus“ ab und weist auf einen veränderten Zustand des Systems hin. Das Interface unter einem modalen Dialog (Modal) ist deaktiviert. Es lässt sich erst wieder verwenden, wenn der Nutzer durch eine Aktion im Dialogfenster eine Veränderung der Oberfläche ausgelöst hat – etwa durch eine Eingabe, eine Bestätigung oder einen Abbruch.

Damit der Anwender weiß, dass er sich in einem alternativen Modus befindet, ist die Website im Hintergrund oft abgedunkelt oder auf andere Weise visuell untergeordnet. In jedem Fall sollte sie, obgleich inaktiv, sichtbar bleiben, nur so ist der modale Dialog als Kind-Element der eigentlichen Website erkennbar. Insbesondere im mobilen Kontext nehmen modale Fenster jedoch oft den ganzen Bildschirm ein und lassen sich somit von nicht-modalen Screens nur schwer differenzieren. Doch auch in einem solchen Fall greift letztlich die Unterscheidung: Ein modales Fenster unter­bindet jeglichen Zugriff auf außerhalb liegende Objekte wie die Navigation oder die Inhalte der Mutterseite.

Nicht-modale Dialoge deaktivieren im Gegensatz zu den ­modalen Dialogen den Haupt-Screen nicht. Sie ­legen sich über das eigentliche Interface und weisen so auf ­ Informationen oder mögliche Interak­tionen hin. Der Nutzer kann sie aber ignorieren und wegklicken. Ein Beispiel dafür sind Aufforderungen, sich anzumelden oder einzuloggen, wie bei Booking.com. (Screenshot: Booking.com)

Nicht-modale Dialoge deaktivieren im Gegensatz zu den ­modalen Dialogen den Haupt-Screen nicht.
Sie ­legen sich über das eigentliche Interface und weisen so auf ­ Informationen oder mögliche Interak­tionen hin. Der Nutzer kann sie aber ignorieren und wegklicken. Ein Beispiel dafür sind Aufforderungen, sich anzumelden oder einzuloggen, wie bei Booking.com. (Screenshot: Booking.com)

Nicht-modaler Dialog

Anders ist das beim nicht-modalen Dialog. Hier ist der ­Dialog ­visuell ebenfalls hervorgehoben, der Anwender kann aber ­Objekte außerhalb des Modals zeitgleich nutzen. Der Modus der Anwendung hat sich durch den nicht-modalen Dialog nicht verändert. Oft lassen sich nicht-modale Elemente auch minimieren oder verschieben. In jedem Fall kann der Nutzer sie ignorieren. Zum Beispiel kann ein nicht-modaler Dialog Marketingzwecken dienen – etwa in Form eines Werbefensters über einem Onlinemagazinartikel.

UI-Patterns

Modale und nicht-modale Dialoge werden häufig mit unterschiedlichen UI-Patterns realisiert. UI-Patterns gibt es in vielen verschiedenen Varianten:

Popups und Alerts

Popups treten ohne explizite Aufforderung oder Aktion eines ­Nutzers auf, etwa, wenn er eine Seite betritt oder herunterscrollt. Es gibt sowohl nicht-modale Popups, die eine Interaktion mit der Seite erlauben, auch wenn sie noch aktiv sind, als auch modale Popups, die eine Nutzeraktion zwingend erfordern – hier ­sprechen UX-Designer mitunter auch von einem Alert, vergleichbar mit JavaScript alert();. Pop­ups transportieren leider häufig Marketinginhalte, die nicht im Sinne der Nutzer sind und haben daher einen eher schlechten Ruf. Anwender klicken sie oft reflexhaft und ungelesen weg. Ein Popup, das sich in einem zusätzlichen Browserfenster öffnet, blockt ein Browser in der Regel automatisch.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
borisch

Bis auf die drei jeweils doppelten Absätze ist der Artikel sehr gut und ausführlich geschrieben. Eine gute Grundlage für Anfänger und eine tolle Auffrischung für Profis. Danke dafür.

Antworten
borisch

Ich möchte auch noch hinzufügen, dass die Verbreitung vom tag bisher kaum stattfindet. Daher kann ich die Nutzung des Tags noch nicht empfehlen.

https://caniuse.com/#feat=dialog

Antworten
Benji
Benji

Zum Thema Button-Placement möchte ich diese Überlegungen zur Diskussion stellen:
https://uxdesign.cc/buttons-placement-and-order-bb1c4abadfcb

Antworten
borisch

Das ist nicht so einfach. Es gibt gute Argumente für links und für rechts. Aber wenn wir schon über Buttons reden, dann lieber darum, warum Buttons überhaupt noch existieren.

https://medium.com/@michyoung/future-ui-design-without-buttons-a49bfb8252e9

Antworten

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

Bitte schalte deinen Adblocker für t3n.de 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