[User Voice] REVIVE METRO

[Dustin Hodges]

Twitter broke from the common Metro elements too, similar to Facebook, but it gets a pass? The Facebook app uses Segoe WP, there is no chrome, the content is definitely first. But it also brings in familiar elements from the standard Facebook web elements.

[SUP].......called it. here we are at facebook again.[/SUP]
Twitter gets a "pass: because its not JUST a flattened version of twitters UI. First off, the homescreen uses a pivot that allows one to swipe left and right between Feed/Mentions/Discover/You (and the icons above actually give some notion to this), There is little unnecessary chrome (if twitter can remove its background space around the feed thus widening the content area, then so can facebook. just saying. But the top area I admit is just as obtrusive as facebooks' menu bar. Granted, usernames & hashtag names appear beside the twitter icon, but the icons could of been slightly smaller.), content is put first (of course. its twitter. twitter without tweets would be like facebook without friends.), it utilizes the proper fonts and sizes, navigation is simple and easy, and it is a good example of utilizing metro while keeping familiar.

I will give some visual aids:

1. Twitter manages to modify its menubar to that of the OS its using. In the case of WP, a modified pivot object (which adds motion), while retaining familiarity
2. Twitter also uses a different action bar per OS. In this case again, WP's application bar is used (and is slightly smaller than the other 2 OSes)
3. Lastly, Both android and WP have the background area removed (extra chrome) allowing the tweets to take up nearly the whole width (and WP is using a slightly smaller font, so even more content per screen!)
4. BUT! Whats this? Not only does facebook use the same menubar throughout its apps, the WP version is larger then its counterparts, thus giving a smaller content area!
5. It also retains the useless background area throughout every app, giving less room for content
6. -gasp- Whats this? The images on iOS and Android take up full screen width while WP doesnt, thus minimizing content view further.
7. Why is this here. Yes, its good use of Modern UI, but where are these options on Android and iOS? Survey Says: The navigation menu accessed via swiping to the right. This is redundant and even further more limits content space.

So, in summary, we have determined:

• Twitter puts content first while cleverly integrating familiarity
• Twitter uses OS UI elements, but instead of restricting itself, uses them to its advantage.
• Twitter lets the content take up as much room as possible.
• Facebook, in an attempt to make facebook UI look like Modern UI, has limited the content space with an oversize menubar
• Facebook puts a background area (chrome) within the app, thus limiting even further the content space
• Facebook actually CHANGES how images display in the feed, making them smaller, thus both limiting further (smaller images) the content space, and expanding it unnoticeably (image is smaller)
• Facebook in attempt to utilize one Modern UI feature actually creates a redundant area that even further limits the content area

Now lets go through a "metro checklist" of sorts:
Metro:

• Put content before chrome
• Use great typography
• Use motion as a tool
• Don't be redundant
• Be simple, yet elegant in design

Facebook:

• Puts chrome before content FAIL
• Uses decent typography (Menu Is where it shines) PASS
• Only uses one motion, and does not make apparent to user that one motion is even available, leaving it the appearance of no motion FAIL
• Has a redundant application bar that, despite being part of Modern UI, is misused and unnecessary, especially considering the fact that it makes the limited content space worse. FAIL
• Does not boast simplicity, and barely has elegance. Opted to port a UI over to windows phone instead of use the tools and design of the OS to its advantage FAIL

In the end, Facebook is NOT metro. some of the things that could slide and pass are drowned out by the fact that only one thing that is part of "metro" is used (decent typography).

[SUB]:sweaty: that's a lot of typing[/SUB]

---

THIS. "Content is king", as written by you, is actually a Metro core principle. Even the rant posted by the OP states it ("Metro is all about content before chrome", "a philosophy of design, where content was first"). But some people seem that would be happier with a huge "Facebook", in "beautiful typography", [wasting] occuping half of the screen.

I wasn't meaning to rant, per say, my apologies. I am getting worked up.

However, I hate the old facebook app. I never said I liked it or that it was metro. neither app is. one abuses modern ui, the other doesn't even use the ui to its advantage. Both waste space to look one way, or another. neither are metro.

 

[ttsoldier]

This again?

 

[wtrmlnjuc]

That's funny. Because I could insert that app right into Android and it'd fit right in Holo.

 

[Dustin Hodges]

That's funny. Because I could insert that app right into Android and it'd fit right in Holo.

which one?

 

