Version:

Popover ​

Popovers zeigen bei Bedarf weitere Informationen zu einem Objekt an.

Overview ​

Intro ​

Das Popover zeigt weitere Informationen zu einem Objekt in einer kompakten Art und Weise an, ohne dass der Dialog verlassen werden muss. Das Popover kann verschiedene GUI-Elemente wie Key-Value-Facets, Fließtext, Bilder oder Diagramme beinhalten. Aktionen können ebenfalls in einer Funktionsleiste im unteren Bereich angezeigt werden.

broken_image
Figma

Popover

Verwendung ​

👍 Do👎 Don't
... wenn Zusammenfassungen zu einem Objekt angezeigt werden sollen.
... wenn eine Vorschau auf ein Dokument angezeigt werden soll.
... wenn in einer Tabelle für eine Zelle weitere Informationen angezeigt werden sollen.		... wenn umfangreiche Informationen zu einem Objekt angezeigt werden sollen, verwende dazu einen eigenen Dialog.
... wenn zu einer gesamten Zeile in einer Tabelle zusätzliche Informationen angezeigt werden sollen, verwende dazu eine aufklappbare Tabellenzeile (Item-Details).
... wenn Tipps zu einer Taste oder einem Eingabefeld anzeigt werden soll, verwende dazu Tooltips.

Guidelines ​

Aufbau ​

1. Titelleiste inkl. Überschrift und Schließen-Icon-Button (optional)

Nutze die Titelleiste um Informationen zum angezeigten Objekt zu kommunizieren.

2. Inhalt

Der Inhalt ist frei gestaltbar. In den meisten Fällen reichen jedoch einfache Name-Wert-Facetten Gruppen.

3. Pfeilspitze

Die Pfeilspitze zeigt immer auf das Element, zu dem die Informationen gehören. Das Popover lässt sich in Bezug auf seine Position (rechts, links, oben und unten) zum Objekt, auf das es sich bezieht, konfigurieren.

4. Funktionsleiste (Optional)

Bei Bedarf können den Nutzern Aktionen angeboten werden.

broken_image
Figma

Aufbau

Varianten/Typen ​

Standard ​

Die Standard Variante kann frei konfiguriert werden.

broken_image
Figma

Varianten Standard

Walkthrough ​

Die Walkthrough-Variante dient dazu, Nutzern ein Onboarding in den Applikationen zu bieten und auf Features aufmerksam zu machen.

INFO

Ausblick
Detaillierte Tipps zur Umsetzung von Onboardings sind in Form eines Musters in Arbeit. ​

broken_image
Figma

Variante Walkthrough

Verhalten ​

1. Anzeigen

Popovers werden durch einen Klick oder Tap auf die dazugehörigen Indikatoren geöffnet. Indikatoren sind in der Regel Texte, die wie Links aussehen.

2. Schließen

Popovers können auf unterschiedliche Weise geschlossen werden:

  • Durch eine explizite Schließen-Taste, wenn die Titelleiste angezeigt wird.
  • Durch Drücken der Escape-Taste.
  • Durch Scrollen der Seite.
  • Durch einen Klick oder Tap außerhalb des Popover.
    broken_image
    Figma

Popovers anzeigen und schließen

Barrierefreiheit ​

Popovers halten den Fokus gefangen. Das bedeutet, dass die Nutzer über die Tabulatortaste ("Tab) oder Hochstell- und Tabulatortaste ("Shift + Tab") den Fokus ausschließlich über die Inhalte vom Popover verschieben können. Inhalte aus der dahinter liegenden Seite lassen sich mehr fokussieren.

Inhalte hinter dem Popover dürfen von assistierenden Technologien nicht mehr vorgelesen werden. Die beste Art um das sicherzustellen, ist, dem Popover und den Inhalten im Hintergrund unterschiedliche Container zu geben, welche über das aria\-hidden entsprechen ihrer Zustände gekennzeichnet sind. Das Popover sollte zudem die role=dialog besitzen.