📟 ⛴️ 🏒 32 differences in the design of a mobile application for iOS and Android 🤚 ⏮️ 🌭

Iron designer at Redmadrobot Design Lab Arthur Abrarov shares observations.

Adapting design to a different platform is an integral part of the work of a mobile application designer. The goal of this work is to organically fit design into user interaction patterns. In addition, a well-developed adaptation simplifies development through the use of native platform components.

To adapt the design correctly, you must follow the platform guidelines: Human Interface Guidelines (HIG) for iOS and Material Design for Android. And communicate with developers, ideally connect them to the design as early as possible so that they can immediately set technical limitations.

But what exactly is the design for iOS different from the design for Android? In this article I will analyze 32 specific design differences for iOS and Android. They are divided into four groups:

Basic differences.
Differences in navigation and patterns (UX).
Differences in Components (UI).
Other differences.

IOS features will be on the left and Android features on the right or top / bottom.

Basic differences

Human Interface Guidelines vs Material Design

Almost all the differences in this article are taken from the analysis of these guidelines. Their essence at the ideological level is as follows. HIG is about a flat, lightweight, friendly design, it came from a gradual rejection of skeuomorphism .

Material has several fundamental principles: material as a metaphor; bold, graphic, conscious; meaningful animation; flexible foundation and cross-platform. If you are not familiar with the guidelines, it is better to read them before you read the article.

2. Units: pt vs dp

The design of the iOS application is created in pt , and the Android application in dp . We usually create a design in 1x (or mdpi) and upload it to Zeplin. Zeplin displays the design for pt for iOS and generates icons and illustrations in 2x and 3x. Under Android, it displays the design in dp and generates graphics in hdpi, xhpdi, xxhdpi and xxxhdpi.

3. Screen size: 320 pt x 568 pt vs 360 dp x 640 dp

I prefer to design the iOS application for the smallest size - iPhone 5 with a screen size of 320pt x 568pt. I do this to avoid incorrect display of content on small screens. Some people prefer to design for iPhone 8.

Under Android, there is a generally accepted screen size of 360dp x 640dp.

When designing for iOS, sometimes I create a design for iPhone X (375pt x 812 pt). This is necessary for the developer to understand how to correctly indent the screen of this size. Even when designing for iPhone X, you need to remember about Safe are a - an area outside which you should not place content.

4. System font: San Francisco vs Roboto

If you do not know which font to use in the application, take the system one. In the case of iOS, it's San Francisco . And Android is Roboto .

5. Android Navigation Bar

Unlike iOS, Android has a built-in back navigation tool. This is the Android Navigation Bar .

It is either physically integrated into the smartphone, or is part of the interface. Using the arrow, the user moves one step back in chronological sequence ( reverse chronological navigation ). Navigation takes place both inside the application and between them.

At the beginning of my career as a designer of mobile applications, I have long tormented Android developers with the question: why do we need two buttons back? One is at the bottom of the Navigation Bar, the second appears in the Top App Bar when you go to the child page.

The answer is this. There are two types of navigation back: reverse chronological navigation (we do it using the back arrow in the Navigation Bar, call it Back).

And upward navigation (we do it with the upper arrow, call it Up).

Imagine that we have an ABC path, where A is the parent page, and B and C are child pages. Imagine that the user got directly from A to C. If he presses the Back button, then he will return to A. But if he presses Up, he will first go to B - and by the second press he will go to A.

This is difficult to implement and confusing for the user , so now these two back buttons perform the same back action, as in iOS. That is, if you came from A to C, then from C we will return back to A.

6. Importance of Elevation in Material

In iOS, there are basically no shadows. As an exception, shadows can be found on the main screen of the App Store and in Health. But in general, HIG does not prescribe the use of shadows.

In Material, shadows play a big role. They add to the interface a third space (Z axis), due to which each component has its own strict place on this axis (from 0 dp to 24 dp). Moreover, this Z axis does not exist simply on an ideological level: developers have an elevation parameter in which they set the position of the component along this axis.

Navigation and change of states is accompanied by a change in elevation of components. Therefore, when designing for Android, we should consciously approach the creation of shadows.

7. Differences in naming

