Why I'm No Metrosexual

<i>And to add to the confusion, why are there different sized tiles?</i><p>Why on earth would that be confusing? When I see a double door next to a normal sized door I don't freak out and try to break down the wall instead.<p>I get the point being made in the article, but I don't quite buy it. I don't think that people understand they can press app icons on the iPhone because they have raised shadows around them, I think they press them because they are visually eyecatching and surrounded by areas that are not. There are many different visual cues out there, and people adapt to new ones all the time.

I agree. I played around with the Surface RT for over 30 mins at a Microsoft store with the intention of buying it for my parents for Christmas, and I walked away because even I couldn't effectively figure out what the "rules" were for interacting with Metro. I'm sure if I gave it more time, I could, but there is no way my parents, who still use XP, would be able to figure it out.<p>I wasn't sure what I needed to do to get to the "Desktop" mode where it looked like Windows 7, or how to flip back and forth, and which things I could swipe, etc. I felt like it was a big mess because a lot of the UI features that we've come to expect were not there. In contrast, the iPhone and subsequently the iPad were intuitive right off the bat.<p>To be fair, I'm seeing a lot of this terrible UI experience in other things as well. For example, on Chrome when you are reading a PDF, if you want to save it or zoom, it's not obvious how to do it. You need to miraculously hover over the bottom right corner and then the buttons show themselves, but there are no visual cues indicating that that's what you're supposed to do. It's fancy, but terrible UI.<p>The same thing occurs on Facebook, where people are just expected to know where to hover in order to show functionality. I don't know where this trend came from, but it's terrible, and I think this article is showing an extension of how we are moving away from all the visual cues and things we've learned about UX in the past 30 years. Sure, it's different but it doesn't mean it's better, especially when it forced people to hunt, peck, and guess for functionality, something that UX is supposed to get rid of.

A little OT, but it does make me chuckle when you read this on a blog with little to no visual affordances. The title and the date are both permalinks, but there's no indication until you mouse over to check. That's fine - for the sake of cleanliness it's an acceptable trade off. And also, importantly, we've <i>learnt that they probably are</i>. Consistency is also important. Whether people will learn Metro successfully (statistically) etc. is yet to be seen I guess, but it's more complex than this.

I think the issue is that one shouldn't go too far in the direction of skeumorphism or too far away from it. Most people are comfortable with <i>some</i> level of skeumorphism because it can be a powerful usability enhancement. As I type this I'm looking at the "add comment" button below here on Hacker News, and wouldn't you know it, it's got a slight gradient giving it a bevel, suggesting it's occupying 3-dimensional space and can be pushed like a button.<p>Of course this can be taken too far. When too many skeumorphic accents are added to a design it can cause it to be rigid and noisy. As the OP mentions, if you go too far from skeumorphism you run contrary to how the human brain works. My favorite user interface designs usually have a very tasteful and well placed set of skeumorphic elements with an overall minimalist design. Tactile, not tacky.

The author doesn't get it. A lot of the way users know what to click is based on consistency. If it's a tile on the start screen you can click it. Want to print? It's always in the same place? Want to share? Same place. Want to close an app? Always the same way? Want to see more options for an app? The same way.<p>Now within the app one could argue there is a stronger need for affordances, but even there I've yet to encounter a single problem in my use of several Win8 apps.<p>I find the Win8 interface a lot more intuitive than the OSX interface. But I'm sure others would find the opposite. I suspect a lot depends on your starting point and your predisposition. My four year son figured out most of the Win8 interface in about 5 minutes (literally... at the MS store he was flying through the UI much better than I'd ever seen him with Win7 and a mouse).

That's a lot of buildup just to say you feel the interface to be unintuitive.<p>We know how to interact with different items because of experience and common signals -- not all door handles are alike, but different interpretations of the 2 major types (knob and lever) are similar enough to visually signal to us their probable use-case (opening a portal in the wall).<p>Similarly, I could go on about how the "stop, wait, go lights" at the top of windows in OSX are counterintuitive because they are in the same location as their Windows counterpart, but have different functions. It's not intuitive because the same visual signals provide different outcomes.

Why the need to use "Metrosexual" reference? A little sensationalist isn't it?

/begin nerd rage/ For the love of god, why the hell is your font 11px?? What the hell are you thinking??<p>You know how many people here would have had to zoom in?? Are you new to the internet?? /end nerd rage/

