Intro
Navigation in Edge.One is divided into two navigation templates. The global navigation and the local navigation. Edge.One's navigation is configurable, allowing a product to choose which header components and configurations meet their user and information requirements. Simple products have the flexibility to use only Global Navigation, while more complex products use a combination of Global and Local Navigation to match the depth of their navigation.
| Navigation Component | Usage |
|---|---|
| Global - Navigation Unified Production Workflow | A global navigation must always and everywhere be present in the Edge.One UI. It contains system and product elements that the user may need at any time: Navigation, authentication, notifications, and more. Global elements remain consistent from one context to another. System-level tasks include navigating to the main sections of Edge.One and accessing system utilities and tools such as Notifications, Settings or Editor. At this level, a user can manage the attributes that apply to their indivudual data ecosystem. Global Task Examples Log in, notifications, profile access, dashboard link, setting time, billing information, user permissions, switching from one product to another. |
| Local- Navigation | Local navigation does not need to be everywhere in the Edge.One UI. Simple applications do not require local navigation. As soon as a dashboard requires e.g. nodes, dependencies, favorites or subdashboards, this must be placed in the local navigation. The local navigation always controls only the current dashboard and can vary from dashboard to dashboard. The dashboard navigation boardlet is always the same in form and appearance within a breakpoint and may not be changed. Local navigation tasks include navigating between dashboard nodes, filtering dependencies, and navigating to dashboard subdashboards. Global Task Examples |
Global Navigation
The global navigation of EdgeOne Inspire consists of three basic elements. A home dashboard in the UPW (Unified Production Workplace) is the center of all navigation paths. The user always starts from the home dashboard and navigates further into the apps via multiple dashboards. Multiple apps can form one process. The ubiquitous back navigation feature allows the user to return to the previous dashboard. The user can navigate back to the home dashboard at any time using the logo.
| Element | Usage |
|---|---|
| Dashboard header | The highest level of navigation. The burger inside the header is the trigger for the left navigation bar. The header is always cosistent in its elements and gives the user, by the dashboard name, indication on which dashboard the user is currently located. All global settings and notifications are located exclusively in the header. |
| Navigation panel | The navigation channel, which is responsible for the navigation in an application, can be used alone for simple products or in combination with a local navigation to meet the depth of the application. In the navigation channel, the user can navigate from dashboard to dashboard within the application. |
| Home Dashboard | The Home Dashboard is customized to meet the needs of the persona using it. With the help of the Dashboard Editor, the home dashboard can be customized (in a future version) even further. The home dashboard can consist of KPI cards, interactive charts, tables or other aggregated and non-aggregated surface elements. The home dashboard can alert the user to issues that need to be addressed. These can be task lists, error reports, and more. |
Dashboard Header Anatomy
01 – Hamburger menu The hamburger icon is used to open application navigation such as the left panel.
02 – Position action bar This action bar is intended for datepicker and breadcrump only.
Content of this action bar depends on the content.
03 – Dashboard title The header name should be the name of the parent domain and be as brief as possible
while giving the user a sense of place.
04 – Product logo For Edge.One products, the header name is always preceded by “Edge.One”
05 – Header action bar These utilities are reserved for universal, system-level functions such as profile, search, notifications, and similar functions. Not every product on a system is required to show the same utilities, but it is recommended for a better cross-product user experience.
Dashboard Header Alignment
Dashboard Header Action bar
Die Action bar besteht innerhalb der globalen Navigation immer aus den gleichen Actions.
01 – Global Search Die meisten Suchvorgänge beginnen mit einer breiten Suche, deren Umfang sich mit Hilfe von Filtern einschränkt lässt.
02 – Profile and System Settings Die Einstellungenpunkte sind in einer Overflow Liste aufgeführt. Die Inhalte können sich von User zu User unterscheiden
03 – Notifications currently not possible to describe exactly
Navigation Panel Anatomy
The navigation panel must always be placed on the left side of the dashboard and always consists of the same primary asset sets (1,2,3,6). The number of dashboard groups may vary. The dashboard groups may consist of simple sub menus and sub menu groups. Sub menu groups are always recognizable by the Expand/Collapse icon.
01 – Close Icon for the closeing of the navigation panel.
02 – Resize icon Icon for the individual sliding of the navigation panel.
03 – Dashboard group Group of sub-menus form a dashboard group.
04 – Dashboard group overline Each dashboard group must always be titled by an overline.
05 – Sub-menu Basic link element for the menu.
06 – Tool group tools groups contain sub-menus that link to different tools or services. the number of tools links may vary from user to user.
Navigation Panel Alignment
Responsive behavior
The header always remains the same in its position and function. In all horizontal representations of the header, the position and number of contents are always the same. In all vertical representations of the header, the header's position remains the same, but content may be moved from the global navigation to the local navigation.
Local Navigation
Local navigation does not need to be everywhere in the Edge.One UI. Simple applications do not require local navigation. As soon as a dashboard requires e.g. nodes, dependencies, favorites or subdashboards, this must be placed in the local navigation. The local navigation always controls only the current dashboard and can vary from dashboard to dashboard.
The dashboard navigation boardlet has two display options, Collapsed and Extended. This is necessary to keep the focus on the content of the dashboard. Shape and presentation within a breakpoint are always the same and must not be changed.
| Element | Usage |
|---|---|
| Collapsed Dashboard
Navigation Boardlet | The Collapsed Dashboard Navigation Boardlet is the compressed representation of the local navigation. All navigation contents are displayed to the user via action icons with the corresponding overflow menu. |
| Extended Dashboard
Navigation Boardlet | The Extended Dashboard Navigation Boardlet is the detailed representation of the local navigation. The user is presented with all navigation content via four different navigation assets. A link list, node list, map list or conflict list. The number and arrangement of the assets can be freely varied. |
Collapsed Dashboard Navigation Boardlet
The Collapsed Dashboard Navigation Boardlet always has the same proportions and is located on the left side of the dashboard. The content can vary from dashboard to dashboard and is represented by an action icon. The action icon opens an overflow menu where all thematic actions are listed. In case the customer wants to place his logo inside Edge.One this is only possible in the navigation boardlet.
Collapsed Navigation Boardlet - Anatomy
01 – Extender The Action Icon for extend Aand collapse the navigation boardlet.
02 – Divider A divider helps the user to differentiate between several action icons that have a different content and function.
03 – Content Actions These actions are variable and can be selected by the user/creator.
04 – Client Logo In case the customer wants his own logo, it will be placed only here.
Only signets or rectangular logos are allowed
05 – Overflow Action Link The number of links and the content of the link are variable.
06 – Overflow Menu The overflow menu contains all thematic actions. It opens only to the right.
Collapsed Navigation Boardlet - Alignment
Extended Dashboard Navigation Boardlet
The Extended Dashboard Navigation Boardlet always has the same proportions and is located on the left side of the dashboard. The content can vary from dashboard to dashboard and is represented by a Navigation Asset. Currently there are four different navigation assets. A link list, node list, map list or conflict list. The number and arrangement of the assets can be varied freely. However, we recommend not to use more than three navigation assets in combination, otherwise space problems may occur.
In case the customer wants to place his logo inside Edge.One this is only possible in the navigation boardlet.
Collapsed and Extended Navigation Boardlet
Navigation Assets
01 – Navigation Boardlet with only one Navigation Asset As an example, here you can see a card-list.
02 – Navigation Boardlet with two Navigation Assets As an example you can see here a combination
of card-list with a link-list.
03 – Navigation Boardlet with two Navigation Assets As an example you can see here a combination
of conflict-list with a link-list.
04 – Navigation Boardlet with two Navigation Assets As an example you can see here a combination
of node-list with a link-list
05 – Navigation Boardlet with three Navigation Assets As an example you can see here a combination
of card-List with a link-list and a onflict-list.
| Navigation Asset | Usage |
|---|---|
| Link List | A link-list always consists of a scrollable collection of links. The user can use this list to move faster in the content or to display favorite data with one click. |
| Node List | A node-list always consists of a scrollable collection of notes. The user can move back and forth through this list within the different nodes |
| Card List | A card-list always consists of a scrollable collection of minicards. The minicards can give the user detailed information about the underlying content. The user can move within the contents or data of the dashboard with the use of this list. You can find detailed information about the cards here. |
| Conflicts List | A conflict-list always consists of a scrollable collection of conflict-cards. The number of conflicts can be vary. The user can use this list as an overview and to filter conflicts in their dashboard. |
Extended Dashboard Navigation Boardlet - Anatomy
01 – Extender The Action Icon for extend and collapse the navigation boardlet.
02 – Divider A divider helps the user to differentiate between several action icons that have a different content and function.
03 – Link List Assets.
04 – Node-List Assets.
05 – Card-List.
06 – Client Logo In case the customer wants his own logo, it will be placed only here. Only signets or rectangular logos are allowed
A – Navigation Asset.
B – Content of a navigation asset The content can vary, see overview navigation asset.
C – Overline of a navigation asset Overlines can be used with or without an action bar.
Extended Dashboard Navigation Boardlet - Alignment
Collapsed Navigation Boardlet Anatomy
01 – Extender The Action Icon for extend and collapse the navigation boardlet.
02 – Divider A divider helps the user to differentiate between several action icons that have a different content and function.
03 – Content Actions These actions are variable and can be selected by the user/creator.
04 – Client Logo In case the customer wants his own logo, it will be placed only here.
Only signets or rectangular logos are allowed
05 – Overflow Action Link The number of links and the content of the link are variable.
06 – Overflow Menu The overflow menu contains all thematic actions. It opens only to the right.
Collapsed Navigation Boardlet Alignment
Breadcrump
Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step. The breadcrump is always located in the left part of the header, it can be expanded or collapsed as needed. this is important so that the header is always clear for the user and the breakcrump does not play a primary role in all applications.
When to use
Breadcrumbs are effective in products and experiences that have a large amount of content organized in a hierarchy of more than two levels. They take up little space but still provide context for the user’s place in the navigation hierarchy.
When to use
Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation. They shouldn’t be used for products that have single level navigation because they create unnecessary clutter.
Anatomy
Breadcrumbs are placed in the upper left area of the page. They are located inside the header. The breadcrumb must always be placed in the header as a primary element of the global navigation. Once the user leaves the homeboard, the breadcrump must have a back arrow. With this arrow the user can navigate back step by step.
01 – Go back icon With the action icon the user can navigate back step by step.
02 – Breadcrump icon With this icon the user can expand and collapse the breadcrump.
03 – Breadcrump link Directs users to the parent-level page.
04 – Separator Clearly distinguishes between each page.
Behavior
All pages in the breadcrumb component should be interactive and link to the corresponding pages. The go-back icon can only go back one step in the page structure at a time.
Mouse
Users can trigger an element by clicking on a breadcrumb page link. The separators between page links are not interactive.
Keyboard
Users can navigate between breadcrumb links by pressing Tab and Shift-Tab. Users can trigger a breadcrumb link by pressing Enter while the link has focus.
Breadcrumb
By default, the Inspire breadcrumb must not be placed expanded in the header. It must always be expanded by the user as needed. This is important so that the header retains its tidy and clear design. In case of complex navigation or linking, the breadcrumb must also be expanded by default.
