Ugh. I absolutely hate to switch between my Android phone and the iPad. You know why? Because their double and long-press of hardware home button are swapped – on my Samsung Core, double-press brings up voice control while long-press displays multitasking screen. On iPad, these two features are reversed which, as you can imagine, makes the experience pretty frustrating.
First world problem, you might say (and you’d be right). But that doesn’t mean we shouldn’t try to fix them!
Unfortunately, some app authors unfortunately just figure that the user experience on different platforms is ‘roughly the same’ (I’m looking at you, Instagram!). Of course, that is not the case. Just a brief glance over the official design guidelines document of each of the platforms reveals that each enforces their own views on usability – and since they know their users best, having app design follow their respective sets of rules is probably the best solution.
We’ll look into the two most popular platforms right now and dig into their similarities and differences.
This is the typical look of Android and iOS apps, side-by-side.
In their latest big design update, Apple introduced a couple very radical (and heavily discussed as well as criticised) style changes of their interface. Skeuomorphism was replaced with abstract, oftentimes blurry backgrounds, and 3-dimensional controls were swapped with flat, transparent buttons with very rounded corners. Everything is a lot cleaner now, or as somebody on Twitter put it:
Since iOS7 it’s been a lot easier to pass off half complete .PSDs as finals
— Whingy Designer (@whingydesignr) November 22, 2013
Jokes aside, Android definitely benefited from their latest big design update. Just like Apple, Google also decided it’s time to to level it out, so they’ve thrown gradients out and replaced them with solid colors, especially gray, black, and blue. The interface is now pretty clean except for some minimal 3D effects.
Controls and Inputs
As mentioned, Apple’s controls don’t look much like controls any longer. They’re transparent with a thin contour around the edges in the same color as button labels. Fields for inputting data, like email and password, are by default rounded rectangles.
Android adopted this same method for the fields, but made buttons filled with solid color. Some buttons however, at least according to the Android design guidelines don’t even need that background color – if it’s clear enough that they’re interactable. On screens with a larger number of buttons, this alternative seems like a good idea, but I’m not sure about other cases.
In both, a crucial part of user experience is to display instant feedback when the user interacts with a control. Even when a screen is loading, have the button change somehow or use haptics.
Both platforms have different solutions for navigation through screens – probably the most distinctive feature is Android’s hardware back button while iOS depends on the developers to add a back button to the interface.
Apple encourages designers to place tools, actions, and buttons in the lower bar on the screen and leave the top one cleaner with just one or two text buttons. On the other hand, Android recommends including all clickable icons in their action bar.
The Hamburger Icon
The controversial navigation drawer has recently started a lot of discussions on whether users really understand its purpose or not. Well, designers for both platforms keep adding them, so the users might just need to adapt.
Because of the way Android introduced their navigation drawer, Android apps seem to have their hamburger icons touching the side of the screen, while Apple’s don’t:
Pop-ups / Alerts / Dialogs
Both iOS and Android use a similar type of dialog boxes with blacked out background and margin-less buttons at the bottom. iOS like in the rest of the interface uses rounded corners while Android dialogs feature a drop shadow.
Designers mostly redesign the in-app modals so from the usability side of things there isn’t much to add.
There is a large difference between the icons of both OS’es.
Apple went with stroke-style of icons. From the iOS design guidelines:
It’s a good idea to use the built-in icons as much as possible because users already know what they mean.
Designers should also consider the number of icons that are on a single screen. If there are too many, it’s recommendable to replace them with text links.
For icons used in Android apps, the rule of the thumb is to keep it simple and flat. Using text links instead of icons is not encouraged.
Both platforms recommend using simplified images for icons on the home screen. Users should be able to quickly recognize what is it that an app does. Keep in mind that icons also represent your app within the app store and should therefore also look attractive at larger sizes.
Android allows icons with transparency, while iOS doesn’t, so we’re stuck with a 1:1 format. Apple will also mask your app’s icon into a rounded shape so make sure to put the most important stuff in the middle.
As it should be, both platforms use sans-serif typefaces – Android went with Roboto while Apple uses Helvetica Neue for the default font. An interesting fact is that lots of the apps for former’s platform use condensed, while latter’s often choose thin, but slightly wider fonts.
iOS’ guidelines recommend use of just a single font throughout the entire app, and this same rule should be applied to Android apps as well. There are apps out there that combine different fonts quite successfully, but as with any graphic design, we’ll have to find the optimal ratio between contrast and similarity of two fonts.
When examining more thoughtful app developers like Twitter or Facebook, we’ll find a variety of small interface distinctions. It’s almost like a UI designers’ version of ‘Spot the Difference’. Unfortunately, for some apps this is more of a ‘Where’s Waldo’ kind of undertaking.
Let’s take a quick look at a few good examples of apps with custom-tailored, but still on-brand interfaces.
Facebook is constantly updating and tweaking their app’s user experience. They do it so much, in fact, that designers often copy principles from Facebook’s designs.
At first glance, iOS and Android versions look the same, but there are some small differences, like (1) menu design and tabs instead of buttons on Android. They both use their respective (2) fonts, Helvetica Neue and Roboto and feature similar, but not exactly the same icons.
Both variations have a (3) bottom navigation, but iOS’ navigation buttons feature a different icon-to-text ratio than Android’s.
Etsy’s app makes a heavy use of colors which I haven’t yet touched in this article.
The Android’s guidelines specifically say:
Use color primarily for emphasis.
Which could be directly implying that the majority of interface should be in Google’s light gray and white. Whether that’s the case or not, Etsy ran with it (1) and designed a very light, clean interface with (2) ‘cards’ similar to ones in Google Now.
iOS version seems to be stuck in the pre-iOS7 era with textures and gradients. The top bar is very colorful in comparison to the Android variant, but at least (3) fonts do seem to follow the official guidelines.
There is another app called Sell on Etsy that looks much more up-to-date regarding the recent iOS design changes. There we have mostly flat interface with a similar color scale to the Android’s.
There is a reason the official design guidelines exist. Apps need to follow at least some structure to keep users from having to re-learn the interface behaviour every time they encounter a new app. Even if that means different experiences from one platform to another, consistency within each one is crucial for good user experience.
So how about you? Do you design app interfaces depending on the platform or do you just develop a single one-experience-fits-all template? I’d love to hear it in the comments.
Did you enjoy this post?
Never miss a blog post. Subscribe below to get more posts like this sent straight to your inbox as soon as they're published.