You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 17 Next »

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 ComponentUsage
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
Filter and Settings, Shortcuts, Notes and Subdashboards of the Dashboard

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.

ElementUsage
Dashboard headerThe 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 panelThe 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 DashboardThe 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.


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.

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

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.

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.

ElementUsage
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. 

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. 

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.

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

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 AssetUsage
Link ListA 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 ListA 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 ListA 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 ListA 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.

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.

  • No labels