UI Anti-patterns in porting iOS apps to android

If you are considering porting an iOS app to Android one of the key issues that you need to address is how to adapt the ui to Android.  Fortunately Google provide a series of excellent resources around creating Android UIs .  I highly recommend reading:

However there is one particular anti-pattern I wanted to talk about:

Copying the iOS ui pixel for pixel

Unfortunately a number of apps attempt to copy the iOS version using the same ui controls and resources.  An example of this approach is the commonwealth bank app:

Android commonwealth bank app

iOS commonwealth bank app

 

 

 

 

 

 

 

 

 

Google specifically advises against this in their design guide:

As you plan your app for Android, keep in mind that different platforms play by different rules and conventions. Design decisions that make perfect sense on one platform will look and feel misplaced in the context of a different platform. While a “design once, ship anywhere” approach might save you time up-front, you run the very real risk of creating inconsistent apps that alienate users.

Copying the iOS ui of an app comes with a number of significant down sides:

The app will feel out of place

Its true that apps come in all shapes and sizes.  Companies often customise the look and feel of an app to implement their own branding.  However if you just copy the look and feel of your iOS app, users will know what you are up to right away.  Consider the following review of the commonwealth bank app, from the google play store:

 Since Kaching is still not marked as compatible with my phone, I’m forced to use this poorly ported iPhone app. The content doesn’t resize to fit the screen width, leaving an unused border down the right hand side of the screen, and nothing about the design looks like Android. Commonwealth could learn a lot from ANZ here, their GoMoney app is brilliant.

Lack of device independence

The fact that android must support different screen sizes and pixel densities means that the app must gracefully deal with being resized.  This is a constraint that iOS apps don’t have and often no thought as to how they should resize has been put into the design.

Images in the app are stretched

The bottom tab bar doesn’t take advantage of any extra space to the left or right

Fails to take advantage of native android features

Copying the iOS UI means the app cannot take advantage of Android features that are unavailable on iOS.  For example Android includes the excellent share intent, which allows you to share URLs, apps,images etc via any social apps you have installed.  The commonwealth bank app however copies the iOS version all too literally:

I should note that when I took this screenshot I didn’t even have a Twitter client installed!  I guess if I wanted to share over Google+ or app.net then I would be out of luck.

 

What should have been done instead

When considering porting an iOS app to Android, I would recommend the following:

  • Start by reviewing the android design guide.  The first step in building a great looking android app to to understand what the platform provides and how android apps should look and behave.
  • Redesign for android.  When porting an iOS app you need to consider how to provide a UI that feels ‘native’ to android yet still familiar to users of the iOS app.  This is always going to entail some level of redesign.
  • Ensure HTML5 cross platform content is truly platform independent.  The commonwealth bank app makes heavy use of platform independent html5 content.  When using such content you need to ensure the look and feel is appropriate both for iOS and Android.
  • Test, test and test again.  Any android app needs to support a wide number of devices running at different screen resolutions and display densities.  Testing on a number of different devices would have picked up several of the issues with the commonwealth bank app.