Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
4  
If the UI makes sense for the tasks needed to perform, then it's a valid path to take. –  DA01 Oct 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 Grose Oct 11 '12 at 6:21
    
Have your read the Android Design Guidelines? –  Wesley Wiser Oct 12 '12 at 18:30
2  
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. –  alord1689 Oct 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 Grose Feb 12 '13 at 3:45
add comment

6 Answers 6

up vote 19 down vote accepted

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

Here's the My Xbox LIVE app for iOS:

Screenshot of the "quickplay" menu in My Xbox LIVE for iOS Screenshot of the "discover" screen in My Xbox LIVE for iOS
Screenshot of a game's details in My Xbox LIVE for iOS Screenshot of the avatar edit interface in My Xbox LIVE for iOS

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

…and here's the same app on Android:

Screenshot of the games listing in My Xbox LIVE for Android Screenshot of the "spotlight" interface in My Xbox LIVE for Android
Screenshot of the "social" interface in My Xbox LIVE for Android Screenshot of the avatar edit screen in My Xbox LIVE for Android

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

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

Screenshot of the games interface in My Xbox LIVE for iPad Screenshot of the "discover" screen in My Xbox LIVE for iPad Screenshot of a details listing in My Xbox LIVE for iPad

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.
share|improve this answer
1  
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. –  MCeley Oct 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 Grose Oct 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. –  MCeley Oct 11 '12 at 13:35
add comment

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.

share|improve this answer
    
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. –  Darcbar Oct 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 Rouben Oct 10 '12 at 18:41
add comment

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.

share|improve this answer
    
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. –  Darcbar Oct 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 :) –  Darcbar Oct 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. –  MCeley Oct 10 '12 at 19:05
    
Not everyone agrees with how wonderful it is: goo.gl/TcQFU –  Rob Oct 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 –  Darcbar Oct 11 '12 at 6:50
add comment

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)

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

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.

share|improve this answer
    
Some really great examples! –  Kit Grose Feb 15 '13 at 0:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.