Smartphones have been on the market for a while now. After some comings and goings of different players, Android and iOS were established as the main contenders and now represent almost 99% of the global market share. Because of that, virtually any new app idea will focus on these two platforms.
In this article I’ll be talking about the main differences and similarities that every designer should consider when designing UX and UI for iOS and Android. You can be starting from scratch or already have a published app that needs to be adapted for the other platform. In both cases, I’ll be constantly linking the platform guidelines, as they are the main source of reference when designing a new interface.
App Icons
An app icon is probably the first thing the user will see and where the brand will be most visible.
iOS guidelines define a few rules for its icons: they usually follow a flat style, and skeuomorphism – the act of representing or imitating real-world elements – has not been recommended since iOS 7. You should also take into account that all iOS icons have the same shape – a square with rounded corners – and they can’t have a transparent background. In the end, this square shape is the canvas you’ll be working on to create an icon.
Android, in the same way, proposes the Material guidelines for icons, which, among other recommendations, suggest a range of colors and the use of paper shadows. These are, of course, just recommendations, and most apps don’t follow these guidelines strictly. The main difference from iOS is that Android icons are allowed to have a transparent background, so you can basically work with any shape that fits the icon area.
What are the app bars on Android and iOS?
Android and iOS give different names to similar interface bars, and sometimes give the same name to different items. It’s always good to know what each bar is called on each platform, since it makes a conversation between designers and developers much clearer.
These bars should have consistent styles across the app and follow the platform sizes for a native look and feel. For iOS, you’ll find these definitions following this link, while for Android they are here.
What grid should you use for Android and iOS?
Mobile apps rarely use a column grid the way websites do, but sizes, padding and spacing should stay consistent across each platform. Material Design defines a specific grid: an 8dp grid for general purposes and 4dp spacing for icon and type alignment. Meanwhile, iOS is not specific about grids, but apps usually use multiples of 4pt and 5pt for sizes and spacing.
How does navigation differ between Android and iOS?
Navigation is where Android and iOS differ most. iOS uses a tab bar as its main navigation component, while Android can use tabs or a drawer menu, and Android’s system back button means users can always go back without an in-app control. Some components can be exclusive or more common on one platform, and this may change the main navigation structure of an app.
The use of a bottom navigation bar on Android is not very common, but it is part of the Material guidelines, and some apps like Foursquare and Instagram use it. It’s up to you to decide – and test – if your users are ready to use this component.
The main actions of a screen, like adding a new item, will usually use a floating button on Android. On iOS they are usually positioned on the right side of the navigation bar.
Another big difference is that Android has the navigation bar, a set of three physical or virtual buttons (back, home and overview), depending on the device. iOS has only the physical home button. This means that Android users can go back anytime without depending on a back button inside the app. The built-in back button will always send the user back in history, even outside the app. On the other hand, iOS users will always need the back button on the interface; otherwise, they can get stuck on a screen.
What are the default fonts on Android and iOS?
Android uses Roboto as the default typeface and Noto for languages that are not covered by Roboto. Both can be downloaded from Google Fonts.
iOS uses San Francisco as the default font. There are two variants of the font. According to the guidelines, SF UI Text is used for text 19 points or smaller, and SF UI Display for text 20 points or larger. San Francisco font can be downloaded from Apple’s website by members of the Apple Developer Program.
Which screen densities do you need to export assets for?
Once the design is done and is ready to be implemented, you’ll need to export the assets, and you’ll also find a few differences between Android and iOS. If you use Sketch to build interfaces, there are good tips in my previous article.
Android devices are manufactured by many different companies, and because of that you’ll find a lot of different screen sizes and densities. Basically, Android will require 1x, 1.5x, 2x, 3x and 4x, as you can see in the table below.
Meanwhile, on iOS it’s much simpler to work with screen densities: for modern devices, 2x and 3x resolutions will do the job.
App interface examples
So, we’ve talked about the main differences and similarities between the platforms. I’ve gathered a few screenshots of famous apps on each platform so you can compare them.
Wrapping up
This is just a starting point. There are several other differences, either visually, in components, or in interactions, that should also be taken into account. Using apps on both platforms and paying attention to these details will also help you understand how similar tasks can be handled differently on each platform. Hope you enjoyed it. Feel free to leave your thoughts about it.
