App Bar Guidelines
App bars orient users and help them navigate through your platform on mobiles and smaller devices.
App bars are used to help users navigate through websites and platforms. They’re usually the primary navigation on mobile sites and the secondary navigation on apps.
App bar icons
To save space on mobile, text links are either collapsed under or replaced by icons. These icons and their “foody” names can often be mixed up, but it is crucial to understand the differences between them.
The hamburger menu is the primary navigation that allows users to navigate through your platform. When you click on the icon, it brings up a navigation drawer (usually on the left), which enables you to move to different parts of the site.
The dropdown menu allows you to change the category of the page you are currently on. For example, if you were looking at cat images, you could click the dropdown and switch to dog pictures.
You shouldn’t use this navigation type as primary navigation; it should only be used to change categories.
Kebab or options menu
The kebab menu gives users more options for how they can interact with the page they’re currently on. These interactions can include favoriting, sharing, bookmarking, and more.
For some sites, especially e-commerce sites, search functionality is essential in helping users find what they’re looking for. Hence, it should always be available to your user throughout their journey.
A search box will usually take over your app or site’s top bar because of the limited space.
You can create your own app bar styles using other icons.
The back arrow is usually used when a user has clicked on something to learn more about it. The back arrow allows them to go back to the main screen.
Back arrow with text
This style is seen more on iOS than Android apps. iOS systems tend to center their headings, which leaves some space in which to let the user know where the back arrow will take them.
When selecting multiple items, such as images, your heading bar may change to show you what new options are available.
There are a few best practices when it comes to designing app bars.
Only show the most used interactions
Ideally, you would only want to surface everyday interactions and hide the less common ones. By reducing the number of available options, you simplify the users’ journey and the number of decisions they would need to make.
UX Law: Pareto Principle
“The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.”
For smaller screen sizes, consider adding extra icons to the options menu
In an ideal world, users would be able to see all the essential options all the time. However, smaller devices and screens just simply don’t allow for that. You can display some of the icons on larger phones and then collapse them into the options menu on smaller ones.
Keep headings as short as possible
Where feasible, keep your heading as short as possible. This will make it easier for users to orient themselves and saves you future headaches when trying to fit everything into the design.
Don’t confuse kebabs, dropdowns, and hamburger icons
While they may not be able to articulate the difference between a hamburger menu and a kebab menu, most users will be familiar with the standard ways these navigational icons are used. To avoid confusion, it’s best to stick to commonly used patterns for navigational icons.