[derDaniel]

I think Dustin made a very valid point.
I am really unsatisfied with the way metro has evolved.
I not sure why chronous calendar is mentioned here, I think it has nothing to do with Wp or metro design.
The new Facebook app is kinda different there.
It is produced by MS itself, the root of metro and WP.
I am kinda unhappy that this root leads metro in an other direction.
The old fb was unique in its way and style.
Somewhere in the news comments I read "the old was perfect, it just lacked of features".

All in all I have to give credit to Dustin. Breaking up with the brilliant metro UI just because missing features/functionality is no excuse.
Rather get your code and design idea right!

 

[Dustin Hodges]

I think Dustin made a very valid point.
I am really unsatisfied with the way metro has evolved.
I not sure why chronous calendar is mentioned here, I think it has nothing to do with Wp or metro design.
The new Facebook app is kinda different there.
It is produced by MS itself, the root of metro and WP.
I am kinda unhappy that this root leads metro in an other direction.
The old fb was unique in its way and style.
Somewhere in the news comments I read "the old was perfect, it just lacked of features".

All in all I have to give credit to Dustin. Breaking up with the brilliant metro UI just because missing features/functionality is no excuse.
Rather get your code and design idea right!

In reality, the new "metro" is completely foreign to the old. Microsoft is "selling themselves to the devil" in a sense that they are giving up and giving in to android and iOS, all in a unneeded desperate attempt to attract customers (people didn't buy windows phone because facebook looked the same, or that an iOS port looked like an iOS app)

And that last part, well, in reality, there are no missing features with metro. Metro should (of) influence(d) new designs and ways of doing things, all while sticking to its core principles. But no one seems to understand. They think "I cant use a [Modern UI component not actually metro] so its not metro anyways" and just port a design. They completely misunderstand what metro is. And its disheartening. If it were not for indie developers, I think metro would be dead by now (indie developers seem to use the philosophy of metro beautifully)...
:unhappy:

 

[wtrmlnjuc]

Aswell it has hub-a-like menu, so it makes it even more metroish.

Have you even tested the Android or iOS apps?

They're exactly the same as this.

 

[wtrmlnjuc]

In reality, the new "metro" is completely foreign to the old. Microsoft is "selling themselves to the devil" in a sense that they are giving up and giving in to android and iOS, all in a unneeded desperate attempt to attract customers (people didn't buy windows phone because facebook looked the same, or that an iOS port looked like an iOS app)

And that last part, well, in reality, there are no missing features with metro. Metro should (of) influence(d) new designs and ways of doing things, all while sticking to its core principles. But no one seems to understand. They think "I cant use a [Modern UI component not actually metro] so its not metro anyways" and just port a design. They completely misunderstand what metro is. And its disheartening. If it were not for indie developers, I think metro would be dead by now (indie developers seem to use the philosophy of metro beautifully)...
:unhappy:

Yeah, Metro has really deviated from its origins, and its values. Not that Metro shouldn't evolve, but it also shouldn't be imitative of other styles. It can take elements to make itself better, but imitation isn't the way to go. For games though, it's fine.

Zune Metro changed to WP Metro; which while different, still had an increase in usability and a difference in style.

 

[wtrmlnjuc]

which one?

Didn't have the quote. Whoops. The Beta one.

 

[Dustin Hodges]

Didn't have the quote. Whoops. The Beta one.

I know. in fact, as I demonstrated earlier, the FB Beta app is actually more congested and clunky than the android and ios versions

 

[svenhassel]

Some elements of WP are perfect (like the live tiles), but Metro has to be corrected. Many apps waste a lot of space in their upper part with a giant banner!!

 

[eric12341]

The app is still in beta so I believe the final version will incorporate more metro elements and will be a hybrid of sorts in design. I don't feel that metro is dying at all.

 

[Dustin Hodges]

Some elements of WP are perfect (like the live tiles), but Metro has to be corrected. Many apps waste a lot of space in their upper part with a giant banner!!

The app is still in beta so I believe the final version will incorporate more metro elements and will be a hybrid of sorts in design. I don't feel that metro is dying at all.

Banners have nothing to do with metro, and metro doesn't necessarily have elements, but guidelines. see this quote for what I mean when I refer to metro.

Metro [me - tro] n. A design philosophy where content is put first and displayed with unique and fitting typography, in which chrome is only used subtly to accent or improve the appearance, and in which motion is key. EXAMPLE: "Windows' Modern UI was built around metro." note: Modern UI, unlike Metro, is an interface. Metro is a way of doing things. A design philosophy if you will

 

[a5cent]

I also agree with you OP. I also agree that your argument is an important one, just as it is subtle... but subtlety doesn't sell.

A UI just being flat doesn't make it metro, but that is how metro is interpreted by many. Just like Nokia's Drive app is anything but a metro app. On first glance it looks the part, but it certainly doesn't feel it.

Unfortunately, any discussion on the importance of design and its elusive properties are always difficult, but your finer points on how metro is becoming "unprincipled" are even more so. I'd say metro is (or was) about a design paradigm more than it was about any particular look.

Anyway, you have my vote.

 

[Dustin Hodges]

I also agree with you OP. I also agree that your argument is an important one, just as it is subtle... but subtlety doesn't sell.

A UI just being flat doesn't make it metro, but that is how metro is interpreted by many. Just like Nokia's Drive app is anything but a metro app. On first glance it looks the part, but it certainly doesn't feel it.

Unfortunately, any discussion on the importance of design and its elusive properties are always difficult, but your finer points on how metro is becoming "unprincipled" are even more so. I'd say metro is (or was) about a design paradigm more than it was about any particular look.

Anyway, you have my vote.

Thank you. Its nice when people understand. And I understand subtlety doesn't sell. We (or I) live in America where we "want it now" and expect things to work. People don't seem to value quality and subtlety quite like they should these days.

I agree. Their drive app is more along the design lines of their Asha app designs.

Trust me, its been difficult just getting people here on the forum to understand just what I meant by metro, so much so that ive gotten angry and frustrated through the process. Its extremely difficult to communicate these things, especially when a difficult topic is made harder to begin with, and then made even more difficult by the cultural misuse of the key term and topic.

& once again, thank you. To you, and anyone else here who has understood what I meant. Its nice to know im not talking to thin air.

 

[phing77]

grrrr!! facebook has its own design langauge twitter has its own. they do that for people who switch from other platform feel familiar with them. i think facebook beta is one of the best design app on the store. just look at our store! it doesn't show statue bar if i want to see my clock i need to close store. it maybe true that facebook doesn't follow metro guide line!!! however not every app need to follow!! look at old facebook app it waste half of the screen just to show some "metro" goodness.

 

[Daniel Ratcliffe]

Okay, let's try and be careful with our heated emotions. Anyways, regarding the Facebook app, I do think it has strayed somewhat from Metro, however, bring up the notifications section (or friend requests, or messages), then swipe left or right. It moves between those 3 icons on the top. Found that by accident. So I think come the final release it will be Metro/Modern. Although they do have some work to do still.

 

[Dustin Hodges]

grrrr!! facebook has its own design langauge twitter has its own. they do that for people who switch from other platform feel familiar with them. i think facebook beta is one of the best design app on the store. just look at our store! it doesn't show statue bar if i want to see my clock i need to close store. it maybe true that facebook doesn't follow metro guide line!!! however not every app need to follow!! look at old facebook app it waste half of the screen just to show some "metro" goodness.

Okay, clearly you haven't read what ive said. lets recap a few things.

What is metro:

Metro [me - tro] n. A design philosophy where content is put first and displayed with unique and fitting typography, in which chrome is only used subtly to accent or improve the appearance, and in which motion is key. EXAMPLE: "Windows' Modern UI was built around metro." note: Modern UI, unlike Metro, is an interface. Metro is a way of doing things. A design philosophy if you will

Why Twitter is Metro, FB Beta is not:

[SUP].......called it. here we are at facebook again.[/SUP]
Twitter gets a "pass: because its not JUST a flattened version of twitters UI. First off, the homescreen uses a pivot that allows one to swipe left and right between Feed/Mentions/Discover/You (and the icons above actually give some notion to this), There is little unnecessary chrome (if twitter can remove its background space around the feed thus widening the content area, then so can facebook. just saying. But the top area I admit is just as obtrusive as facebooks' menu bar. Granted, usernames & hashtag names appear beside the twitter icon, but the icons could of been slightly smaller.), content is put first (of course. its twitter. twitter without tweets would be like facebook without friends.), it utilizes the proper fonts and sizes, navigation is simple and easy, and it is a good example of utilizing metro while keeping familiar.

I will give some visual aids:
http://i.imgur.com/BXyjzx9.jpg

1. Twitter manages to modify its menubar to that of the OS its using. In the case of WP, a modified pivot object (which adds motion), while retaining familiarity
2. Twitter also uses a different action bar per OS. In this case again, WP's application bar is used (and is slightly smaller than the other 2 OSes)
3. Lastly, Both android and WP have the background area removed (extra chrome) allowing the tweets to take up nearly the whole width (and WP is using a slightly smaller font, so even more content per screen!)
4. BUT! Whats this? Not only does facebook use the same menubar throughout its apps, the WP version is larger then its counterparts, thus giving a smaller content area!
5. It also retains the useless background area throughout every app, giving less room for content
6. -gasp- Whats this? The images on iOS and Android take up full screen width while WP doesnt, thus minimizing content view further.
7. Why is this here. Yes, its good use of Modern UI, but where are these options on Android and iOS? Survey Says: The navigation menu accessed via swiping to the right. This is redundant and even further more limits content space.

So, in summary, we have determined:

• Twitter puts content first while cleverly integrating familiarity
• Twitter uses OS UI elements, but instead of restricting itself, uses them to its advantage.
• Twitter lets the content take up as much room as possible.
• Facebook, in an attempt to make facebook UI look like Modern UI, has limited the content space with an oversize menubar
• Facebook puts a background area (chrome) within the app, thus limiting even further the content space
• Facebook actually CHANGES how images display in the feed, making them smaller, thus both limiting further (smaller images) the content space, and expanding it unnoticeably (image is smaller)
• Facebook in attempt to utilize one Modern UI feature actually creates a redundant area that even further limits the content area

Now lets go through a "metro checklist" of sorts:
Metro:

• Put content before chrome
• Use great typography
• Use motion as a tool
• Don't be redundant
• Be simple, yet elegant in design

Facebook:

• Puts chrome before content FAIL
• Uses decent typography (Menu Is where it shines) PASS
• Only uses one motion, and does not make apparent to user that one motion is even available, leaving it the appearance of no motion FAIL
• Has a redundant application bar that, despite being part of Modern UI, is misused and unnecessary, especially considering the fact that it makes the limited content space worse. FAIL
• Does not boast simplicity, and barely has elegance. Opted to port a UI over to windows phone instead of use the tools and design of the OS to its advantage FAIL

In the end, Facebook is NOT metro. some of the things that could slide and pass are drowned out by the fact that only one thing that is part of "metro" is used (decent typography).

[SUB]:sweaty: that's a lot of typing[/SUB]

---

I wasn't meaning to rant, per say, my apologies. I am getting worked up.

However, I hate the old facebook app. I never said I liked it or that it was metro. neither app is. one abuses modern ui, the other doesn't even use the ui to its advantage. Both waste space to look one way, or another. neither are metro.

You see, every app has a possibility to follow the Metro Design Philosophy, but not every app HAS to use the Modern UI elements, which is a completely different thing.

Furthermore, Twitter actually DID use modern UI elements in such away that the app still looks like a twitter app, while still being unique, simple, putting content first, and not being a direct clone.

 

[Gaichuke]

Dustin, that Twitter vs. Facebook rant is absolutely ridiculous.

• You have absolutely no trouble with the Twitter menu bar being pretty much identical to the iOS and Android ones, but when FB does it you call it a direct clone?
• You make a huge point about it how oversized the FB menu bar is but have no problem with Twitter, which has almost 2x bigger menu bar than the iOS or Android counterparts have.
• You misunderstand "Content before Chrome" being about the amount of content, which is not what it's about.
• You fail to see that the white areas in the feed ARE content, not background. It defines where an individual post starts and stops.
• You also forget that Metro UI design guidelines call for a full bleed images which pretty much deny using overflowing images like in iOS and Android FB has.
• You call the application bar redundant. It's quite arrogant of you to make such a call, particularly if you're not a heavy user of FB. Besides, Metro UI guidelines call that every application should have an application bar that holds the most commonly used tasks in it.

I could continue, but I feel this argument won't be going through to you so I don't bother.

 

[nessinhaw]

omg this discussion still? lol at 1st, it was a cool topic...but now it's just annoying!

FB app is what it is and i doubt MS will change it, specially if FB is rly involved! so just get over it!

talking about what is and isn't Metro is interesting BUT like i said, it's starting to get annoying :/