Navigation und Service

Ergänzungsmodule

Servicebereich

Der Servicebereich beinhaltet verschiedene Angebote für den Nutzer wie zum Beispiel Abonnements, Glossare oder Benutzerhinweise.

Abonnements/Gesetze

Die Bereiche Abonnements und Gesetze sind ähnlich aufgebaut. Im Bereich Abonnements werden Dienste wie z.B. die Newsletter-Bestellung angeboten. Der Bereich Gesetze verlinkt zu den Bundesgesetzen.

Die einzelnen Dienste werden auf einer Übersichtsseite in Form von Bild-Text-Teasern vorgestellt.

Servicebereich Servicebereich Gesetze, alle Maßangaben in Pixel

Abstand

  • zum linken Seitenrand: 15 px
  • nach oben zur Bühne: 30 px
  • zwischen Bild und Teasertext: 15 px
  • zwischen zwei Teasern: 40 px

Servicebereich Abonnements, alle Maßangaben in Pixel Servicebereich Abonnements, alle Maßangaben in Pixel

Mithilfe der Schwerpunktnavigation, die oberhalb der Teaser im Bühnenbereich platziert wird, kann der Nutzer leicht zwischen den verschiedenen Diensten wechseln.

Kernmodule

Navigation

Glossar

Das Glossar liefert kurze Erklärungen wichtiger Begriffe. Es ist alphabetisch sortiert und listet die jeweiligen Einträge für den ausgewählten Anfangsbuchstaben auf.

Die Schriftfarbe des ausgewählten Buchstabens ist Weiß, der Hintergrund ist dunkelgrau hinterlegt. Alle übrigen Buchstaben stehen auf hellgrauer Fläche mit blauer Schriftfarbe.

Die Einträge sind durch eine punktierte Linie voneinander getrennt. Die komplette Fläche zwischen den Linien ist verlinkt. Bei Touch wird die Begriffserklärung sichtbar bzw. unsichtbar gesetzt. Die Pfeilspitze im rechten Seitenbereich zeigt dementsprechend entweder nach oben oder nach unten. Ist die Begriffserklärung sichtbar, verschieben sich die nachfolgenden Begriffe nach unten.

Servicebereich Glossar Alle Maßangaben in Pixel

Abstand

  • zum linken Seitenrand: 15 px
  • nach oben zur Bühne: 15 px
  • zwischen den Buchstabenflächen: 15 px
  • zwischen Buchstabenflächen und nachfolgender Trennlinie: 15 px
  • zwischen zwei Trennlinien: 50 px
  • zwischen zwei Textabsätzen: 25 px

Basiselemente, Schrift

Benutzerhinweise

Die Hinweise zur Benutzung der mobilen Website müssen leicht verständlich formuliert sein. Bedingt durch das schmale Seitenformat, sind die Seiten mobiler Anwendungen häufig sehr lang. In solchen Fällen kann die Ankernavigation eingesetzt werden, die dem Nutzer langwieriges Scrollen erspart. 

Unterhalb der Headline werden die einzelnen Themen als Menüpunkte aufgelistet. Wird der betreffende Menüpunkt angeklickt, scrollt die Seite automatisch auf Höhe des gewählten Themas. Der „Nach oben“-Button führt zurück zur Themenauswahlliste.

Externe Links werden in der gleichen Schriftgröße wie der Fließtext gesetzt, die Schriftfarbe ist Blau. Rechts vom Linktext wird das Icon für externe Links, ebenfalls in Blau, platziert.

Servicebereich Benutzerhinweise Alle Maßangaben in Pixel

Abstand

  • zum linken Seitenrand: 15 px
  • nach oben zur Bühne: 25 px
  • zwischen Headline und nachfolgender Trennlinie: 25 px
  • zwischen zwei Trennlinien: 40 px
  • zwischen Trennlinie und Themenheadline: 30 px
  • zwischen Themenheadline und Fließtext: 20 px
  • zwischen Button und nächster Themenheadline: 40 px

Höhe des Buttons: 30 px

Basiselemente, Schrift

Servicemenü

Unter jedem Modul des Servicebereichs wird ein Servicemenü platziert. Dies erleichtert dem Nutzer die Navigation zwischen den einzelnen Servicemodulen. Das langwierige Hochscrollen zum Identitätsbereich und dem dort verorteten Menü-Button wird so überflüssig.

Servicebereich

Für den Nutzer sind zunächst nur der grau hinterlegte Balken mit der Beschriftung „SERVICE“ sowie die nach unten gerichtete blaue Pfeilspitze sichtbar. Die komplette graue Fläche ist verlinkt. Bei Touch klappt das Servicemenü nach unten auf. 

Im aufgeklappten Zustand sind alle Menüpunkte sichtbar, die blaue Pfeilspitze des Servicemenüs zeigt nach oben. Die Schriftfarbe der Menüpunkte ist Blau. Am rechten Seitenrand wird jeweils eine nach rechts zeigende Pfeilspitze platziert.

Servicebereich Alle Maßangaben in Pixel

Abstand

  • zum linken und rechten Seitenrand: je 15 px
  • nach oben zum vorherigen Modul: 15 px
  • zwischen Headline und erstem Menüpunkt: 15 px
  • zwischen zwei Trennlinien: 40 px
  • Abstand nach unten zum nachfolgenden Modul: 15 px

Karussell

Das Karussell wird im Contentbereich platziert. Bild-Text-Teaser wecken das Interesse des Nutzers. Im Karussell können Inhalte platziert werden, die keinen zwingenden Aktualitätsbezug haben.

Das Karussell verläuft über die gesamte Breite des Contentbereichs. Bilder und Logos können einheitlich im 16:9- oder im 4:3-Format platziert werden. Das komplette Modul ist grau hinterlegt.

