Navigation and Action Patterns

One expectation users will make when they land on your site is that your site’s logo will be at the top of every page and clicking it will take them to your home page.

Traditionally the web has used page headers for this. On mobile devices use the App Bar.

The App Bar consists of three elements.

• Your sites logo
• Primary actions
• (Optional) Menu button

Nearly every site on the internet will have actions they enable their users to perform, search for example. Place buttons to perform these actions in the App Bar, giving your user a common to find out what the current actions are available on that page.

If you have a menu, use the hamburger icon (three horizontal lines) and place it on the far left or far right. Once you have selected a side, don’t move it, always keep it in the same position meaning the user only needs to learn where it is once.

Left vs Right Menu Button

If you have a slide in menu, you have the choice of putting the menu on the left or right hand side.

The top left corner is perceived by the user as where the most important elements of your UI lives, however it can also one of hardest places to reach when holding the phone one handed. Putting the menu on the top right still gives it prominence and importance, but is easier to tap while holding the phone single-handedly.

Guidelines

The App Bar is a set of principles that you should apply to give your users a predictable experience, but there is plenty of opportunity to be creative in terms of style of the bar, button and interactions.