an outline of ios and android app design

Interaction Design patterns : iOS vs Android

Things to keep in mind when you design for the two major mobile platforms

Most popular apps are released for both iOS and Android. I was comparing app designs and interactions on both recently, and noticed some differences. This post describes in brief some of the most obvious patterns that appear in popular apps.

Note: This post is only exploratory, and points out some existing patterns and differences. Android <-> Material Design ; iOS <-> Human Interface Design are used interchangeably at some places.

1. Google uses Material Design, iOS uses Human Interface Design

First off, lets start with the difference in design philosophies.

Google created a des i gn language called Material Design. They have a very interesting video about how they created it. If you're designing for Android, this is something you definitely need to check out. Refer to the guidelines, patterns, icons, at Material.io. There are so many great tools on there to check UI patterns and test designs as well. For example, Color Tool helps designers pick color palettes.

The color tool that helps designers pick out a color palette

For iOS, there is the Human Interface Design guidelines by Apple. This is a an exhaustive list of design patterns for iOS apps. Apple even provides some sample Photoshop or Sketch resources on this site.

Apple UI Design Resources page provides downloadable resrouces

2. Moving between states / screens

Moving backward and forward between screens is a common action users take on apps. On Android there is a universal nav bar at the bottom. This is very handy and is useful within apps as well. This navigation bar is used in other contexts which I talk about later in this post.

The famous Android navigation bar. The back button is an easy way to go back to a previous screen and it works in all apps.

The approach on iOS is a little different. Obviously, there is no universal back button here, and this changes the design a little bit. Every app screen needs to have a button on the top left corner.

Just to demonstrate, lets compare how LinkedIn has it between iOS and Android.

3. In-app Navigation patterns

i) Navigation between different areas of an app

Apps have different areas within them, usually organized as tabs. The way this is implemented however is a little different. Lets compare how the different app areas are laid out on YouTube.

On Android, different areas of the app are tabs on the top, whereas on iOS they're at the bottom.

Notice another important difference: The Android version shows only icons on the tab row, whereas the iOS version also has labels. A similar trend is observed on the LinkedIn app.

ii) Swipe from left-to-right to go back a screen

Consider the previous point of the 'back button' on Android. Because there is no back button on iPhones, Apple introduced a new gesture of swiping from left to right in apps to go back.

Swiping from left to right on the Medium iOS app takes us back a screen.

This gesture of swiping from left to right to go back to the previous screen works in most apps. This introduces slight differences in how tab navigations work.

As shown, left-to-right swipe on iOS is to go back a step, whereas the same gesture is used to switch between tabs on Android.

A swipe gesture switching tabs on YouTube for Android. Its important to have this distinction between the two platforms just to maintain uniformity with other apps.

4. Action Buttons

Action Buttons are simply those that allow the user to take some action. Some of these buttons may have higher priority or visibility than others. Actions like Tweet, Upload, Post update, etc are given more priority (the distinction may lie between actions for modifying content on screen, vs creating new content).

Material Design on Android uses something called Floating Action Buttons. This a button with an icon, that floats on top of the main content.

Many apps on iOS follow a different pattern and place action buttons on the top title bar.

Lets take a look Twitter as an example.

Twitter app's "Tweet" buttons. Left: iOS ; Right: Android.

Material.io also has a lot of tips on Floating Action Buttons. Worth giving it a thorough read.

5. App Settings and Options

Apps for both platforms again follow a different approach here too. The most popular patterns are the Hamburger menu on Android, and the tabbed menu on iOS.

Lets look at some menu examples on Medium for Android.

Medium's Android app has a hamburger icon on top which shows the different app options, and areas.

This is a deviation from the pattern we saw earlier with the YouTube app, where there was a tabbed approach.

Now coming to Medium for iOS, there is the familiar bottom tab approach, but without the labels.

Medium's iOS app follows a bottom-tabbed approach.

Notice how some options from the Android app's hamburger are pushed into the "User" options tab on iOS.

Another important affordance that the Android navbar provides, is long pressing the Square icon button.

Long pressing the square button opens up settings in some apps.

Lets see what long pressing this button does in the YouTube app.

6. Uniformity

After all is said and done, there are always exceptions. Not all apps follow different interactions and UI design patterns for the two platforms. Some apps follow Material Design patterns on iOS (Gmail), others follow a Human Interface-ish model on both (Instagram).

Left: Gmail for Android ; Right: Gmail for iOS. Both apps follow Material Design patterns.

Left: Instagram on Android; Right: Instagram on iOS. Both apps look and behave similarly. Notice how the iconography is different in both.

Conclusion

From all of this, its hard to say how much of a difference should exist and what patterns should be followed. But before designing your next app a certain way, its worth exploring some popular applications and designing with the affordances in mind.