Navigation ​

Overview ​

Generelle Richtlinien ​

Die Navigationsprinzipien beziehen sich auf die komplette Anwendung. Das Einhalten der Navigationsregeln unterstützt die Arbeit der Nutzer, da durch konsistente Navigation ein gutes mentales Modell der Software aufgebaut werden kann. Auf diese Weise lernen die Nutzer schnell, wie zwischen unterschiedlichen Softwarebereichen navigiert wird und was zu erwarten ist, wenn bestimmte Tasten geklickt werden.

Title: Der Titel der Browser-Registerkarte (oder des Tabs) orientiert sich am aktuellen Navigationspfad des Nutzers und wird in umgekehrter Reihenfolge dargestellt.

Title bar Browser Karteikarte

Beispiel: Navigiert ein Nutzer in der Anwendung "OK.FINN" zum Modul "Veranlagung", wählt dort die "Hundesteuerfälle", anschließend das Objekt "Becker, Susanne" und bearbeitet die "Allgemeinen Objektdaten", lautet der generierte Titel wie folgt:

"Allgemeine Objektdaten - Becker, Susanne - Hundesteuerfälle - Veranlagung | OK.FINN"

Applikationsleiste: Dient zum Wechsel zwischen verschiedenen Modulen.

Side Navigation: Enthält eine Liste von Menüeinträgen mit potenziellen Unterpunkten.

Inhaltsbereich: Zeigt den Inhalt basierend auf dem aktuell aktiven Menüpunkt oder jeweilige Unterseiten wenn horizontal navigiert wurde.

Breadcrumbs: Dynamisch generiert, zeigt die aktuelle Navigationstiefe und ermöglicht schnelles Zurückspringen. Die Navigation findet in dem Fall hierarchisch statt, man navigiert zum hierarchisch darüberliegenenden Menupunkt. Für Details zu den Breadcrumbs (siehe Breadcrumbs ).

Browser-Navigation: Die Anwendung unterstützt die Vorwärts- und Zurück-Funktion des Browsers (z. B. mit < / > oder über Mausgesten). Die Breadcrumb- und Inhaltsansicht werden dabei automatisch synchronisiert. Die Navigation findet in dem Fall chronologisch statt. Zurück: Navigiert zum vorher besuchten Menüpunkt und aktualisiert die Breadcrumbs entsprechend. Vorwärts: Bringt den Nutzer zur zuletzt verlassenen Unteransicht zurück.

Navigationselemente

Grundsätzlich lässt sich zwischen vorwärts Navigation, rückwärts Navigation und hierarchischen Navigation unterscheiden. Die folgenden Beispiele veranschaulichen jeweils eine mögliche Ausprägung der jeweiligen Navigationsart.

Mögliches Beispiel für vorwärts Navigation (engl. forward navigation)

Die vorwärts Navigation zu Folgeseiten in der Anwendung oder zu anderen Modulen bzw. Anwendungen erfolgt durch Links, Tabelleneinträge, Tasten im Menü und anderen GUI Elementen. Ein sog. Drill-Down zählt ebenfalls zu der vorwärts Navigation.

Sollten Nutzer über die Browser-Zurück Taste zurück navigiert sein, dann können sie über die Browser Vorwärts-Taste  chronologisch zur nächsten Seite vorwärts navigieren.
Mögliches Beispiel für rückwärts Navigation (chronologisch, engl back navigation)

Die Browser Zurück-Taste ermöglicht es standardmäßig den Nutzern zur chronologisch vorherigen Seite zurückzukehren.

Hinweis

Beim zurück Navigieren wird der Zustand (z. B. Scrollposition, Größe der Elemente, ausgeklappte Gruppen, etc.) der vorherigen Seite wiederhergestellt.



Ausnahme

Um unnötig lange Zurück-Ketten in der Browser Historie zu vermeiden gelten folgende Ausnahmen:

Master-Detail-Pattern

* Bearbeitungsansichten werden beim Schließen über Abbrechen, Speichern und der Titelleiste Zurück-Taste aus der Browser Historie entfernt und sind nicht mehr mittels rückwärts Navigation aufrufbar.
Wizards

* Wizards werden beim Schließen über Abbrechen, Speichern und der Titelleiste Zurück-Taste aus der Browser Historie entfernt und sind nicht mehr mittels rückwärts Navigation aufrufbar.
Mögliches Beispiel hierarchische Navigation

Wenn eine Anwendung über eine klare Informationshierarchie mit konsistenten Eltern-Kind-Beziehungen verfügt, kann die Navigation innerhalb dieser Hierarchie über Breadcrumbs abgebildet werden.