There are many differences in naming. I propose to consider these five.

a. Tab Bar vs Bottom Navigation Bar

This is a bar for top-level navigation of the application. Statically located at the bottom of the screen on both platforms. In addition to naming, they differ in behavior. We will disassemble it a bit later.

b. Navigation Bar vs Top App Bar

This bar on both platforms performs approximately the same tasks: informs the user of his current location in the application, makes it possible to return to the previous screen and offers one or more contextual actions. Read more about the differences below in the article.

c. Segmented Controls vs Tabs

In addition to naming, Tabs Android has several features: you can move between tabs on a swipe, and Material allows you to use them for top-level navigation.

d. Alerts vs Dialogs

Interestingly, only one user alert tool is described in iOS - Alerts . There are three in Android : Snackbars, Banners and Dialogs.

Snackbar is designed for low priority messages and requires no action. Dialogs blocks interaction with the interface and requires an action. Banners are between them: it does not block the interaction, but it requires an action.

e. Touch ID vs Android Fingerprint

This is just one example of different naming technologies that are used on these platforms. They should be known, because in addition to naming, they differ in many technical features of their implementation. Understanding the differences in naming is the first step in understanding the differences in technology.

Differences in navigation and patterns (UX)

8. Methods of top-level navigation

Let's start from the top. iOS recommends only one way of top-level navigation - through the Tab bar . Android has three options in return: Navigation Drawer , Bottom Navigation Bar, and Tabs .

If the number of top-level pages is more than five, use the Navigation Drawer. If less - Bottom Navigation Bar. Tabs are rarely used for this navigation, but the method is available to us. However, Material recommends not combining Tabs and the Bottom Navigation Bar, since interacting with these components affects the content of the page and the user may get confused.

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

This difference offers Material.

If you switch from the parent page to the iOS one on iOS, then through Tab Bar switch to another parent page, then when you return to the first parent page, you will still be on the child page.

In Android, everything is simpler - when switching through the Bottom Navigation Bar, you always switch between the parent pages. If before that you were at a subsidiary, it will reset.

Our Android developers are confident that this system behavior is incorrect. In the case of switching to Bottom Navigation, it’s worth maintaining open child pages, as on iOS.

10. Android Tabs Special Behavior

Tabs on Android, unlike Segmented Controls iOS, have this property: you can navigate through the tabs using swipe left and right.

This is because the tab pages are at the same height (elevation).

This is important to know because when using tabs in Android, we should not add elements with similar gestures to the design. For example, a carousel of pictures or interaction with cards using swipes.

In general, these two components do not completely replace each other. Segmented control is a control that controls the content of a page. And Tabs is a navigation tool.

Therefore, it is worth consulting with the developers before considering them as equivalent components during adaptation. Sometimes it’s more correct to replace Android Tabs with Page Control. It all depends on the context.

11. Differences in the appearance of the child screen

In iOS, the appearance of the child screen (not counting modalos) occurs in only one way: the child page appears on the right on top of the motherboard with the slide in effect. Return to the mother screen occurs with the effect of slide out.

Material recommends showing the user a hierarchical relationship between the parent and child pages using meaningful animation.

The component, when interacting with which the user goes to the child page, expands and covers the mother page. So the user understands where he came from and where, why it happened and where he will return when clicking on the "Back" button.

The transition occurs using Standard Easing .

12. Special Call Pattern Navigation Drawer

When designing an application with Navigation Drawer, it is important to remember that this component takes away the edge swipe gesture from left to right. Therefore, you should not add other logic to this gesture.

In iOS, this gesture has an established pattern of transition from a child to the mother page. This pattern has gradually migrated to many Android applications.

13. Content behavior when scrolling

On HIG, the content in iOS behaves like this when scrolling : the Navigation Bar decreases in width, the Tool Bar disappears. But in general, iOS developers can customize any behavior of content and bars when scrolling.

Material offers more scrolling behaviors. For example, the Bottom Navigation Bar, Search, and the Bottom App Bar may disappear when scrolling.

The Top App Bar can either disappear or rise above the main content.

Miscellaneous Search Behavior

