IDEATE & PLAN
DESIGN & DEVELOP
Corporate account services
Corporate virtual accounts
Spot rate booking
A consistant navigation between different apps and financial services guarantees a better end user experience. A shared navigation improves coherency and consistency. This page contains best practices, information architecture, design and developer assets to build apps that integrate and work nicely together at scale.
You can access the Finastra design sytem UI Kit that contains the assets (patterns and components) related to the global navigation by clicking on the button below.
Watch this video for a quick tour of the Global Navigation pattern and its related components.
You can brand the global navigation easily using Finastra's design system theme editor.
See below how the global navigation behaves in different screen widths.
Side navigation and Icon bar navigation
Global Navigation Structure
Here is what a global navigation comprises. After login, the launch page displays a welcome message with available apps, tools or resources based on user's access rights. From within an app, users can return to the welcome page, switch between applications, search or access contextual help.
At any point in the journey, users can switch apps, return to the welcome screen, search or access contextual help.
This welcome page allows users to access available apps, tools and resources. For example, it can direct to onboarding and getting started content.
The “launch page” is generated automatically after purchasing any applications on the store. Attention, never use the “launch page” as a pattern in your application. That to avoid a frame to frame effect.
An application contains a home page, one or multiple views, app bar and side navigation.
It is a good practice to display an app homepage to provide users with an app summary, key metrics, onboarding, documentation and other relevant content.
Depending on your user goals, your app homepage can focus more on:
- Getting started videos and training
- 360 degree overview of the day: key metrics, tasks to be done, etc.
- Combination of both
Inside app navigation
To navigate between different views of an app, you can combine tabs in the top app bar and a side navigation.
The side navigation can be collapsed by default or displayed as an icon bar. An icon bar is used to quickly toggle between different app views.
An item of the side navigation could also contain an additional level of sub-items.
At the top, the app bar provides access to search, notifications, help, pages of the app, user profile and more. From the app bar, users can also switch to another available app or go back to the launch page.
The app bar can contains:
- Notification center
- User profile
- More tools and resources
App bar variants
These are possible ways to customize the app bar:
- Display search as an icon, a small or a large input field
- Add more options in the more icon
- Show most frequent actions as primary button
- Display up to 3 tabs for app to group pages under 2 to 3 categories
- Use transparent background
Tabs in app bar vs tabs in the content area
- Tabs integrated in the app bar are global tabs. Use them to switch to entiry different view.
- Tabs in the main content area affect only the context of the main content area. Use them to switch between views that are related.
The side navigation gives access to different views within an app. The side navigation comprises an icon bar and a side panel
By default the icon bar is collapsed. Clicking or tapping the expand icon at the bottom left-hand corenr, the side panel. The side panel is a quick summary of the app view. It helps display a key metric at a glance, without having to update the main content, displays additional level of navigation or related links.
Side panel customization
You can customize the side panel with different content, such as:
- App logo, key metric
- Related links, action button, banner