What you need to know about an app top bar
I studied 100+ apps and tried to uncover certain patterns and rules for designing an app top bar.
Special Thanks to Chunhan Chen, Shuning Wang, Szu-Fang W. and Jingwen Chen for helping me find the top bar examples.
We might think that an app top bar has simple composition and takes no effort to design, but designing for a precise, beautiful, context and user-goal-fitting top bar is not easy.
That is why I studied 100+ apps and tried to uncover certain patterns and rules for an app top bar.
In this article, I will guide you through what an app top bar is consisted of, when it will change and how to design for the interaction of a top bar.
1. Common Patterns for an App Top Bar
A Typical Top Bar
What does a top bar bar look like, and what is it consist of?
Generally, a top bar provides information about the overarching goal of this page together with potential actions that a user might take specifically to this page. A Typical Top Bar usually look like this:
Common components in a top bar are: titles, container, action items, navigation icons and more.
Titles are usually working together with the bottom navigation to explain the purpose of this page. Titles on a top bar is either the same with bottom navigation or longer because the spacing is allowing it. If the bottom navigation is icon-only, then the title on the top bar has to bear the weight of explaining the purpose of this page and cannot be omitted in most cases.
Titles are placed in the middle of a top bar in most cases, but sometimes can be displayed on the top left (in IOS apps and FB). Aside from explaining the purpose of this page, titles can also be used for branding purposes.
Titles can also be explanatory in terms of the actions that the user is taking on this page. For example, when the user is trying to edit the profile, the title says “edit profile“ on slack:
Sometimes, there are supplemental texts below the top bar title to fill in more context for the user on this page.
Containers are in trend of getting less and less obvious these days. Containers are usually in greyed, unsaturated color to bring out the rest of the content on that page. Sometimes there’s simply an underline or shadow to separate the top bar from the content below.
There are exceptions to it, however, where containers are in saturated colors. A common use case is branding.
Action items usually shows up in the form of icons and text buttons on a top bar. 0–4 Icons or text buttons can be displayed when needed on a top bar. Although they are varied by the purpose of this page, there are some common icons/actions that can appear very often and certain pattern to follow. Keep in mind that the following patterns/rules cannot speak for every case.
Common actions items can include:
- Back usually appears on the top left when the user enters a secondary/tertiary page. Clicking on back or the back arrow leads the user back to the page they originated from.
- Close or cancel can appear on the left or right, usually comes in a full-screen modal, or a self-contained process, which is an action that has a clear start and endpoint to it. The user usually has one goal on this page. A close or cancel can appear on the left or right of a top bar, depending on if there’s other actions.
When to use back and when to use close in a top bar?
Back is used when the user is on a long exploration journey that takes more than one step OR doesn’t have a short, clear purpose on that page whereas Close signifies a single, complete one-page action. It is used when the user is in a self-contained process — it has a clear start and endpoint, and specific actions can be taken on this page to commit a specific purpose.
- Profile or account thumbnail is sometimes displayed on the top bar as an easy access for the user to edit personal details, settings, or switch accounts.
- Add or search help the user to browse more content or expand their areas of interests in this app, and therefore usually is displayed on the top right as easy touch targets, if they were not displayed on a separate row.
Sometimes the most frequent action that a user might take in this app is displayed on the top bar (especially top right) to be an easy touch target at all time. For example, in NetEase Music, the current song is always displayed on the top right and the user can go into that song anytime.
One thing to notice is that to not attract too much attention until there’s a user need, icons /text buttons on the top bar are usually line icons instead of solid icons; and in unsaturated color — unless when they do want to attract the user attention, usually, it is to prompt the user to make an action.
Top Bar For Search
Generally a top bar provides information about the overarching goal of this page with a title, though sometimes, when the page is designed for the user to browse content, it can be replaced by search functionalities.
When do we Lose Top Bar Entirely?
When to lose the top bar entirely? When there’s a lot of content on the top, some apps make the top bar very simple or lose it entirely. For example, Robinhood display the most important user information — daily investment growth on top, with a prompting text button to prompt friends invitation on top.
A common use case for losing the entire top bar is the personal profile page. The purpose of such a page is self-implicated, and personal profile information takes a lot of space on the top.
Even when a personal profile page has a top bar, it usually has no title or a meaningful one (like the user account name). A counter example to that is slack, where the “You” top bar title seems redundant with the content.
2. Contextual Top Bar
A lot of interaction can happen in one page, and sometimes a top bar needs to bear weight of interactions by changing its appearances or contents. When will a top bar change its contents?
Reflecting Scrolling Position
Sometimes, the content of a top bar can change based on the user’s scrolling position. This usually happens when the top has a lot of important information but also takes up a lot of space. When the user scrolls down for more content, he/she still needs the information/actions on the top. This is when contextual top bar shows up as a reference.
Another form of contextual top bar is in Google Search, where the user scrolls down and the search bar will disappear (because Google is guessing the user wants to concentrate on browsing content), but the search top bar comes back whenever the user is scrolling up. Regardless or forms of interaction, the key of a contextual top bar is that it shows up when the user needs it.
Such contextual top bar stick on the top when the user scrolls down because they contain the following things that a user might need:
- Search functionalities or common actions that a user can take.
- Title/Important info as a reference to remind the user which page he/she is on
Notice that in the above cases, a top bar has to stick when the user scrolls down. But when does the top bar not stick?
Instead of what the user might need, a top bar that won’t stick usually doesn’t help the user a lot for content browsing and potential actions that can take on this page. For example, Starbucks has a delightful greeting on top, but it won’t stay all the way when the user is scrolling down and try to select which coffee to take. Airbnb shows the listed house’s pictures on the top to impress the user, but when the user scrolls down, only the common actions stays, and pictures will not.
Reflecting Changes on the Current Page
Sometimes, the top bar’s content can change to reflect the instant changes happening on this page. For example, Robinhood’s top bar’s personal investment balance can change instantly.
A common use case is to reflect the instant incoming messages. For example, instagram has a message icon that shows the incoming message in red circles. In Wechat, the number of messages a user gets shows up with the title.
3. Interactive Top Bar
As a noticeable and indispensable part of the page, sometimes an interactive top bar relieves the burden of interaction for the rest of the page, aside from common actions encapsulated in top bar icons or text buttons (add, cancel, back, etc). What are some of the interesting interactions that can happen in a top bar?
Interactive Title
Sometimes, the content of an app is very dependent on the preferences, locations. time frames and other personal contexts of the user. In this case, app usually relies on initial user input to decide what content to show. An interactive title on a top bar that takes the user to the information entry page becomes paramount to the app content.
Common use cases include adjusting the user’s geographical location (in food delivery apps) or change the time frame in which he/she wants to browse content in.
Interactive Icons/Text Buttons
Icons and text buttons on a top bar usually take the user to a specific action on the next or previous page. But the rare cases are when they encapsulates icons that the user can take within the current page.
Interactive icons/text buttons means that the user can take certain actions on the top bar without leaving this page. In robinhood’s case, common use cases include adding the object on this page to the user’s own collection (Adding a stock in the watchlist), or selecting which display/method of calculation the user wants to choose when they buy in stocks.
Top Bar as Tab Navigation
Sometimes, an app wants to display several paralleled sections of contents, and tabs for navigation will be combined with a top bar for better user navigation.
This design guide is not at all comprehensive in capturing all the good practices in designing a top bar. What has been really rewarding for me though, is a more holistic perspective that I have gained on how a simple UI component such as a top bar gets designed and interpreted across different pages, use cases and apps. Hopefully this will help you know more about an app top bar as it helped me.
In my next article, I will guide you through how to design an end-to-end search flow.
