android - Is it appropriate to use Metro style design for a cross-platform mobile app

I'm finding it really difficult to design UI's for android and ios after falling in love with the windows metro design.

I wondered if providing a metro style app across all platforms would be such a bad thing as personally I don't think experience comes much better than on a windows phone app.

Would it be a bad idea to have a single metro style ui across all platforms?

Answer

Microsoft have experimented with this idea with their Xbox Live companion app for each platform.

Here's the My Xbox LIVE app for iOS:

Images taken from the My Xbox LIVE app listing on the iTunes App Store

…and here's the same app on Android:

Images taken from the My Xbox LIVE app listing on Google Play

…and lastly, here are some screens from the iPad version:

Images taken from the My Xbox LIVE app listing on the iTunes App Store

This is all (relatively) easy to design, but extraordinarily difficult to implement technically. Some things to note for instance (that may not be immediately obvious from static screenshots):

• Rather than using Metro-style panoramas (which show the edge of the next pane to indicate that you can scroll horizontally), these apps use carousel-style dot indicators to let you know how many screens there are in the current panorama (and which one you're on now). Other little things like


• This app gets away with being in Metro because its users have experienced Metro on their Xboxes themselves; the users have a reasonable expectation of how it works (especially on the iPad interface, which mimics the TV interface closely)


• Segoe UI (or its sister font Segoe WP) is a huge part of what makes Metro Metro, and so you'd need to factor in licensing the font for use in your app(s)


• Metro apps for Windows Phone are designed with a hardware back button being an assumption. Since this isn't available in iOS you need to factor in the need for a software back button (you see above on the "avatar" screens, that Microsoft do so on iOS but not Android which does have a hardware back button)


• Metro is highly dependent on animation. You will need to design with animation in mind and to implement all animations yourself (on each platform).


• You cannot mix-and-match the native and Metro design languages; you will need to implement custom controls for every function (from form elements like drop-down menus all the way through to UI functions like loading throbbers). The My Xbox LIVE iOS app violates this on its settings screen by showing an iOS UISwitch control.


• You may need to emulate interactions you aren't aware even exist (in Windows Phone I can flick any menu bar up as a touch gesture, but in the My Xbox LIVE iOS app I have to tap on the very small "…" target to do so).


• There are many implications for accessibility you need to consider. On iOS, the My Xbox LIVE app is not particularly compatible with the built-in VoiceOver screen reader, especially on the home screen (e.g. a button visually labelled "Gamer Spotlight: Say hello to Dr. Black Bones" is read out as "dimmed button", the messages button is read out as simply "button" and buttons that are totally invisible are read out), although some other screens (like the "recent games" screen) are perfectly readable (even adding new spoken text that isn't visible on screen, reading something like "Fruit Ninja: 17 achievements earned. Gamerscore is 170 out of 200"). Of course using native controls doesn't guarantee you good accessibility either; it's just easier to apply when you're not doing anything especially different to the rest of the platform's expectations.