Is "Metro" dying already?

[Dazzi]

This isn't rocket science, the new Facebook app is Metro. Its flat, has strong typography, and minimalism. It just doesn't have the common navigation header seen in most "basic" Metro apps. End of story

What if they made the app look similar to the WP Central app, like how it starts with the news and scrolls seamlessly? (by the way I think this app is nice)

Then all they would have to is get rid of the dark grey backgrounds, then lower everything and write bigger headers like news, chat and timeline? But what about all the other stuff like favourites, apps, friends, pages, groups etc?

Facebook has so many things that you would have to do headers for what I've stated above.

 

[Nick Garza]

Why cant we have our cake and eat it to. Everyone seems to be arguing over functionality vs. os aesthetics. Sure the old FB application is more Metro in design, and sure the Beta app is more functional and cross platform, but there is always a middle ground. Example:

View attachment 33188 View attachment 33189
View attachment 33190 View attachment 33191

In these images I have made, I modified the screenshots for FB Beta. As you see, the image banner in this theoretical design would take up no less space then the fb beta top menu bar (and status bar), and would have the notification icons overlaid upon it. Also, the menu button would be in the MENU bar for the sake of os design. Second, pressing the menu button would cause the facebook menu to appear (with a thin shadow from the feed page, indicating its underneath the page you were on, giving it slight depth). The same would be for the friends button (previously within the top bar in FB Beta), being laid underneath the main menu.

This concept design would give off an appearance of metro (with its single menu bar and the old FB image banner w/ Metro stylized icons) as well as make it unique to the OS, while still giving it a cross platform feel and ease of use.

My point with all of this is there is always middle ground. I feel people AND developers either misunderstand and over utilize the OS design scheme (old FB app) or they throw out most of the os design altogether for usability and familiarity(FB Beta, which no, it is not Metro. just because you flatten it out, and use Segoe UI/WP, does not make it metro). People need to be Creative in utilizing the OS design scheme while still giving it functionality (&/or familiarity). Sort of a yin and yang of functionality and aesthetics.

Sadly, I doubt Microsoft will ever read this.

I think that goes along way to fixing what is wrong with the app. The buttons look so odd on the bar across the top. I didn't even realize I could swipe left and right at first ( something that usually wouldn't happen if there were the usual visual clues to do just this ) and its so out of place with how you normally interact with WP or most other apps.

Plus I like seeing pics of my daughter along the top, it looks much nicer and gives it a unique feel while still looking similar to the official apps on other platforms

 

[Dazzi]

Thanks Dustin Hodges, I understand now, but who is right, you or spaulagain? As you both seem be designers with different opinions regarding the new face app

 

[Dustin Hodges]

Thanks Dustin Hodges, I understand now, but who is right, you or spaulagain? As you both seem be designers with different opinions regarding the new face app

well of course I think im right, and I bet spaulagain feels differently.

Like I compared earlier, just because it has a purple filling doesn't make it a blackberry cobbler (meaning just because its flat with segoe ui doesn't make it metro).

I feel that a lot of people forget what metro is and means, and even Microsoft themselves have forgotten in the fight to get users (they are muddying metro to make it familiar to iOS and Android users in an attempt to attract users from other platforms, but have done it all the wrong way), and its somewhat disheartening. What makes me like the platform is slowly becoming something foreign.

In fact, this whole conversation may of started with facebook, but really, its at the roots of the question: What is metro?

 

[spaulagain]

^I think it all depends on how literal we assume Metro is to be.

To me there are two key factors when designing an app specific to an OS/platform...

1) Does the UI fit the OS? When the user opens the app, does it feel jarring or alien to the UI they are accustomed to on the OS? Little details like the way text boxes are rendered can provide a subtle way to link the two interfaces. Gradient styles, or lack of gradients are obvious links/differentiators. What I consider the design language.

2) Does the UI fit the product/context? For branded products like Facebook where there is already a familiar UI/context used across multiple platforms? There are a lot of UI patterns/flows the user is used to when interacting with that product. Matching those elements can help familiarize the user quickly and lessen the burden of learning a new UI. It also makes the app feel appropriate for the product.

When I designed the iPad app for my company's product, I had to balance the two factors above. The result was an app that did not following iOS UI standards word for word, but still feels like it belongs on the iPad.

MS did the same thing with the new Facebook. They took the common UI flows and experiences found in the mobile and desktop FB website, then brought their flat, cleaner, UI language into the mix. There is still a lot more typography scale changes in this app than there is in the FB website. Many other Metro attributes are applied as well.

Even the mail app on Windows 8 has a different UI layout/organization than most of their apps. But it still feels "right."

The few times I've used the old app, I found it less than compelling. The new app seems to make much more sense, despite it breaking from literal Metro implementation.

 

