Objektseite ​

Overview ​

Intro ​

Die Objektseite ist die bevorzugte Lösung, um komplexe Daten anzuzeigen und zu bearbeiten.

Sie bietet dazu eine flexible Struktur an, die beliebige Inhalte abbilden kann, sowie eine Anchor-Nav, um einzelne Sektionen auf der Seite schneller zu erreichen.

MATE Intro Objektseite

Verwendung ​

👍 Do👎 Don't
...wenn der Nutzer komplexe Objekte mit allen Einzelheiten einsehen und bearbeiten will. (Komplexe Objekte: 20+ Felder, 1-N Relationen, beliebig viele Fremdschlüssel)...wenn der Nutzer Daten mit einfacher Komplexität einsehen oder bearbeiten will. (Einfache Objekte: 1-20 Felder, keine 1-N Relationen, keine oder wenige Fremdschlüssel) Nutze dafür das einfache Master Detail Bedienmuster.
...wenn der Nutzer mehrere komplexe Datensätze auf einmal bearbeiten will, nutze dazu die Tabellenseite.
...wenn der Nutzer komplexe Daten anlegen will, nutze dazu die Prozessnavigation.

Guidelines ​

Aufbau ​

Aufbau der Objektseite

Der Global Header ist die oberste Leiste der Benutzeroberfläche und bietet Zugang zu anwendungsübergreifenden Funktionen.

Breadcrumbs zeigen Nutzenden, wo sie sich befinden und erlauben es, schnell eine oder mehrere hierarchische Ebenen zurück zu gehen.

Object Header und Seitenüberschrift ​

Die Seitenüberschrift dient zur Orientierung. Sie sollte die dargestellte Seite beschreiben und/oder das Objekt bzw. den Kontext wie z.B. in welcher Funktion sich der Nutzer derzeit befindet, kommunizieren.

Aktuell ist im Design System kein globaler Standard für Seitentitel festgelegt.

Die Verantwortung für die Definition und Dokumentation des jeweils richtigen Seitentitels liegt auf Produktebene.

Siehe den Abschnitt Seitenüberschrift und Object Header unter UX Writing in Foundations.

Anchor-Nav ​

Die  Anchor-Nav  erleichtert es dem Nutzer, die einzelnen Sektionen zu erreichen und gibt ihm eine Übersicht, welche Inhalte auf dieser Seite zu finden sind.

Inhalt der  Anchor-Nav :

  • Links zu den Überschriften aller Sektionen der Objektseite (erforderlich)

Sektionen ​

Sektionen stellen semantisch zusammengehörige Daten vom Objekt dar, z.B. Betriebsstätten oder Hauptadresse einer Person. Zusätzlich zu den Objektdaten werden alle Kind-Objekte als Sektion dargestellt.

Inhalt einer Sektion:

  • Überschrift der Sektion (erforderlich)
  • Daten der Sektion (erforderlich)
  • Funktionen um mit den Daten zu interagieren (optional)

Verhalten ​

  1. Objektseiten stellen Objekte, die zu einer Kollektion gehören, dar. Daher implementieren die Breadcrumbs die hierarchische Navigation. .
  2. Der Object Header ist permanent oberhalb der Anchor-Nav zu sehen und scrollt nicht mit dem Inhalt mit.

    Um Schlüsselinformationen und den notwendigen Kontext für den Nutzer in der Kopfzeile zu kommunizieren, können durchaus Inhalte aus den Sektionen wiederholt und verdichtet werden.

    In der Bearbeitenansicht von Sektionen wird die Kopfzeile ebenfalls angezeigt. Die Kopfzeile scrollt in der Bearbeitenansicht ebenfalls nicht mit dem Inhalt mit.
  3. Die  Anchor-Nav   befindet sich permanent unterhalb der Kopfzeile.

    Scrollt der Nutzer im Inhaltsbereich, dann wird der jeweilige Navigationspunkt hervorgehoben, der sich unterhalb der  Anchor-Nav  befindet.
  4. Sektionen können eine optionale Funktionsleiste zur Interaktion mit den Daten der Sektion. Die Funktionsleiste ist rechtsbündig auf Höhe der Sektionsüberschrift und besteht aus einer oder mehreren Tasten.

    Sektionen werden durch Trennlinien optisch voneinander abgegrenzt.

Varianten Sektionen ​

