Header & Navigation

Verwendung

Der Header dient der eindeutigen Anbieterkennung über das Logo und stellt übergeordnete Navigationsfunktionen sowie weitere Meta-Informationen zur Verfügung. Die Dienstleistungen erstellen eigenständig und unter Beachtung der Vorgaben für den Seitenrahmen gemeinsam mit dem Footer alle relevanten Inhalte.

Das Zoll-Portal bezieht sich in seinen Texten und Videos ausschließlich auf eigene Inhalte inklusive der angeschlossenen Dienstleistungen. Alle weiteren Dienstleistungen liegen außerhalb des Verantwortungsbereichs des Zoll-Portals und sind deshalb von den für die Dienstleistungen verantwortlichen Bereichen auch eigenständig zu pflegen.

Aufbau und Inhalte

Der grundsätzliche Aufbau des Headers bleibt auf allen Seiten gleich; die Art und Menge der angebotenen Funktionen variiert aber abhängig davon, ob Nutzende angemeldet sind oder nicht, bzw., ob sie sich innerhalb des originären Webauftritts der Organisation befinden oder z.B. in einem Hilfebereich.
Eine Sonderrolle nimmt dabei der Session-Timer ein, den wir in Aufbau und Funktionsweise nachfolgend separat beschreiben.

Die Inhalte variieren je nach gewählter Sprachversion, so bietet die deutschsprachige Variante mehr Links zu Inhalten als die englischsprachige.

Hier sehen Sie die Verwendung eines Headers, hier eines reduzierten Headers in einem Seitenrahmen.

Positionierung & responsives Verhalten

• Der Header ist immer die erste Komponente einer Seite.
• Der Header nimmt die volle Breite des Viewports ein. Die Inhalte des Headers, von Logo bis Hauptmenü, erstrecken sich darin vom Beginn der ersten bis zum Ende der letzten Grid-Spalte.
• Es wird kein Weißraum über dem Header gelassen.
• Über dem Header können bei Bedarf Systemmeldungen angezeigt werden.
• Bei geöffnetem Menü wird der Hintergrund (alles unterhalb des Headers) abgedunkelt.
  Ein Klick oder Tap auf die abgedunkelte Fläche schließt das Menü.

Ab dem Breakpoint SM (≥ 576px)

• Das geöffnete Menü wird mit einer Maximalbreite von 320px rechtsbündig unter dem Header ausgerichtet

Ab dem Breakpoint LG (≥ 992px)

• Die Desktop-Variante des Headers kann vollständig angezeigt werden. Es wird kein Flyout mehr benötigt.

Navigation

Das Ziel des Navigationskonzeptes ist es, eine schnelle Orientierung zur Verfügung zu stellen. Hierfür wird die Navigation in zwei Bereiche – Hauptnavigation und Metanavigation – unterteilt. Durch die Verwendung des Portalrahmens in allen an das Zoll-Portal angeschlossenen Dienstleistungen behalten Nutzende zu jeder Zeit ihnen bekannte Navigationsmöglichkeiten, um sich schnell zurechtzufinden.

Immer vorhanden sind in der Desktop-Ansicht:

• Logo als Anbieterkennung (auf Unterseiten als Link zurück zur Startseite),
• Sprachauswahl – zurzeit zwischen Deutsch und Englisch,
• Links zu Videos in Deutscher Gebärdensprache und Inhalten in Leichter Sprache (verpflichtend im Zoll-Portal als zentrales Navigations- und Einstiegsangebot, optional in Dienstleistungen, sofern dort bereits vorhanden). Wertvolle Hinweise zur Umsetzung von DGS-Videos finden Sie im PDF-Leitfaden „Gebärdensprachevideos nach BITV 2.0“ der Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik.

Im angemeldeten Zustand enthält der Bereich den Session-Timer sowie die Abmelden-Funktion in der Metanavigation sowie die Hauptnavigation mit den Kategorien Übersicht, Dienstleistungen, Vorgänge, Postfach und Konto in der Desktop-Ansicht bzw. als Hamburger-Menü in der mobilen Ansicht.

Metanavigation

Die Metanavigation befindet sich oberhalb der Hauptnavigation. Hier befinden sich die Sprachauswahl Deutsch / Englisch, Gebärdensprache, Leichte Sprache und, sofern angemeldet, die Möglichkeit zur Abmeldung von der Anwendung, jeweils mit Icons, die den Zweck der Aktion visualisieren.

Die angebotenen Sprachen werden nicht als Auswahlmenü angezeigt, sondern es kann nur zur jeweils anderen als der aktuellen Sprache gewechselt werden. „Gebärdensprache“ und „Leichte Sprache“ werden im Portal nur in der Sprachversion „Deutsch“ angezeigt.

