Overview

These are the components that together support our users' ability to navigate:

• Content navigation
• Main navigation
• Bread crumbs
• Global functions
• Footer links

Content navigation

Users will always be more prone to navigate by clicking their own data, than the navigation provided as site hierarchy.

• Individual focus
• Personalized framework
• Glanceable for efficiency
• Proactivity, how might we assist users in understanding data and guiding them further.
• Widgets/modules. What is suitable to extract to a widget from a module to give good overview and draw user attention to the module.
• Overview-pages may aggregate overview-widgets. The owners of the overview pages need to manage the user needs for the area.

Figma templates

Use these Figma templates when designing responsive micro frontend pages for common shells: Templates for common shells

Main navigation for internet banks

The main navigation of internet banks consists of

• The overview (start page)
• The main navigation

Overview

This is the landing page of the site. Should give a good overview of the current financial situation and guide users to the items that need attention from this visit. In a further future we may have more than one overview. It might be possible to build own custom pages or projects consisting of widgets and tools for a particular task (i.e. to assist in a complex task like buying a home).

Main navigation

Every site needs a backbone of the hierarchical structure. This gives a sense of structure and makes it easier to find functions related to each other. The main navigation has two levels.

• Level 1 is focused on the product areas and can either expand for level 2 or go directly to one page. Level 1 is controlled by channel management.
• Level 2 should include as few options as possible to guide to a functional group within the product area. Level 2 is controlled by the product area.

Main navigation for Nexus

In Nexus, the employee can search for a customer and get the customer's holdings (see the same pages as the customer) in the same navigation structure as the employee. The employee can see several customers at the same time by doing a new search and selecting the customer, then the customer opens in a new tab in the browser.

Breadcrumbs

The shell is responsible for the breadcrumbs and is placed above the H1. 

However, support for breadcrumbs is not implemented in all channels yet. If you need breadcrumbs in the meantime, add them to your micro frontend placed under H1 (main header). See guidelines and specifications for Breadcrumbs.

Global functions

The global functions group features that are available on all pages and are always the same.

Profile select

The profile of a user is a centralised feature that gives a clear sense of being logged in displaying the users name. Under the profile a number of features kept and may include items like:

• Personal settings
• Change profile/company
• Logout

Notifications

Here users are notified about items they need to act upon. Some may feel like nice to know, but it may be important for legal reasons to make sure users see this message.

Looking into the future, it may also hold a feed of everything that happens with your finances and gives you an update that’s easily glanceable just like the updates from Facebook.

Footer links

The footer is placed at the very bottom of each page and should focus on contact options. For example entry points for contact, feedback and help.

• The foot can include a static and a floating (support) part.
• The shell is responsible for the footer.