Android App Design Vs iOS App Design – Key Differences To Understand

Android and iOS are inarguably the top two mobile operating systems available today. This has resulted in increasing the work for app developers and UX/UI designers as they, now, have to work on the app design of the same application but, for two different platforms.

From the outside, all that is seen is the process of replicating the app design of one platform into another. However, due to some extremely stark differences between the two platforms, it requires a lot of precision and swift integration.

This article is an attempt to highlight the key differences between the android app design and iOS app design.

So let’s get started!

HIG vs Material Design

The very first difference that every business owner and mobile app designer must understand is the operational guidelines for the two platforms.

For iOS, these guidelines are set in the form of Human Interface Guidelines; a.k.a HIG. And, for android, the guidelines are followed by Material Design.

HIG is all about flat, light, and friendly design with no standard navigation control that’s similar to the drawer navigation menu. Instead, Apple’s guidelines recommended putting global navigation in a tab bar.

    

Material design guidelines, on the other hand, outline several different operational principles. These guidelines largely layout android app components as;

-bold, graphical, conscious

-intentional animation

-flexible foundation

-and cross-platform functionality

It is, therefore, highly and strongly advised to read through the guidelines thoroughly before conceptualizing the mobile app designs.

Navigation

The next big difference between android app design and iOS app design is the navigation pattern in the two.

When it comes to the mobile app UX/UI, ease of moving between different screens is of utmost importance.

For android apps, the material guidelines state a universal navigation bar at the bottom of any android device. In fact, using the “back” button, in the navigation bar, is an easy way to go back to the previous screen or step.

In iOS apps, however, there’s no global navigation bar, so the users can’t move back using a global back button in a native iOS app design. Instead, Apple offers a left-to-right swiping gesture in applications to go to the previous screen. 

Now, usually, the left-to-right swiping gesture is available in android applications as well, however, its function is different from the one offered in iOS. In android mobile apps, such a gesture would commonly give you the option to switch between different tabs.

Control Design

The control options for both the mobile apps make for some of the most highlighted differentiating factors when it comes to their UI/UX design. These include;

-The Primary Call-to-Action Buttons: In an iOS app, a page’s primary button will usually be on the upper-right but, in an Android app it will often appear in the bottom-right as a floating action button.

Occasionally, in iOS, the important page actions will appear on a bottom toolbar. And, likewise, occasionally on Android, important actions will appear at the top of the screen.

-Search Buttons: The “search” bar in, both, iOS app design and Android app design, is common yet highly flexible control. Sometimes it’s the primary point of the app, other times it’s basically an edge use-case, and most of the time, it’s in between the two.

Two very interesting differences between the Android mobile app design and the iOS mobile app design when it comes to the “search” bar are;

·To cancel the search, press “Cancel” on iOS or “←” on Android

·To clear the current query, but remain on the search screen, press “X” on iOS or “X” on Android

When the search is a highly important functionality, iOS and Android will display the search bar right away. When the search isn’t as critical or common, you can access it via other places.

On iOS, it’s common to see search as one of the tabs in the primary tabs, or an action in the top navbar. On Android, you’ll also see it in the contextual actions on the top bar as well.

-Date Picker: On iOS, the date picker design takes the appearance of any other picker control, but with a column for day, month, and, optionally, year.

Android, on the other hand, has its own custom date picker control. You can choose to include the year, not include it, or allow the user to choose whether or not they want to include it.

-Undo Pattern: The iOS mobile app design will have alerts appear in the center of the screen but, you’ll also see alerts slide up from the bottom of the screen (technically called “action panels” in iOS lingo). Destructive actions (like deleting something) are red.

On Android, the “snackbar” option is used primarily for alerts that don’t require user input and should disappear after a few seconds. In fact, some alerts appear in the center of the screen.

The advantages of using “Snackbars” are (a) they give you a way to tell the user that their action was a success, and (b) you can add an action or two on them – which makes them the ideal place for “Undo”.

Platform Exclusives

Many of Android’s native components are absent in the iOS app design; and vice-versa.

The list of design components that are exclusive to Android include;

-Navigation Drawer

-Backdrops

-Banners

-Snackbars

-Chips

-Bottom App Bar

-FABs (Floating Action Buttons)

-Bottom Navigation Drawer

-Side Sheet

-Expanding Bottom Sheet

-Standard Bottom Sheet

And, the list of design components that are exclusive to iOS include;

-Page Control

-Toolbars

-Steppers

-Popovers

Measurement and Screen Size

The iOS app designs are developed and measured in pt, while those on Android are developed and measured in dp.

As a rule, designs are developed with a measurement of 1x (or mdpi) and generate icons and illustrations in 2x and 3x pt. For Android, designs are displayed in dp and generate graphics in hdpi, xhdpi, xxhdpi, and xxxhdpi.

      

In terms of the screen size, the accepted dimensions for Android apps is 360dp х 640dp; while that for iOS apps is 320pt х 568pt.

Sometimes, it is necessary for the UI/UX designers to understand how to set the margins properly on a screen. For example, when designing for iPhone X, the design size goes to 375pt х 812 pt, and as a designer, you need to keep the Safe Area in mind. This is the only area in which you should place content.

System Fonts

It’s always good to avoid any kind of unnecessary confusion when default choices are already provided within the design guidelines of the particular OS type.

In terms of the typography, that’s what precisely is offered in, both, Android app designs and iOS app designs.

The default system font style of iOS is Sans Francisco and that for Android is Roboto.  

While the two typefaces are similar overall, Roboto has taller letterforms and a bit more breathing room. 

App Stores

The iOS app designed for your brand will be available for download in the Apple App Store. And Android app, on the other hand, can be downloaded from Google Play.

To make sure your mobile app design is published properly in their respective stores, you need to adhere to their requirements.

Menus

On iOS, action menus can be triggered by any button or attempting to take any action. They slide up from the bottom, where they’re easily within the thumb’s-reach.

Interestingly, iOS launched the feature of “context menus” in their iOS 13 version that shows related actions when you tap and hold an element.

When the context menu is shown, the background is blurred out. This control offers the user several contextual actions connected to the selected elements.

On Android, however, a drop-down sheet only appears when you tap a three-dot “kebab menu” icon (which is the Android icon for “more options”). And appearing from the bottom typically only happens when there’re a lot of possible actions.

Android Menus are used in the majority of cases — they suggest contextual actions for both the selected element and the entire page as a whole, they are used as an input with multiple options to choose from (drop-down menus), and they are used for editing text.

Both platforms have standards for on-action menus.

Context Menus are only an iOS component. But Android Menus can be used in mobile or desktop apps.

Status Bar

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.

The Android Status Bar also has a special feature: when an app sends the user a notification, its icon appears in the Status Bar. There’s nothing like this in iOS.

To conclude…

So, these were some of the key differences between an Android mobile app design and an iOS mobile app design.

Remember that these are just a few of the several other differences in both types of mobile app designs. TheseUI/UX design tricks can come really handy when it comes to integrating or replicating your business apps from one platform to another.  

Being a mobile app developer can be fun but, being a mobile app designer can be more fun; only if you (as the designer) have an interest in playing around with designs on different mobile application platforms.

However, if you don’t want to take any chances by attempting DIY app designs, and are looking for professional help with your mobile app designs, simply get in touch with us at support@graphicszoo.com