Master-Detail ​

Overview ​

Intro ​

Das Master-Detail-Prinzip wird verwendet, um größere Mengen zusammengehöriger Informationen strukturiert darzustellen. Eine übergeordnete Ansicht (Master) ermöglicht den schnellen Zugriff auf einzelne Elemente, während eine nachgelagerte Detailansicht weiterführende Inhalte zum jeweils ausgewählten Objekt bereitstellt. Die Übersicht / Master Ansicht wird dabei typischerweise in Form einer Grid oder einer List umgesetzt. Das Master-Detail-Bedienmuster ist die empfohlene Lösung für die Arbeit mit einfachen bis komplexen Objekten.

Die Masteransicht unterstützt Nutzer dabei, durch Datensätze bis hin zu einzelnen Objekten zu navigieren. Dafür stehen Funktionen zum Suchen und Interagieren mit den Datensätzen zur Verfügung. Die Detailansicht ermöglicht es, Objekte vollständig anzuzeigen und zu bearbeiten.

Es gibt vier Varianten dieses Bedienmusters: zwei klassische Varianten, bei denen Master- und Detailansicht auf getrennten Seiten dargestellt werden, sowie zwei Varianten, bei denen beide Ansichten auf derselben Seite nebeneinander angeordnet sind.

Beispiel einer Master Detail Interaktion

Verwendung ​

👍 Do👎 Don't
...wenn Nutzer aus einer größeren Menge zusammengehöriger Einträge gezielt ein Objekt auswählen und dessen Details ansehen oder bearbeiten sollen.
...wenn eine klare Trennung zwischen Übersicht und Detailtiefe hilfreich ist.
...wenn Nutzer häufig zwischen mehreren Datensätzen wechseln und dabei den Kontext der Übersicht behalten müssen (Variante Liste mit Details).		...wenn nur ein einzelnes Objekt oder sehr wenige Inhalte dargestellt werden und keine eigentliche Auswahl nötig ist.
...wenn Übersicht und Detail inhaltlich nicht klar voneinander trennbar sind.
...wenn die Detailansicht keine zusätzlichen oder vertiefenden Informationen bietet.

Guidelines ​

Varianten ​

INFO

Nachfolgend wird immer wieder von einfachen und komplexen Objekten gesprochen. Wir definieren diese Aspekte folgendermaßen:

Einfache Objekte: 1-20 Felder, keine 1-N Relationen keine oder wenige Fremdschlüssel

Komplexe Objekte: 20+ Felder, 1-N Relationen und beliebig vielen Fremdschlüssel.

1. Einfache Variante - getrennte Seiten ​

Schematische Darstellung der einfache Variante

Das Bedienmuster für Objekte mit einfacher bis mittlerer Komplexität baut auf den zwei Seitentypen Tabellenseite und Formularseite auf. Master- und Detailansicht befinden sich auf getrennten Seiten – die Navigation von der Tabellenseite zur Formularseite erfolgt durch einen Klick auf einen Eintrag.

Dabei ermöglicht das Bedienmuster das Anlegen, Anzeigen und Bearbeiten dieser Objekte.

👍 Do👎 Don't
...wenn Daten, die eine einfache* Komplexität haben, angezeigt werden sollen.
...wenn auf der Tabellenseite viele Attribute angezeigt werden sollen.
...wenn die Detailanzeige auf einer getrennten Seite gewünscht ist.
...wenn die URL der Detailseite direkt teilbar oder verlinkbar sein soll.
…wenn der Nutzer selten zwischen Einträgen wechselt und der Kontext der Übersicht nicht relevant ist.		...wenn die Daten eine hohe Komplexität** haben. Verwende dazu die komplexe Variante.
...wenn der Nutzer häufig zwischen Einträgen wechselt und dabei den Kontext der Übersicht behalten soll – verwende dazu die Variante „Liste mit Details".

2. Komplexe Variante - getrennte Seiten ​

Schematische Darstellung der komplexen Variante

Das Bedienmuster für komplexe Daten baut auf den zwei unterschiedlichen Seitentypen Tabellenseite und Objektseite auf. Dies betrifft komplexe Objekte . Master- und Detailansicht befinden sich ebenfalls auf getrennten Seiten.

Zum Anlegen von komplexen Objekten wird das Bedienmuster Prozessnavigation eingesetzt, siehe Prozessnavigation für weitere Informationen dazu.

