After studying more than 100 apps, I summarized the patterns and rules of top bar UI design

We may think that the composition of the top bar of the App is simple and does not require much effort. In fact, it is not easy to design a top bar that is accurate, beautiful, and matches the user's goals.

In order to try to analyze some patterns and rules of App top bar design, we studied more than 100 applications. Through this article, we will take you to understand the composition and changes of App top bar, as well as how to design the interaction of top bar.

Common styles for top bars

What does the top bar look like and what does it consist of?

1. Regular top bar

Typically, the top bar provides information about the page as a whole, as well as potential actions that users may take on the page. A common top bar looks like this:

Common components in the top bar include: title, container, action items, navigation icons, etc. Next, we will introduce the use of each component one by one.

The top title is usually used together with the bottom navigation to explain the information of the page. If the bottom navigation on a page only has icons without text explanation, users may not understand the meaning of the icons, so the responsibility of explaining the page information falls on the title of the top bar.

Most of the time, the title is placed in the middle of the top bar, sometimes there is a large title in the upper left corner as a navigation (iOS apps). In addition to explaining the purpose of the page, the large title can also be used for branding.

The title can also explain the action that the user is performing on this page. For example, when the user wants to modify their personal profile, the title will say "edit profile" to explain the action.

Sometimes, there is supplementary text below the main title in the top bar to provide users with more information.

The trend of containers is becoming less and less obvious. Containers are usually gray or unsaturated colors, and sometimes containers also use brand theme colors to promote and advertise the brand.

Action items usually appear on the top bar in the form of icons and text buttons. When necessary, 0-4 icons or text buttons can be displayed on the top bar.

Action items may represent different meanings on different pages, but some common icons/actions follow certain rules:

• Back: When users enter the second/third level page, "Back" usually appears in the upper left corner. Clicking the "Back" icon will lead users back to the original page.

The position of Close or Cancel is not fixed and can be on the left or right, depending on whether there are other operations.

Here is a common question: in what situations should the "Back" and "Close" buttons in the top bar be used?

• Use Back when the user is in a lengthy exploration process that requires more than one step, or when there is no short, clear purpose on the page.
• Use "Close": It indicates a complete single-page operation. It has a clear starting point and end point, and performs specific operations on the page to achieve a specific purpose.

Profiles or accounts sometimes appear on the top bar to make it easier for users to edit personal information, set up, or switch accounts.

Add or Search help users browse for more content or expand their area of ​​interest, and usually appear in the upper right corner as an easy-to-touch target.

Sometimes the most frequently used actions are fixed to the top bar (especially the upper right corner) so that they can be easily touched at any time. A common example is NetEase Cloud Music, where the icon of the current song is always fixed in the upper right corner, and users can access it at any time no matter which page they are on.

One thing to note is that in order to avoid attracting unnecessary attention, icons/text buttons on the top bar are usually linear icons rather than filled icons, and are non-saturated colors, unless they really want to attract the user's attention or to prompt the user to take action.

2. Search top bar

When using the App, we will find that some pages do not have a title in the top bar, but a search box is added (Taobao homepage).

Search can be used on the top bar of different pages depending on the specific need as it provides more value to the users while browsing the content.

3. When to stop using a top bar?

When there is a lot of content at the top, some apps make the top bar very simple or even abandon it completely.

The most important user information - daily investment growth - is displayed at the top of Robinhood. There is only a prompt text button in the upper right corner for inviting friends.

A common example of not using a top bar is a profile page. The purpose of this is to show that you have control over this page, and personal information takes up a lot of space at the top.

Interaction mode of the top bar

There can be many interactions happening on a page, and sometimes the top bar needs to reflect the interaction by changing its style or content.

1. Reflect the sliding position

Top bar appears when sliding down: When the top bar has a lot of important information but takes up a lot of space, the content of the top bar may change according to the scroll position. The top bar appears when the user pulls down the page to get more content.

Swipe down to hide and pull up to appear: Another form is in Google search, when the user swipes down, the top search box will be hidden (Google guesses that the user wants to concentrate on browsing the content), but as long as the user swipes up and stops the browsing process, the top bar search box will reappear.

Regardless of the interaction format, this type of top bar can be quickly displayed when the user needs it:

• Users can perform search functions or common operations;
• Title/Important Information serves as a reference to remind users which page they are on.

Slide down to hide the top bar: For those top bars that do not affect user needs and operations, they are usually hidden as the page slides down.

Starbucks has a pleasant greeting at the top, which disappears as the user scrolls down and tries to choose which coffee to drink; Airbnb displays pictures of houses at the top to impress users, but when users scroll down, the pictures at the top also slide.

2. Reflect changes to the current page

Sometimes, the information in the top bar changes in real time according to the content. The most common case is the feedback when receiving a message: in WeChat, the top title will show the change in the number of messages the user has received; Instagram shows the received messages through the change of the small red dot at the top.

Interactive top bar

As an essential part of the page, the interactive top bar reduces the burden on other elements on the page. In addition to the changes in common icons or text buttons (add, cancel, back), what other interesting interactions will occur in the top bar?

1. Interactive title

Some product services are highly dependent on user preferences and location, such as common food delivery or taxi-hailing apps.

In this case, the app usually relies on the user's initial input to determine what to display, and the user can also edit the information directly in the top bar title.

2. Interactive Icon/Text Button

Interactive icons/text buttons mean that users can perform certain actions on the top bar without leaving this page.

In Robinhood, users can directly select the calculation method to be used for purchasing stocks without switching pages, or add the stocks on the page to their favorites.

3. Top Navigation

Some apps want to display multiple parallel contents on one page, so they will set multiple options on the top bar to achieve more convenient navigation.

• Common top navigation includes segmented controls and tab navigation:
• Segmented control navigation options generally do not support left and right sliding, and have fewer options;
• The design of the tab navigation options is more diverse, supporting left and right swiping to switch.

Summarize

Such a research process may take a lot of time and effort, but it can really benefit us: looking at how to design and explain a simple UI component in different pages, cases, and apps from a more comprehensive perspective.

The article is very long, thank you for reading to the end ~ I hope the article can give you some benefits!