Navigation patterns¶
Navigating Service Hub differs between desktop and tablet & mobile. In this section we will provide you with a description of the two navigation patterns, but first we start with an explanation of the terminology.
Navigation terminology¶
Service Hub content is organized in a certain hierarchy. The items on the top of the hierarchy are the most prominent and accessible and provide the entry point to the items lower in the hierarchy.
Home¶
The home page is the main entrance of Service Hub. It is the highest level of the hierarchy.
Parent and child¶
A higher level of the navigational hierarchy is called a parent, and the level (or levels) below are referred to as children.
For example, a topic page is the parent to its detail pages.
Siblings¶
Pages that have the same parent are called siblings.
For example, all ticket detail pages in tabs below the ticket topic.
Navigation paths¶
When you navigate more deeply into Service Hub, you descend from a higher level of the hierarchy to a lower one. Moving from a parent to a child is descending navigation. Moving from child to parent is ascending navigation.
Parent child navigation
Moving between siblings is referred to as lateral navigation.
Sibling navigation
Besides navigating between pages that are navigationally adjacent you can sometimes quickly move between pages that are not, this is called linking. There are two types of links used in Service Hub; cross links and external links.
Cross links are links that bring you anywhere within the application.
External links are links to sources outside Service Hub.
Navigation using links
UI elements used for navigation¶
Navigation drawer
The navigation drawer allows you to switch between topics, e.g. from Tickets to Contacts.
Tabs
Service Hub uses tabs on multiple levels. Tabs allow you to quickly move between a limited number of equally important views, e.g. between different activity detail pages or between a time line and unplanned when on a contact detail page.
Bread crumbs
When you navigate to related (child) pages from an open detail page a bread crumb trail is build and displayed on the top left of the detail page. The bread crumbs allow you to quickly move between the different locations (pages) you have visited during your journey (navigation flow).
Buttons and links
Throughout the UI, buttons and links behave similar. Buttons and links are used for commands like Read more, View details, Open ... details and (navigate) Back.
Dirty indicator
Once a topic's attribute value is changed the attribute is flagged as 'dirty', meaning it differs from the value stored in memory (the database). As soon as the change is saved, the dirty-flag gets removed from the attribute.
In Service Hub we have implemented a UI element to visualize the dirty-flag, we call this the dirty indicator. The dirty indicator is implemented as a green dot that gets displayed on the bread crumb, tab and navigation drawer. The dirty indicator allows you to keep track of unsaved changes on while switching pages and/or entities.
Desktop navigation¶
In the desktop UI of Service Hub we support all the navigation paths explained above. Using the different UI elements we allow you to quickly navigate back and forth through hierarchies and topics while keeping track of everything you have opened.
In the diagram below we have displayed an example scenario with open pages and ways you could navigate.
Desktop navigation example.
Tablet & mobile navigation¶
Due to the limited amount of screen real estate available on tablet and mobile devices we have limited the navigation options in these UIs. Unlike the desktop, which supports a more complex navigation, the tablet and mobile UI enforces you to take a very simple linear approach. We have chosen this approach because otherwise it would become cumbersome to keep track of everything that is opened and you might lose changes quite often.
The tablet and mobile UIs support only one open page at a time. Of course you can navigate descending, ascending and lateral through pages, but every time you open a new page the previous page is no longer visible. While you navigate through Service Hub we keep track of the path you followed using a breadcrumb trail (not visible in the UI). If you want to navigate back you will be forced to use the same path, but then vice versa.
Please take a look at the image set below that illustrates the tablet and mobile UI navigation pattern.
In the image directly below the user started a path at the Home-page and from there navigated to a topic page (1), a detail page (2) and then another child page was opened (3).
Now imagine the user would like to open a different detail page (Detail page X2) from the parent topic page (Topic page X).
Within the desktop UI the user could immediately switch to the topic page as illustrated below (4)
On tablet and mobile devices this isn't possible, instead the user has to go back to the topics page step-by-step. First back from Child page X1.1 to Detail page X1 (4).
Then back from Detail page X1 to Topic page X (5)
And then the user can open Detail page X2 (6).
This was just one example to illustrate the linear navigation on tablet and mobile device, but please keep in mind it applies to all scenarios. If you'd like to switch topics, move from one topic to search, it is all working similar. Navigate back to the root and start a new navigation path from there.
Similar navigation
The navigation within Service Hub on these devices is quite similar to the navigation options within email apps on mobile devices. From the folder list, you go into one folder and then open an email. If you'd like to open another email message, you first have to close the current open email message before you can open the other one. The same applies to switching folders, from Inbox to Sent items for example.
Can't find what you're looking for, or was the documentation unclear? Please send us a message and help us improve our documentation.