Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Komponenten    3.9.Headerdesign und Navigation

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.0.Komponenten      3.9.Headerdesign und Navigation      3.9.1.Headergestaltung externer Sites und Applikationen

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.

Some Image
Abbildung

Struktur und Merkmale des Headers einer externen Anwendung oder Website

    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.

    Some Image
    Abbildung

    Von oben nach unten, Layout des Provider/Privacy-Links für die Ansichtsfenstergrößen Desktop XL (mehr als 1680 Pixel), Desktop L (bis 1680 Pixel), M (Tablet-Hochformat) und XS (Smartphone).

      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.0.Komponenten      3.9.Headerdesign und Navigation      3.9.3.Struktur Header interne Anwendungen

      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.

      Some Image
      Abbildung

      Kopfbereich einer Anwendung

        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.

        Some Image
        Abbildung

        Kopfbereich einer Anwendung

          3.0.Komponenten      3.9.Headerdesign und Navigation      3.9.4.Horizontale Navigation für externe Sites und Applikationen

          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.

          Some Image
          Abbildung

          Struktur und Merkmale der horizontalen Navigation einer externen Anwendung oder Website

            Wenn die Elemente der Ebene 2 zusätzliche Menüpunkte enthalten, wird die Ebene 3 in einer separaten Zeile unterhalb der Kopfzeile zentriert dargestellt.

            Some Image
            Abbildung

            Struktur und Merkmale der horizontalen Navigation einer externen Anwendung oder Website

              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.

              Some Image
              Abbildung

              Die Struktur des Flyout-Menüs einer Website

                3.0.Komponenten      3.9.Headerdesign und Navigation      3.9.5.Horizontale Navigation für interner Sites und Applikationen

                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.0.Komponenten      3.9.Headerdesign und Navigation      3.9.6.Vertikale Navigation

                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.

                Some Image
                Abbildung

                Struktur und Merkmale der vertikalen Navigation

                  • 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