Android vs iOS: A Comparison of UI Design

Steve Jobs once said:
“Design is not just how it looks like and feels like. Design is how it works.”

Design centralises around the user experience, for both Android and iOS design development. Both platforms differ in their UI/UX approach; with both platforms having specific features the other does not. In reality though, both companies have consistent universal features which assures the user has a realistic experience with products in today’s digital world.

When it comes to Apple, they aspire to have full control over their products which ensures that the user has a consistent experience on any of the devices of Apple’s ecosystem. The design, UX and performances are something Apple takes care more than other producers. When it comes to Google, on the other hand, they have a platform that targets a majority of available mobile devices on the market.

1. Design

Both iOS and Android design schemes have their origins in flat-design, which means using two-dimensional elements and bright colours. Android devices are primarily based on Material Design, while Apple follows Human Interface Guidelines.

Material Design can be treated as an enhanced version of flat design with a touch of skeuomorphism. Here is an interesting video which describes the process of making ‘Material Design’. The main aim was to create a UI that was optimised for the digital world but inspired by the physical word to make it intuitive for the users. When it comes to Android design, you can refer to material design guidelines, components and icons.

Apple uses ‘flat design’. Design guidelines are based on three themes that differentiate iOS from other platforms – clarity, deference (content first) and depth. The content of the application should be minimalistic, consistent and user-oriented, with a focus on flat colours, typography, spacing, aligning and subtly graphic elements.

‘Negative space, colour, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.’
– Human Interface Guidelines

Apple provides some Apple Design Resources for Photoshop, Sketch and Adobe XD for designers.

2. App Icons

An app icon is a unique image for every application, found on both iOS and Android. The user usually decides if he wants to find more about an app regarding the app icon. A good icon generates interest and is the primary reason why some downloads/purchases an app. Every app icon should be different and memorable, but app icons on iOS and Android differ. All iOS icons are created square-shaped and are later automatically rounded off at the corners. Apple confirms to flattened images with no transparency and a simple background, avoiding unnecessary elements like words, photos and interface elements.

On the other side, Android icons can be transparent in the background and you can have any shape that fits the icon area.

3. Navigation

Navigation in General

One of the most common actions users take on mobile apps on both platforms is the navigation between screens. Android has a navigation bar at the bottom. This is a set of three buttons (either physical or digital, depending on the device) that function as back, home and overview routes.

iOS confirms to a different approach. When a user wants to leave an app, he simply presses the home button or swipes from bottom to top (on newer devices without the home button) to put an app to background mode and access it again. There is no universal back button. Most of the navigation in the iOS system happens as a series of swipe gestures.

App Navigation

When it comes to navigation through applications, Androids basic element is the Drawer menu that slides out from one side of the screen and consists of drop-down list elements. Typical for Android is also the use of tabs which are straight below the page title and serve for switching pages inside an app. As far as iOS, there is usually a tab bar at the bottom of the screen which allows users to switch between a couple of screens. Navigation back is achieved with a back button at the top left corner of the screen or by simply swiping from left to right.

4. Buttons

As for the button design, the only difference between the two platforms is in string capitalisation and appearance style. Material design has two types of buttons – flat and raised. The text on Material Design buttons is usually uppercased. Sometimes iOS uses uppercase buttons too, but most of the time the text is Title cased.

Action Buttons

One of the differences between native iOS and Android application buttons is the Floating action button, which is an often-used element of Android applications.

‘A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its centre.’
– Material Design

FABs come in three types: regular, mini, and extended. The equivalent of the FAB button for iOS is the “Call to Action” button which is used for certain actions that cause the presentation to another page or screen. CTA buttons are mostly for creating, purchasing, subscribing and anything else that induces a user to leave the current screen for a task to carry out. The CTA button is usually located in the centre of the tab bar.

5. Tabs vs Segmented Control

When it comes to paging, Android uses Tabs and iOS uses Segmented Controls. Both Tabs and Segmented controls can be placed in the position straight below the navigation bar. Titles on tabs on Android are uppercased and on iOS segmented controls, they are Title Cased. It is a common practice to not exceed the number of five items in fixed tab bars.

Wider segments are easier to tap. On iPhone, a segmented control should have five or fewer segments.
– Human Interface Guidelines

6. Typography

Both iOS and Android recommend using their system fonts. Android uses Roboto font and iOS uses San Francisco. The size of the text is similar, but Material design uses a larger difference in font sizes within their layout and iOS uses bold type for text hierarchy. One thing that is characteristic for iOS is the better use of white space between texts, unlike the Android platform.

7. Latest Software Versions: Android 10 vs iOS 13

When talking about iOS and Android design, there is one thing that changed the whole look in both platforms. It is the Dark Mode, which offers the benefit of preserving battery life and better appearance to the eye. Google launched the dark mode in an update earlier this year but didn’t use the theme like in Android 10 now where it is more distributed across the system. Some of the native apps still lack a dark option. As for Apple, the dark mode arrived in the latest iOS 13 update and lists a collection of places to use the dark mode and offers a more uniform dark experience than Android. Dark themes look good on both, but when comparing iOS to Android it surely holds truer than before. On Android, the dark mode text has a very slender, off-white colour, which reduces the contrast and makes it difficult to read the text on the screen. On the other hand, in iOS 13 the colours are picked very well. The text along the system in dark mode is bright and white. Also, the icon colours have a better contrast than they do on Android, making things appear better and cleaner.

Regarding the apps in dark mode, one of the best things in iOS 13 is that once you enable it, every native app in the system on iPhone switches to dark mode – and that’s the point of dark mode. On the other side, on Android 10, Google’s apps, for now, don’t play nice with the dark mode. The native Messages app doesn’t have an option to enable dark mode, the Chrome app is not affected and stays light and the Gmail app is half-dark mode. Hopefully Android will reach iOS dark mode soon.

8. Conclusion

These are just a few major differences between the two platforms, but they have many things in common. Some iOS applications follow Material Design Guidelines (like Gmail) and some Android apps follow the Human Interface Guidelines (like Instagram).

One thing is for sure — it’s much faster to design a mobile application by using native components for both iOS and Android. Both platforms have users who love to use them, it’s just a matter of habit, style or attachment to one of the platforms. Good design is the design that respects users habits in each of the platforms. Most people will describe their decision to choose one platform over another with an attachment to a certain platform. Those users base their choices on how they feel when using the app by evaluating the responsiveness, style, colours, appearance and components placement on the screen.

Try to make sure that your product stands out in quality by making the best of UI/UX for whatever platform is used.