Master-Detail-Layout

Overview

Hinweis:

Das Master-Detail Layout wird aktuell für die Listenseite vertikal eingesetzt. Da es sich um ein neues technisches Layout handelt, wird es zukünftig auch für weitere Anwendungsfälle eingesetzt, die zu einem späteren Zeitpunkt analysiert werden.

Intro

Das Master-Detail Layout ist eine Layout-Komponente, die eine Oberfläche vertikal oder horizontal in zwei Container aufteilt – einen Master- und einen Detailbereich. Die Komponente definiert ausschließlich das strukturelle Verhalten der beiden Container, nicht deren Inhalt. Der Detailbereich wechselt responsiv in einen Overlay, wenn nicht genügend Platz vorhanden ist.

broken_image

Master Detail Layout

Verwendung

👍 Do

👎 Don't

…wenn mehrere Inhalte (z.B. eine Master-Detail-Struktur) auf einer Seite dargestellt werden sollen z. B. Liste links und Detail rechts, die responsiv auch als Overlay dargestellt werden soll. …wenn das Layout responsiv auf kleinere Bildschirme reagieren soll und der Detailbereich bei Platzmangel als Overlay dargestellt werden kann. ...wenn das Layout die technische Grundlage für die Listenseite bildet.

...…wenn mehrere zusammengehörige Elemente in einer Zeile horizontal angeordnet werden sollen – verwende dazu das Horizontal Layout. ...wenn der Detailbereich so komplex ist, dass er die volle Seitenbreite benötigt.wenn zwei Bereiche nebeneinander liegen und deren Größe veränderbar sein soll – verwende dazu das Split Layout. …wenn es um die Grundstruktur der ganzen Anwendung geht (Header, Navigation, Content-Bereich) – verwende dazu das App Layout.

Guidelines

Hinweis:

Das Master-Detail Layout wird aktuell für die Listenseite eingesetzt. Die vorliegende Dokumentation bezieht sich daher primär auf diesen Anwendungsfall. Da es sich um ein neues technisches Layout handelt, wird es zukünftig auch für weitere Anwendungsfälle eingesetzt – die entsprechende Dokumentation folgt zu einem späteren Zeitpunkt.

Aufbau

broken_image Figma	Master-Detail-Layout 2 Bereiche
broken_image Figma	Master-Detail-Layout 3 Bereiche

Aufbau:

• 1: Der Master-Bereich enthält die Übersichtsansicht, z. B. eine Liste.
• T: Zwischen Master- und Detail-Bereich befindet sich eine Trennlinie . Die Breite der Bereiche ist fest definiert und kann vom Nutzer nicht manuell verändert werden.
• 2 & 3: Die Detail-Bereiche zeigen die Inhalte des ausgewählten Eintrags an.
  
  
  
  
  
  
  
  LÖSCHEN: Über das Schließen-Icon (×) in der Detail-Toolbar können die Detail-Bereich explizit ausgeblendet werden – werden alle Detail-Bereiche ausgeblendet, wird die Selektion im Master-Bereich aufgehoben.

Hinweis

: Das Aus- und Einblenden der Detail-Bereiche wird über Elemente innerhalb der Container gesteuert, z. B. über einen Schließen-Button. Diese sind nicht Teil des Layouts selbst und werden auf Produktebene implementiert. Siehe Listenseite für ein Beispiel.

Overlay-Breakpoint

Für jeden Bereich kann entweder eine feste Größe oder eine Mindestgröße angegeben werden. Der Bereich mit einer Mindestgröße nimmt den verbleibenden Platz neben dem Bereich mit fester Größe ein. Wenn der verfügbare Platz kleiner ist als die Mindestgröße, wird der Detailbereich als Overlay dargestellt.

Hinweis:

Das Verhalten des Layouts hängt stark von den konfigurierten Mindestgrößen und Breakpoints der einzelnen Bereiche ab. Je nachdem welche Mindestgrößen gesetzt sind, kann sich das Layout sehr unterschiedlich verhalten – z. B. ob ein Bereich als Overlay dargestellt wird oder sichtbar bleibt, und in welcher Reihenfolge die Bereiche in den Overlay-Modus wechseln. Es ist daher wichtig, die Konfiguration pro Anwendungsfall sorgfältig zu prüfen und zu testen.

Die zwei gängigsten Konfigurationen sind:

• Flexibler Master-Bereich mit Mindestgröße, neben einem Detail-Bereich mit fester Größe
• Master-Bereich mit fester Größe, neben einem flexiblen Detail-Bereich mit Mindestgröße

Wenn beide Bereiche als flexibel konfiguriert sind, bestimmt derjenige Bereich den Overlay-Breakpoint, der zuerst seine Mindestgröße erreicht.

Das UX Team empfiehlt folgende Verteilungen bei zwei Bereichen:

Master-Bereich	Detail-Bereich	Typischer Einsatz
33%	66%	Liste mit breitem Detailbereich (Standard)
66%	33%	Liste mit schmalem Detailbereich
50%	50%	Gleichwertige Darstellung beider Bereiche

