Don’t call it Metro, call it Good Design

By

|

May 2nd, 2013

|

25 Comments

I think I’ve been wanting to write this blog post for a while. A few days ago, Facebook announced the release of a new Windows Phone app (Beta). The app does not use the typical out-of-the-box controls i.e. Panorama, Pivot or Page that have “traditionally” given Windows Phone it’s particular flavor and perhaps even differentiation from iOS and Android design languages. The release of the Beta sparked a range of comments, some in support, some against the design aspects of this app. To be clear, the ones that support the app (me included) are not saying that this is the best ever possible app of all times… We are simply celebrating the fact that a major industry player like Facebook is pushing what I’ll call Metro, to the next generation. This celebration is independent of whether it is Microsoft itself or Facebook who actually authored this app. There are questions about whether Microsoft is actually behind the development and design or if Facebook is doing in house and/or with the help of a 3rd party agency. All of this is meaningless. The app is an official Facebook app and that’s what matters.

For 3 years now we have seen 100K plus Windows Phone apps hit the market. Many of them are games and the rest rely on mainly two design patterns: Panoramas and Pivots. I’m sick and tired of this. It’s not that Panorama and Pivot are wrong, no, they are reliable, flexible, powerful controls that give you a lot of options to create great apps. My problem (one that is shared by many in the community and inside of Microsoft) is that we have made these two patterns dictate our 100K Windows Phone experiences. This is wrong. Design patterns like Pivots or Panoramas are just that, patterns. A mature, design savvy, sophisticated designer knows that that story and experience comes first, much before “design patterns”, those are just tools. By slaving ourselves to these couple patterns we’ve tried to solve 100K experiences… It’s almost laughable when you think about it. If you think this is just a recent problem, no, it’s actually been there from the beginning. I talked to numerous Microsofties of all levels and most agreed “all Windows Phone apps look the same” – don’t you agree? But hey, isn’t that a good thing? The way higher level execs would pitch it is by saying they wanted to offer a unified experience in the phone. Nah, among other business reasons it has more to do with enabling an ecosystem with zero apps to get quickly to a 100K apps. UPDATE: As many people have pointed, growing the Store from 0 to 100K is certainly not the only reason. It is certainly a natural thing for a new product/platform to kick off the ecosystem with a defined set of design patterns and then seeing it grow from there. The interesting thing here is reaching the point where the community can push Metro to the next level on their own which is what seems to be happening here with Facebook.

There couldn’t be better news for Windows Phone about seeing the Beta for the new Facebook app. Finally after 100K apps, a sign of maturity in the ecosystem. A big player betting for something new. When developers and designers “feel part of” an ecosystem they push it to the next level. That’s what’s happening here and it must be celebrated by everyone who cares about the ecosystem.

Now, what is it that matters most to me when I buy a Windows Phone? My Windows Phone experience or my Facebook experience, my Twitter experience, my Spotify or WhatsApp experiences?

The truth is once you are in the phone, what you care about are the apps. The Windows Phone team has done a lot of work (and a really good one) on creating what I’d argue is the best out-of-the-box experience of any phone. Look, take out all the 3rd party apps from Windows Phone and you still have search, local scout, maps, phone, music & videos, SMS, Facebook, Twitter, LinkedIn integration etc etc… There’s tons of value in Windows Phone on its own and a lot of it comes from the out-of-box services. More than in other platforms. But you know? People sometimes still prefer to use the Facebook app instead of the Windows Phone People Hub thingie. Why? Simple. As a user I’m interested in living the “Facebook experience” in blue color, familiar icons and UI metaphors as well as have access to as many features in Facebook as possible. The Facebook app will always be more feature rich than the native out-of-the-box Windows Phone service. Translate that to all other 100K experiences and its the same, people want to experience the Spotify, ESPN, IMDB, Netflix, XBOX experiences, not just the Windows Phone experience per se.

So think of it this way, what is really Windows Phone, iPhone or a Galaxy phone? They are simply portals to other experiences that bring value to users. These portals are the apps. A metaphor is that phones and their out of box services are the Las Vegas strip. The structural solution. And then all the hotels along that axis, along that structure are apps. So you get apps of all sorts of types because each is looking to provide you with a different “experience” although you always feel “inside Las Vegas”. Phones are the same. They are worthless without apps, and the more spectacular, usable, beautiful, valuable apps the more valuable the ecosystem becomes. When you buy a phone today, you are not buying a phone you are buying yourself a way into an ecosystem. Whoever has the warmest, coziest, most fun ecosystem will win.