Der Text wird in einem Textfeld auf dem Bild am unteren Bildrand platziert. Das Textfeld ist weiß. Der Text ist blau und wird in Versalien gesetzt. Die Verlinkung erfolgt über das gesamte Bild.

Unterhalb des Bildes sind Punkte zur Positionsanzeige platziert. Maximal fünf Punkte und damit fünf Teaser können einzeln angezeigt werden.

Karussel Alle Maßangaben in Pixel

Abstand

  • zum linken und rechten Seitenrand: je 15 px
  • nach oben zum vorherigen Modul: 10 px
  • zwischen Bild und Positionspunkten: 20 px
  • Abstand nach unten zum nachfolgenden Modul: 15 px

Anzeige mehrerer Bild-Text-Teaser

Der ausgewählte Teaser ist ganz zu sehen. Rechts und links davon ist jeweils ein Teaser im Anschnitt zu sehen.

Der Text wird unterhalb des Bildes platziert. Die Schrift ist grau mit ausreichend barrierefreiem Farbkontrast zum Hintergrund.

Die Verlinkung erfolgt über die gesamte Teaserfläche (Bild und Text). Bei Touch auf einen der angeschnittenen Teaser wird dieser ausgewählt.

Karussel Alle Maßangaben in Pixel

Abstand

  • nach oben zum vorherigen Modul: 10 px
  • zwischen den Bildern: je 20 px
  • zwischen Bild und Teasertext: 10 px
  • zwischen Teasertext und Positionspunkten: 20 px
  • Abstand nach unten zum nachfolgenden Modul: 15 px

Kontaktbox

Die Kontaktbox beinhaltet eine Service-/Rufnummer mit Detailangaben und wird in Kombination mit einem aussagekräftigen Icon (zum Beispiel Telefonhörer) eingesetzt.

Schließt sich an die Kontaktbox ein weiteres Element, wie beispielsweise ein Link zum Gebärdensprachtelefon an, wird unterhalb der Kontaktbox als trennendes Element eine punktierte Linie platziert (nicht abgebildet).

Kontaktbox Alle Maßangaben in Pixel

Abstand

  • nach oben zum vorherigen Modul: 20 px
  • zum linken und rechten Seitenrand: je 15 px
  • zwischen Icon und Detailangaben: 30 px
  • nach unten zum nachfolgenden Modul: 20 px

Adresse/Kartenbox 

Im Bildbereich wird ein Ausschnitt mit Adressposition aus einem Kartendienst angezeigt. Vorab ist in jedem Fall zu klären, ob die Rechte für die Anzeige von Kartenausschnitten bestehen.

Der Textbereich ist mit grauer Schraffur hinterlegt und beinhaltet Kontaktangaben wie Person, Anschrift, Tel., Fax etc. Weiterführende Links, zum Beispiel zum Kontaktformular, werden unterhalb der Kontaktangaben in blauer Schriftfarbe gesetzt.

Anfahrt Kartenbox Alle Maßangaben in Pixel

Abstand

  • zwischen Kartenausschnitt und Kontaktheadline: 20 px
  • zum linken und rechten Seitenrand: je 15 px
  • zwischen den einzelnen Textabsätzen: je20 px
  • zwischen dem letzten Textabsatz und der Linkzeile: 20 px
  • Abstand nach unten zum nachfolgenden Modul: 30 px

Kalendermodul

Das Kalendermodul verläuft über die gesamte Contentbreite.

Über das Suchfeld kann nach konkreten Terminen gesucht werden, die im Content angezeigt werden. Die Terminanzeige kann auch innerhalb eines bestimmten Zeitraums erfolgen. Suchmodul und Zeitraum-Suche werden auf einer grauen Schraffur platziert.

Im Kalendermodul kann über die Pfeile rechts und links an der Monatsleiste zwischen Monaten navigiert werden. Es ist auch möglich, über Swipen der Monatsliste oder des Kalenders durch die Monate zu navigieren.

Tage mit Terminen sind im Kalendermodul durch blaue Zahlen dargestellt. Es werden nur Termine des aktuell ausgewählten Monats angezeigt. Tage ohne Termine sind ausgegraut, Tage außerhalb des aktuell ausgewählten Monats sind stärker ausgegraut.

Das Kalendermodul schließt nach unten mit einer grauen Linie ab.

Kalender Alle Maßangaben in Pixel

Abstand

  • zum linken und rechten Seitenrand: je 5 px
  • zwischen oberem Modulrand und Suchbegriff: 20 px
  • zwischen Suchbegriff und Suchfeldeingabe: 10 px
  • zwischen Suchfeldeingabe und Zeitraum: 20 px
  • zwischen Monatsanzeige und Zahlenfeld: 15 px
  • zwischen den einzelnen Zahlenfeldern horizontal und vertikal: je 8 px

Höhe der Zeitraum-Tabs: je 50 px

Fluides Verhalten

Alle vorgestellten Kern- und Ergänzungsmodule sind so konzipiert, dass bei Veränderung der Bildschirmdimensionen (Wechsel zwischen Hoch-  und Querformatansicht) alle Elemente in Form und Anordnung gleich bleiben. Die Elemente werden proportional zur Veränderung des Bildschirmformats vergrößert oder verkleinert.

Die beschriebenen Maßangaben sind daher immer als Mindestgrößen zu verstehen. Die Proportionen der Elemente zueinander sind jedoch einzuhalten.

Es steht für die Entwicklung zukünftiger Module offen, Elemente abhängig von den Bildschirmdimensionen in Form und Anordnung zueinander zu verändern.