👍 Do👎 Don't
...wenn die Daten eine hohe Komplexität** haben.
…wenn die URL der Detailseite direkt teilbar oder verlinkbar sein soll.
…wenn der Nutzer sich voll auf die Bearbeitung konzentrieren soll, ohne die Übersicht im Blick zu haben.		...wenn Daten, die eine einfache* Komplexität haben, angezeigt werden sollen. Verwende dazu die einfache Variante.
...wenn der Nutzer schnell zwischen Einträgen wechseln soll – verwende dazu die Variante „Master mit Side Panel".

3. Master mit Side Panel ​

Die Tabellenansicht bleibt auf derselben Seite sichtbar und wird nach links gestaucht, wenn ein Eintrag geöffnet wird. Ein Side Panel schiebt sich von rechts in die Ansicht. Diese Variante eignet sich, wenn der Nutzer die Übersichtstabelle im Kontext behalten soll, während er Details eines Eintrags ansieht oder bearbeitet.

Verwenden, wenn die Übersichtstabelle als Orientierung während der Detailansicht relevant ist und der Nutzer schnell zwischen verschiedenen Einträgen wechseln soll, ohne die Tabelle zu verlassen.

Interaktionsdesign Master mit Side Panel

👍 Do👎 Don't
…wenn die Übersichtstabelle als Orientierung relevant ist, während der Nutzer Details eines Eintrags ansieht oder bearbeitet.
…wenn der Nutzer schnell zwischen verschiedenen Einträgen wechseln soll, ohne die Tabelle zu verlassen.
…wenn das Objekt eine mittlere bis hohe Komplexität hat und der Detailbereich im Side Panel ausreichend ist.		...wenn das Objekt so komplex ist, dass der Detailbereich nicht ausreicht – verwende dazu die komplexe Variante mit getrennten Seiten.
...wenn die URL der Detailseite teilbar oder verlinkbar sein soll – verwende dazu eine Variante mit getrennten Seiten.

4. Liste mit Details (Listenseite) ​

Der Master mit einer Liste und der Detailbereich befinden sich auf derselben Seite als Listenseite nebeneinander. Die Liste nimmt einen festen Bereich auf der linken Seite ein, der Detailbereich ist dauerhaft rechts daneben sichtbar. Ein Klick auf ein List Item zeigt dessen Details im Detailbereich an, ohne die Seite zu verlassen. Der Detailbereich kann über ein Kreuz-Icon geschlossen werden.

Verwenden, wenn Objekte als Liste dargestellt werden und die Detailansicht immer präsent sein soll. Verwenden, wenn der Nutzer schnell zwischen Einträgen navigiert und dabei deren Details vergleicht.

Interaktionsdesign Master (List) mit Details

👍 Do👎 Don't
…wenn Objekte als Liste dargestellt werden und die Detailansicht immer präsent sein soll.
…wenn der Nutzer schnell zwischen Einträgen navigiert und dabei deren Details bearbeitet.
…wenn die Objekte eine einfache bis mittlere Komplexität haben und im Detailbereich gut darstellbar sind.		...wenn die Objekte so komplex sind, dass der Detailbereich nicht ausreicht – verwende dazu die komplexe Master Detail Variante mit getrennten Seiten.
...wenn auf der Masterseite eine Tabelle mit vielen Spalten benötigt wird – verwende dazu die Variante „Master mit Side Panel".
...wenn die URL der Detailseite teilbar oder verlinkbar sein soll – verwende dazu die einfache oder komplexe Variante des Master Detail mit getrennten Seiten.

Aufbau ​

Siehe Aufbau vom Seitentyp Tabellenseite , Formularseite , Objektseite , Listenseite und Side Panel für detaillierte Informationen zum Aufbau der einzelnen Seitentypen.

Verhalten ​

Siehe Verhalten vom Seitentyp Tabellenseite , Formularseite , Objektseite , Listenseite und Side Panel für detaillierte Informationen zum Verhalten der jeweiligen Seitentypen.

Siehe auch das Verhalten vom Bedienmuster Wizard für detaillierte Informationen, die für die Neuanlage von komplexen Objekten relevant sind.

Hier wird das Verhalten der Seitentypen beim Bedienmuster Master-Detail im Zusammenspiel beschrieben.