Je nachdem welche Komplexität die Daten haben und in welcher Relation sie zum Objekt stehen, werden diese entsprechend dargestellt und verhalten sich unterschiedlich.

1. Formular - Sektion

Sollte das Objekt eine einfache Relation zu den Daten innerhalb der Sektion haben, dann verwende dazu die  Key-Value-Facet . Für eine bessere Übersicht sollten auf der Objektseite lediglich die verfügbaren Daten angezeigt werden, d.h. Name-Wert-Facetten ohne Wert sollten gar nicht angezeigt werden. In der optionalen Funktionsleiste befinden sich Tasten, um mit den Daten zu interagieren z.B. um diese über eine Formularseite zu bearbeiten.

2. Tabellen-Sektion

Sollte das Objekt zu mehreren Datensätzen einer Sektion eine Relation haben, dann werden die Datensätze in einer Tabelle dargestellt.

Standardmäßig kann die Höhe der Tabelle dynamisch zwischen 1 und 20 Zeilen wachsen. Falls nur wenige Einträge vorhanden sind, wird im Layout auch nur wenig Höhe von der Tabelle beansprucht. Sollten mehr Einträge verfügbar sein, können diese durch Scrollen innerhalb der Tabelle von den Nutzern erreicht werden. Im Einzelnen kann die Höhe der Tabelle auch bis zu 50 Zeilen betragen, wenn dadurch ca. 80% der damit verbundenen Use-Cases besser bedient werden können. In der optionalen Funktionsleiste befinden sich Tasten, um ggf. neue Datensätze hinzuzufügen, sowie weitere Optionen, um mit den Daten zu interagieren.

Die Tabelle verfügt über zeilenbezogene Funktionen, um den jeweiligen Datensatz zu bearbeiten. Dazu kann der jeweilige Datensatz - abhängig von seiner Komplexität - entweder in einer  Formularseite ,  Objektseite oder individuellen Seite dargestellt werden.

Siehe  Grids für weitere Informationen.

3. Suchen in Tabellen-Sektionen

Die Tabellen-Funktionsleiste bietet ein optionales Suchfeld, das es ermöglicht, einfache Suchen über alle Tabellenspalten durchzuführen. Für komplexere Suchen empfiehlt das UX Team die Verwendung einer eigenen  Tabellenseite inkl.  Filter Panel .

Kind-Objekt als Sektion ​

Sollte das Objekt Kind-Objekte, also untergeordnete Objekte, besitzen, werden diese ebenfalls als Sektion angezeigt. Es wird für jedes vorhandene Kind-Objekt je eine Sektion angezeigt! Abhängig von der Datenstruktur des Kind-Objektes, kann das untergeordnete Objekt als Tabellen-, Formular- oder Zusammenfassung-Sektion angezeigt werden. Die Details zum Kind-Objekt können über die Taste bzw. die Verknüpfung in der Funktionsleiste angezeigt werden. Im nebenstehenden Beispiel könnte die Sektion "Person" ein Kind-Objekt darstellen, dass über den Link "Person Detail anzeigen" geöffnet werden kann.

Bearbeiten von komplexen Objekten ​

Komplexe Objekte zeichnen sich unter anderem dadurch aus, dass sie weitere Objekte aggregieren. Daher ist es sinnvoll, die aggregierten Objekte einzeln bearbeiten und speichern zu können. Dies erfolgt über das Bearbeiten der Kopfzeile, sowie über die Funktionalitäten der jeweiligen Sektionen.

Bearbeiten von Formular-Sektionen ​

  1. Sollten die Nutzer von einer Objektseite zu einer Bearbeitenansicht einer Sektion vorwärts navigiert sein, so führt die Up-Navigation-Taste, die Browser-Zurück-Taste, sowie die Abbrechen-Taste zurück zur Objektseite, wobei ihr vorheriger Zustand (Scrollposition d.h. welche Sektion vorher angezeigte wurde) wiederhergestellt wird.
  2. Sollten die Nutzer nicht gespeicherte Eingaben gemacht haben, dann erfolgt eine Rückfrage, ob diese Verworfen werden sollten, bevor eine Navigation zurück erfolgt.
  3. Speichern die Nutzer ihre Eingaben auf der Bearbeitenansicht, dann wird eine Navigation zurück zur Objektseite ausgelöst. Die Objektseite zeigt ihren vorheriger Zustand (Scrollposition d.h. welche Sektion vorher angezeigte wurde) mit aktuellen Daten.
  4. Durch einen  Toast wird das erfolgreiche Speichern vom System an den Nutzer gemeldet