Nah, I don't buy it. These kinds of things are easily learned. Web links don't have depth and we all learned pretty fast that we can click them (in some instances they don't even have to be underlined)

Honestly, Android's newer holo theming suffers the same exact problems. I've watched countless users and received support emails where people just don't <i></i>*ing notice/try/use the action items in the new action bar pattern we're all supposed to be using. This pattern has us place very sparsely decorated icons in the top bar, generally without even text. Tons of users completely miss them vs. big, chrome, 3D styled, pushable-looking buttons on the bottom of an app.<p>Even worse, the icons aren't supposed to have text and users are supposed to know to long press on them to find out what exactly they do. I've never in my life seen a user do that. I emailed a Google Dev Advocate about all this, asking if they actually had statistics and user studies to back up this new direction they are taking the UI, if it actually helped users in the metrics or was just designers trying to make things look pretty without actually helping. No answer.

Nobody is born with the skills to open a door or push a button. I have a &#60;1yr old that still can't do either of those. That is something you learn. Metro is just a different type of UI that you might want to learn.<p>"Can I click on all those tiles?" - if you try to touch or click them, you will quickly see a 3D effect that mimics that of a push button (tile scales to 97.5% of its size similar to a pushed button). After that you will quickly learn that you can interact with tiles.

Note that he's referring to Norman's use of the word "affordance," more correctly referred to as "perceived affordance." Both are important concepts in design.<p><a href="http://en.wikipedia.org/wiki/Affordance" rel="nofollow">http://en.wikipedia.org/wiki/Affordance</a>

Another rant about Metro interface. Can we please stop it already, it's just beating a dead horse. Sure, Windows 8 is kind of beta quality, just like Vista was.<p>On a side note, comparing with door handles is just wrong. We already have a generation who grew up with idea of abstract controls. We have a save button which mostly looks like floppy button. How many 16 year olds know what floppy is?

There's very little I like about Metro, but I do like that Microsoft is focusing on the total user experience across all its products. Perhaps they need to divide the company into 3 components — consumer (win metro / tablet / phone), enterprise (win office / office suite / .NET), entertainment (xbox).<p>I've been a Microsoft fanboy [1] but just find very little about Windows that I love anymore. I understand they are trying to be visually different from OSX, but I'm not sure this is the right direction. OSX hasn't deviated from 'windows-based' app management and Metro makes its history as Windows almost unrecognizable. As a power user with 2 monitors usually running 2x or 4x in split or quad view, I don't see a UI that will be more adaptable for efficiency and multitasking. iOS handles it very poorly.<p>[1] DOS &#62; Win 3.1 &#62; 95 &#62; 98/ME &#62; NT &#62; 2000 &#62; Windows XP &#62; .. converted to Apple ..

Metro is pulling things in the <i>right direction</i> I think. Hyper-skeumorphism did immense harm in the hands of copy-style designers, allowing them to justify their unoriginality through "I can copy that because it's actually copying a real-life object, you can't be unoriginal if you copy physical reality, all great artists did it" reasoning. It's better to concentrate on the axis between obscene skeumorphism and uberminimalistic full-flatness then to pick on any one of the extremes as they are obviously flawed.<p>Take for example the whole crop of metro-style Bootstrap themes and pick an UI interaction element like the buttons, to see an example of a scale of designs between decent micro-skeumorphism and full-flatness. This one <a href="http://bootswatch.com/cosmo/#buttons" rel="nofollow">http://bootswatch.com/cosmo/#buttons</a> or this one <a href="http://talkslab.github.com/metro-bootstrap/basecss.html#buttons" rel="nofollow">http://talkslab.github.com/metro-bootstrap/basecss.html#butt...</a> sport full-flat microsft style buttons, with no hints of possible interaction, while others like <a href="http://inprogress.neuronq.ro/madmin/" rel="nofollow">http://inprogress.neuronq.ro/madmin/</a> show subtle hints of skeumorphism (you can probably google for many other more or less metrofied bootstraps...)

It appears his "thesis" is half way through: "It’s because our eyes know we’re in a 3D world. We can detect light sources, and degrees of shading, and depth. And without any of these, we’d be absolutely lost." My first thought: I'm reading English text, with no shading or depth, and it seems to be a pretty effective form of communication. tldr: the article is hyperbolic garbage.

Our ancestors did not own smartphones, so the broad evolution argument is kind of garbage. User interfaces need to be researched before we can make conclusions on skeuomorphism vs "pure digital".<p>Furthermore, the author talks about affordances and how Metro has none. This is false. Anything that can be touched on the screen reacts to your touch. For example, if you're scrolling down the main menu and your finger happens to press down on a tile, the tile will be "pushed inwards" at the point of contact (even if you haven't released your finger). It's very subtle, but it definitely lets your subconscious know that in the future, if you would want to press that thing, you can. Now it's not an immediate affordance like a door knob, but a touch screen in itself is an affordance for touching, and once you touch then the other affordances reveal themselves.

This line of argument always jumps right from rods and cones to perceived affordances without ever making the case that there's a significant gain to perceived affordances from mocked up depth. If this is so uncontroversially true, surely someone has done a study you can link.

Slightly OT: <i>"The Rods... so sensitive that they can be triggered by single photon"</i><p><i>This</i> sort of thing is why I love HN. Irrespective of the topic, there is always some little gem I find somewhere. I was very sceptical of this claim, so I looked it up. Turns out it is possible:<p><a href="http://math.ucr.edu/home/baez/physics/Quantum/see_a_photon.html" rel="nofollow">http://math.ucr.edu/home/baez/physics/Quantum/see_a_photon.h...</a><p><a href="http://www.ncbi.nlm.nih.gov/pubmed/10800676" rel="nofollow">http://www.ncbi.nlm.nih.gov/pubmed/10800676</a><p><a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC1281447/?page=1" rel="nofollow">http://www.ncbi.nlm.nih.gov/pmc/articles/PMC1281447/?page=1</a>

