Differences in Navigation and Patterns (UX)

8. Methods of top-level navigation

Let’s start at the very top. iOS only recommends one method of top-level navigation: via the Tab Bar. On the other hand, Android has three methods: the Navigation Drawer, the Bottom Navigation Bar, and Tabs.

If there are more than five top-level pages, we use the Navigation Drawer. If there are fewer, we use the Bottom Navigation Bar. Tabs aren’t used for this kind of navigation very often, but this method is also available. However, Material recommends not combining Tabs and the Bottom Navigation Bar because interacting with these components affects the content of the page and the user can get confused.

9. Differences in the behavior of the Tab Bar and the Bottom Navigation Bar

This difference is suggested by Material.

On iOS, if you go from a mother page to a daughter page, then go to another mother page via the Tab Bar, if you go back to the first mother page, you’ll still be on a daughter page. Everything is much stricter on Android — if you transition via the Bottom Navigation Bar, you’ll always move between mother pages. If you were on a daughter page before this, it will be reset.

Our Android developers are convinced that Android’s behavior is incorrect in this regard. If the user transitions via the Bottom Navigation Bar, it should save the open daughter pages like on iOS.

10. Special behavior of tabs on Android

Unlike Segmented Controls on iOS, Android’s tabs have a special feature: you can move from tab to tab by swiping right and left.

This is because the tabs’ pages are on the same elevation.

It’s important to know this because, when using tabs on Android, we shouldn’t add elements with similar gestures (for example, a carousel of pictures or interacting with maps using swipes) to the design.

In general, these two components are not fully interchangeable. Segmented Control is a control method that controls page content. Tabs are a navigational tool. So you should talk to the developers before viewing these components as equivalent during adaptation. Sometimes it can be more correct to replace Android’s tabs with Page Control. It all depends on the context.

11. Differences in the behavior of daughter pages

On iOS, daughter pages (not counting modal windows) only appear in one way: the daughter page appears to the right and on top of the mother page with a “slide in” effect. Returning to the mother page occurs with a “slide out” effect.

Material recommends showing the user the hierarchical interconnection between the mother and daughter pages using an intentional animation.

The component the user interacts with to transition to the daughter page opens and covers the mother page. This way the user understands where they are and where they came from, as well as why this happened and where they will go if they press the back button. This transition occurs using Standard Easing.

12. Special pattern for calling up the Navigation Drawer

When designing an app with a Navigation Drawer it’s important to remember that this component “takes over” the “edge swipe left to right” gesture. So don’t add any other logic to this gesture.

On iOS, this gesture has a conventional pattern of transitioning from a daughter page to the mother page. This pattern has gradually made its way to many Android apps as well.

13. The behavior of content during scrolling

According to the HIG, content on iOS behaves the following way during scrolling: the Navigation Bar is reduced in width, and the Toolbar disappears. But in general, iOS developers can configure any kind of behavior for content and bars during scrolling.

Material suggests more options for behavior during scrolling. For example, the Bottom Navigation Bar, Search Bar, and Bottom App Bar can disappear during scrolling.

The Top App Bar can also disappear or move above the primary content.

14. Different search behavior

Interestingly, the HIG relegate searching to bars and call it a Search Bar. In Material, we find searching in the Navigation section, not the Components section. In other words, for Material, search is just another navigation method. On both iOS and Android, search can be statically present on the screen, and, as a rule, it’s fixed to the Navigation Bar/Top App Bar.

On both platforms, search can appear in the form of an icon, but on iOS the icon expands into the independent Search Bar component, and on Android it expands within the Top App Bar.

One feature of search on iOS is that it can be “hidden” underneath the Navigation Bar and called up with a “swipe down” gesture. The same gesture is typical for refreshing (pull to refresh), so you don’t want to activate search and refresh using the same action.

Differences in Components (UI)

15. Which components are absent on iOS

Many of Android’s native components are absent on iOS. Let’s run through them.

a) Navigation Drawer

In principle, iOS does not recognize burger menus. As we mentioned earlier, iOS only has top-level navigation via the Tab Bar.

b) Backdrops

Backdrops are, as far as I’m concerned, the most amazing component in Material. As of the writing of this article, Android is still just planning to implement backdrops as a native component. In general, when examining Material’s components, check whether they are available for use yet or not.

The material itself loves this component. For example, just look at the winners of the Material Design Award 2019.

c) Banners

Banners are not among iOS’s native components. Using a banner, we can communicate important information to the user and suggest actions connected to it.

d) Snackbars

Like banners, Snackbars are not native to iOS. Snackbars are used to give the user brief messages about the results of their actions.

e) Chips

Chips aren’t native iOS components either. They are used for information entry, descriptions, and actions.

f) Bottom App Bar

In this case, we can argue that iOS has a component that is similar to the Toolbar. But they’re actually different, and here’s why: a Toolbar is a bar for contextual actions. For example, when editing a list of messages in Messages, a Toolbar appears with the actions “Read all” and “Delete.” On the other hand, the Bottom App Bar is essentially just a Top App Bar that has been moved down along with the same top-level actions, including opening the Navigation Drawer, calling up search, etc. We can also put a FAB in the Bottom App Bar.

g) FABs

No, there are no FABs in iOS either. A FAB is a button for performing the primary action on the screen. For example, in an email app, the FAB will compose a new email.

If you use a FAB for the primary action on the screen in Android, on iOS the primary action should be located at the top, on the right side of the Navigation Bar (see iMessages, for example).

h) Bottom Navigation Drawer

This is another version of the Navigation Drawer that is typical for Android. It is called up by pressing the burger menu button in the Bottom App Bar.

i) Side Sheet

Although Material also permits the use of this component in mobile apps, I’d recommend replacing it with a more familiar Bottom Sheet.

j) Expanding Bottom Sheet

This very nice-looking Android component is not one of iOS’s native components. An Expanding Bottom Sheet is a surface attached to the bottom of a page. If the user taps this surface, it expands into a full-fledged page.

k) Standard Bottom Sheet

A Standard Bottom Sheet is a variation of the Bottom Sheet, and it is not an iOS component.

16. Which components are absent on Android

Now let’s take a look at which components cannot be found in the Android library.

a) Page Control

Page Control shows which page the user is on. It is not a native Android component.

b) Toolbars

Toolbars are only seen on iOS.

с) Steppers

Steppers are a standard iOS control that is not described in Material. We use them to enter small values such as the number of copies when printing.

d) Popovers

A Popover is a popup panel that is used primarily on iPad.

There is one standard application for Popovers on iOS: adjusting text settings in readers or browsers.

17. Different Status Bars

The Status Bar performs the same function on both platforms: it shows the time, battery level, and mobile and Wi-Fi connection levels. These indicators are in different places within the Status Bars, and their general visual styles are also distinct.