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

Question

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 1

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.

Answer 2

I completely understand your sentiments towards Metro (or whatever they're calling it now). It's simple, clean, alive, just overall wonderful. However, I think it's an awful idea to spread across all other platforms.

Each platform has a set of design and functionality standards that their users are accustomed to so by introducing the Metro UI to users on other platforms, you're going to be going against everything they're used to. You also have to consider that your users may not like the Metro UI. If everybody wanted Metro then everybody would buy a Windows Phone, but we know that's not the case since you have users to support elsewhere.

No matter what platform you're focusing on, you should build specifically for that platform in a way that is familiar to the user. You want your users to feel at home in your app which is best achieved by following the guidelines for their platform.

Answer 3

I think the general confusion is that Metro UI (or modern UI as its called now) seems to be all about using large flat tiles and there is confusion about how that could be integrated into design of cross platform apps. However you need to realize that Microsoft uses Live tiles or flat tiles as a reference points to drive home their focus of simplicity and focus on content with the use of large typography and use of animations to bring about fluidity in information flow. The design principles of Metro Design which can be applied everywhere are :

1. Show pride in craftmanship : Simply put, work on making your designs as pixel perfect as possible and ensure that the small details are catered to

2. Be fast and fluid : Simply put, Be responsive to user interaction and ready for the next interaction in such a way that you create a meaningful user flow with each interaction

3. Be authentically digital : Simply put, be aware of that you are dealing with the digital medium and try to use the features offered in the digital medium as a way to show your user flow. Examples of proper use would be the user of vivid colors to drive user focus and use of large fonts to call action to content. In other words try to avoid skeumorphs

4. Do more with less : Simply put, allow user to directly interact with content without having to deal with a lot of distracting elements in the way.

5. Win as one : Simply put, ensure there is minimilistic redundancy and there is consistency in design across multiple factors and layouts.

All of these design principles can be applied to any design interface and there are quite a few apps which have managed to pull it off pretty well as shown below

That said, ensure while designing your apps you do follow the design principles of the platform you are designing for so that the users know how to navigate across the app since they would expect consistency in navigation.

Answer 4

I've been impressed with metro style as well and I think it's worth exploring it on other platforms. If a user has a Windows phone and an iPad it would definitely be nice to have the same consistent experience. On the other hand, I think extra caution needs to be taken with introducing any interactions that are drastically different from anything done on iOS or Android not to confuse users. For example, on iOS a click on content can bring up a toolbars; user could have expectations that the same will work in your app. There are some interfaces (e.g. Twitter app on iPad) that don't strictly adhere to iOS interaction guidelines but the app is still quite intuitive and easy to use.

Answer 5

My lastest app uses a flat design (oh yes, I prefer this neutral term rather than the vendor centric one).

So far, the feedback is positive. I don't know which UI style is always better. Nevertheless, the following quote inspired me:

“Well-loved products on the web share a similar design aesthetic, with roughly the same kinds of bevels, inset shadows, and drop shadows. For designers, achieving this level of “lickable” interface is a point of pride. For us, and for a minority of UI designers out there, it feels wrong.“

~ Allan Grinshtein (Layervault)

Answer 6

Only to some point.

The idea of using boxes is not Modern UI (btw. they don't call it Metro any more). Boxes are ok, sometimes it's a really good idea to use it, but going too deep into a different UI will abuse the learned, common ways user interacts with the device.

The only exception is a situation when you want to present the features of another interface. Then you can go wild.