Interestingly, HIG refers search to bars and calls it Search Bar. In Material, we find a search in the Navigation section, not in Components. That is, for Material, searching is another way to navigate.

In both iOS and Android, the search can be statically present on the screen and, as a rule, nailed to the Navigation Bar or Top App Bar.

On both platforms, the search can be in the form of an icon, only in iOS the icon is expanded into a separate component of the Search Bar, and in Android, the search is opened inside the Top App Bar.

A feature of the search in iOS is that you can “hide” it under the Navigation Bar and call it by Swipe down gesture. The same gesture is typical for refresh (pull to refresh), so you should not call search and refresh on this one action.

Component Differences (UI)

15. What components are not in iOS

In iOS, there are not many native Android components. Let's go over them.

a. Navigation drawer

iOS basically does not recognize the burger menu. As said earlier, in iOS, top-level navigation is only on the Tab Bar.

b. Backdrop

Backdrop is the most amazing component for me in Material. At the time of writing, Android is just planning to implement it as a native. In general, when studying the components of Material, it is worth checking whether they are already available for use.

Material itself loves this component. Look, for example, at the winners of the Material Design Award 2019.

c. Banner

Banner is not found among native iOS components. With the help of Banner, we inform the user of important information and offer related actions.

d. Snackbar

Like Banner, Snackbar is not native to iOS. Snackbar is used to convey to the user a short message about the result of his action.

e. Chips

Chips is also missing among native iOS components. They are used to enter information, descriptions and actions.

f. Bottom app bar

Here you can bet that iOS has a similar component - Tool Bar . But they are different, that's why: Toolbar is a bar for contextual actions. For example, when editing a list of messages in Messages, a Tool Bar appears with the actions Read All and Delete.

The Bottom App Bar is moving the Top App Bar down with the same top-level actions: opening the Navigation Drawer, calling up a search, and so on. Back in the Bottom App Bar, we host FAB.

g. Fab

Yes, FAB is also not in iOS. FAB is a button for performing the main action on the screen. For example, in a mail application, FAB will create a new letter.

If you use FAB in Android for the main action on the screen, then on iOS this main action should be placed at the top in the Navigation Bar on the right (see example: iMessages).

h. Bottom navigation drawer

A variation of Navigation Drawer typical of Android only. Called by pressing the burger menu button in the Bottom App Bar.

i. Side sheet

Although Material allows you to use this component in a mobile application, I would recommend replacing it with the more familiar Bottom Sheet .

j. Expanding Bottom Sheet

This very beautiful Android component is not found among native for iOS. Expanding Bottom Sheet is a surface that is nailed to the bottom of the page. When pressed, the surface expands to a full page.

k. Standard bottom sheet

Standard Bottom Sheet is a variation of Bottom Sheet, and it is not among the components of iOS.

16. What components are not in Android

Now consider what components are not found in the Android library.

a. Page Controls

Page Control shows which page the user is on. It is not among the native components of Android.

b. Toolbar

Toolbar is familiar only to iOS.

c. Steppers

Steppers - standard iOS control, not described in Material. Use it to enter small values. Example: The number of copies to print.

d. Popover

Popover is a pop-up panel that is mainly used on the iPad.

IOS has one standard Popover application - setting text in readers or browsers.

17. Miscellaneous Status Bar

On both platforms, the Status Bar performs the same task: reports on time, charge level, quality of mobile communications and Wi-Fi. They differ in the location of these indicators inside the Status Bar and, in general, in their visual solution.

Also, the Status Bar Android has such a feature, when a notification comes from an application, the icon of this application appears in the Status Bar. In iOS, this is not.

18. Refresh Content Controls vs Swipe to refresh

Refreshers are called with the same swipe down gesture on both platforms. But on iOS, Refresh Content Control pushes the rest of the content down, while Android’s Swipe to refresh appears on top of the content. In addition, iOS refresh when the content is scrolled disappears, while Android remains visible.

19. Miscellaneous Control

Platform controls differ only visually. It can be noted that in iOS controls are simpler: checkboxes are used for both radiobutton and Checkbox. In Android, they differ in the form of control.

Material also suggests using the parent checkbox when you need to give the user the ability to quickly select all the options.