What would happen if all the hotels along the Vegas strip looked and felt the same? People would get bored too quickly and easily. It all feels the same. That’s how the Windows Phone ecosystem feels to me because 100K + (minus games) experiences have been built with then same two and only two types of design patterns available: Pivot and Panorama. As I mentioned earlier, developers and designers should not have to force their stories, their experiences to these two design patterns. If they work for your experience go ahead, use them but don’t just use them because Visual Studio has a Create New Panorama Project or Create a New Pivot Project. Who is the star of the show? Windows Phone? Or the experiences that apps provide? I’ll say for sure that it is the apps, the Facebook, Instagram, Spotify, Twitter, Netflix experiences that matter so by all means let those big players use whatever design patterns they like so that they can successfully “deliver the Facebook experience” within Windows Phone. Also, by all means please, you, the developer and designer of apps, allow yourself to tell your story, to create the experience you need to give value to your users. Define if you can leverage Panorama and a Pivot but do not hesitate for a second if you realize those design patterns don’t work for you.

Am I proposing anarchy? Chaos?, no – there is a set of Design Principles (with capital letters) that drive all experiences in Windows Phone. Skeuomorphism for example is not one of them. Adorning apps with stitches, leather, wood and other fake ornaments are a last resource – notice I say last resource, as in giving it a possibility to exist in Windows Phone, because as we said before, story and experience comes first and if you need metaphors like leather, wood or rusty metal to convey that experience then so be it… Yes, even in Windows Phone. But I bet you it would be very hard to justify iBooks wooden look and feel under these, our Principles.

Am I saying everything should be “flat”? Oh jeez I hate that term. If you ever hire a designer, developer or read an article with the words Flat Design in their title, just runaway, run to the mountains, because that person doesn’t understand that this isn’t about being flat, it’s a not a style… Styles come and go, like fashion styles… They are hot now, they are dead in two years. The thing Microsoft and now Apple (thank you Ive), and a huge number of UX and UI design agencies are trying to do is to apply the design principles of Modernism. Modernism, you know? The philosophical, fine arts, architecture, cinamatographic movement that started in the early 20th century. Bauhaus, Swiss design, International style, Helvetica and geniuses like Massimo Vignelli, Walter Gropius, Mies Van der Rohe, Richard Meier, Dieter Rams, Luis Barragan, Stanley Kubrick and even Jonathan Ive from Apple are just some of the lighthouses and masterminds that spent a century exploring the same things that today’s designers are exploring. How to convey stories, and enable user experiences. We simply happen to have a different medium, it’s not oil or acrylic, nor brick and mortar, but pixels. Those tiny little sparks of light that we as designers carefully arrange and order. That’s our medium, plus the input mechanisms which these days we have plenty. So when someone says ‘flat’ then the conversation automatically degrades to talking about styles or fashions instead of a timeless movement like Modernism. Read more about the guys I mentioned above, read more about Modernism, the movement, not the style.

And all of this doesn’t apply only to the Windows Phone ecosystem. iOS and Android are the same. They have design guidelines… Guidelines, not laws, about how to design for those platforms. Think about it, the most breakthrough apps from iOS have come precisely from startups that broke apart from the out of box design elements in iOS. Look at Clear, Paper, Flipboard… all award winning apps, all leveraging their own design language, not Apple’s out-of-the-box.

Remember design guidelines are guidelines, not laws. And Microsoft will NOT reject your app for design/UX reasons (not for Windows Phone, not for Windows 8). You are FREE to whatever you think it’s best for you app.

I’ll close with something that my two good friends August de los Reyes, Sr. Director for XBOX design studios and Sean Wolcott, also a Sr. Designer with XBOX said to me a few weeks ago: “… don’t call it flat, don’t call it Metro, don’t call it modern, just call it Good Design.”

 


25 Comments on

