Consistent and effortless navigation is an essential element of the overall user experience.
Before building your application think about the overall structure and organize the content considering the device layout and navigation that will need to happen.
Categorizing content and elements into related groups will allow the user to easily scan and perform actions within your application in a way that is logical.
Signposts are recurring UI elements that help indicate to the user of where they can go to reach their goal within your app. Using the same elements throughout your interface will create a familiar environment for the user and minimise their learning curve.
Structure your app by organizing the content into a logical hierarchy.
Overview – the most accessible features you want the user to have instant access to, such as a list of emails.
Top level – filters of the overview, such as threads or recent emails.
Lower level – detailed views that show detailed information, such as contact information.
App settings – a place for the settings of your app, such as notification settings for receiving emails.
A typical structure may consist of one or more top level views, with detailed views on a lower level. Page stack navigation allows user to drill down from the top level to the detailed views through actions and navigational options within your UI.
On mobile devices, only one page is available at once. Once a page is chosen, the page will stack over the previous page. A Back Button will appear in the header to take the user back to the previous page if they wish.
Larger screens provide more screen estate for two or more panels to be visible at once. There are two ways page stack behaves depending on which panel the action is placed in.
If an action is triggered in the leftmost panel, then the page will takeover all panels.
If an action is triggered in the rightmost panel, then the page will stack over the same panel.
In this example, ‘Brightness & Display’ has been selected inside the left panel and takes over the rightmost panel view.
The Ubuntu toolkit provides a variety of components that can provide navigation within your application.
Use the header to contain the most important actions and navigational options inside your app. This allows the user to know where they are and what they can do.
The header features a maximum of four slots that can be arranged and combined to fulfills the user needs.
Slot Navigational option
Back – use to navigate to a previous page of the app (if other pages are available)
Navigation drawer – use to store more pages if there is no room in the header
Title (mandatory) – provide a one line title of the app or view
Subtitle (optional) – extra explanatory text up to two lines
Search – use to search for specific content
Settings – use to navigate to your app’s settings page
Use drawers sparingly because it:
Hides pages and actions from the user
Conflicts with the Back Button
Requires a tap to see available pages/or actions and two taps every time a user switches pages.
|A Back Button would be irrelevant if your app only has one page, because there would be no pages to go back from; so it is not required.|
For a multi-panel layout, such as on a desktop, each panel can display its own header, which can contain additional slots because more real estate is presented. This can be useful to reveal actions or views that were previously hidden in drawers in a single panels screen, like on mobile.
In this example, Dekko displays an action for the bottom edge, search and settings inside the lefthand panel, and in the rightmost panel it shows a delete, favourite and messaging.
|For more slot layout examples see Header|
You can decide how you want the the header to appear in four ways: Fixed, Fixed and Opaque, Fixed and Transparent, Hidden.
Useful for making section or action always accessible for when the user scrolls.
Useful if you don’t want the header to be the focus of attention, but want it readerly available if the user needs it.
Useful for full-screen applications, such as the Camera App.
Useful to display more content in a single screen.
If you choose not to have a header, then think of how users will navigate through your UI in a different way.
For example, the Clock app has a customized header where it uses icons at the top of the screen to take the user to different levels of the app.
The header section allows users to easily shift between categories views within the same page. If the main header is set to default, then the sections will slide away when the user scrolls down.
The main header is a separate component that can hold actions and navigational options.
The header section sits below the main header and allows for sub-navigation or filtering within the screen indicated by the header above. One option is always selected.
For example, if your app was presenting an inbox of emails, from ‘All’, the sub-sections could display ‘Recent’ and ‘Archive’ to further filter the content for the user. More section on the screen can be visible through swipe or clicking the hint that appears when a mouse is attached.
More tabs are indicated by an arrow revealed when the pointer hovers over it.
You can use search within the main header for an additional filter for your application; or as a global search. Search is invoked in a similar way in a touch and pointer environment by tapping or clicking on the search icon.
The bottom edge is specific to your application. It can give users quick access to the most important actions within your app, or a related view from the bottom of the screen via a hint (on touch), or from an action inside the header (pointer).
When the bottom edge is revealed the page stacks over the previous page and a chevron pointing down appears in the header to allow the user to go back to the previous page.
Appears on application launch to hint to the user that there is a bottom edge available.
The bar is revealed after Hint 1 has been interacted with.
Once the user starts to swipe up from the hint. The new view starts to be revealed.
A new view stacks over the previous page once the user has committed to the swipe.