Look behind the scenes – Navigation & user guidance

An essential part of the new concept of the website relaunch for the ISB was a structured and easy-to-use user guidance. In order to be able to map the profound hierarchies in a meaningful way, we therefore decided on a combination of different navigation elements.  

Already in the first phase of the tendering process, we dealt extensively with the basic structure and information architecture of the website to be redesigned for the Staatsinstitut für Schulqualität und Bildungsforschung München (Munich State Institute for School Quality and Educational Research). In order to be able to coordinate our thoughts and results with the client, functional wireframes or prototypes were created. This step enabled us to adapt the website to the needs of the ISB and their users in the best possible way.  

The basic structure of the website consists of four areas:  

• Header  
• Content area  
• Sidebar (optional)  
• Footer  

Through this very classical division we enable the users a clear orientation on the website. All elements can be found at the typical, "learned" positions and serve to guide users optimally through the website.

Header

The header consists of the logo, meta navigation, main navigation and search and represents the central component of orientation and user guidance on the website. The logo is linked to the homepage of the website and serves as a global link to the top level of the hierarchy. The lower levels, on the other hand, can be accessed via the main navigation.  

To ensure an optimal UX, we opted for a combination of top bar and mega menu (desktop), as well as a burger menu (mobile). 

Top Bar and Mega Menu

The top bar is clearly set off in the header and provides a good overview. It allows direct access to the main areas of the website. Deeper access, up to the fourth hierarchical level, is possible via the fold-out mega menu. In addition to the individual menu items, each level in the mega menu also offers the option of highlighting selected topics via special teasers.

Burger Menu

In the mobile version of the main navigation, all hierarchy levels of the page tree are displayed. Users can enter a lower level or return to all higher levels at any time. As a special aspect for an optimal user guidance, we have decided that the mobile menu opens context-sensitively and thus reflects the position of the user in the page tree. The menu therefore opens at the current level of the hierarchy, instead of the top level, which is usually displayed initially.

Search

In case users want to enter a specific topic on the website without navigating through the main navigation, they can search for the topic using the onsite search.

Scroll Behavior

Even when the website is scrolled, we want to make it easy for users to navigate the website. Depending on the viewport (desktop/mobile), the top bar or the mobile header is fixed at the top of the screen and thus enables access to the mega menu or the burger menu at any time. In this version, the search is reduced to an icon and opens the search field when clicked/touched.

Content area

We do not have any direct influence on the user guidance in the content area. All content is managed by the editors via the TYPO3 backend. However, we offer the editors various modules in the form of content elements, which are conceptually prepared to optimally support the user guidance.

Content Element: School Forms

For example, we have developed a content element that is intended to simplify direct access to the various main areas of the website. Based on the corresponding school form color, colored links are displayed as buttons in the front end of the website. The editor only has to select the pages to be linked and optional button labels in this content element.

Teaser

In addition to editorial content elements, we provide functional content elements. These elements are used to build content automatically, without time-consuming editorial maintenance. We have designed standardized teaser blocks especially for cross-links within the website. These teasers are used to highlight content on the website and give users an overview of the available content.

Sidebar

Consisting of two modules, the sidebar provides entry points to the other menu items, as well as contact information for the contact person of the current main area. 

Just like the top bar and the mobile header, the sidebar fixes itself as soon as the website is scrolled.

Coloring as visual Orientation

The ISB provides a variety of content, around school education for all available school forms in Bavaria. For a clearer separation of the contents, we decided to use the school form colors. This color coding serves to visually distinguish the individual school forms and was discreetly incorporated by us into the user guidance of the website and is mainly used in the sidebar.

Footer

At the end of the website, we would also like to provide users with suitable access to further topics on the website. Therefore, we decided on a combination of a dynamic and static footer. Depending on the user's position in the page tree, but regardless of the depth in the page tree, the dynamic part always represents the top level (including its submenu items) of the current position. This allows further navigation within the same topic. The static part, on the other hand, does not change and gives the user the possibility to switch to other areas of the website.