Zum Hauptinhalt springen

Informatives Popover

Überblick​

Das informative Popover bietet Benutzern kontextbezogene Orientierungshilfe. Es informiert die Benutzer über verschiedene Funktionen oder Prozesse in der Anwendung. Nutzen Sie das informative Popover, um das Verständnis und die Interaktion der Benutzer zu verbessern.

Zu verwenden​

Verwenden Sie das informative Popover für:

  • Onboarding neuer Benutzer in die App und Einarbeitung in die wichtigsten Features und Funktionen.
  • Einführung neuer Funktionen oder Aktualisierungen für bestehende Benutzer, damit diese neue Funktionen entdecken und verstehen können.
  • Einbindung der Benutzer und Förderung der Erkundung verschiedener Bereiche der App.
  • Schritt-für-Schritt-Anleitung für die Benutzer durch komplexe Aufgaben oder Prozesse mit kontextbezogenen Tipps und Anweisungen.

Nicht zu verwenden​

Verwenden Sie das informative Popover nicht für:

  • Unkomplizierte oder intuitive Benutzeroberflächen, bei denen keine zusätzliche Anleitung erforderlich ist.
  • Kritische Aktionen, die sofortige Aufmerksamkeit erfordern oder nachteilige Folgen haben können, wenn sie missverstanden werden. Erwägen Sie die Verwendung eines Modals für kritische Ankündigungen.

Aufbau​

Abbildung des Aufbaus eines informativen Popovers

Ein informatives Popover besteht aus den folgenden Elementen:

  1. Überschrift (optional): Enthält eine H4-Überschrift.
  2. Hauptteil (obligatorisch): Der informative Hauptinhalt des Popovers.
  3. Verknüpfung (optional): Stellt zusätzliche Informationen bereit oder leitet den Benutzer zu einer zugehörigen Ressource weiter, sodass er weitere Details über den unmittelbaren Inhalt des Popovers hinaus erkunden kann.
  4. Stepper (optional): Führt den Benutzer nacheinander durch eine Abfolge von Schritten oder Anweisungen.
  5. Schließen-Schaltfläche (obligatorisch): Enthält eine Schaltfläche zum Schließen, mit der der Benutzer die Ansicht verlassen kann.
  6. Indikator (obligatorisch): Visuelle Anzeige, die auf die Position auf der Seite verweist, auf die sich der Anweisungsinhalt bezieht.

Position​

Es gibt vier Platzierungsoptionen für das informative Popover:

  • Oben: Das Popover wird über dem entsprechenden Element angezeigt.
  • Unten (Standard): Das Popover wird unter dem entsprechenden Element angezeigt.
  • Links: Das Popover wird links neben dem entsprechenden Element angezeigt.
  • Rechts: Das Popover wird rechts neben dem entsprechenden Element angezeigt.

Bei Auslösung sollten informative Popover den Inhalt idealerweise nicht auf der Seite nach unten verschieben. Stattdessen sollten sie den vorhandenen Inhalt überlagern oder sich relativ zu dem Seitenelement positionieren, für das sie eine Anleitung bereitstellen.

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​

  • Häufigkeit der Anwendung und Wirkung: Vermeiden Sie die übermäßige Verwendung von Popovern, da sie aufdringlich werden und die Benutzererfahrung stören können, wenn sie zu häufig angezeigt werden.
  • Größe: Ein Popover hat eine Standardbreite von 280 Pixeln, kann aber an verschiedene Größen angepasst werden.
  • Anzahl der Zeichen: Streben Sie etwa 160 Zeichen an.
  • Hintergrund-Overlay: Das Hintergrund-Overlay ist optional.
  • Konsistenz: Achten Sie auf Konsistenz beim Design und der Platzierung von Popovern auf verschiedenen Seiten und in verschiedenen Kontexten innerhalb der Anwendung, um eine einheitliche Benutzererfahrung zu bieten.

Verhalten​

Auslösesystem für informative Popover​

Dies sind die verschiedenen Auslöser und Szenarien für die Anzeige von informativen Popovern:

  • Erstmaliger Besuch: Wird automatisch ausgelöst, wenn ein Benutzer eine Seite oder einen Abschnitt zum ersten Mal besucht, um eine erste Anleitung zu geben.
  • Klick auf die Schaltfläche (löst ein Popover nach der Navigation aus): Ein Schaltflächenklick, der oft mit Aktionen wie „Weiter“, „Fortfahren“ oder „Mehr erfahren“ gekennzeichnet ist, kann beim Klicken auf ein informatives Popover ausgelöst werden. Das informative Popover kann sofort nach der Navigation zur nächsten Seite oder zum nächsten Abschnitt angezeigt werden und bietet Benutzern Anweisungen, Tipps oder wichtige Informationen, die für den von ihnen eingegebenen neuen Kontext relevant sind.
  • Klick auf die Schaltfläche (löst ein Popover vor der Navigation aus): Wenn auf die primäre Schaltfläche geklickt wird, kann sofort ein informatives Popover angezeigt werden, um Informationen oder Anweisungen bereitzustellen. Nachdem der Benutzer das Popover gelesen und mit ihm interagiert (es z. B. schließt), kann die Navigation zur nächsten Seite fortgesetzt werden.
  • Schwebend-Aktion: Wenn Sie den Mauszeiger über bestimmte Elemente wie Symbole bewegen, kann das Popover ausgelöst werden, um Kontextinformationen bereitzustellen.
  • Element-Fokus: Wenn ein Benutzer mithilfe der Tastatur zu einem bestimmten Element navigiert, kann das Popover mit relevanten Informationen angezeigt werden.
  • Abschluss einer Aktion: Nach Abschluss einer Aktion, z. B. dem Ausfüllen eines Formulars oder dem Beenden einer Aufgabe, kann ein Popover angezeigt werden, das den Benutzer zu den nächsten Schritten führt.
  • Aufeinanderfolgende Schritte: Teil eines mehrstufigen Lernprogramms, bei dem das Abschließen eines Schritts automatisch das nächste Popover in der Sequenz auslöst.

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.

Eindeutigkeit der Anweisung​

Stellen Sie sicher, dass die Anweisungen im Popover eindeutig, prägnant und für die Zielgruppe leicht verständlich sind. Verwenden Sie einfache Sprache und vermeiden Sie Fachjargon oder komplexe Terminologie, die Lernende verwirren könnten.

Progressive Offenlegung​

Wenden Sie einen progressiven Offenlegungsansatz an, bei dem Informationen oder Schritte schrittweise enthüllt werden, um zu verhindern, dass die Lernenden mit zu vielen Inhalten auf einmal überfordert werden. Beginnen Sie mit den wichtigsten oder grundlegenden Informationen und bieten Sie im Laufe der Zeit weitere Details an.

Barrierefreiheit​

Achten Sie darauf, dass das informative Popover für Benutzer mit Behinderungen barrierefrei ist. Dies umfasst folgende Maßnahmen:

  • Tastatur-Navigation: Stellen Sie sicher, dass alle interaktiven Elemente innerhalb des informativen Popovers, z. B. Schaltflächen, Links oder Stepper, über die Tastatur zugänglich sind. Die Benutzer müssen in der Lage sein, mit der Tab-Taste durch das Popover zu navigieren und Elemente mit der Enter- oder Space-Taste zu aktivieren. Dazu gehört auch die Bereitstellung von Tastenkombinationen, damit Benutzer das Popover verwerfen können.
  • Lesbarer Text: Achten Sie darauf, dass der Text im Popover einen ausreichenden Kontrast zum Hintergrund aufweist, um die WCAG-Kontrastanforderungen zu erfüllen.

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​