Wahrscheinlich waren Sie schon einmal dort. Wie entscheiden wir zwischen der Anzeige eines Modals für Benutzer und wann navigieren wir sie zu einer separaten, neuen Seite? Und spielt es überhaupt eine Rolle? Tatsächlich ist es so. Die Entscheidung beeinflusst den Benutzerfluss, seinen Kontext, seine Fähigkeit, Details nachzuschlagen, und damit auch die Fehlerhäufigkeit und die Aufgabenerledigung. Beide Optionen können störend und frustrierend sein – zur falschen Zeit und am falschen Ort. Also sollten wir es besser richtig machen. Nun, mal sehen, wie man genau das macht. Modale vs. Dialoge vs. Overlays vs. Lightboxen Während wir oft über eine einzelne modale UI-Komponente sprechen, ignorieren wir oft feine, komplizierte Nuancen zwischen all den verschiedenen Arten von Modalen. Tatsächlich ist nicht jedes Modal gleich. Modalitäten, Dialoge, Überlagerungen und Leuchtkästen – alle klingen ähnlich, sind aber tatsächlich ziemlich unterschiedlich:
DialogEin Oberbegriff für „Konversation“ (Benutzer ↔ System). OverlayEin kleines Inhaltsfeld, das oben auf einer Seite angezeigt wird. ModalUser muss mit deaktiviertem Overlay und Hintergrund interagieren. NonmodalUser muss mit aktiviertem Overlay + Hintergrund interagieren. LightboxGedimmter Hintergrund, um die Aufmerksamkeit auf das Modal zu lenken.
Wie Anna Kaley hervorhebt, erscheinen die meisten Overlays zur falschen Zeit, unterbrechen Benutzer bei kritischen Aufgaben, verwenden eine schlechte Sprache und unterbrechen den Benutzerfluss. Sie sind von Natur aus störend und weisen in der Regel einen hohen Schweregrad auf, ohne dass dafür ein dringender Bedarf besteht.
Sicherlich müssen Benutzer verlangsamt und unterbrochen werden, wenn die Konsequenzen ihrer Aktion große Auswirkungen haben, aber für die meisten Szenarien sind nichtmodale Methoden eine viel subtilere und benutzerfreundlichere Option, um die Aufmerksamkeit des Benutzers auf etwas zu lenken. Wenn überhaupt, schlage ich immer vor, dass es sich um eine Standardeinstellung handelt. Modalitäten → Für einzelne, eigenständige Aufgaben Als Designer tun wir Modalitäten oft als irrelevant und nervig ab – und oft sind sie es auch! – und doch haben sie auch ihren Wert. Sie können sehr hilfreich sein, um Benutzer vor möglichen Fehlern zu warnen oder ihnen zu helfen, Datenverluste zu vermeiden. Sie können auch dabei helfen, verwandte Aktionen auszuführen oder Details aufzuschlüsseln, ohne den aktuellen Status der Seite zu unterbrechen. Der größte Vorteil von Modalitäten besteht jedoch darin, dass sie Benutzern helfen, den Kontext des aktuellen Bildschirms beizubehalten. Damit ist nicht nur die Benutzeroberfläche gemeint, sondern auch bearbeitete Eingaben, Bildlaufposition, Status von Akkordeons, Auswahl von Filtern, Sortierung usw.
Manchmal müssen Benutzer eine Auswahl schnell bestätigen (z. B. Filter wie oben gezeigt) und dann sofort fortfahren. Die automatische Speicherung kann natürlich dasselbe bewirken, ist aber nicht immer notwendig oder erwünscht. Und das Blockieren der Benutzeroberfläche ist oft keine gute Idee. Allerdings werden Modalitäten nicht für Aufgaben verwendet. Normalerweise verwenden wir sie für einzelne, eigenständige Aufgaben, bei denen Benutzer einspringen, eine Aufgabe abschließen und dann dorthin zurückkehren, wo sie waren. Es überrascht nicht, dass sie gut für kurze Interaktionen mit hoher Priorität funktionieren (z. B. Warnungen, destruktive Aktionen, schnelle Bestätigungen). Wenn Modalitäten helfen: 🚫 Modalitäten sind oft störend, aufdringlich und verwirrend.🚫 Sie erschweren das Vergleichen und Kopieren und Einfügen.✅ Dennoch ermöglichen Modalitäten den Benutzern, mehrere Kontexte beizubehalten.✅ Nützlich, um irreversible Fehler und Datenverlust zu verhindern.✅ Nützlich, wenn die Weiterleitung von Benutzern auf eine neue Seite störend wäre. ✅ Zeigen Sie ein Modal nur an, wenn Benutzer die Störung wertschätzen. ✅ Bevorzugen Sie standardmäßig nicht blockierende Dialoge („Nichtmodale“). ✅ Ermöglichen Sie Benutzern, den Dialog später zu minimieren, auszublenden oder wiederherzustellen. ✅ Verwenden Sie ein Modal, um Benutzer zu verlangsamen, z. B. um komplexe Eingaben zu überprüfen. ✅ Geben Sie einen Ausweg mit „Schließen“, der ESC-Taste oder klicken Sie außerhalb des Felds. Seiten → Für komplexe, mehrstufige Arbeitsabläufe Assistenten oder die Navigation mit Registerkarten innerhalb von Modalitäten funktionieren selbst in komplexen Unternehmensprodukten nicht besonders gut – dort funktionieren Seitenbereiche oder Schubladen normalerweise besser. Probleme treten auf, wenn Benutzer Datenpunkte vergleichen oder referenzieren müssen. Modalfunktionen blockieren dieses Verhalten, sodass sie stattdessen dieselbe Seite in mehreren Registerkarten erneut öffnen.
Für komplexere Abläufe und mehrstufige Prozesse eignen sich eigenständige Seiten am besten. Seiten funktionieren auch besser, wenn sie die volle Aufmerksamkeit des Benutzers erfordern und ein Verweis auf den vorherigen Bildschirm nicht sehr hilfreich ist. Und Schubladen eignen sich für Unteraufgaben, die für ein einfaches Modal zu komplex sind, aber keine ganzseitige Navigation benötigen. Wann sollten Modalitäten vermieden werden: 🚫 Vermeiden Sie Modalitäten für Fehlermeldungen.🚫 Vermeiden Sie Modalitäten für Funktionsbenachrichtigungen.🚫 Vermeiden Sie Modalitäten für das Onboarding-Erlebnis.🚫 Vermeiden Sie Modalitäten für komplexe, langwierige Aufgaben mit mehreren Schritten.🚫 Vermeiden Sie mehrere verschachtelte Modalitäten und verwenden Sie stattdessen „Prev/Next“.🚫 Vermeiden Sie automatisch ausgelöste Modalitäten, sofern dies nicht unbedingt erforderlich ist. Vermeiden Sie beidesFür wiederkehrende Aufgaben In vielen komplexen, aufgabenintensiven Produkten müssen Benutzer immer wieder dieselben Aufgaben ausführen. Dort sorgen sowohl modale als auch neue Seitennavigation für mehr Reibung, da sie den Fluss unterbrechen oder Benutzer dazu zwingen, fehlende Daten zwischen den verschiedenen Registerkarten oder Ansichten zu sammeln. Allzu oft erleben Benutzer ein fehlerhaftes Erlebnis voller endloser Bestätigungen, übertriebener Warnungen, ausführlicher Anweisungen oder einfach fehlender Referenzpunkte. Wie Saulius Stebulis erwähnte, funktionieren in diesen Szenarien erweiterbare Abschnitte oder die direkte Bearbeitung oft besser – sie halten die Aufgabe auf dem aktuellen Bildschirm verankert. In der Praxis erledigen Benutzer ihre Aufgaben in vielen Szenarien nicht isoliert. Sie müssen Daten nachschlagen, Werte kopieren und einfügen, Einträge an verschiedenen Stellen verfeinern oder einfach ähnliche Datensätze überprüfen, während sie ihre Aufgaben bearbeiten. Overlays und Schubladen sind hilfreicher, um den Zugriff auf Hintergrunddaten während der Aufgabe aufrechtzuerhalten. Dadurch bleibt der Kontext immer an seinem Platz und steht zum Nachschlagen oder Kopieren und Einfügen zur Verfügung. Speichern Sie Modalitäten und Seitennavigation für Momente, in denen die Unterbrechung einen echten Mehrwert darstellt – insbesondere, um kritische Fehler zu vermeiden. Modale vs. Seiten: Ein Entscheidungsbaum Vor einiger Zeit hat Ryan Neufeld einen sehr hilfreichen Leitfaden zusammengestellt, der Designern bei der Auswahl zwischen Modalitäten und Seiten helfen soll. Es enthält ein praktisches PNG-Spickzettel und eine Google-Doc-Vorlage mit Fragen, die in sieben Abschnitte unterteilt sind. Es ist langwierig, äußerst gründlich, aber sehr einfach zu befolgen:
Es mag entmutigend aussehen, aber es ist ein recht einfacher 4-Schritte-Prozess:
Kontext des Bildschirms. Zunächst prüfen wir, ob Benutzer den Kontext des zugrunde liegenden Bildschirms beibehalten müssen. Aufgabenkomplexität und -dauer. Einfachere, fokussierte, nicht ablenkende Aufgaben könnten ein modales Element verwenden, aber lange, komplexe Abläufe benötigen eine Seite. Verweis auf die zugrunde liegende Seite. Anschließend prüfen wir, ob Benutzer häufig auf Daten im Hintergrund verweisen müssen oder ob es sich bei der Aufgabe um eine einfache Bestätigung oder Auswahl handelt. Auswahl des richtigen Overlays. Wenn ein Overlay schließlich tatsächlich eine gute Option ist, hilft es uns bei der Wahl zwischen modal und nichtmodal (in Richtung eines nichtmodalen).
Zusammenfassung Vermeiden Sie nach Möglichkeit das Blockieren der gesamten Benutzeroberfläche. Lassen Sie einen Dialog schweben, der die Benutzeroberfläche teilweise abdeckt, aber Navigation, Scrollen und Kopieren und Einfügen ermöglicht. Oder zeigen Sie den Inhalt des Modals als Seitenschublade an. Oder verwenden Sie stattdessen ein vertikales Akkordeon. Oder bringen Sie Benutzer auf eine separate Seite, wenn Sie viele Details anzeigen müssen. Wenn Sie jedoch die Effizienz und Geschwindigkeit der Benutzer steigern möchten, sollten Sie Modalitäten unbedingt meiden. Nutzen Sie sie, um Benutzer zu entschleunigen, ihre Aufmerksamkeit zu bündeln und Fehler zu vermeiden. Wie Therese Fessenden bemerkte, mag es niemand, unterbrochen zu werden, aber wenn es sein muss, stellen Sie sicher, dass es die Kosten absolut wert ist. Lernen Sie „Smart Interface Design Patterns“ kennen Einen ganzen Abschnitt über Modalitäten und Alternativen finden Sie in Smart Interface Design Patterns, unserem 15-stündigen Videokurs mit Hunderten von praktischen Beispielen aus realen Projekten – mit einem Live-UX-Training später in diesem Jahr. Alles von Mega-Dropdowns bis hin zu komplexen Unternehmenstabellen – jedes Jahr kommen 5 neue Segmente hinzu. Springen Sie zu einer kostenlosen Vorschau. Verwenden Sie den Code BIRDIE, um 15 % Rabatt zu sparen. Lernen Sie Smart Interface Design Patterns kennen, unseren Videokurs zu Interface-Design und UX.
Video + UX-SchulungNur VideoVideo + UX-Schulung495,00 $ 699,00 $
Holen Sie sich Video + UX-Schulung25 Video-Lektionen (15 Stunden) + Live-UX-Schulung.100 Tage Geld-zurück-Garantie.Nur Video300,00 $395,00 $
Holen Sie sich den Videokurs40 Videolektionen (15h). Jährlich aktualisiert. Auch als UX-Bundle mit 2 Videokursen erhältlich.
Nützliche Ressourcen
Verschiedene Arten von Popups, von Anna Kaley Best Practices für das Entwerfen von UI-Modalen, von Uxcel Wir verwenden zu viele verdammte Modalitäten: UX-Richtlinien, von Adrian Egger Modale und nichtmodale Dialoge, von Therese Fessenden Modernes Enterprise-UI-Design: Modale Dialoge, von James Jacobs Modalitäten in Designsystemen