[Gaichuke]

FB Beta is not metro because (from appearance) all they have done is flatten the Facebook Touch ui and threw on Segoe UI/WP fonts. My images are not completely metro either by any stretch, but they are more so in a sense, due to simplicity (2 separate menu bars makes no sense), use of some Metro design schemes (the icons in the top area are actually Windows Phone 8 system icons, not flattened versions of Facebook's icons; all action icons (menu button, new post, image, check-in) are confined to the default menu bar on the bottom, and use only WP icons.), as well as the combination of them with the already flattened menu icons and segoe ui use (don't get me wrong, Just because its flat and uses segoe UI doesn't make it metro, but at the same time those are included underneath metro as well).

I hate to sound so harsh, but you're wrong when you say that FB Beta is not Metro and based on your concept images, I don't think you understand Metro as well as you think you do.

You add depth and drop shadows to a design language that aspires to be flat.
You replace FB icons with system icons when one of the design principles states "don't forget who you are" which actually recommends using your own icons and fonts if you have an established look to them.

If there's something that could use improvement in this Beta it's the use of typography (something I believe will be refined in the final version), but you leave that untouched.

You make a big point about how Metro is more than the flat design and while you are absolutely true, you somehow fail to see the rest of them in effect.

 

[Dustin Hodges]

I hate to sound so harsh, but you're wrong when you say that FB Beta is not Metro and based on your concept images, I don't think you understand Metro as well as you think you do.

You add depth and drop shadows to a design language that aspires to be flat.
You replace FB icons with system icons when one of the design principles states "don't forget who you are" which actually recommends using your own icons and fonts if you have an established look to them.

If there's something that could use improvement in this Beta it's the use of typography (something I believe will be refined in the final version), but you leave that untouched.

You make a big point about how Metro is more than the flat design and while you are absolutely true, you somehow fail to see the rest of them in effect.

And you seem to fall into the problem thinking that Metro is completely flat, and that is sadly, in part, due to Microsoft and their recent lack of use of certain design elements not seen in a while. Ever use the zune app? it has a few drop shadows here and there, some gradients, etc... its not all flat and basic. Yet its metro.

Also, as I had stated, my idea is no completely metro (and therefore not perfect either) but its the subtle changes that I made that (imo) make it closer than standard fb beta. Its sticking to that custom image banner that adds that personal aspect that windows phone once boasted (and still does). Its keeping everything in the standard os icon bar. Its using system icons more that still resemble closely the fb icons. Its making sure the content is still upfront and viewable (and not over metrofying the content area).

No, my idea is not perfect. No, its not utterly metro. But its still more metro than what already exists. And I made those images in under 30 minutes.

tl;dr - Metro is NOT just typography and flat styles. Sadly Microsoft has refrained from using some of the more advanced aspects of metro themselves in a number of areas.

 

[Gaichuke]

Ever use the zune app? it has a few drop shadows here and there, some gradients, etc... its not all flat and basic. Yet its metro.

I have not. Which platform are we talking about?

but its the subtle changes that I made that (imo) make it closer than standard fb beta.

But its still more metro than what already exists.

I have no idea what makes you think that. You have not added anything related to Metro in to your concept. Only added some redundant chrome, made the navigation model resemble something that is not familiar from either Facebook or Windows Phone and removed the established FB icons in favor of the standard ones, which is against what Metro design language promotes.

You don't have to believe me, but I've been listening what the top dogs of WP UI design have been saying about the new FB beta, and they all agree unanimously that the Metro execution of the new FB is very good.

 

[Dustin Hodges]

I have not. Which platform are we talking about?

Windows x86

I have no idea what makes you think that. You have not added anything related to Metro in to your concept. Only added some redundant chrome, made the navigation model resemble something that is not familiar from either Facebook or Windows Phone and removed the FB icons in favor of the standard ones, which is against what Metro design language promotes.

You don't have to believe me, but I've been listening what the top dogs of WP UI design have been saying about the new FB beta, and they all agree unanimously that the Metro execution of the new FB is very good.

Um, I merged the navigation model of FB and windows phone, first off. The icon bar at the bottom? That's in tons of WP apps and used a lot through the OS. The side menu? That's still the facebook apps menu. I didn't change that. Chrome? I don't see any added chrome. sure I added a drop shadow (again, Zune for Windows has drop shadows under highlighted content). In fact, I removed an (albeit flattened) menu bar at the top.

So I:

• Simplified the menu access by removing an added unnecessary navigation bar and uses the icon bar native to the OS
• Added an extra content area that displays user photos (Giving a sense of personalization; making it YOUR phone) w/o obstructing the main content or downsizing it
• added a drop shadow giving a slight appearance of depth (something metro doesnt use commonly, but isnt forbidden either), giving it an interesting aesthetic quality

And you mean top dogs on the Windows Phone team at Microsoft, the company to which ive stated has muddied metro a bit as of recent and failed to use elements that existed within metro early on?

 

[sumton]

i don't know about you but its still metro
metro isn't just a big text

 

[Gaichuke]

Windows x86

Could you provide a screenshot? It's difficult to argue when you're referring to something I've not seen.

Um, I merged the navigation model of FB and windows phone, first off. The icon bar at the bottom? That's in tons of WP apps and used a lot through the OS. The side menu? That's still the facebook apps menu. I didn't change that.

Icon bar at the bottom is called Application Bar and it's generally used for fast access to the most common functions in an application, not for navigation. Your concept would actually be much more intuitive (the stacked menu bars) if it would use the horizontal swipe navigation like the current beta already does.

Chrome? I don't see any added chrome. sure I added a drop shadow (again, Zune for Windows has drop shadows under highlighted content)

In all the Windows Phone design trainings and courses I've been, drop shadows have been used plenty of times as an example of unnecessary visual chrome familiar in other platforms. I really would like to see how it's done in Zune.

So I:

• Simplified the menu access by removing an added unnecessary navigation bar and uses the icon bar native to the OS
• Added an extra content area that displays user photos (Giving a sense of personalization; making it YOUR phone) w/o obstructing the main content or downsizing it
• added a drop shadow giving a slight appearance of depth (something metro doesnt use commonly, but isnt forbidden either), giving it an interesting aesthetic quality

IMO you:

• Complicated the menu access by removing the native horizontal swipe navigation that is used in almost 100% of the WP applications and assigned that function in Application Bar, a place where navigation elements rarely are
• Added an extra content area that displays user photos (Giving a sense of personalization; making it YOUR phone) w/o obstructing the main content or downsizing it
• Added a prominent drop shadow giving a slight appearance of depth (something metro doesn't use commonly and generally discourages to use), giving it an out of place aesthetic quality

And you mean top dogs on the Windows Phone team at Microsoft, the company to which ive stated has muddied metro a bit as of recent and failed to use elements that existed within metro early on?

Funny that you said this, because the WP team itself has been silent. I'm talking about people generally regarded as experts of WP design but not working for MS.

 

[MrSean490]

Could you provide a screenshot? It's difficult to argue when you're referring to something I've not seen.

lol Derp.

 

[smoledman]

Iconography combined with panorama apps are the way to go.

 

[Dustin Hodges]

IMO you:

• Complicated the menu access by removing the native horizontal swipe navigation that is used in almost 100% of the WP applications and assigned that function in Application Bar, a place where navigation elements rarely are
• Added an extra content area that displays user photos (Giving a sense of personalization; making it YOUR phone) w/o obstructing the main content or downsizing it
• Added a prominent drop shadow giving a slight appearance of depth (something metro doesn't use commonly and generally discourages to use), giving it an out of place aesthetic quality

Who said the swipe navigation would be gone? I figured you could still access the menu via swipe, but also via a button in the application bar (thanks for reminding me of the name).

Funny that you said this, because the WP team itself has been silent. I'm talking about people generally regarded as experts of WP design but not working for MS.

Lol. When did they become such experts. Early on or Post-Windows Phone? (Metro was used first in Media Center, and polished with ZUNE Music+Video for Windows and the ZUNE Player UI.)

...what MS presented in Feb 2010 was a broken promise from the start.

This. This this this this this. Microsoft popularized metro with WP. Problem? It was unpolished. With media center, they had too much chrome and it was all glossy. With Windows Phone, it was oversimplified and watered down. Granted MS needed their foot in the smartphone door b4 it was too late, however, they should of polished off Metro and brought some of ZUNE Music+Video's Metro styling's to the os later on. We're on the 4th iteration of WP (7, 7.5, 7.8, 8), and WP8 was supposed to be a big refresh, so they should of polished design and refreshed it along with those fancy new features and kernel.

Also, it didn't stop at WP8. Windows 8 is missing it too (though not as much, in some ways.) The charms bar is the most notable one. I hate the fact that it appears over content, yet it is flat and plastered on top of wherever you're at. Its as if your app just stops. Text, Icons, etc just stop, and then there is this charms bar next to everything. A little drop shadow (just light enough where its juuuuuust visible) would easily fix this by making it appear as if its above wherever you are at. The UI has depth, so it should show it, even if just a tiny bit.

To put things simply. Designs should work with metro, Not metro working for other designs. Design in metro FIRST then add everything else (subtly may I remind). Don't make the ui then "metrofy it" (exactly what facebook beta for WP has done)

 

[naosuke]

So basically..., in a nutshell, the original idea & concept of "Metro", Microsoft's vision..., has failed?

You can say what you will, but the original concept of Metro (Pivot & Panorama), was exactly what Windows Phone apps were supposed to primarily be designed around.(File:Microsoft-METRO-UI-Description.svg - Wikipedia, the free encyclopedia). That's all Microsoft touted. Even the Hubs idea is a joke now. I guess it was all marketing B.S.

meh...

 

[Gaichuke]

Who said the swipe navigation would be gone? I figured you could still access the menu via swipe, but also via a button in the application bar (thanks for reminding me of the name).

Then it makes even less sense. You would introduce a novel, redundant navigation method in place of an established method that any former Android/iOS/touch.facebook.com user already knows how to use. You claim that it would make the design more Metro but that is not true.

Lol. When did they become such experts. Early on or Post-Windows Phone? (Metro was used first in Media Center, and polished with ZUNE Music+Video for Windows and the ZUNE Player UI.)

These people are professional UI designers that have been involved with Metro design language from the very beginning and are very respected in their field. You're pretty confident (or arrogant) when you think your opinion holds more weight than someones who do it for a living.

To put things simply. Designs should work with metro, Not metro working for other designs. Design in metro FIRST then add everything else (subtly may I remind). Don't make the ui then "metrofy it" (exactly what facebook beta for WP has done)

That argument falls instantly apart because of the false assumption of yours that the new FB beta is somehow not Metro design. Facebook is a product that Facebook the company wants to be consistent across every platform with distinct Facebook feel and look. Metro design language does not force some obscure restrictions against such goals.

 

[Gaichuke]

So basically..., in a nutshell, the original idea & concept of "Metro", Microsoft's vision..., has failed?

You can say what you will, but the original concept of Metro (Pivot & Panorama), was exactly what Windows Phone apps were supposed to primarily be designed around.(File:Microsoft-METRO-UI-Description.svg - Wikipedia, the free encyclopedia). That's all Microsoft touted. Even the Hubs idea is a joke now. Which is a good thing. But it goes against the idealology that they first presented to us. I guess it was all marketing B.S.

meh...

Where exactly in that description it says that it's all about Pivot & Panorama? Nowhere. Pivot & Panorama screens are navigation models that use the Metro design principles, but they are not part of the design principles themselves.

...How come this is so hard to understand?

 

[naosuke]

Where exactly in that description it says that it's all about Pivot & Panorama? Nowhere. Pivot & Panorama screens are navigation models that use the Metro design principles, but they are not part of the design principles themselves.

...How come this is so hard to understand?

Upon further investigation , its seems that you are right. I guess I just thought Metro was all about Bold Typography and pictures.

 

[Dustin Hodges]

Then it makes even less sense. You would introduce a novel, redundant navigation method in place of an established method that any former Android/iOS/touch.facebook.com user already knows how to use. You claim that it would make the design more Metro but that is not true.

No. You misunderstand. Remove the chrome at the top (face it. all that extra blue is useless. the buttons can go elsewhere). Not the actual navigation method (swipe to view the menu)

These people are professional UI designers that have been involved with Metro design language from the very beginning and are very respected in their field. You're pretty confident (or arrogant) when you think your opinion holds more weight than someones who do it for a living.

Never said mine holds more weight, but maybe I see something in Metro others don't.

That argument falls instantly apart because of the false assumption of yours that the new FB beta is somehow not Metro design. Facebook is a product that Facebook the company wants to be consistent across every platform with distinct Facebook feel and look. Metro design language does not force some obscure restrictions against such goals.

No, but it should still feel right for the OS. My "concept" would still operate the same way at the core, but its appearance would be tweaked to fit more within metro design.

Where exactly in that description it says that it's all about Pivot & Panorama? Nowhere. Pivot & Panorama screens are navigation models that use the Metro design principles, but they are not part of the design principles themselves.

...How come this is so hard to understand?

Thank you for this much. We both can agree on this.

Also:

This is metro. Notice how one says "content before chrome", not without. Chrome can be used subtly within metro. AKA: Use in moderation.

My concepts, which some are so seemingly are hung up on, even though are relatively the same, put [slightly] more focus on content and motion, as well as are slightly more immersive and compelling due to the use of light drop shadows and an extra content area. The app still WORKS the same, but it would look better. Like a "facelift", not total facial reconstruction.

 

[Dustin Hodges]

Upon further investigation , its seems that you are right. I guess I just thought Metro was all about Bold Typography and pictures.

Not pictures. Content, which can be a broad term, but basically means the stuff you look at and read (images, news articles, statuses, video, etc...). Its about using the best of your screen space in an app to make it display as much and as aesthetically pleasing as possible, while using the proper typography to make it appealing as well as readable.