“Don’t call it Metro, call it Good Design”

  1. 1 Laurent Bugnion
    7:51 am on May 3rd, 2013

    There was a lot of discussions about that topic on many forums and Twitter recently. I think the FB app is OK. There are a few things that bother me a bit (for instance the swiping from the side to bring the side panels in view) but I am starting to get used to it and it is possible it is just an issue of my cheese being moved, which is perfectly fine really.

    Other apps are more controversial, like the new Untappd app which is using 100% iOS design style. That one is clearly a temporary issue where the developers wanted to have the app on WP without additional effort in the design area (it’s also a symptom of them using Phonegap, which allows for less freedom in the design of course). They are already getting a lot of negative comments about it in reviews, and after chatting with the designer of this app last night on Twitter I am convinced they will bring a better design soon.

    When exploring new design landscapes, there is a fine line between creating a unified corporate identity (which I totally get) and wanting to put the same experience on all devices. That IMHO is not a gain. I think that sometimes people overestimate the value of helping users to transition from one platform to the other. When people move from iOS to WP, they do so because they want to have the WP experience. Otherwise they would stay on iOS. As for new users, they choose between different phones based on what they see, and the select one or the other system. As you say about apps, I can say about phones: If it is all the same, it is of less value to me as a user. I like taking a Windows Phone, any model, and feeling “ah yes, this is a Windows Phone”. Untappd makes me feel uneasy because this is not the experience I chose when I adopted WP as my platform.

    So yes, I agree that pushing the design out of its limits has great value. But I still think that having a clearly defined platform has great value for the user of that platform, as opposed as having WP apps look like iOS apps just for the sake of a consistent design. I am not saying that all apps must look the same, god no. I am saying that I want to feel at home in all my apps, on my phone.

    Totally agree with you on the “flat” design. I cringe every time I hear that. We don’t call skeuomorphic design “overloaded” design, after all. Also agree about the design guidelines not being laws. When I talk about Microsoft design, I often feel the need to mention that those are not rules, and you can, you should break them. This is how design evolves.

    Cheers
    Laurent

  2. 2 Bil Simser (@bsimser)
    9:40 am on May 3rd, 2013

    Well said sir, well said. Bravo.

  3. 3 Arturo Toledo
    10:35 am on May 3rd, 2013

    Agree Laurent, there’s always value in a platform having a “special” or characteristic flavor. I think that when companies started their phone platforms they had to roll out certain “standard” ways in which developers would create apps but as platforms mature this direction should be embrace by the community – with the company (MSFT, AAPL, GOOG) as a community leader. I hope that throughout the transition Microsoft can lead the pack by pushing innovation in the way apps are designed )

  4. 4 sickoftalking
    10:46 am on May 3rd, 2013

    Your argument makes it sound as if Modernism as a movement wasn’t replete with avant-garde fads. A critic of Metro might re-emphasize the “flatness” and compare it to brutalist architecture and other ugly modern buildings where the architects were over-concerned with reducing ornamentation, avant-garde ideology, rejecting universal and classical standards of beauty, while he might compare skeumoprhism to traditional architecture, which, while not consciously modern, would be still in his view be “timeless.”

    That said, I like Metro, but I find it being more “modern”, than Modernist. It fits more in with modern commercial design, which is only influenced by Modernism in as much as it is unornamented, but which as a whole tends to be more attuned to classical aesthetic principles rather than being interested experimentation. Metro reminds me of Ikea, Crate & Barrel, and Gap, not Bauhaus.

  5. 5 Darius Samanta
    11:25 am on May 3rd, 2013

    To be fair, Microsoft did its best to promote “Metro” being Panorama & Pivot. Even the first party experiences like Wallet look very sad. It is not enough to just explain the “grammer” for the Metro Design Language and expect Devs&Designers to come up with beautiful poems.

  6. 6 Senkwe
    11:38 am on May 3rd, 2013

    Wish there was a way to “up-vote” this post. I especially liked the fact that you picked up on the subtle point that when an app store matures, developers become comfortable enough to try new things.

    One thing the community needs more of though…is a place too point out, discuss and celebrate well designed apps and designers.

    Where are all our Loren Brichters for example?

  7. 7 Former Experience Designer for Windows Phone, Arturo Toledo tells you why the new Facebook app is still very Modern | allcom.se
    12:01 pm on May 3rd, 2013

    [...] Source: Toledo2 [...]

  8. 8 Former Experience Designer for Windows Phone, Arturo Toledo tells you why the new Facebook app is still very Modern | AIVAnet
    12:35 pm on May 3rd, 2013

    [...] Source: Toledo2 [...]

  9. 9 Arturo Toledo
    12:43 pm on May 3rd, 2013

    Hello Brian! You are right – I left out the “dark side” of modernism. There certainly is one which among other things includes the hopeless search for perfection (utopia). I do agree that Metro feels more modern than Modernist but my point I think is that there’s still so much to learn from Modernism (the good and the bad) to apply to UI/UX. Now, UI and UX are such different mediums compared to doing architecture or industrial design or graphic design that Modernist principles will definitely manifest differently. Thanks for the note!

  10. 10 Arturo Toledo
    12:44 pm on May 3rd, 2013

    Agree Darius – we need our design lounge… hmmm (food for thought :))

  11. 11 Arturo Toledo
    12:46 pm on May 3rd, 2013

    Yes Senkwe, and I think we’ll be seeing more of this leadership/direction from Microsoft soon – independently of this, there’s tons of data, samples and inspiration out there to learn more about Modernism. It’ll be up to us to search for ways to evolve this language.

  12. 12 D Fowler
    1:03 pm on May 3rd, 2013

    This post gets a major +1 from me; I’ve always felt that in order for Metro to grow as a design language it needed developers and designers to push and experiment. I haven’t seen people take the basics of Metro and really experiment with them; and its a shame because I see where Metro has influenced developers on iOS and Android to make these interesting applications. I feel like Metro and its guidelines are templates to be pulled and broken to meet the need of the app and as long as a developer made sure to use those parts that make Windows and Windows Phone special experimentation is welcomed.

  13. 13 Milo B. Adams
    1:49 pm on May 3rd, 2013

    while i agree with the concept about forcing experience / design through a Windows Phone specific medium of the Panarama and Pivot, my view is this article misses the underlying frustration beta users are emoting. A core design principle for Windows Phone is that good design should focus on content and not chrome. While there is a big step forward in terms of content focus in the WP Beta there are also significant paradoxes such as the chrome menu bar at the top and app bar at the bottom which reduces content focus, and is both distracting and confusing to the user. Not mention that many people using Windows Phone are using the platform (and any platform for that matter) because of it’s design perspective, and differentiated experience. If the experience isn’t differentiated, then why choose a Windows Phone over an iPhone, particularly given the stopgap in marketplace apps. The point is there should be easier tools for translating apps written for other platforms to provide users with a consistent AND expected user experience for each platform.

  14. 14 Kenzibit
    2:44 pm on May 3rd, 2013

    Uuuhhh….wonderful posts like this make me feel like I’m in heaven. I really felt bad and sad when I learnt that people (a few) were complaining about this wonderful app. What do they want, they are not even facebook power users I guess. I’ve been expecting this new look and features on our FB app since the day droid/iOS updated to it and now I have it and people are complaining. The Old FB app on WP was just UGLY, USELESS and was a WHITE ELEPHANT on my wonderful WP. You know what, the guys behind this app really did a great job to bring it inline with the others and the should be celebrated. This app is just BEAUTIFUL and WONDERFUL with all the expected features and I’m really Grateful.
    Great post Toledo and you.guys keep doing what you doing….don’t let the critics kill your morale, interests and love for the new app design. We even need more apps with looks like this….there should be diversity and variants of apps not just a clone of apps…all looking alike, it makes WP boring and predictable.

  15. 15 Steven Clarke
    5:19 pm on May 3rd, 2013

    I’m curious about your thoughts on the role that tools have to play? How can tools make it easy to get started building an app that follows the design principles, but not in such a way that it ends up being difficult to build something that is differentiated?

  16. 16 David
    5:48 pm on May 3rd, 2013

    Thanks for your statement.
    I think you are right it’s good to point the way and it’s good to show that it’s ok to build different layouts but otherwise I don’t think that the panorama view are boring. The Panorma is a great feature and can be greater with some tweaks or new design patterns. Look on the Skype APP for WP, do you see the small animation when you swiping?
    That’s a small detail but you become a whole new lovely experience that’s shows the love from the developers for the app and WP.
    If some one say that the panorama view are boring or old, they are wrong. You can create outstanding and great Apps with this out-of-the-box view but you must put some work in it. The Facebook APP goes the easiest way and the only thing that’s this APP shows is that’s WP Apps can look likes every other iOS/Android app on the market.

  17. 17 David
    5:51 pm on May 3rd, 2013

    altogether the App is a nice piece of software ;)

  18. 18 nick
    7:42 pm on May 3rd, 2013

    Oddly enough,Facebook and instagram, probably two of the most important apps on iOS, hold pretty true yo the out of the box design elements. Android as well. The Facebook beta is pretty close to that android app though ( I mean really similar ), and sticks out like a sore thumb on WP. Its all Facebook and no WP, and I have a hard time believing they are reinventing metro when the same android app has been out for a good while now. Reinventing isn’t making the apps look like those on the other platforms.

    It would have been pretty easy to stick to a more unique ( to WP ) design and still get all of the functionality.

    This:

    http://cdn0.sbnation.com/imported_assets/1587413/9PMkBZs.png

    or this :

    http://1.bp.blogspot.com/-IkQZ8IpFa-I/UVjatf8MzwI/AAAAAAAAVpM/WtCtuzHKWWU/s1600/instagram%20windows%20phone%20fan%20concept%202.png

    with a Facebook color scheme, a more reasonable amount of space taken up at the top ( as in the beta ) and the same functionality would be a nice mix of Facebook and WP. Instead this is all Facebook ( just screams android at me ) and, even though I hate to say it, it seems lazy.

  19. 19 cyborgs
    8:56 pm on May 3rd, 2013

    IMHO, it’s not a Good Design. It’s a lazy design. How can you push Modern Design by imitating/copying the design from Android/iOS/Facebook Touch? A good designer is the one that differentiate his/her work from others. I believe they can do better than this. I use Windows Phone because I like its unique UI/UX. The beta app is a big letdown for me.

  20. 20 s1aver
    12:02 pm on May 4th, 2013

    I don’t use facebook so this really doesn’t matter to me but I think you’re missing the point people like the design of the old app more not that people think everyone needs to rigidly follow the design guide. The common motifs of the ecosystem are defined by the ecosystem not exclusively by a style guide nor are they static or black and white. The degree to which microsoft and facebook experiment with or balance familiarity, identity, and UI conventions is up to microsoft and facebook. But as a user I have a right to say that I feel that this app doesn’t do as good job of follow UI convention as it’s predecessor and suffers for it and in my own way influence convention. Though that doesn’t mean another a may not benefit for defying convention. I feel the old app did a great job of maintaining facebooks identity, UI convention, and aesthetic appeal.

    To be frank the new app looks more cluttered for example the borders around updates in feeds, the different colored pages when you side swipe, and the extra buttons/more predominate chrome like element at the top. And I said chrome like elements because I don’t want to get hung up on the definition of chrome.

  21. 21 nick
    12:47 am on May 5th, 2013

    I dont see how metro is being pushed and experimented with. Its basically the android app.

  22. 22 Good Windows Phone app design is more than just following a design pattern | Tech.
    12:49 am on May 7th, 2013

    [...] Toledo, a self described experience architecture and interface designer, has published a blog post discussing how Windows Phone is based on Modernist design principles, and that its apps [...]

  23. 23 monto
    9:58 am on May 13th, 2013

    Great Article. But I find the WP fb app (from MS) following the same pattern (ie Pivot) as other applications; only difference being it has a blue top and small titles than majority. Am I missing something….?

  24. 24 reTrOBI
    10:36 am on October 9th, 2013

    Thanks for this post! I am currently dying through that Top-App program where you ARE FORCED to use these guidelines…

  25. 25 zhenlxyx
    7:05 am on November 26th, 2013

    To me, the Metro design language is not only a style. It is a way-of-thinking in terms of the information, interface and integrated design.

    By information design, I mean that it is not only a “flat design” in nature, but it also features a flat information structure by letting most important info floating on the surface of any app.

    By interface design, firstly, Metro is by birth a boundless experience. Through visual metaphor and animations, it stretches itself beyond the small screens of mobile phones. This makes it adjustable to wider/bigger screens without compromising the design: just unveil the contents that are “hidden” in the narrow screen. Secondly, by using color, shape, grid and font, Metro should be able to adopt to more surfaces other than the LED screen, such as glass or mirror surfaces.

    By integrated design, do you still remember the early TV commercial released at the very beginning of Windows Phone, which compares apps to rooms, and the Windows Phone approach to breaking down such isolation? This to me is the core of the OS and I think it should not be breached.


Leave a comment