Jacob Nielsen details many of the usability issues of Metro design, see Flat Style Reduces Discoverability in <a href="http://www.useit.com/alertbox/windows-8.html" rel="nofollow">http://www.useit.com/alertbox/windows-8.html</a> .<p>At the highest level, Metro design feels like a case of design overgeneralization. It tries at once to apply the same look &#38; feel principles in Touch, Desktop, and Web context.<p>Jack of Many Trades, Master of None.

Is it just me or is the font size on that blog really, really small?

Couldn't disagree more. We know that things are clickable when they are verbs or icons that are well-established synonyms for verbs. Gradient isn't a substitute for being explicit.

It's yet another rant, but there's a deeper problem with GUI "thrash" at Microsoft. One example is Outlook. The interface changed in 2010 and again in 2013. This causes confusion and doubt amoung users and distrust from IT and the folks that write the checks. Is the new software really better, or are the folks in Redmond just remodeling the interface to sell "new" versions?

I haven't used Metro, so I'll wait to judge how usable it is, but I love the fact that they've gone their own way, and not created an iOS/Android lookalike. The blog post feels too negative, and gives the impression that it's written by an older man that dislikes breaking with the norm - though his points are probably valid.

Pretty sure this guy only wrote the article so he could use that great witty zinger of a headline he'd thought up. Not gonna waste my time reading design critique by someone using an 0.002pt font on their blog.

It was 2002 when the last competent UI engineer left Microsoft, none of this is a surprise.

I wish Apple was the one that came up with Metro and not Microsoft. If it did, then many tech pundits with high readership like Gruber, Siegler et. al. would be posting endless analysis of how Apple shook up the UI paradigm to make a great new UI instead of going with the same old icons, toolbars and docks and how everyone else is copying them with sparse UI. That would've led tech minded folks to give Metro more credit than all this upvoted noise with link bait headlines on the tech blogs with flimsy analysis of only about how it sucks and nothing about the good parts like "content over chrome" or "authentically digital". I think Metro is in some ways becoming victim of tech partisanship, you can absolutely love your iPad, have an Android tablet with ICS(I do), but still recognize some good UI work being done by Microsoft.<p>Edit: Something like the following post would've definitely made the HN front page if it was iMetro or even if it was Google that did it with Android. <a href="http://www.riagenic.com/archives/487" rel="nofollow">http://www.riagenic.com/archives/487</a>

The flip side is that interfaces have tended too much towards faux 3d on a superflat 2d screen and also ignoring that the UI can be "authentically digital" instead of being tied down to analog equivalents. I find the author's analysis very simplistic.<p>Also, this is just about mostly about the buttons and links which can probably be fixed easily in the future. Metro is much much more than that, Metro also removes a lot of unnecessary chrome like lines around menus etc. and reducing visual clutter which are very important on mobile devices where you're looking for actual information in a pinch on-the-go. The codeword for this is "Content over Chrome".<p>Android(starting with ICS) also is trending a bit towards Metro in things like the weather app, Google Now and the overall designed aesthetic. <a href="https://lh4.ggpht.com/p-eZmyce7_T2-_eOwltQxU6glPj6f53kDXvDvN8GPzRZXY4qe_pxHBdmXmtJeyRIZ8qA" rel="nofollow">https://lh4.ggpht.com/p-eZmyce7_T2-_eOwltQxU6glPj6f53kDXvDvN...</a><p>Anyone see the similarities between this[1] from 20 years ago and the iPhone UI + every other mobile OS including Android, Palm, Windows Mobile &#60; 7, Blackberry, Meego, Firefox OS etc.?<p>[1] <a href="http://img.tfd.com/cde/_PROGMAN.GIF" rel="nofollow">http://img.tfd.com/cde/_PROGMAN.GIF</a><p>Here's more information if you're interested in the design philosophy behind Metro written by an actual designer who designed Metro like content for his clients' websites.<p>The principles of Microsoft Metro UI decoded <a href="http://www.riagenic.com/archives/487" rel="nofollow">http://www.riagenic.com/archives/487</a><p>Going full Metro. <a href="http://www.riagenic.com/archives/493" rel="nofollow">http://www.riagenic.com/archives/493</a><p>Things you ought to know when designing metro screens <a href="http://www.riagenic.com/archives/526" rel="nofollow">http://www.riagenic.com/archives/526</a><p>Hopefully all this results in better UIs in the future instead of the tired old jaded WIMP interface and Desktop on mobile yet again with some added touch features and I think Microsoft has taken a good first step here to shake things up.

Says the guy with the black and white blog. ZING