If the UI makes sense for the tasks needed to perform, then it's a valid path to take.
–
DA01Oct 10 '12 at 18:29

This is a really interesting question. To get more useful answers, it'd be sensible to reword your title to better describe your question. Something like "Is it appropriate to use Metro for a cross-platform mobile app?" is more likely to bring appropriately-talented people in to answer your question.
–
Kit GroseOct 11 '12 at 6:21

Microsoft's Bing app for iOS uses their Metro style. My personal opinion is that although you might have some unification across platforms, you really ought to incorporate at least some of the control idioms particular to the device. For example, I really get miffed when I see developers use Android fonts in their iOS app store screen shots because they were too lazy to make an iOS screen shot. And I also can't stand it when I see Android apps with identical iPhone tabs across the bottom of the screen.
–
alord1689Oct 20 '12 at 23:31

Are you looking for any more information that hasn't been provided below? If not, can you please mark an answer as accepted?
–
Kit GroseFeb 12 '13 at 3:45

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)

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)

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.

I like how the My Xbox Live app works and I think it's a good example of Metro being appropriate on other platforms. They can only get away with this though, as you said, because the user has a reasonable expectation of the app working like and looking like their Xbox UI which is also Metro. In this case, the user doesn't feel transplanted into another platform's UI because they have the expectation of Metro going into it and are used to it.
–
MCeleyOct 11 '12 at 12:47

@MCeley do you use Windows Phone at all? As a WP user I find the app a little bit "uncanny valley" (i.e. it looks like a duck, quacks like a duck but acts like a goose). I think I'm probably being a little hard on it, though, and most people wouldn't have those issues.
–
Kit GroseOct 11 '12 at 12:57

My main phone is a Nexus S (Android) but I develop for Windows Phone and own a Samsung Focus for testing that I use quite often. Before I bought my Nexus 7 my Focus was also my main gaming and Netflix device while sitting around the house. So yeah, I do use Windows Phone to a certain degree. I don't think the Xbox app is perfect but it's still really well done and polished.
–
MCeleyOct 11 '12 at 13:35

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 :

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

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

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

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.

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.

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.

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.“

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.

I agree, but I wonder sometimes if an app really needs to feel like the os, with certain apps I'm sure this would be preferred like with tools and such, but with apps that provide data similar to web apps I wonder if a single feel across all platforms might be as comforting.
–
DarcbarOct 10 '12 at 18:09

I find it stranger that apps like Facebook and Twitter completely remove the feel that users are used to (particularly in windows os) and adhere to native standards, but then that's probably a story in itself :)
–
DarcbarOct 10 '12 at 18:20

Twitter still adheres to some of the platform standards on Android and iOS but very loosely. In the case of Facebook, they have an HTML5 based Android app which is horribly slow and occasionally impossible to use. Their iOS app used to be the same but they recently switched it to be all native and more closely follow the iOS design guidelines and it went from being a 1.5 star app to a 4 star app.
–
MCeleyOct 10 '12 at 19:05

Not everyone agrees with how wonderful it is: goo.gl/TcQFU
–
RobOct 11 '12 at 4:10

Hi Rob, I completely agree with the post you linked, I love how metro works on mobile but after using it (win8) on PC for a couple of months I moved straight back to linux, its a great mobile/tablet os but for me not so much for everyday desktoping
–
DarcbarOct 11 '12 at 6:50

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.

The consistent experience across different platforms with a single app I think is the future of mobile apps. I agree that system interactions should stay native-like.
–
DarcbarOct 10 '12 at 18:25

Yes, agree. Currently there is too much variety and costs maintaining different UIs for different platforms or even versions of platforms. For instance, Apple introduced iPad and all apps had to be updated. Windows 8 I believe is going in the right direction with the choice of the underlining technologies (html, css).
–
Anna RoubenOct 10 '12 at 18:41