Bearbeiten von Tabellen-Sektionen ​

  1. Neue Datensätze können über die Funktionsleiste hinzugefügt werden. Dazu navigiert die Anwendung standardmäßig im selben Browserfenster bzw. Tab. auf eine Hinzufügenansicht (leere Formularseite). Den Nutzern stehen die üblichen Optionen im Browser zur Verfügung, um die Navigation zur Hinzufügenansicht in einem neuen Fenster oder Tab zu öffnen.
  2. Sollten die Nutzer von einer Objektseite zu einer Bearbeitenansicht eines Objekts oder zu einer Hinzufügenansicht innerhalb der Tabellensektion vorwärts navigiert sein, so führen die Up-Navigation-Taste, die Browser-Zurück-Taste, sowie die Abbrechen-Taste zurück zur Objektseite. Die Objektseite zeigt ihren vorherigen Zustand (Scrollposition d.h. welche Sektion vorher angezeigte wurde und die vorherigen Sortierungen der Tabellen). Die Scrollposition innerhalb der Tabelle muss nicht wiederhergestellt werden, d.h. die vorher anzeigten Zeilen müssen nicht wieder anzeigen werden.
  3. Sollte der Nutzer ungespeicherte Eingaben gemacht haben, dann wird er gefragt, ob diese Verworfen werden sollten, bevor eine Navigation zurück erfolgt.
  4. Speichern die Nutzer ihre Eingaben auf der Bearbeiten- oder Hinzufügenansicht, dann wird eine Navigation zurück zur Objektseite ausgelöst. Die Objektseite zeigt ihren vorheriger Zustand (Scrollposition d.h. welche Sektion vorher angezeigte wurde und die vorherigen Sortierungen der Tabellen) mit aktuellen Daten an. Die Scrollposition innerhalb der Tabelle muss nicht wiederhergestellt werden, d.h. die vorher anzeigten Zeilen müssen nicht wieder anzeigen werden.
  5. Durch einen  Toast wird das erfolgreiche Speichern vom System an den Nutzer gemeldet.

Barrierefreiheit ​

Ausschnitt eine Sektion
Navigationsreihgenfolge
  1. Kopfzeilenüberschrift : Die Überschrift der Kopfzeile muss mittels H3 Überschrift und  synneo-heading-xl  umgesetzt werden.
  2. Sektionsüberschriften: Die Überschriften der Sektionen müssen mittels H3 Überschriften umgesetzt werden, damit assistive Technologien diese mit den anderen Überschriften der Seite zusammen als Liste vorlesen können. Außerdem vereinfacht dies die Navigation auf der Seite, da jeweils zur nächsten Überschrift gesprungen werden kann.
  3. Optionale Funktionsleiste: Die Tasten in der optionalen Funktionsleiste bieten Interaktionsmöglichkeiten für jeweils eine Sektion an. Die Titel der Tasten reichen als Beschreibung nicht aus, um sehgeschädigten Nutzer den notwendigen Kontext zu bieten. Ohne zusätzliche Information ist es also unklar, auf welches Element sich die Aktion bezieht. Den Tasten muss daher mittels "aria-label" mehr Kontext hinzugefügt werden, indem der Sektionstitel vor den Funktionstitel gestellt wird.
    Z.B: <button aria-label=„Hauptadresse bearbeiten">Bearbeiten</button>
  4. Tastaturbedienung: Die Objektseite lässt sich vollständig mit der Tastatur bedienen. Über die Tabulatortaste („Tab“) oder Hochstell- und Tabulatortaste („Shift + Tab“) sind interaktive Elemente fokussierbar. Die Reihenfolge richtet sich im Inhaltsbereich nach der Reihenfolge der Elemente der Objektseite.
  5. Zum Anfang der Seite springen: Um das Springen zum Anfang der Seite zu vereinfachen, sollte das tastaturgesteuerte Springen via Funktionstaste ermöglicht werden.
  6. Sektionen untereinander abgrenzen: Die vorhandenen Bereiche sollten als ARIA-Regionen definiert werden. Generell sollten, neben der Strukturierung in HTML, immer Markups bzw. Landmarks verwendet werden, um die Seite noch besser zu strukturieren.

🔴 Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://synneo.akdb.net/ds-showcase-4.4.2/seitentypen/objektseite