Breadcrumbs ermöglichen es den Nutzer:innen, gezielt auf übergeordnete Ebenen zurückzuspringen, ohne sich auf die chronologische Rückwärtsnavigation des Browsers verlassen zu müssen.



Vergleich:

* Breadcrumb-Navigation: Hierarchische Navigation zu übergeordneten Ebenen.
* Browser-Zurück-Taste: Chronologische Rückwärtsnavigation (Back-Navigation)


Hinweis:

Eine klare Informationshierarchie liegt vor, wenn jedem Kind-Element eindeutig ein bestimmtes Eltern-Element zugeordnet ist. Nur dann ist die Darstellung über Breadcrumbs sinnvoll und konsistent.

Ausblick ​

Die laterale Navigation ermöglicht es zwischen Objekten, die sich hierarchisch auf der selben Ebene befinden hin und her zu navigieren. Ein Beispiel dafür stellt das direkte navigieren zwischen Objektseiten im Master Detail Muster dar, ohne zuvor auf die Masteransicht zurück navigieren zu müssen.

Aktuell sind im Design System dazu noch keine Elemente oder Muster definiert. Das UX Team hat diese jedoch in der Planung vorgesehen.

Einträge in der Browser Historie ​

Der Zustand der Anwendung wird standardmäßig durch die URL reflektiert. Das ermöglicht das Bookmarken und Senden von Links in der Anwendung inkl. bestimmter Zustände. Die Frage ist, wann eine neue URL erzeugt werden muss.

Generell gibt es 3 Fälle:

  1. Erstelle immer einen neuen Eintrag in der Browser Historie , wenn die Nutzer in der Anwendung vorwärts navigieren. Das ermöglich das Zurücknavigieren durch die Browser Zurück-Taste.
  2. Ersetze die URL in der Browser Historie , wenn sich nur einzelne Teile auf der Seite ändern. Das ist notwendig, um unnötig lange Zurück-Ketten in der Browser Historie zu vermeiden. Ein Beispiel hierfür stellen Änderungen in der Suchleiste auf einer Tabellenseite dar.
  3. Behalte die URL bei, wenn kein neuer Zustand der Seite festgehalten werden muss. Das kann z.B. der Fall sein, wenn Nutzer in einer Tabelle Einträge auswählt oder zwischen zwei Tabs hin und her wechseln.

Weitere Navigationsmöglichkeiten ​

Navigation über das Menü

Über das Menü des Navigationspanels kann direkt zur Einstiegsseite des jeweiligen Menüpunktes navigiert werden. Wenn ein Menüpunkt geöffnet ist, führt ein erneuter Klick auf den aktiven Menüpunkt zur Einstiegsseite dieses Menüpunkts. Ein Klick auf einen Menüpunkt führt also immer zu dessen Einstiegsseite.

Im Menü wird außerdem mit Rechtsklick das standartmäßige Kontextmenü aufgerufen über das z.B. eine Seite in einem neuen Tab geöffnet werden kann.

Speichern ​

Wenn ein Datensatz gleichzeitig in mehreren Browser-Fenstern oder Browser-Tabs bearbeitet wird, dann kommt das sog. Optimistic Locking zur Anwendung. Das heißt: Mehrere Personen können anfangen ein Objekt zu bearbeiten und der Erste, der speichert, gewinnt. Alle danach Folgenden werden darauf hingewiesen, dass zwischendurch Änderungen erfolgt sind und alle Änderungen verworfen werden müssen.

Ungespeicherte Änderungen ​

Wenn beim Schließen oder Verlassen eines Browser-Fensters oder Browser-Tabs ungespeicherte Änderungen vorhanden sind, erscheint ein Modal Dialog (→  Modale Dialoge ) mit einem Warnhinweis, dass ungespeicherte Änderungen vorhanden sind, sowie einer Möglichkeit zum Speichern, bevor sich die Seite schließt.

Navigation ungespeicherte Änderungen

Info für Dev

​

Nutzer-Session ​

Logout ​

Wenn sich Nutzer ausloggen, gilt die Aktion für die komplette Session. Alle der Session zugehörigen Tabs und Fenster werden ausgeloggt und es wird der Login-Dialog angezeigt.

Login ​

Wenn sich Nutzer explizit über den "Logout"-Button ausloggen, wird bei erneutem Login die Startseite angezeigt.

Bei Aufruf einer bestimmten URL und darauf folgendem Login, wird die über die URL adressierte Seite angezeigt, sofern der Nutzer dazu berechtigt ist, die Seite zu sehen.