Language selection

Search

Search

Hierarchical Navigation

Global Navigation

FIX

The global navigation shows the main points of access to a website as tabs. It is separated from the header above by a red line. The terminology used for the tabs should be chosen carefully, as this is what gives the user the first impression of the purpose of the website.

Behavior: Clicking on a tab opens a mega flyout with a menu showing the sub-pages.

There are different flyout types: e.g. the teaser and the list flyout. In the teaser flyout, the second navigation level, and in the list flyout the second and third navigation levels can be selected directly. This makes it possible to skip navigation nodes for which there are no contents.

It is also possible to develop and use new flyout types. For instance, a country selection flyout was developed for the EDA.

The flyout can be closed again by clicking on the “close” function at the top right, the tab at the bottom edge, by clicking on the background, or by clicking on the active tab again.

Only on the home page are all the tabs closed. If the user navigates in the area below a tab, this tab remains actively selected.

Add <div class="overlay"></div> at the end of the body tag to display the gray overlay.

Breadcrumb

FIX

The breadcrumb is a line of text below the header which shows the user the path, i.e. the position of the web page currently being used within the information architecture of the website. If there is no global navigation feature, the breadcrumb navigation is placed immediately below the red line which closes the header section.

Thanks to the breadcrumb, users can see at a glance where they are on the site map.

When the user clicks on a navigation point in the path, the appropriate page opens. When the user clicks on a link on the first or second navigation level (pages which do not have content of their own), an overview page without a navigation pane is opened.

On smartphones there is always a link at the end of the page to the home page and to the level above. There is no complete breadcrumb on the smartphone version.

Breadcrumbs

Back to Overview

FIX

The “back to overview” navigation links pages that do not appear in the navigation to their “parent page”. An example of this can be found in the details page of the publications section.

The “back to overview” link appears before the page title at the top of the content pane, and at the end of the page before the page-end navigation.

Back to Overview

Page Navigation List (Left Sidebar Navigation)

FIX

The sub-navigation on the left sidebar of the content section is a so-called dynamic navigation. It always only shows the page that has currently been selected and the navigation options that page has to offer:

  • Navigation header: the name of the active page has a color bar and is highlighted typographically
  • “Back” link: above the navigation header, there is a link leading back to the previous navigation level
  • Sub-pages: below the navigation header, all of the lower navigation levels are listed as links
  • Sister pages: pages located on the same navigation level as the active page are not listed here. They are accessed via the global navigation or the “back” link. Only on the lowest navigation level, where there are no other sub-pages, are sister pages shown – if there are any.

Behavior

If a link to a sub-page is clicked on, a new page is loaded. On this page, the selected page is shown as the navigation header. The “back” link leads to the navigation level above, i.e. to the page on which the user has just been. Below the navigation header there are links to the lower navigation levels.

If a page on the same navigation level as the active page (a sister page) is to be accessed, this is either done via back-linking to the page above or via the global navigation.

If a page on the lowest navigation level is clicked on (i.e. the selected page has no sub-pages), the navigation is not replaced. Instead, the page currently selected is marked with a red line and the other pages on the same level (sister pages) remain visible.

example

As long as a page has sub-pages, the navigation head changes dynamically during the navigation (drilling down) process (Step 1). When the lowest level of the navigation tree has been reached, and the pages no longer have sub-pages, only the display changes (Step 2).

Implementation for Smartphones

On smartphones, the service navigation is shown at the end of the page above the footer.

Left nav on mobile

On smartphones, the subnavigation appears between header and content.

Faceted Page Navigation

FLEX

Faceted navigation serves the purpose of filtering elements (e.g. in a product catalog) on the basis of predefined criteria, so-called facets. These facets are grouped by facet types. A facet which contains subfacets is marked with a triangle.

Behavior:

After a page with faceted navigation has been loaded, a list containing the facets of the highest level of facet types remains open. The user can open or close any number of other facet types.

For every facet type, the user can only open one facet; the other facets are hidden. The selected facet type can then no longer be closed.

If a facet has subfacets, these subfacets are shown after the facet has been selected. The user can then further limit the selection with the help of the subfacets. A selection can be undone with a delete button.

The contents of the page are adapted to show the selection made in the faceted navigation, and are constantly updated.

Implementation for Smartphones:

On smartphones, the navigation is accessed via a filter link, and it behaves in the same way as the faceted navigation for desktop computers. Unlike in the desktop version, the contents of the page are only updated when the user closes the faceted navigation.