EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein

6.0.Components

6.0.Components    6.1.Navigation

6.1.Navigation

The navigation concept is comprised of various components. All of the elements are interlocking, thus ensuring that the information available on the page is both clear and accessible to the user.

6.0.Components      6.1.Navigation      6.1.1.Header and site identifier

6.1.1.Header and site identifier

Internal applications

The word "Daimler" and the application name must be placed in the same position in the left-hand side of each page header for an application ("site identifier"). In the case of business units, the business unit name and the name of the application should be indicated.

Internal applications only use typography in the header  i.e. the Daimler logo is not used. Either a graphical element in Daimler CS or a pure text or image text solution can be used.

The assist bar should be placed in the upper right-hand section. It contains links such as help, contact and profile settings.

Some Image
Illustration

Example of the portal header

    For applications or pages with a horizontal navigation it must be ensured that the page header has sufficient space and that the minimum height is met (approx. 60 px).

    Some Image
    Illustration

    Examples of application labels: The site identifier can be one or two lines long.

      External applications


      Sites and applications that are primarily accessible externally use the Daimler logo. Accordingly, the header area must be designed differently.

      Some Image
      Illustration

      Header of external applications or sites

        6.0.Components      6.1.Navigation      6.1.2.Horizontal navigation of internal sites and applications

        6.1.2.Horizontal navigation of internal sites and applications

        Complex applications or sites can use a one- or two-line horizontal navigation to structure functional areas or content.

        In general, a horizontal navigation  in particular, the two-line version – is limited to the employee portal or similar central portals.

        The one-line horizontal navigation can, however, also be used for standard applications, blogs or specials. Purely informational intranet pages that are integrated in the portal do not have a horizontal navigation.

        6.0.Components      6.1.Navigation      6.1.3.Horizontal navigation of external sites

        6.1.3.Horizontal navigation of external sites

        As with the corporate website, external sites use a horizontal navigation. Here, up to three levels can be displayed, as is necessary for sites with complex content, such as the corporate website. Less comprehensive sites can easily make do with one or two levels of navigation.

        On the homepage, the level 1 navigation items are visible between the menu and search buttons. After clicking on one of these items, level 1 is reduced to a button to the right of the menu button and the level 2 menu items appear (sub-items of the active category), replacing the level 1 elements.

        If only one or two levels of navigation are required, it is sufficient if level 1 is displayed between menu and search button and, if required, level 2 is placed on a white background below it, as shown below it. It is not necessary to hide navigation level 1 if the site has a less complex structure.

         

        Some Image
        Illustration

        The structure and features of the horizontal navigation of an external application or website

          If the level 2 elements contain additional menu items, level 3 is displayed centered in a separate line below the header.

          Some Image
          Illustration

          The structure and features of the horizontal navigation of an external application or website

            Level 4 and 5 menu items can be placed as explained in the section "Vertical navigation" below.

            In addition, there is a flyout menu to help orient users. It is displayed by clicking on the menu button.

             

            Some Image
            Illustration

            The structure of the flyout menu of a website

              6.0.Components      6.1.Navigation      6.1.4.Vertical navigation

              6.1.4.Vertical navigation

              • The main navigation that should be used on the intranet and for applications is a vertical navigation, placed in the left-hand content area.
              • Users of an application should never be unsure of which page they are on; for this reason, the current menu item should always be highlighted.
              • For more deeply-nested structures, ideally the user will also be informed as to which main section he/she is currently in.
              Some Image
              Illustration

              Structure and features of the vertical navigation

                • A navigation structure should not be deeper than three or four levels.
                • Different functions should not be combined. For example, the filter and navigate functions should not be included in the same navigation structure or components.
                • Every page must have a page heading that reflects the name of the selected navigation item.