Zum Hauptinhalt springen

Modales Fenster für kritische Ankündigungen

Überblick​

Ein modales Fenster für kritische Ankündigungen erregt die Aufmerksamkeit des Benutzers für dringende oder wichtige Informationen. Diese Art von modalem Popover unterbricht die Benutzeraktivität, um zu gewährleisten, dass die Benutzer die Nachricht lesen und verstehen. Verwenden Sie das modale Fenster für kritische Ankündigungen, um wichtige Meldungen zu übermitteln, Benutzer vor kritischen Problemen zu warnen oder eine sofortige Aktion oder Bestätigung zu verlangen, bevor der Benutzer fortfahren kann.

Zu verwenden​

Verwenden Sie das modale Fenster für kritische Ankündigungen für folgende Anwendungsfälle:

  • **Wichtige Updates oder dringende Informationen (in „Notfällen“) **, die Auswirkungen auf die Benutzersicherheit oder die Funktionsfähigkeit der Anwendung haben können.
  • Obligatorische Aktionen, die Benutzer ausführen müssen, um die Anwendung weiterhin nutzen zu können.
  • Wichtige rechtliche Informationen, wie z. B. Änderungen der Nutzungsbedingungen oder Datenschutzrichtlinien, die vom Benutzer bestätigt werden müssen.

Nicht zu verwenden​

Verwenden Sie das modale Fenster für kritische Ankündigungen nicht für:

Nicht-kritische Informationen oder gängige Mitteilungen. Die übermäßige Verwendung von modalen Fenstern für kritischer Ankündigungen kann dazu führen, dass Benutzer ihrer überdrüssig werden und sie nicht mehr wichtig nehmen, wenn es wirklich darauf ankommt.

Aufbau​

Aufbau des modalen Fensters für kritische Ankündigungen

Ein modales Fenster für kritische Ankündigungen besteht aus den folgenden Elementen:

  1. Überschrift und Info-Symbol (obligatorisch): Enthält eine H3-Überschrift und ein Warninfo-Symbol.
  2. Hauptteil (obligatorisch): Der Hauptinhaltsbereich des modalen Fensters, in dem die wichtigen Informationen angezeigt werden.
  3. Schaltflächen (obligatorisch): Interaktive Elemente, um auf die Ankündigung zu reagieren. Dies können Schaltflächen zum Quittieren der Meldung, Bestätigen einer Aktion oder Aufrufen von zusätzlichen Informationen, z. B. Dokumenten, sein.
  4. Schließen-Symbol (obligatorisch): Enthält eine Schaltfläche zum Schließen, mit der der Benutzer die Ansicht verlassen kann.
  5. Rand (obligatorisch): Oberer Rand der Karte in Warnfarbe.
  6. Hintergrund-Overlay (obligatorisch): Deckt den Hauptseiteninhalt ab und macht ihn inaktiv, bis die Aufgabe des modalen Fensters ausgeführt oder abgelehnt wurde.

Einstellungen für die Anzeige von Ankündigungen​

Fest codiertes Start- und Enddatum, Häufigkeit​

  • Startdatum: Das Startdatum gibt an, wann die Ankündigung für Benutzer auf der Benutzeroberfläche der Anwendung sichtbar wird. Ankündigungen dürfen den Benutzern nicht vor dem angegebenen Startdatum angezeigt werden.

  • Enddatum: Das Enddatum gibt an, wann die Ankündigung den Benutzern nicht mehr angezeigt werden soll. Sobald das Enddatum erreicht ist, muss die Ankündigung aus der Benutzeroberfläche entfernt werden, um das Anzeigen veralteter Informationen zu vermeiden.

  • Häufigkeitseinstellungen: Die Häufigkeitseinstellungen legen fest, wie oft eine Ankündigung auf der Benutzeroberfläche der Anwendung wiederholt werden soll. Optionen für Intervalle sind: täglich, wöchentlich, monatlich oder benutzerdefiniert.