Die Wahl der Verteilung liegt auf Produktebene und sollte sich nach der Komplexität der darzustellenden Inhalte richten.

Verhalten

Responsives Verhalten

Wenn der verfügbare Platz kleiner ist als die definierte Mindestgröße des Master-Bereichs, wechselt der Detail-Bereich automatisch in den Overlay-Modus und öffnet sich als Drawer von rechts.

Figma

Master Detail Layout Drawer Mode

Stack-Modus

Standardmäßig öffnet sich der Detail-Overlay als Drawer von der rechten Seite des Layouts. Im Stack-Modus werden die beiden Bereiche „gestapelt" dargestellt, wobei der Detailbereich den Master-Bereich vollständig überlagert, wenn er als Overlay dargestellt wird.

broken_image

Figma

Master Detail Layout Stack Mode

Erzwungener Overlay-Modus

Das Layout kann so konfiguriert werden, dass der Detailbereich unabhängig von den Mindestgrößen immer als Overlay dargestellt wird – entweder als Drawer oder als Stack.

Schließen des Detail-Bereichs

Das Master-Detail Layout stellt kein eingebautes Schließen-Element bereit – das Schließen des Detail-Bereichs liegt auf Produktebene und muss innerhalb des Containers implementiert werden. Es ist jedoch wichtig, dass immer eine Möglichkeit zum Schließen vorhanden ist, da der Nutzer sonst nicht mehr aus dem Detail-Bereich herauskommt – besonders im Stack-Modus auf kleinen Bildschirmen.

Folgende Möglichkeiten stehen zur Verfügung:

• Schließen-Button innerhalb des Detail-Bereichs (empfohlen, z. B. als Icon-Button in der Detail-Toolbar)
• Klick auf den Backdrop (nur im Overlay-Modus, muss explizit implementiert werden)
• Drücken der Escape-Taste innerhalb des Detail-Bereichs (muss explizit implementiert werden)
  broken_image
  Figma

Backdrop

Größen festlegen

Die Eigenschaften "masterSize" und "detailSize" definieren die Größe der jeweiligen Bereiche. Wenn die kombinierte Größe von Master- und Detailbereich den verfügbaren Platz überschreitet, wechselt der Detailbereich in den Overlay-Modus.

Verschachtelte Layouts

Hinweis:

Die Anzahl der verschachtelten Ebenen ist technisch nicht limitiert. Das UX Team empfiehlt jedoch, nicht mehr als 3 Ebenen zu verwenden, da die Komplexität für den Nutzer sonst schnell unübersichtlich wird. Ob in Ausnahmefällen eine 4. Ebene sinnvoll ist, muss pro Anwendungsfall geprüft werden.

Master-Detail Layouts können ineinander verschachtelt werden, um eine mehrstufige Navigation zu ermöglichen – z. B. Liste links, Objektseite in der Mitte, Formularseite rechts.

Beim Verschachteln kann es sinnvoll sein, die "detailSize"-Eigenschaft wegzulassen, damit die Layouts die Detailgröße automatisch anhand der Mindestgröße des Inhalts berechnen. In diesem Fall gibt jeder verschachtelte Detailbereich seine Mindestgröße an die übergeordneten Ebenen weiter – wenn der Platz knapp wird, kollabieren die äußersten Ebenen zuerst in Overlays, während die innersten Ebenen so lange wie möglich vollständig sichtbar bleiben.

Im Gegensatz dazu kehrt sich bei explizit gesetzten Größen die Reihenfolge um: Die innersten Ebenen kollabieren zuerst, während die äußersten offen bleiben – was dazu führen kann, dass der Nutzer den Kontext verliert.

Detail-Platzhalter

Ein Platzhalter kann im Detailbereich angezeigt werden, wenn kein Detailinhalt gesetzt ist. Im Gegensatz zum eigentlichen Detailinhalt wird der Platzhalter einfach ausgeblendet, wenn er nicht passt – er wird nicht als Overlay dargestellt.

Orientierung

Standardmäßig ist das Master-Detail Layout horizontal aufgeteilt – Master-Bereich links, Detail-Bereich rechts. Eine vertikale Aufteilung (Master oben, Detail unten) ist technisch verfügbar, wird aktuell jedoch nicht eingesetzt, da das Layout nur für die Listenseite verwendet wird. Ob eine vertikale Aufteilung sinnvoll ist, sollte pro Anwendungsfall geprüft werden.

Barrierefreiheit

Escape-Taste: Der Detail-Bereich kann über die Escape-Taste geschlossen werden, wenn sich der Fokus innerhalb des Detail-Bereichs befindet.

Overlay-Modus: Im Overlay-Modus mit Viewport-Containment ist die Modalität aktuell auf Pointer-Interaktionen beschränkt. Elemente hinter dem Overlay können per Tastatur fokussiert werden. Diese Einschränkung ist für eine zukünftige Version geplant zu beheben.