Hauptnavigation

Die Hauptnavigation wird nur für angemeldete Nutzende angezeigt und enthält in einer flachen Hierarchie unmittelbare Links zur Orientierung im gesamten Angebot und zur Bearbeitung der eigenen Daten im Nutzerkonto. Icons sind für die Menüpunkte der Hauptnavigation in der Desktop-Ansicht nicht vorgesehen. Während der Registrierung und im Anmeldeprozess wird die Hauptnavigation nicht angezeigt.

Session Timer im Header

Der Session-Timer muss über alle Dienstleistungen hinweg mit dem gleichen Aufbau an der gleichen Stelle platziert werden. Im Rahmen des Design Systems werden lediglich Darstellung und Funktion beschrieben, die sich aus dem Ablauf von Sessions ergeben. Anforderungen an die Session-Dauer, Hinweis zum Ablauf, Karenzzeit oder an ein serverseitiges Session-Handling entnehmen Sie bitte den fachlichen Anforderungen.

Der Session-Timer ist im einklappten Header erst 5 Min. vor Ablauf des Session-Timers neben dem Menü-Button zu sehen. Darüber ist die verbleibende Zeit kaum von Relevanz für die Nutzenden. Klappt man das Menü auf, dann ist der Session-Timer immer rechts vom Abmelde-Link zu finden, unabhängig davon wie lange die Session noch andauert.

Funktionsweise des Session Timers

Der Session-Timer ist für angemeldete Nutzende Teil des Headers und zeigt ab dem Zeitpunkt der Anmeldung die verbliebene Restlaufzeit einer Sitzung an.

Hierbei verwaltet die jeweilige Anwendung den Stand der Sitzungsdauer, handhabt die notwendigen API-Anfragen für die Sitzungsdauer und den Log-In-Status und übergibt der Session-Timer-Komponente die benötigten Werte. Interaktionen durch Nutzende setzen die Sitzungsdauer in der Anwendung zurück. Der Timer erhält von der Anwendung die anzuzeigenden Werte und auch die benötigten Informationen für die Ausgabe in Hilfsmitteln wie Screenreadern.

Im Header beträgt das Intervall für die von der Anwendung ausgelöste Ausgabe der Werte in Screenreadern mindestens 60 Sekunden.

Modale Dialoge des Session Timers

Die Anwendung implementiert ein Modal, das bei längerer Inaktivität erscheint und auf eine bevorstehende Abmeldung hinweist und die Möglichkeit zur Verlängerung der Sitzung bietet.

3 Minuten vor vor Ablauf der Session durch Inaktivität erscheint dazu ein Dialog mit einem textlichen Warnhinweis und der Möglichkeit zur Verlängerung. Ein dynamischer Zähler zeigt die Restlaufzeit in Minuten und Sekunden:

Ignorieren Nutzende diesen Warnhinweis, dann werden sie nach Ablauf der Session von der Anwendung abgemeldet und automatisch auf die Startseite des Zoll-Portals im unangemeldeten Zustand weitergeleitet; nicht gespeicherte Daten gehen verloren. Dort wird nun ein geänderter Dialog angezeigt mit dem Hinweis, dass die Session abgelaufen ist:

Bei einer durch Nutzende selbst ausgelösten Abmeldung wird ein Bestätigungsdialog angezeigt, um eine unabsichtliche Aktion mit potenziellen Datenverlusten zu verhindern:

Nach erfolgter aktiver Abmeldung erscheint die folgende Informationsmeldung:

Design

Typografie

Ab dem Breakpoint XS (≥ 0px)

Ab dem Breakpoint XL (≥ 1200px)

Abstände

Ab dem Breakpoint XS (≥ 0px)

Das Logo als Wort-Bild-Marke

Elemente im Header und ihre Platzierung weichen von den strikten Regeln des Grid-Systems ab und sind aufgrund ihres eigenen Bedarfs individuell platziert. So orientieren sich alle weiteren Gestaltungselemente in Folge dessen mit ihrer linken vertikalen Achse an der Einrückung des Zoll-Logos.

Ab dem Breakpoint SM (≥ 576px)

In der mobilen Ansicht werden die Meta- und Hauptnavigation gemeinsam in einem Hamburger-Menü angeboten; lediglich der Session-Timer verbleibt sichtbar.

Ab dem Breakpoint XL (≥ 1200px)

Zustände

Ab dem Breakpoint XS (≥ 0px)

Ab dem Breakpoint XL (≥ 1200px)