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.
Overview – Dialer
Top level – Contacts
Lower detailed level – Contact information
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.
Page stack in a multi-panel layout
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.
Page stack over both panels
If an action is triggered in the leftmost panel, then the page will takeover all panels.
Page stack over the right hand panel
If an action is triggered in the rightmost panel, then the page will stack over the same panel.
System Settings – right panel view change
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.
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.
Headers in multi-panel layout
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.
More actions revealed
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.
You can decide how you want the the header to appear in four ways: Fixed, Fixed and Opaque, Fixed and Transparent, Hidden.
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.
Search in the main header
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.