20. Different views of the back arrow and heading position

In iOS, the arrow does not have a line in the middle because in iOS the back arrow is signed with the previous screen. If the title was standard on the previous screen, then the title moves from the title to the left to the arrow. If the title was wide, then the title rises. If the title of the previous page is too long, it is replaced by the word back.

21. Different view of the three dots icon

There seems to be no rigorous justification for this difference. We pay tribute to the platform and use the recommended position of the three points. In iOS, the dots lie horizontally, in Android - vertically.

22. Different Type of Picker

In iOS , the date is selected using the reel. The iOS drum can be used to enter any other data. In Android Picker, dates mimics the look of a physical calendar.

Material also recommends giving users the ability to enter a date using the Input Field.

23. Miscellaneous Text Fields

HIG is far less demanding on Text Fields than Material.

Differences

In iOS, the Label is inside an input field and disappears during text input. Material recommends raising Label when entering text.

Similar

Both platforms advise adding a Clear Button if necessary.

What else is asking for Material

Material also recommends highlighting the Label and the strip under the Text Field with the foreground color - this helps to understand that the field is highlighted. Material describes the behavior of the field upon input error. There are two forms to choose from in Material: Filled and Outlined.

24. Context Menus vs Menus

Context Menus appeared in iOS 13. This control offers the user several contextual actions associated with the selected item. Android has a partially similar element - Menus .

Menus Android is used in a larger number of cases: it offers contextual actions for both the selected element and the entire page as a whole; used as an input with several options to choose from (dropdown menu); used to edit text. Context Menus is an iOS-only component. And Menus Android can be used both in a mobile application and on a desktop.

25. Action View / Activity View vs Modal Bottom Sheet

If you use the Action View or Activity View in the iOS iOS application , in Android they can be partially replaced by the Android Modal Bottom Sheet component . It also appears at the bottom of the screen, darkens the content and closes in similar ways (button, clicking outside the modal window, sometimes swiping down). The task of the components is to propose a choice or contextual action.

26. Edit Menus vs Text Selection Tool Bar

In addition to the visual difference, the Edit Menus and the Text Selection Tool Bar differ in the following: with a long press in Android, the user can continue to select text. In iOS, after a long press, a magnifier appears to select the exact place in the word.

Also, Android differs from iOS in that when additional actions are called, the Text Selection Tool Bar takes the form of a Menus.

27. Different size divider

In iOS it is 0.5 pt, in Android - 1 dp.

Other differences

28. Different requirements for the size of the pressure zone

According to the guidelines, the minimum click area in iOS is 44 x 44 pt, and in Android - 48 x 48 dp.

29. App Store vs Google Play

Your iOS app will be downloaded from the App Store. Android app - from Google Play. To place the application in the store correctly, you must follow their requirements. The requirements of the App Store are worth reading here , and Google Play is here . There are many features, so I recommend that you study before publication.

30. A special pattern in iOS - Undo and Redo

This is a special iOS pattern : if you shake your smartphone, the application will prompt the user to cancel or repeat the last committed action. Typically, this gesture is used to delete the entered text.

31. Relation to Branded Launch

Material allows Launch Screen to place the application logo. HIG does not recommend using the Launch Screen for marketing purposes, and suggests that only the Placeholder be displayed when the application starts.

32. Additional Material Design Themes

The Material website also covers such topics as: Data Formats (various data formats), Data Visualization (correct infographics), Empty States (design of empty states), Offline States (interface in the absence of the Internet), Accessibility (accessible design) and Bidirectionality (design for readers from right to left).

Conclusion

Knowledge of guidelines increases our level of awareness. We understand the existing user patterns and create an application that organically fits into the habits of users.

Guidelines encourage us to respect native platform solutions. When adapting a design to a different platform, it is always tempting to duplicate a design without changes. This harms the user experience and complicates the development. But when we see differences in native solutions, we adapt the design correctly.

And if we want to introduce a new, custom solution, knowledge of guidelines helps to justify this innovation.

Total: knowledge of guidelines and their differences is an important skill of a mobile app designer.

What other differences do you know? Share them in the comments.

32 differences in the design of a mobile application for iOS and Android