Beispiel für das Navigationsverhalten

  1. Die Navigation von der Master- zur Detailansicht, sowie zur Bearbeitenansicht von Sektionen einer Objektseite aktualisiert den Seitentitel und die Breadcrumbs.
    Der Inhalt des Seitentitels und der Breadcrumbs sollte fachlich getrieben sein und dabei helfen die jeweilige Funktion bzw. das Objekt eindeutig identifizieren zu können.
    Siehe Breadcrumbs und Seitentypen.
  2. Die Navigation von der Master- zur Detailansicht erfolgt standardmäßig im selben Browserfenster bzw. Tab. Dem Nutzer stehen die üblichen Optionen im Browser zur Verfügung um den Link zur Detailansicht in einem neuen Fenster oder Tab zu öffnen.
  3. Die Rücknavigation zur Masteransicht erfolgt über die Browser-Zurück-Taste oder über die Breadcrumbs . Breadcrumbs zeigen dem Nutzer seinen aktuellen Standort in der Informationsstruktur und ermöglichen es, gezielt eine übergeordnete Ebene aufzurufen. Bei der Rücknavigation wird die vorherige Trefferliste inkl. Sortierung und aktiver Filter wiederhergestellt.



    Für weitere Informationen siehe Navigation unter den Grundlagen.

Hinweis:

Bei den Varianten „Liste mit Details daneben" und „Main mit Side Panel" findet die Navigation innerhalb derselben Seite statt. Breadcrumbs und Browser-Zurück sind dort nicht für die Navigation zwischen Master und Detail relevant.

Hinzufügen und Bearbeiten von Objekten ​

Beispiel mit der einfachen Variante

  1. Das Hinzufügen von komplexen Objekten führt zu einem Wizard , damit die Nutzer besser geführt werden können. Nach dem erfolgreichen Erzeugen eines komplexen Objekts durch den Wizard , wird eine Navigation zur Detailansicht ausgelöst.
  2. Komplexe Objekte sind durch die Objektseite in Sektionen unterteilt, welche einzeln bearbeitet und gespeichert werden können. Detaillierte Informationen dazu stehen auf der Objektseite .

    Siehe das Verhalten  Wizard von und der Objektseite für weitere Informationen.

Die beiden Szenarien "Hinzufügen" (initiales anlegen) sowie "Bearbeiten" (nachfolgend und wiederkehrend) von komplexen Objekten stellt die Nutzer vor unterschiedliche Herausforderungen. Darüber hinaus kann sich die Priorität der Informationen eines komplexen Objekts zwischen den beiden Szenarien unterscheiden.

Herausforderungen für den Nutzer beim Hinzufügen von komplexen Objekten können z.B. folgende sein:

  • Welche Informationen sind initial erforderlich?
  • Welche Informationen bauen ggf. aufeinander auf?
  • In welcher Reihenfolge soll ich die Informationen eingeben?

Ein Wizard unterstützt den Nutzer ideal bei diesen Herausforderungen.

Herausforderungen beim Bearbeiten von komplexen Objekten:

Beim Bearbeiten eines komplexen Objekts liegt der Fokus dagegen meist nicht mehr auf der vollständigen Erfassung aller Grundinformationen. Stattdessen stehen gezielte, wiederkehrende Aufgaben im Vordergrund, die schnell und ohne Umwege erreichbar sein müssen. Nutzer wollen bestehende Informationen effizient anpassen, ergänzen oder prüfen, ohne erneut durch einen sequenziellen Prozess geführt zu werden.

Für dieses Szenario ist die Objektseite die geeignetere Benutzeroberfläche, da sie einen direkten und flexiblen Zugriff auf relevante Bereiche und wiederkehrende Aufgaben ermöglicht.

Barrierefreiheit ​

Siehe die jeweiligen Hinweise auf zu den einzelnen Seitentypen und verwendeten Komponenten.

Spezifische Punkte für das Master-Detail-Muster sind außerdem:

  1. Detailansicht
    Egal in welcher Zelle einer Zeile sich der Fokus bei einer Grid oder List befindet, die Detailansicht sollte via Leertaste-Taste geöffnet werden können.
  2. Inline Aktionen

    Ein Entfernen oder Löschen (Remove/Delete etc.) sollte nicht via Enter-Taste, sondern über die Leertaste ausgelöst werden können, da ansonsten versehentlich Daten gelöscht werden könnten. Eine solche zeileninterne Aktion (z. B. Remove) benötigt zusätzlich noch ein ARIA-Describe (z. B. "Remove des Eintrags XY"), da das einfache Label nicht sprechend genug ist. Da standardmäßig gilt, dass ein Button via Leerzeichentaste ("Space") zu aktivieren ist, weil es sich um eine klare Aktion handelt und dass ein Link via Enter-Taste auszulösen ist, sollte das Element zum Öffnen einer Zeile als Link umgesetzt werden. Weitere zeilennahe Buttons (z. B. Mülleimer-Icon) sollten als Button umgesetzt werden.