Allgemeine Richtlinien​

  • Größe: Die Größe eines modalen Fensters sollte auf den Inhalt abgestimmt sein. Machen Sie das Modalfenster nicht zu groß, denn Modale dienen dazu, die Aufmerksamkeit der Benutzer zu fokussieren.
  • Sichtbarkeit: Das modale Popover sollte prominent in der Mitte des Ansichtsfensters des Benutzers angezeigt werden, mit abgedunkeltem Hintergrund, um die Aufmerksamkeit auf die Nachricht zu lenken.
  • Anzahl der Zeichen: Es gibt zwar keine spezielle Zeichenbeschränkung für modale Fenster, aber formulieren Sie die Nachricht klar, prägnant und leicht verständlich. Achten Sie darauf, dass das modale Fenster nur wichtige und relevante Informationen enthält.
  • Schaltfläche „Schließen“: Bieten Sie mehrere Möglichkeiten, das modale Fenster zu verlassen, z. B. mit der Schaltfläche „Schließen“ und der Schaltfläche „Aktion abbrechen“.
  • Navigation: Wenn ein Modal entweder durch Schließen des Modals oder nach einer Aktion verlassen wird, kehrt die Seite je nach Anwendungsfall entweder zum vorherigen Zustand zurück oder navigiert zu einer neuen Seite.
  • Kürze und Klarheit: Formulieren Sie die Botschaft prägnant und auf den Punkt. Die Nutzer müssen die Bedeutung und die Auswirkungen der Ankündigung sofort verstehen.
  • Benutzer-Aktion: Fordern Sie eindeutig zum Handeln auf. Dies kann eine Bestätigung der Informationen, eine erforderliche Aktion oder das Aufrufen zusätzlicher Details sein.

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Komponentenspezifische Richtlinien fürs Schreiben​

Richtlinien zum Schreiben für modale Fenster finden Sie in der Dokumentation zu modalen Komponenten.

Barrierefreiheit​

Achten Sie darauf, dass das modale Fenster für kritische ANkündigungen für Benutzer mit Behinderungen barrierefrei ist. Dies umfasst folgende Maßnahmen:

  • Tastatur-Navigation: Stellen Sie sicher, dass alle interaktiven Elemente innerhalb des modalen Fensters für kritische Ankündigungen, z. B. Schaltflächen und Links, über die Tastatur zugänglich sind. Die Benutzer müssen in der Lage sein, mit der Tab-Taste durch das modale Fenster zu navigieren und Elemente mit der Enter- oder Space-Taste zu aktivieren. Dazu gehört auch die Bereitstellung von Tastenkombinationen, damit Benutzer das modale Fenster verwerfen können.

  • Lesbarer Text: Achten Sie darauf, dass der Text im modalen Fenster einen ausreichenden Kontrast zum Hintergrund aufweist, um die WCAG-Kontrastanforderungen zu erfüllen.

Reaktionsfähigkeit​

Bei Benutzeroberflächen für Mobilgeräte wird das modale Fenster zentriert angezeigt.

Abbildung eines kritischen Ankündigungs-Modalfensters auf einem Mobilgerät

Theming​

Standardmäßig entsprechen Theming und Branding der Anwendung, es sei denn, sie werden überschrieben.

Muster können mit Themes gestaltet werden, um bestimmte Markenanforderungen und Kundenwünsche zu erfüllen. Dazu gehören visuelle Elemente wie Farben, Typografie, Symbole, Schaltflächen und andere Komponenten und grafische Elemente.

Erfahren Sie mehr über das Theming mit Design-Token

Unterstützende Recherche​

Die UX-Designer erstellten dieses Muster nach umfangreicher vergleichender Marktforschung und einer internen Anwendungsfallanalyse. Hierbei wurden fünf Designbibliotheken (Cloudscape, Pega, Atlassian, Primer, Salesforce) sowie drei weitere Tools (Miro, Figma und Jira) geprüft. Es wurden die jeweiligen relativen Stärken und Schwächen untersucht, sich abzeichnende Trends sowie und die wichtigsten Unterschiede identifiziert. Mit diesen Informationen fanden die Designer gängige Praktiken und synthetisierten sie zu einem zusammenhängenden Muster.

Komponenten​

Muster​