3.9.Headerdesign und Navigation
Seit dem 24.07.2019 gilt die neue Headergestaltung für externe Sites und Anwendungen wie in der unten gezeigten Abbildung. Auf der Hintergrundgrafik stehen das Unternehmenszeichen, der Sitename und die Assistbar.
Verbindlich ist dabei das Daimler-Chrome-Unternehmenszeichen auf silberner Bürstung zu verwenden. Die Beschreibung des Headers kann als PDF oder Sketch-Datei heruntergeladen werden. Weitere ZIP-Dateien mit Unternehmenszeichen und passender Bürstung für den Hintergrund in den passenden Größen für vier verschiedene Viewports stehen ebenfalls zur Verfügung.
Bei externen Seiten und Anwendungen muss unbedingt der Anbieter/Datenschutz-Link und das dazugehörige Icon in der oberen rechten Ecke platziert werden.
Das Navigationskonzept besteht aus verschiedenen Komponenten. Alle Elemente sind miteinander verzahnt. Dadurch wird sichergestellt, dass die auf der Seite verfügbaren Informationen für den Nutzer klar und leicht zugänglich sind.
3.9.1.Headergestaltung externer Sites und Applikationen
Sites und Anwendungen, die primär extern erreichbar sind, verwenden das Daimler-Logo. Entsprechend ist der Headerbereich unterschiedlich umzusetzen und der Hintergrund in gebürsteter Metalloptik ist obligatorisch.
Das Daimler-Unternehmenszeichen ist immer linksbündig am Inhaltsbereich auszurichten. Der Seitenname wird rechtsbündig an der gleichen Grundlinie ausgerichtet.
Die Schriftart "Daimler CS" muss für alle typografischen Elemente verwendet werden. Die Details dafür können der PDF bzw. dem Sketch-File zur Headergestaltung entnommen werden.
Hinweis: Als Pflichtelement für alle externen Sites ist im Header der Link zu Anbieter/Datenschutz in Verbindung mit dem "i"-Icon zu platzieren. Dieser Link ist immer rechts oben in der Assist Bar zu platzieren.
Wenn verschiedene Viewportgrößen einer Site verwendet werden, ist die Wort/Icon-Kombination für die Gerätegrößen Tablet (Hochformat) und für Desktop-Varianten zu verwenden. Nur im Viewport Smartphones kann die Angabe auf ein verlinktes "i"-Icon in gut sichtbarer Größe reduziert werden.
Nach Klick auf den Link bzw. das Icon öffnet sich der unten gezeigte Hinweis, der wiederum weiterführende Links zu den Themen "Rechtliche Hinweise", "Cookies" und "Datenschutz" enthalten sollte.
3.9.2.Headergestaltung - Downloads
3.9.3.Struktur Header interne Anwendungen
Header von internen Anwendungen
Auf dem Seitenheader von Anwendungen ist an identischer Stelle im linken Bereich die Kombination von „Daimler“ und dem Applikationsnamen zu platzieren („Site Identifier“). Für Geschäftsfelder wird entsprechend der Geschäftsfeldname und der Name der Applikation angegeben.
Interne Applikationen verwenden ausschließlich Typographie - d.h. nicht das Daimler-Logo - im Kopfbereich. Dabei kann entweder eine Grafik in Daimler CS erstellt oder auf eine reine HTML-Text bzw. Schriftlösung zurückgegriffen werden.
Oben rechts ist die „Assist Bar“ zu platzieren, sie enthält Links wie Hilfe, Kontakt oder Profil-Einstellungen.
Bei Applikationen oder Seiten mit horizontaler Navigation ist prinzipiell darauf zu achten, dass dem Seitenheader genug Platz eingeräumt wird und dafür eine Mindesthöhe (ca. 60 px) nicht unterschritten wird.
3.9.4.Horizontale Navigation für externe Sites und Applikationen
Externe Sites verwenden analog zur Corporate Website eine horizontale Navigation. Hier können bis zu drei Ebenen dargestellt werden, wie es für Sites mit komplexen Inhalten, wie die Konzernwebsite, notwendig ist. Weniger umfangreiche Sites kommen dabei sicher mit ein bis zwei Navigationsebenen aus.
Auf der Startseite sind zunächst, zwischen dem Menü- und Suchebutton die Navigationspunkte der Ebene 1 sichtbar, nach Klick auf einen dieser Punkte reduziert sich die Ebene 1 auf einen Button rechts vom Menübutton und es erscheinen die Menüpunkte der Ebene 2 (Unterpunkte der aktiven Rubrik) wo vorher die Hauptnavigationspunkte sichtbar waren.
Werden nur ein bis zwei Navigationsebenen benötigt, so reicht es aus, wenn die Ebene 1 zwischen Menü- und Suchebutton dargestellt wird und, wenn benötigt, die Ebene 2, wie unten dargestellt, darunter platziert wird. Auf das Ausblenden der Navigationsebene 1 kann bei einer wenig gegliederten Sitestruktur verzichtet werden.
Die einzeilige horizontale Navigation kann jedoch auch für Standard-Applikationen, Blogs oder Specials verwendet werden.
Wenn die Elemente der Ebene 2 zusätzliche Menüpunkte enthalten, wird die Ebene 3 in einer separaten Zeile unterhalb der Kopfzeile zentriert dargestellt.
Menüeinträge der Ebene 4 und 5 können ergänzend wie im Abschnitt "Vertikale Navigation" unten erläutert platziert werden.
Darüber hinaus gibt es zur besseren Orientierung der Nutzer ein Ausklappmenü. Dieses erscheint nach einem Klick auf den Menü-Button.
3.9.5.Horizontale Navigation für interner Sites und Applikationen
Komplexe Anwendungen oder Seiten können eine ein- oder zweizeilige horizontale Navigation verwenden, um funktionale Bereiche oder Inhalte zu strukturieren.
In der Regel ist eine horizontale Navigation - insbesondere die zweizeilige Variante - dem Mitarbeiter-Portal bzw. vergleichbaren zentralen Portalen vorbehalten.
Die einzeilige horizontale Navigation kann jedoch auch für Standard-Applikationen, Blogs oder Specials verwendet werden.
3.9.6.Vertikale Navigation
Die im Intranet und bei Anwendungen vorrangig einzusetzende Navigation ist eine im linken Inhaltsbereich platzierte vertikale Navigation.
Benutzer einer Anwendung dürfen nicht darüber im Unklaren gelassen werden, an welcher Stelle der Seite sie sich befinden; deshalb ist der jeweils aktive Menüpunkt immer hervorzuheben.
Bei tiefer geschachtelten Strukturen sollten idealerweise auch kenntlich gemacht werden, in welchem Hauptzweig man sich befindet.
- Eine Navigationsstruktur sollte nicht tiefer als drei bis vier Ebenen sein.
- Funktional dürfen nicht unterschiedliche Ansätze vermischt werden; z.B. dass Funktionen wie „Filtern“ und „Navigieren“ innerhalb der gleichen Navigationsstruktur bzw. Komponente abgedeckt werden.
- Jede Seite muss eine Seitenüberschrift haben, die den Namen des gewählten Navigationspunktes wiederholt