Zum Hauptinhalt springen

Ankündigungsbanner

Überblick​

Das Ankündigungsbanner informiert die Benutzer über bevorstehende Änderungen, Aktualisierungen oder Migrationen. Dieses prominente visuelle Element wird strategisch oben auf einer Webseite positioniert. Es informiert die Benutzer über bevorstehende Änderungen an der Plattform, die sich auf ihre Interaktion auswirken könnten. Verwenden Sie das Ankündigungsbanner, um einen reibungslosen Übergang sicherzustellen und mögliche Störungen der Benutzererfahrung zu minimieren.

Zu verwenden​

Verwenden Sie das Ankündigungsbanner für:

  • Wichtige Aktualisierungen oder Änderungen, die für die Plattform geplant sind, z. B. Neugestaltungen der Benutzeroberfläche, Funktionserweiterungen oder Infrastrukturmigrationen.
  • Geplante Wartungsfenster oder Ausfallzeiten, die Auswirkungen auf die Erreichbarkeit der Plattform haben können.
  • Hinweise zur Migration auf neue Systeme, Technologien oder Plattformen, zusammen mit allen eventuell erforderlichen Maßnahmen auf Benutzerseite.

Nicht zu verwenden​

Verwenden Sie das Ankündigungsbanner nicht für:

  • Kleinere oder routinemäßige Updates, die die Interaktion der Benutzer mit der Plattform wahrscheinlich nicht wesentlich beeinträchtigen.
  • Kritische Warnungen, die ein sofortiges Handeln der Benutzer erfordern. Verwenden Sie aufdringlichere Kommunikationsmethoden, z. B. ein modales Fenster für kritische Ankündigungen.
  • Unwichtige Informationen oder Werbebotschaften, die in keinem Zusammenhang mit bevorstehenden Änderungen, Aktualisierungen oder Migrationen stehen.

Aufbau​

Aufbau des Ankündigungsbanners

Ein Ankündigungsbanner besteht aus den folgenden Elementen:

  1. Überschrift und Info-Symbol (obligatorisch): Enthält eine H3-Überschrift und ein Warninfo-Symbol.
  2. Hauptinhalt (obligatorisch): Der Hauptinhaltsbereich des Banners, in dem die Ankündigung an die Benutzer übermittelt wird.
  3. Schaltflächen (optional): Interaktive Elemente, um auf die Ankündigung zu reagieren. Dies können Schaltflächen zum Bestätigen einer Aktion oder zum Aufrufen von zusätzlichen Informationen sein.
  4. Ablehnung (obligatorisch): Enthält eine Schaltfläche zum Schließen, mit der der Benutzer die Ansicht verlassen kann.

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​

  • Breite: Das Banner hat eine Breite von 100 % und wird unter der Navigation angeheftet. Zusätzlicher Text, der über die Breite des Containers hinausgeht, wird in die nächste Zeile umbrochen, um Informationsverlust zu verhindern.
  • Höhe: Die Höhe eines Bannercontainers kann je nach Menge des darin eingefügten Inhalts variieren.
  • Anzahl der Zeichen: Streben Sie etwa 160 Zeichen an.
  • Position: Positionieren Sie das Banner oben auf der Seite, damit es gut zu sehen ist.

Beispiel für ein Ankündigungsbanner

Verhalten​

  • Das Banner verschiebt den Seiteninhalt nach unten.
  • Im Gegensatz zu modalen Overlay-Fenstern ist das Ankündigungsbanner in der Regel nicht modal. Es blockiert nicht die Interaktion mit anderen Seitenelementen und ist in der Regel so angelegt, dass es neben dem Seiteninhalt vorhanden ist und wichtige Informationen oder Ankündigungen bereitstellt, ohne den Arbeitsablauf des Benutzers zu unterbrechen.
  • Das Ankündigungsbanner wird standardmäßig nicht wieder angezeigt. In seltenen Fällen kann das Banner nach Ablauf von x Tagen wieder angezeigt werden.

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.

Halten Sie die Botschaft klar, prägnant und leicht verständlich​

Kommunizieren Sie eindeutig, welche Änderungen bevorstehen, wann sie eintreten werden und wie die Benutzer davon betroffen sein werden.

Barrierefreiheit​

Achten Sie darauf, dass das Ankündigungsbanner für Benutzer mit Behinderungen durch folgende Maßnahmen zugänglich ist:

  • Tastatur-Navigation: Stellen Sie sicher, dass alle interaktiven Elemente innerhalb des Ankündigungsbanners, 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 Banner 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​

Mobile Benutzeroberflächen​

Auf Mobilgeräten geht das Seitenbanner am oberen Bildschirmrand über die gesamte Breite eines Layouts.

Abbildung des Ankündigungsbanners auf einem Mobiltelefon

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​