Modale Fenster wurden ursprünglich als Warnungen vor wichtigen oder unerlässlichen Ereignissen in Benutzeroberflächen erstellt. Als die Designwelt immer weiter voranschritt, erforschten Unternehmen die vielen Möglichkeiten, die Daten zu sammeln, die sie zur Erweiterung ihres Publikums benötigten. Eine dieser Praktiken waren diese praktischen Pop-up-Fenster (von denen viele den Inhalt der übergeordneten Seite vollständig ausblenden), die in der Folge missbraucht wurden und sich den Wünschen von Designern, Interessengruppen und Vermarktern beugten - leider auf Kosten einer guten Benutzerfreundlichkeit.
Und so geht's.
Niemand wird gerne unterbrochen, aber manchmal ist diese Unterbrechung die Unannehmlichkeiten wert.
Sind Ihre modalen Bildschirme notwendige oder unnötige Unterbrechungen?
Wenn Sie zum Beispiel ein wichtiges Gespräch führen und jemand Sie unterbricht, um Ihnen mitzuteilen, dass jemand in Ihr Auto einbricht oder Ihr Haus brennt, würden Sie sich herzlich bedanken und sofort handeln, um den Notfall zu beheben.
Wenn jedoch jemand das gleiche wichtige Gespräch unterbrechen würde, um Sie nach dem Wetter oder Ihrer Lieblingsfarbe zu fragen, würden Sie sich wahrscheinlich über eine solche unnötige Einmischung ärgern.
Das Gleiche gilt für modale Dialoge (oder Dialoge). Wenn sie richtig eingesetzt werden, sind sie Lebensretter (zumindest für den Benutzer); wenn sie missbraucht werden, sind sie lästig, behindern den Arbeitsablauf und schaden der Benutzererfahrung.
In unserem heutigen Artikel erklären wir, was ein modales Fenster ist und warum es wichtig ist, dass ihre Verwendung Ihren Nutzern und Besuchern Respekt entgegenbringt, um ideale UX-Best-Practices aufrechtzuerhalten.
Modalität und UX
Wenn es um die Modalität geht, sollten UX-Designer immer besonderen Respekt vor dem Arbeitsablauf des Benutzers zeigen und ihn nur mit wesentlichen Informationen unterbrechen.
Da die Nielsen Norman Gruppe Staaten:
Modale Dialoge unterbrechen den Benutzer und fordern ihn zu einer Handlung auf. Sie sind geeignet, wenn die Aufmerksamkeit des Benutzers auf wichtige Informationen gelenkt werden muss.
Was "wichtige Informationen" sind, kann bestenfalls umstritten sein. Für ein optimales Nutzererlebnis sollte diese Entscheidung jedoch in den Händen des Nutzers liegen. Wenn Sie das Grundkonzept nicht respektieren können oder unsicher sind, was Wesentlich für Ihre Benutzer bedeutet, können einfache Tests die Daten liefern, die notwendig sind, um die angemessene Verwendung modaler Fenster zu steuern.
Was ist Modalität?
Ein modales Fenster erscheint innerhalb oder oberhalb des übergeordneten Bildschirms, wodurch alle funktionalen Elemente der Seite inaktiv werden. Das modaler Dialog soll die Benutzer auf ein bestimmtes Ereignis aufmerksam machen und erfordert eine Benutzerinteraktion, um das Fenster zu schließen, bevor die Interaktion mit dem Inhalt oder der Software wie zuvor fortgesetzt werden kann.
Modalität in Aktion
Es ist recht einfach zu erkennen, wie wichtig eine Speichern-Dialog modale Fenster ist. Wenn dieses modale Fenster erscheint, werden Sie gefragt, ob Sie die an einem Dokument vorgenommenen Änderungen vor dem Schließen speichern möchten. Wir alle sind schon Opfer verlorener Arbeit geworden, weil wir es versäumt haben, Dokumente zu speichern, daher ist diese Option eine willkommene Hilfe für alle, die wichtige Dokumente erstellen. Mit den Optionen "Speichern", "Abbrechen" oder "Nicht speichern", bevor Sie fortfahren können, kann die Entscheidung den Betrieb aufhalten, aber sie ist es wert. Jeder, der schon einmal den Frust über verlorene Arbeit erlebt hat, wird froh sein, dass seine Arbeit durch dieses vom System initiierte modale Fenster geschützt wird.
Am anderen Ende der Skala ist ein Pop-up, das ein paar Sekunden nach dem Besuch einer neuen Webseite erscheint und Sie auffordert, sich in die Mailingliste einzutragen oder sich mit Benachrichtigungen belästigen zu lassen, bevor Sie zu dem Inhalt gelangen, den Sie lesen möchten, nicht ganz so wichtig für den Benutzer. Es ist eine kleine Unannehmlichkeit, aber dennoch eine Unannehmlichkeit, die es im UX-Design nicht verdient, den Arbeitsablauf des Nutzers zu unterbrechen.
Als zusätzliche Option zum Sammeln neuer Kontakte kann man verstehen, warum Marketer diese Aktion lieben, aber was die UX angeht, gibt es starke Argumente über die richtige Verwendung einer solchen Komponente und eine Debatte darüber, wie die Funktion missbraucht wird.
Arten von Modalitäten
Modale Dialoge
Die folgenden Beispiele zeigen, wie modale Fenster in den heutigen digitalen Umgebungen eingesetzt werden:
- Pop-ups und Leuchtkästen, die den gesamten Bildschirm ausfüllen
- Warnungen und Benachrichtigungen (einschließlich des lebensrettenden Dialogfelds zum Speichern und anderer modaler Bildschirme, die Benutzerfehler verhindern)
- Warnhinweise und Anweisungen in der Software und im Browser
- Komplexe Handlungsoptionen und Arbeitsabläufe
- Erfassung der erforderlichen Eingabedaten, wie z. B. Kontoanmeldungen und Zahlungsmethoden, oder Gewährung des Zugriffs auf Handykameras, Fotoalben usw.
- Einige Tooltips
- Bestätigung einer Aktion, z. B. wenn ein Formular erfolgreich abgeschickt wurde
- Onboarding-Assistenten oder Benachrichtigungen über neue Funktionen beim Öffnen einer Anwendung oder Website
- Marketinganfragen, wie z. B. Newsletter-, Konto- und Rabatt-/Angebotsanmeldungen
Modeless-Dialoge
Als UX-Forscher wollen wir die Beteiligung der Nutzer fördern, ohne jedoch den Fluss oder die Freude der Nutzer an unseren Produkten zu beeinträchtigen.
Die Alternativen zu modalen Fenstern sind Optionen, die die gleiche Aufgabe erfüllen können, ohne so aufdringlich zu sein und den Inhalt der übergeordneten Seite zu blockieren. Bekannt als modellfreie Dialogfenster oder nicht modale FensterDiese Optionen nehmen nicht den gesamten Bildschirm und die Benutzeroberfläche ein und erscheinen im Allgemeinen auf derselben Seite. Sie lassen dem Benutzer die Freiheit, mit dem fortzufahren, was er gerade tut, und ignorieren alle zusätzlichen Anfragen oder verschieben sie auf später.
Auf mobile GeräteWenn der Platz begrenzt ist, können ein modales Fenster und ein nichtmodales Fenster sehr ähnlich aussehen, da beide wahrscheinlich den gesamten Bildschirm für die Anzeige ihrer Nachricht einnehmen werden. Der Hauptunterschied liegt jedoch in der Navigationsleiste und der Kopfzeile, die bei nichtmodalen Fenstern sichtbar bleiben. Bei modalen Bildschirmen gibt es eine eigene Kopf- oder Fußzeile mit Optionen zum Abbrechen oder Fortschreiten, indem die angeforderten oder erforderlichen Eingaben gemacht werden; bei nichtmodalen Fenstern bleibt die Navigationsleiste intakt und ermöglicht viele der gleichen Optionen wie zuvor.
Wie sieht ein nichtmodales Fenster im Vergleich zu einem modalen Bildschirm aus? Hier sind ein paar Beispiele, die Sie wahrscheinlich täglich sehen und verwenden:
- Dialogfelder auf der Seite, wie z. B. Chat-Felder und Suchfunktionen
- Inline-Warnungen, z. B. bei fehlerhaften Formularfeldeingaben
- Informationen über die Schaltfläche "Externer Link" auf einer separaten Seite platzieren
- Inline-Eingaben, Umfragen und Kommentarfelder
- Inline-Diashows und Video-Player
- Cookies-Benachrichtigungen in einer Pop-up-Leiste oben oder unten auf der Seite
- Bereitstellung von sichtbarem On-Page-Inhalt
- Registerkarten-Menüs
- Akkordeons
- Pop-Out für E-Mail-Nachrichten erstellen
- Suchfelder
- Pop-out Dialoge in der Seitenleiste
Vorteile der Verwendung modaler Fenster
- Benutzerorientierung ? Modale Fenster sorgen dafür, dass sich der Benutzer auf das konzentriert, was der Seitengestalter für am wichtigsten hält, und weisen ihn auf kritische Ereignisse in Bezug auf den Inhalt oder die Bedienung hin.
- Abschluss der Aufgabe ? Der Designer enthält ein modales Fenster, das Informationen zum Abschluss eines Prozesses anfordert, wie z. B. eine Kontoanmeldung, ohne die der Workflow oder die digitale Reise nicht fortgesetzt werden kann.
- Fehlervermeidung ? Auch hier handelt es sich um einen wichtigen modalen Bildschirm, der kritische Fehler verhindert, indem er die Aufmerksamkeit des Benutzers auf eine wichtige Entscheidung lenkt.
- Modale Szenen, die komplexe Arbeitsabläufe in überschaubare Schritte unterteilen ? Beim Desktop-Publishing zum Beispiel zeigen modale Fenster dem Benutzer eine Reihe von Optionen zur Anwendung von Formatierungen, Filtern oder anderen Einstellungen an.
Herausforderungen und Nachteile
- Frustration der Benutzer ? Unnötige Pop-ups unterbrechen den Fluss des Nutzers und führen oft dazu, dass er seine Konzentration oder seinen Platz in einem Dokument verliert, oder sie lenken ihn völlig von dem ab, was er gerade tut.
- Unnötige Unterbrechungen ? Das Hinzufügen einer irrelevanten Aufgabe zum aktuellen Vorgang des Benutzers ist unangenehm und lenkt ab.
- Sie blockieren den Zugang zu Inhalten ? Die Deaktivierung der übergeordneten Seite könnte den Benutzer daran hindern, auf die notwendigen Informationen zuzugreifen, die er benötigt, um die im modalen Fenster gestellte Anfrage zu erfüllen.
- Bedenken hinsichtlich der Zugänglichkeit ? Barrierefreiheit ist ein zentrales Thema bei modalen Fenstern. Kann jeder, unabhängig von seiner persönlichen Situation, durch die Unterbrechung navigieren, sich darauf einlassen oder sie ignorieren?
Bewährte Praktiken für die Implementierung von Modalitäten
Wir würden gerne vorschlagen, dass die besten Praktiken der gesunde Menschenverstand sein sollten, aber wir wissen, wie sehr Interessenvertreter und zielgerichtete Vermarkter es lieben, die Aufmerksamkeit der Nutzer mit ihren neuesten Werbeaktionen oder Datenerhebungen zu erregen.
Um sicherzustellen, dass modale Bildschirme mit gesunden UX-Werten arbeiten:
- einen klaren und entscheidenden Zweck haben ? In Anbetracht der Ablenkung, die modale Vollbildansichten mit sich bringen, sollten Sie sicherstellen, dass Sie die Konzentration oder den Kontakt Ihrer Nutzer mit dem Hauptbildschirm nicht unnötig unterbrechen.
- Benutzerkontrolle ? Wenn Sie eine modale Ansicht verwenden müssen, stellen Sie sicher, dass die Benutzer sie leicht wieder schließen können. Den Nutzern die Kontrolle darüber zu geben, wie sie Inhalte konsumieren und Informationen bereitstellen, sollte eine hohe Priorität bei Ihrem UX-Design sein.
- Zugänglichkeitsmerkmale ? Stellen Sie sicher, dass jede modale Aufgabe die notwendige Kennzeichnung, den Zugang und die Bedienung für Tastaturbenutzer und Bildschirmleser bietet. Es ist auch wichtig, den letzten aktiven Zustand des Benutzers zu speichern, damit er dort weitermachen kann, wo er aufgehört hat, sobald solche Modals erledigt sind.
- Prüfung und Rückmeldung ? In Anbetracht der Bedeutung von Iterationen bei Benutzertests und dem Sammeln von Feedback durch regelmäßige UX-Forschung, sollten wir Ihnen nicht sagen müssen, wie wichtig dies ist. Unsere Nutzer sollten im Mittelpunkt aller User Journeys stehen.
Schlussfolgerung
Wenn sie richtig eingesetzt werden, können modale Fenster unglaublich positiv und effektiv sein. Sie spielen eine wichtige Rolle in Softwarepaketen, SaaS, Websites und Anwendungen. Wie wir jedoch bereits erörtert haben, kann die übermäßige Verwendung von Modalfenstern schwerwiegende Nachteile für die Benutzererfahrung haben, wenn sie ohne Respekt für unsere Benutzer und Website-Besucher verwendet werden.
Um ein positives UI-Design-Erlebnis zu gewährleisten, müssen wir verstehen, was wichtig genug ist, um den Zugriff auf den Inhalt zu beschränken, bis der Benutzer explizit mit dem modalen Dialog interagiert. Wir können zwar verschiedene Entscheidungsframeworks heranziehen, um zu prüfen, ob ein modales Fenster wirklich notwendig ist, aber der beste Weg, um die Wünsche des Nutzers zu erfüllen, ist vielleicht, wie bei jeder guten UX-Forschung, ihn zu fragen.
Unsere Experten für Nutzerforschung stehen Ihnen zur Verfügung, um Ihre Kunden näher kennenzulernen. Wenn Sie ein unverbindliches Gespräch vereinbaren möchten, kontaktieren Sie uns per E-Mail unter hello@ux247.com oder teilen Sie uns Ihren Bedarf über das untenstehende Formular mit.
