Overview
Sometimes the user flow doesn’t end in the current view. Users might need to follow up on the next step in different views within the product or even jump to a different product to finish their task. To help users quickly and efficiently navigate to where they can continue their task, place links wisely in your product. This can shorten the user flow and improve the productivity of users, because they don’t need to spend too much time and effort to locate a right view in a correct context.
This guideline covers how to display and write these links in the following scopes.
- Product: A solution that consists of related features to perform tasks in a specific area. For example, SAP Analytics Cloud, SAP Data Warehouse Cloud, or SAP HANA Cloud Central.
- Application: A group of pages to perform an individual task. Usually, each application can cover one or multiple related features in a product. For example, Story Builder, Data Builder, or Connections.
- Pages: A single view that is a part of the user flow in an application. Pages sometimes need specific context to open them correctly.
Usage
- First, specify the scope of your use case: between different products or between applications in the same product.
- Then, decide where you want to keep the context in the source view when opening the target view, or simply open the target view in the default state. The former is especially useful when data in the source view is required to use the target view. Users can save time and effort by not having to fill in the same data again in the target view if it’s already entered (or selected) when they open it.
- Check details for each link component as well as the General Best Practices section.
General Best Practices
- You can use components that are best suited for the UI. Commonly used components are Buttons and Links.
- Links should be visually identifiable among other components.
- Use the same component for similar links so that users can easily and quickly discover them.
- Add links only when they make most sense. The purpose of including links is to shorten the user flow. Unexpected transition to other views will cost users to navigate back or even lose all their inputs.
- Clearly explain what users can achieve by clicking the link. Generic or vague labels require users to process the information which slows down their tasks. You can state the keyword upfront in the label.
Generic Link
Generic links are recommended when you want to provide entry points to pages or products that are related to the current view, but not directly tied to it.
Best Practices
- Place the link near the top area or near the element which is considered as the final step in the page. Users can easily find the link to follow up on the next step in their task.
- Display the name of the target application or specify the action that users can perform in the target view. Use an optional icon to describe the action or the page.
Between Products
- State the name of the product and place the optional product icon nearby.
- Add a description on what users can achieve with the target product (optional).
- If a target product is opened in a new tab of a web browser, add a simple indicator (sap-icon://inspect) next to the link to inform users of the new tab.
Between Applications
- Display the name of the target application or specify the action that users can perform in the application. Use an optional icon to describe the action or the page.
Examples
- The link as a button is located in the header of the page.
- The link describes the action so that users can decide to navigate to a different view.
- The label includes the icon (sap-icon://inspect) that informs users that it will be opened in a new tab.
- The link describes the action that users can perform in the target application.
- As this will be opened under the same shell, there is no visual indicator about opening a new tab.
Product Switcher
Users can switch between different products using the product switcher in the shell bar. Use this link when it’s available in both source and target product. Additional links are usually not necessary as the product switcher is visible from any pages in each product. The link opens the home view of the selected product with the same user, but will lose the current context. To deeply link different products while passing the context, use Contextual Link.
Navigation Menu
When a product is designed with the Fiori shell, you can include links to related applications in the same product in the navigation menu. Users can access this drop-down menu from the application in the shell bar.
The following items can be included in the menu.
- Related Apps: List of applications that are related with the current application. Links in this section open the default view of the selected application so the context in the current application will be lost.
- All My Apps: List of the main applications assigned to a user’s role.
- Navigation Hierarchy: Previous steps within a product that led to the current view.
Best Practices
- Curate the list of related applications carefully so that users can see most useful items only.
- Consider having additional links within the application as this menu is easily dismissed. Also, help users find this menu easily. Refer to User Guidance to learn how to include user guidance in the application.
Contextual Link
If the context is highly related between the target view and the source view, consider using this type of link to help users stay in the context to complete their tasks. Otherwise, they need to start from scratch to fill out relevant information from the source view to perform their tasks in the target view.
Best Practices
Place the link near parameters or objects that contain parameters to be passed. This will help users not only quickly discover the link but also easily connect the context between pages.
Between Products
If a target product is opened in a new tab of a web browser, consider informing users that they are leaving the current view using a warning message or a simple indicator such as an icon.
Between Applications
Display the name of the target application or specify the action that users can perform in the application. Use an optional icon to describe the action or the page.
Read Navigation – Deep Links to learn more about including parameters in the URL.
Examples
Between Products
- The link is located in the same row of the object in the table, which implies that the target product will be opened with the selected object.
- It describes the product name as well as actions that users can perform in the target product.
- The icon (sap-icon://inspect) is used to inform users that it will be opened in a new tab.
Between Applications
- The link is displayed in the selected time range that will be used in the target application.
- Due to the small area, only the icon (sap-icon://compare) is used to describe the action, "comparing the selected time range with different ranges".
Jump Off Navigation
Jump off Navigation allows users to perform context-based actions with the opened file, for example, moving or creating a new file in another application from the shell bar. Users can quickly continue working on the opened file in a different application while keeping the current application opened.
To read about the component, visit here: Shell Bar
Intent-based Navigation
In the embedded SAP Analytics Cloud story, users can navigate to the related view of regular LoB applications via Intent-based Navigation. The link is accessible in the action “Jump to…” of the context toolbar triggered from the object such as a chart or table. It is dynamically created based on the data set used in the source object. With this link, users can quickly investigate more details and data behind the source object in the Story without leaving the product.
Find more information here: Intent-based Navigation from Embedded SAC Story to LoB Apps (Dashboard Design Guidelines)
Resources
Support
If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.