It’s not their fault, it was the company that is giving them the legal eye’s fault.Yeah you could throw the company in question who would argue Metro is their trademark under a bus here. You could do it easily enough with the right amount of PR spin, but, anyone who’s been a Product Manager for more than five minutes in Microsoft would be able to tell you swiftly that you never ever ever name something in Microsoft without LCA running trademark searches against it. Exhibit A - Silverlight’s Out of Browser. When we came up with the feature of offline Silverlight / Desktop usage (aka the feature that would later kill Silverlight) we agonised for weeks over what to call it. We tried out names like “RIA Desktop” and a whole bunch of left field names that had no real meaning. Each time we posted a probable name for the feature we had LCA verify we wouldn’t get sued over it (given the US is a sue happy legal system). Unfortunately the ass hats in the Microsoft Marketing team(s) didn’t get the memo that most if not all Junior Product Manager(s) get when they first join - You don’t name a puppy unless LCA approves it. Either LCA screwed up here or it was Microsoft Marketing (I somehow think it’s the later).
Where to from here, how do you undo a brand?Given its a fairly fresh and clearly abused name it may stand a chance of being deleted from the minds of millions of .NET developers worldwide. I doubt it will get a high five for its replacement name though, as “Windows-style” kind of looks like the default case in a long list of good idea switch statements, but none the less “Windows Style” it is. I feel however for people like the MetroTwit team who have worked quite hard to claw their way above all the other twitter client clones to establish a unique brand. I guess Long and his team will need to hatch out a plan around “WinTwit” or something along those lines if they wish to comply with Microsoft’s “oops” moment. In closing Microsoft has yet again screwed up and like all its previous screw-ups its left yet again up to the community to dig in deep, sigh and cleanup after the company’s amateur developer relations). At some point with all those billions Microsoft has been making they will actually hire someone with Marketing experience but point in case they hired me as a Product Manager for the company and I had none! That thought will fester.
There seems to be an undercurrent of contempt towards Digital Skeuomorphism – the art of taking real world subject material and dragging it kicking & screaming into your current UI design(s) (if you’re an iPad designer mostly).
I’ve personally sat on the fence with regards to this subject as I do see merit in both sides of the argument in terms of those who believe it’s gotten out of hand vs those who swear it’s the right mix to helping people navigate UX complexity.
Here’s what I know.
I know personally that the human mind is much faster at decoding patterns that involve depth and mixed amounts of color (to a degree). I know that while sight is one of our sensory radars working 24/7 it is also one that often scans ahead for known pattern(s) to then decode at sub-millisecond speeds.
I know we often think in terms of analogies when we are trying to convey a message or point. I know designers scour the internet and use a variety of mediums (real life subject matter and other people(s) designs) to help them organize their thoughts / mojo onto a blank canvas.
Finally I know that with design propositions like the monochrome like existence of Metro it has created an area of conflict around like vs dislike in comparison to the rest of the web that opts to ignore these laid out principles by Microsoft design team(s).
Here’s what I think.
I think Apple design community has taken the idea of theming applications to take on a more unrealistic but realistic concepts and apply them to their UI designs are more helpful then hurtful. I say this as it seems to not only work but solves a need – despite the hordes mocking its existence.
I know I have personally gone my entire life without grabbing an envelope, photo, and a paperclip and attached them together – prior – to writing a letter to a friend.
Yet, there is a User Interface out there in the iPad AppStore that is probably using this exact concept to help coach the user that they are in fact writing a digital letter to someone with a visual attachment paper clipped to the fake envelope it will get sent in.
Why is this a bad idea?
For one it’s not realistic and it easily can turn a concept into a fisher price existence quite fast. Secondly it taps into the same ridiculous faux UI existence commonly found in a lot of movies today (you know the ones, where a hacker worms his way into the banks mainframe with lots of 3D visuals to illustrate how he/she is able to overcome complex security protocols).
It’s bad simply for those two reasons.
It’s also good for those two reasons. Let’s face it the more friction and confidence we can build in end-users around attaching real-life analogies or metaphors to a variety of software problems the less they are preoccupied with building large amounts of unnecessary muscle in their ability to decode patterns via spatial cognition.
Here’s who I think is right.
Apple and Microsoft are both on this different voyage of discovery and both are likely to create havoc on the end user base around which is better option of the two – digitally authentic or digitally unauthentic.
It doesn’t matter in the end who wins as given both have created this path it’s fair to say that an average user out there is now going to be tuned into both creative output(s). As such there is no such thing as a virgin user when it comes to these design models.
I would however say out loud that I think when it comes to down cognitive load on the end user around which Application(s) out there that opt for a Metro vs. Apple iPad like solution, the iPad should by rights win that argument.
The reason being is our ability to scan the associated pattern with the faux design model works to the end user favor much the same way it does when you 30sec of a hacker busting their way into the mainframe.
The faux design approach will work for depth engagement but here’s the funny and wonderful thought that I think will fester beyond this post for many.
Ever notice the UI designs in movies opt for a flat “metro” like monochrome existence that at first you go “oh my that’s amazing CG!”. Yet if you then play with it for long period of time their wow factor begins to taper off fast.
I don’t have the answers on either sides here and it’s all based of my own opinion and second-hand research. I can tell you though sex sells, we do judge a book by its cover, and I think what makes the iPad apps appeal too many is simply – attractive bias in full flight.
Before I leave with that last thought, I will say that over time I’ve seen quite a lot of iPad applications use Wood textures throughout their designs. I’d love to explore the phycology of why that reoccurs more as I wonder if it has to do with some primitive design DNA of some sort.
There is just Windows.Today, Brandon announced what will be the upcoming SKU’s for Windows 8, and yes the ye olde “pro” makes a comeback to a shrink wrap shelf near you. Stupid. Why do they need to separate out the product lines as to me they really should reconsider this approach going forward, especially given Desktop/Device are blurring out one another's value proposition(s). Instead of breaking out a variety of comparison matrix that often as a consumer will result in ticking the lowest cost box, why not instead just let everyone buy a Windows core, that is to say you just “buy” windows. Picture a consumer walking into a retail shop of some kind, they walk straight over to the Windows box, pick it up, buy it and then install it when they get home. The installation wizard steps them through various basic features and so on but on the last screen they are asked “what other features would you like to buy? for 0.99c” The end user ponders, and starts to tick or untick boxes that they think they will need for their installation - which is linked to a Azure ID of some kind. That’s it, no confusion around which Windows SKU you own or at times buyers remorse because you bought the wrong edition which had XYZ feature and now you want that feature but then have to shell out for features you don’t want at a upgrade price of XYZ. Furthermore this then would condition them to an initial introduction to the “AppStore” market model which no doubt they probably have already learnt via their iPhones/iPad interaction(s). Just Windows doesn’t stop there either, you also have this same principle applied to Tablet/ARM/Phone hardware as well as now it's less about specifics of Windows and more about Windows as an abstract platform. Ergo this would also underpin their entire content first strategy that orbits Metro today. I don’t see a cohesive strategy within the Windows Teams, I see snippets of success but there appears to be no over arching cohesive strategy. The problem is still there with individual product teams competiting for consumer awareness and attention. Is Windows a platform or not? if it is, how about it start acting like one and become one and not some comparison matrix which leaves you questioning “Do i need that?” vs “Do I want that” Scott Out.
I want you all to pause a moment or two.
I want you all to sit in front of Windows 8, and explore it some more and get to be intimate with “metro” as a user interface style. Really, immerse yourself in it and just stare at it, explore every pixel it offers up.
I now want you to imagine that this is going to be your user interface for the next 5years.
I have been doing “metro” rinse/repeat designs for quite some time and it has long past bored me to the point where I wonder if I have metro-blindness now. That is I’ve stared at it for far to long that I really need a release valve, I crave something more interesting and has more depth.
This is the part where you respond with the usual metro rhetoric about content-first design, authentically digital blah blah the usual Microsoft Metro Zombie response that often the person at the other end of the conversation has no clue at what even it means, it just sounds smart to say and gives one a sense of authority over the conversation.
I am not saying the path that Microsoft has put the hordes of developers on is wrong but I’m not inclined to say it’s right either.
Who is the target audience?
Today, a 50 something non-techy came into my work pod to talk about the new iPad 3, we talked about what it has and doesn’t have but then I tried to get an unbiased non-technical opinion on Windows 8.
Me: “Have you seen the new Windows 8 yet?”
NonTechGuy: “Nope.. is it out?”
Me: “Not yet, it’s still in beta, but here have a look”
I then watched his facial expression; it looked like he wanted to go to the toilet but was holding back on saying so out of politeness.
Me: “Cool huh!”
NonTechGuy: “is that the whole thing?”
Bottom line was that he was not excited by it and we soon retreated to the iPad conversation. My thinking here is not that well this user speaks for billions of humans worldwide; it was just interesting to see a virgin reaction to basically metro.
This person uses Windows daily and has no issue with it, but when shown Windows 8 front-start screen it had this jarring effect on his senses, as if to say – “this is not what I expected”.
This is the part where someone now responds with “give them time”, “users over time will get used to it”, “I have xyz friends who see the opposite to this view” etc. etc.
I get it, I just disagree with it.
Windows 8 is targeted at us, the tech crowd, the more I think about its practicality the more I contemplate that maybe the reason why Apple is much more successful than Microsoft at this space as they target the baby-boomer style crowd. Microsoft and Google target us and in turn they fail more than they succeed simply because we are much harder to please than the Apple audience.
When Steve Jobs said that they only make products that they would want to use, I think we all in the tech-scene assumed he meant us. He didn’t, I think he meant to say “no, I mean guys my age and people who aren’t preoccupied with engadget/gizmodo style blogs.. I mean me, you people aren’t invited”
The thing that struck a chord today was the fact that iPad3 has failed in the eyes of most tech bloggers etc., yet 50-something non-tech guy walks into the IT cubicle and asks “Hey, you seen the new iPad!”..
Think about that a bit more. Firstly, he has already heard about it from mainstream radio stations and secondly he did not say iPad3 he said “new iPad” (interesting choice of words to parrot).
Metro will outdate itself.
Here is the problem I am starting to see with metro and I am arguably pushing it earlier than Microsoft is with a number of audiences. Metro fast out dates, that is to say initially people’s reaction to the design is positive and emotive. However over time the more and more it gets used, the more and more it will start to taper out, that is to say, you probably are already seeing this with Windows Phone 7.
There is no differentiation; there is no unique upgrade or themed approach to the way you react to data. There is just this metro-zombie existence where if you can slap together a few tiles, fluctuating typography case & size, few background pictures and then some minor rectangle decals here and there. Boom metro installed, payday occurs.
The design and experience over time becomes like chewing gum, the flavor disappears, and soon we are keen to discard and invite new flavor as soon as possible.
I see this as a problem going forward as Microsoft itself can’t control metro in a way that elevates and retains consistency in their emotive experience(s) and to be fair, metro wasn’t born from a scientific analysis, it was born from a group of guys inside Microsoft UX leadership who decided that they wanted to simplify the brand some more.
So what if Microsoft is wrong? What if Metro isn’t the correct way forward and what if it hurts our ecosystem much more than we realize?
Yesterday, out of pure design frustration I decided to do the opposite of what I know about Metro, that is, break the rules, and see what happens.
I came up with this design and then posted it online to see what people’s reactions would be.
I got wave after wave of “this isn’t metro” responses, I never got any reactions around how one could evolve this further. I was craving that and was really just curious to see what would happen if you assault this audience with the anti-metro design. I knew upfront what the audience would parrot back and sure enough I got lecture after lecture on what is or isn’t metro (some weren’t even accurate to the actual principles of metro itself).
I could care less whether people enjoyed the design I put forward as it was always just a throw-away composition and was more about me taking some time-out to just evolve a design.
It struck me simply that I worry now that metro-style as we see it from Microsoft will become tomorrow’s WinForm(s) that is to say we’ve replaced WinForm static UI with now a more monochrome blocky style UI. Developers rarely deviate from Microsoft’s theming (see Ribbon and Office theming as examples) and so from here it’s likely we’ll see the tired old look over and over and over.
I worry about this as I think this really could be the step backwards and not forwards in evolving our design energy.
With that, I leave you with just one question – What if Microsoft is wrong, how do we all collectively recover?
I don’t dislike metro, but I’m not excited about it as much as I should be. I want have more fun with it though, I want to see what others do with it out of the confines of the “rules”, as I think this could evolve further!
As inflammatory as this sounds, and it will piss quite a few Microsoft fans out there, but let me just get this piece out of the way before you make some snap fang filled responses.
The current “metro-style” as Windows 8 team puts it, simply is at present a huge missed opportunity that seems to be constantly being bent out of shape and isn’t ready to go electric (i.e. Bob Dylan went electric and everyone trashed him for it, who’s trashing now!).
Feature Density is cancer to Metro-Style.
The minimalist approach to design has been pretty much on the web for quite some time now thanks to a lot of creative souls in the CSS movement of the past (A List Apart, CSS Zen Garden etc. have all hinted strongly around grid focused design etc.).
There is really nothing new that the current “metro-style” brought to the table in terms of principles of design, the Zune however did put a new face to the idea that the a website-like User Interface could exist on a Desktop application.
It’s from there that the Microsoft UX mercenaries within various orgs began feeding the fire around what if you combined web design skills with desktop development.
Circa 2005ish we saw the first traces of the idea about bridging the two worlds together, but WPF got bloated and crappy performance and eventually failed in delivering to meet expectations. Microsoft Expression Blend also failed as at the time we found that whilst there where quite a number of downloads via MSDN subscriptions it had no revenue stream coming in and developers tried and pushed it aside. Designers disliked the complexity that came with the product and we at the time burnt quite a large bridge with Adobe in making the two potentially integrate with one another smarter (Adobe vs Microsoft war killed the vision).
It wasn’t until the guys behind the Metro as we know it today decided to regroup and come up with a pitch to the world on how Microsoft branding overall should unite, and to be fair – it at the time was a welcomed strategy (I for one was keen to see its momentum get traction).
Taking a page out of the Zune design it simply grew into what we see today, the infamous “metro-style” UI whereby you have a fairly flat canvas, a lot of typography, some primitive shapes and maybe one or two complimentary colors – boom, here’s your Metro-style application you ordered!
Attractive bias aside, the UI’s do look good and I don’t mind sharing that I’ve made a tidy profit churning these designs out for various clients, as they are dead stupid simple. The problem though I’ve personally found over time and discussed with many other fellow metro-designers out there in the interwebs is around how to navigate the pitfalls of feature density.
What do I mean by feature density?
Feature density is when you have a team of feature hungry customer(s) all wanting and willing to pay large bounties to cram as many features into the one product as possible and despite your many educational rants around “less is more” it plays out in way that basically ends up being a really bad execution of “metro”.
Interestingly when you discuss such things with others they tend to climb on top of that horse and start preaching the gospel around controlling the client, usability studies, user experience principles and what not to the point where you simply roll your eyes, make a hand jerk motion and thank them for listening and walk away from them even more frustrated than you were before – YOU DON’T FUCKING GET IT raging through your mind.
I at first like most out there I guess would be free to say that maybe I don’t get it, maybe I’m the guy who seems to not find the right balance between feature density and design?
The cracks began to emerge.
That is until I started to pay a lot closer attention to the way Microsoft themselves have been churning out applications within their own kingdom of metro`ness. Ahh yes, I’m watching you bozos and I can see what you’re doing so stop trying to hide it.
What I see is this, Microsoft started out with some pretty basic applications that arguably can fit quite snugly on a smartphone or tablet device? As in the end these aren’t necessary hardware elements in the day to day cubicles? They are more at-a-glance, downtime, basic operational use only (some may use them for word processing or two but in general it’s not a work tool at present).
Once you get past what I call “Kiosk” applications you then run into the same problems I’ve had a couple of years ago, how the hell are we going to keep parity with feature(s) in existing software with the new and modernized metro theme?
There’s a number of strategies I’ve formulated to help navigate these waters, but overall it comes back to cutting features down as much as you can and start dividing the monolithic application into user-contextual driven experience (content first is bullshit, context first is righteous).
Microsoft however aren’t catching up to this thinking as fast as I had thought, as I figured they are the ones who created this problem so surely they have some internal best of breed minds on the said problem right?
Look at Visual Studio 11, forget the grey controversy, that’s not the point what is the point is how do you think the Visual Studio team are going to navigate the metro waters with success? They are going to have to make some large sacrifices in features or come up with some radical left brain thinking here to overcome the “less is more” design principles outlined in the Microsoft doctrine titled “Metro Design Language”
Lets look at Office vNext (not officially but you get the point), I mean the current latest version of Office I’m typing this post in now has pretty much the right conditions for a flat metro theme, It’s almost pretty much there except that Ribbon kind of becomes the metro-style anti-pattern (note I said metro-style, not metro-principles).
Ok, so the overall problem with metro is that it’s probably gone a little to far to the left in scaling things back to the point where the grid-design patterns of the web probably aren’t going to map snugly to the desktop development story as even in the right hands it’s a balancing act.
In the wrong hands metro can fall off a cliff fast, you know those designs, you’ve probably seen them, hell even Microsoft itself puts those ones on full display (Microsoft.com itself is an metro-abortion on full display).
There is way out thought.
I think today, Metro itself as we see it in its incarnation is broken, it’s created this ongoing bad habit where if you nuke some gradients, whip up a lot of typography and pander to the masses you in turn get an instant “wow dude, so metro, high-five” – meanwhile you’re just feeling a little cheap inside, as you know that at the end of the day this is not your best work and you are just feeding the metro-zombies what they want.
Its only when I sat down to really think about how I would re-design Visual Studio that a few things began to click in how both I could navigate the feature density problem but also how unready the audiences were for such moves.
The problem I immediately am noticing the most, isn’t just about color selection (which to be fair guys is such a subjective discussion) its more along the lines of change management.
We are willing to accept small incremental changes or even twitter-like kiosk applications that sit on the Windows 8 mutated start bar or Windows Phone 7 install pile – they don’t really affect us as much as we think they do.
You touch my Visual Studio and Office whilst coming up short on whatever habits I’ve established today, expect a severe beating!!
On one hand the current execution of metro simply says “sorry, we’re going to have to make some radical changes here people” on the other hand it will require you the audience to be open to such change.
Its clear right now, in my view, the earlier can be done but the later, nope, that ones filled with a lot of forum focused anger “you suck Microsoft” style rants.
Sorry, Metro isn’t ready in the sense the current users aren’t ready for its minimalist focused design principles as we’re about to break the one known issue with most user experience today – Audiences dislike less is more, instead they are silently ok with the idea of having a 1000 features at their disposal even though the data says they probably use 20% of those features..
Metro isn’t ready for the mainstream.
The calendar increments by 1 year now and as it does I think about the last year and ponder what I liked and disliked in my sandbox that I call the Microsoft ethos
Windows Phone 7
- I liked Nokias approach to branding the product; they really took what they saw and made it the focal point of what the experience for consumers should be. That is, they did what I asked at the start of the year; make the metro design your familiar face in the crowd.
- I liked the WP7 Design contest; I rarely ever give an endorsement to contests as they are a desperate response to bad marketing, in this case though the designs that came back were actually tidy and immediately wanted you to explore the apps. Now to see if they make it into the appstore.
- I disliked WP7 marketing from Microsoft, it was chaotic, it lacked depth and $500million in marketing spent later, I still can’t put my finger on one message that you could hang your hat on. Compare Apple iPhone / Android marketing to Wp7 and it baffles me as to what is going on in that team – I think they just carpet bomb SeaTac / LAX airports with it knowing that Microsoft Execs travel through there and hope that’s enough to convince them they are “everywhere” – reality is, Bus shelter ads aren’t putting the wp7 logo on the bottom of their “get our apps” signage – which is a fail.
- I disliked the WP7 app store pricing model, fact is they are charging the same rates as iPhone devs or there about and in the end you have a marketshare that Samsung is even beating. I agree with Laurence Moroney – Reality check for two please and can we have that to go.
- I disliked the compete b.s that came from Staffers at Microsoft around WP7, fight the internal metrics and rise above the whole “heh did you see that, Apple just copied us!” mentality. Its very weak and if you are to beat the competition then you need to stop watching their every move hoping and praying for a weakness to occur. If Apple copy you, great, internalize that victory but keep it internal and instead move the bar higher as the best way for people to absorb that reality is when someone who doesn’t have an MVP or Blue-badge says “Did Apple just copy Microsoft?”.
Windows 7 and 8
- I liked the intent for Microsoft to bring balance to the UX force, which is a consistent looking brand / feel across all products from now on.
- I disliked the execution of the consistent branding. I wished they would keep all design decisions in a central team, which is everything from website design to UI design(s) for products. Allowing individual teams within Microsoft to interpret Metro outside of the central team at this early critical stage is clearly not working. If you want to attract a design enriched audience that want to take inspiration from your work, stop farming it out to agencies who nickel/dime their way through design creation and instead double down on providing a central experience.
- I liked the energy that the Windows teams have around device development, we’ve asked for this way back in the days of Surface birth. I think that’s healthy for the industry and will put touch enabled devices into more and more people’s hands sooner rather than later.
- I disliked the artificial inflation of the metrics (Windows and Wp7). Inside Microsoft you gauge success based on your ability to ignore qualitative data and instead focus on quantitative given it looks bigger. This often spills over into the marketing engine(s) at Microsoft resulting in just bad reality checks thus creating more distance between the ability to trust anything the brand states.
- I disliked the development experience required to get access to the touch enabled world. A friend of mine sent me this break down of tag trends over at Stackoverlow, basically if you are working with Silverlight and/or WPF the chances of you not using Stackoverflow in some form of way is next to zero. WPF and Silverlight dead? Can I have an extra order of reality check for team Sinofsky please?
- I liked the notion that Windows 7 is on the rise over Windows XP, the growth you have is great, and the sooner we can stomp on the neck of Windows XP the happier my development sandbox will be.
- I disliked the fact that Windows 7 has a huge market share right now, today, that I can’t access and instead am told to “chill” until Windows 8 AppStore comes online via Windows 8. It’s like the Microsoft team decided “How else can I really fuck my customer base over” then some clown in the back puts his hand up and tells them of an idea to hold back AppStore whilst everyone just sits there nodding like he’s telling them that touch will be the future for Microsoft back in 2007 – oh wait… has anyone seen JJ Allard lately as that guys going places.
Silverlight / WPF.
- I liked the fact we got some releases for these products, shows there is still someone within the company stoking that release fire.
- I liked Silverlights new 3D capabilities, it hints at what could have been possible had we had it sooner. We back in the early days would often discuss how 3D would be our next frontier of innovation for the product and my hat goes off to the engineering efforts for pulling it off – they worked hard.
- I dislike that Silverlight release was late and I especially disliked the way it was done. Microsoft phoned in the release, let it happen in the dark of night instead of the grandeur we’ve been used to in the past. That for me sent a clear signal to the developer base – it’s time to move on, finish up your creations and wait for next shiny object to come to a install near you.
- I dislike WPF feature list, it was less than we were promised (technically it was more tease / flirt) and lastly the release itself was more of an internal upgrade spilled over onto external HDD’s – that is to say, the features were more derived from internal needs than external. MIC check, is this thing on, WPF is dead in the eyes of Microsoft but its far from dead in the eyes of your average .NET code jockey.
- I dislike the energy spent on HTML5 is the future, I’m yet to meet a developer who uses Silverlight/WPF get excited at the idea of abandoning this for HTML5. It must be the other developers I don’t’ see who want it – well that’s what we may be assuming amongst each and everyone one of us “must be the other guy needs it” (ie “Pretty girl syndrome”).
- I liked the SDK experiences that come with this ….product? … I think it is much easier at times than people give it credit for. I’ve used Amazon quite extensively this year and often will grow impatient that its not like Azure.
- I dislike the pricing models for Azure. I’m a fairly intelligent guy but even today I’d not say I can for certain grasp the pricing model needed for me to respond to a work order request from some of my clients (mining companies who pay very large sums of money may I add).
- I dislike the fact Scott Guthrie is running this only. In the short time he’s been the custodian of this product its gotten better, great, but Scott should be a higher power across all products. Steve Sinofsky you suck the life out of Microsoft development.
- I liked the way Bizspark program is breaking down the pricing barrier of entry for Azure, I was skeptical of this program when it first started (My office was near the creator of this program back in the day, wand watched its birth). I think this program is what stands between adoption and non-adoption but at the same time it has really piss poor marketing behind it so unless you know someone who knows someone, it needs more help (See Catherine Eibner in Microsoft Australia, she’s got her head screwed on tight around how this should work going forward. Promote her to lead the charge here).
I liked the fact IE6 is hated in a more formal fashion at Microsoft, but overall I just wish this product in its entirety would just die. Everyone else is embracing Webkit, stop fighting the obvious and bend over accept you lost proprietary way of life and jump into the stagnant waters of Webkit FTW.
- WCF team can rot in hell. I think there is enough issues around this product to simply state, stop what your doing and think about its effects on your audience. Until then, rot in hell.
- Entity Framework team, make a decision and stick with it or at least promote the reasons why you change APIs and their pro’s / con’s.
- Zune. Great idea, pitty it never left Redmond zip code.
- Surface 2 – Great idea, pitty it never left Redmond zip code.
- Bing. I googled Bing, enough said but the fact you didn’t have a Santa Tracker at Christmas – you are dead to me.
Metro, is fast becoming this unclear, messy craptuclar retardation of modern interface design. In that, the current execution out there is getting out of control resulting in what originally started out as a Microsofts plagiarized edition of Dieter Rams “Ten Principles of Good Design” into what we have before us today.
I am actually ok with that, as if I ever looked back on the first year of my designs in the 90s I’d cringe at the sight of lots of Alienskin Bevels, Glows and Fire plugin driven pixel vomit.
The part though I’m a little nervous about is how fast the microsoftees of the world have somehow collectively agreed that Text is in Chrome is out – like somehow science is wrong, that what we really need to do is get back to basics of ASCII inspired typography design(s) of yesteryear.
Typography is ok, in short bursts.
Spatial Visualization is the key description you need to Google a bit more around. Let me save you a little google confusion and explain what I mean.
Humans are not normal, to assume that inside HCI we are all equal in our IQ levels is dangerous, it is quite the opposite and to be fair the human mental conditions that we often suffer from are still quite an the infancy of medicine – we have so much more to learn about genetic deformation/mutations that are ongoing.
The reality is that most humans hail from a different approach to the way in which we decipher patterns within our day-to-day lives as we aren’t getting smarter we’re just getting faster at developing habitual comprehension of patterns that we often create.
Let us for example assume I snapped someone from the 1960’s, and I sat him or her in a room and handed them a mobile device. I then asked them “turn it on” and measured the reaction time to navigating the device itself to switching it on.
You would most likely find a lot of accidental learning, trial and error but eventually they’d figure it out and now that information is recorded into their brain for two reasons. Firstly, pressure does that to humans we record data when under duress that is surprisingly accurate (thus bank robbers often figure out that their disguises aren’t as affective as once thought) and secondly we discovered fire for the first time – an event gave it meaning “this futuristic device!!”
What is my point, firstly, the brain capacity has not increased our ability to think and react visually is what I’d argue is the primary driver for our ability to decode what’s in front of us. (point in case the usage of H1 tag breaks up the indexation of comprehending of what I’ve written).
Research in the early 80’s found that we are more likely to detect misspelled words than we are correctly spelled words. The research goes on to suggest that the reason for this is that we obtain shape information about a word via peripheral vision initially (we later narrow in on the said word and make a decision on true/false after we’ve slowed the reading down to a fixated position).
It doesn’t stop there, by now you the reader have probably fixated on a few mistakes in my paragraph structure or word usage as you’ve read this, but yet you’ve still persisted in comprehending the information – despite the flaws.
What’s important about this packet of information is that it hints at what I’m stating, that a reliance on typography is great but for initial bursts of information only. Should the density of data in front of you increase, your ability to decode and decipherer (scan / proof read) becomes more of a case of balancing peripheral vision and fixated selection(s).
Your CPU is maxed out is my point.
AS I AM INFERRING, THE HUMAN BEING IS NOW JUGGLING THE BASICS IN AND AROUND GETTING SPATIAL QUEUES FROM BOTH TEXT, IMAGERY AND TASK MATCHING – ALL CRAMMED INSIDE A SMALL DEVICE. THE PROBLEM HOWEVER WONT STOP THERE, IT GOES ON INTO A MORE DEEPER CYCLE OF STUPIDITY.
INSIDE METRO THE BALANCE BETWEEN UPPER AND LOWER CASE FLUCTUATES THAT IS TO SEE AT TIMES IT WILL BE PURE UPPERCASE, MIXED OR LOWERCASE.
Did you also notice what I just did? I put all that text in Uppercase, and what research has also gone onto suggest is that when we go full-upper in our usage our reading speed decreases as more and more words are added. That is to say, now inside metro we use a mixed edition of both and somehow this is a good thing or bad thing?
Apple has over-influenced Microsoft.
I’m all for new design patterns in pixel balancing, I’m definitely still hanging in there on Metro but what really annoys me the most is that the entire concept isn’t really about breaking way based on scientific data centered in around the an average humans ability to react to computer interfaces.
It simply is a competitive reaction to Apple primarily, had Apple not existed I highly doubt we would not be having this kind of discussion and it would probably be full glyph/charms/icon visual thinking friendly environment(s).
Instead what we are probably doing is grabbing what appears to be a great interruption in design status quo and declaring it “more easier” but the reality kicks in fast when you go beyond the initial short burst of information or screen composition into denser territory – even Microsoft are hard pressed to come up with a Metro inspired edition of Office.
Metro Reality Check – Typography style.
The reality is the current execution of Metro on Windows Phone 7 isn’t built or ready for dense information and I would argue that the rationale that typography replaces chrome is merely a case of being the opposite of a typical iPhone like experience – users are more in love with the unique anti-pattern then they are with the reality of what is actually happening.
Using typography as your spatial visualization go to pattern of choice simply flies in the face of what we actually do know in the small packets of research we have on HCI.
Furthermore, if you think about it, the iPhone itself when It first came out was more of a mainstream interruption to the way in which we interpret UI via mobile device, icons for example took on more of candy experience and the chrome itself become themed.
It became almost as if Disney had designed the user interface as being their digital mobile theme park, yet here is the thing – it works (notice when Metro UI adds pictures to the background it seems to fit?...there’s a reason for that).
Chrome isn’t a bad thing, it taps into what we are hard wired to do in our ability to process information, we think visually (with the minority being the exclusion).
Egyptians, Asian(s) and Aboriginals wrote their history on walls/paper using visual glyphs/symbols not typography. That is an important principle to grapple onto the most; historically speaking we have always shown evidence to gravitate towards a pictorial view of the world and less around complexity in glyphs around pattern(s) (text) (that’s why Data Visualization works better than text based reports).
We ignore this basic principle because our technology environment has gotten more advanced but we do not have extra brainpower as human race, our genome has not mutate or evolved! We have just gotten better at collectively deciphering the patterns in and in turn have built up better habitual usage of these patterns.
Software today has a lot of bad UI out there, I mean terrible experiences, yet we are still able to use and navigate them.
Metro is mostly marketing / anti-compete than it is about being the righteous path to HCI design, never forget that part. Metros tagline as being “digitally authentic” is probably one of Deiter Rams principles being mutated and broken at the same time.
Good design is honest.
It does not make a product more innovative, powerful, or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
Should point out, these ten principles are what have inspired Apple and other brands in the industrial design space. Food for thought.
Lastly one more thing, what if your audience was 40% Autistic/Dyslexic how would your UI react differently to the current designs you have before you.
I’ve been thinking about how to approach metro designs for the past year now, there’s a lot to the mechanics of getting the metro into what I call a “golden ratio” like state – that is to say, I think due to the simplicity of the design(s) you can achieve the bulk of the effort required by metro using mathematics and layout / proportions that are OCD / consistent
Tonight, I sat down inside Adobe Photoshop and decided to draw a line at the overall Resource Dictionary creation for some of the WPF/Silverlight and Windows Phone 7 projects I often work on. In doing this, I decided the first thing one needs to attack with a metro design is the color selection.
Color choice is important in the Microsoft style of Metro designs (I call it ms-metro as the word metro is getting to be an overloaded term, departing from the core design principles outlined), as you’ll note that Metro designs to date a really monochrome in the way they handle the selection of colors – to be upfront, I think they rely too heavily on primary colors and by not using shades of the primary / accent colors the designs come off to shallow / unpolished – helps to provide light/dark/normal contrasts imho.
I decide that in most of my designs I typically rest on 3-4 color choices overall – including the chrome (dark or light). These are often the basis for my design canvas and from here it’s really about balancing out the decals, typography and deciding how the overall screens and data flow.
More on this subject when I finish my brand reset (I’m redesigning riagenic.com and introducing metrotastic.com as well – more later).
In this post though, I thought it would be a good idea to provide a quick overview of my thinking here to gather some feedback?
If you look at most brands around the world, they typically rely on dark/light in terms of a canvas base and from there it’s really down to one to two primary colors (Google etc. the exception – where they have more than two).
Combining this and along with a concept I notice in most modern cars today where what I call an “input” color exists – pop the hood of your car, notice the yellow parts? That means it’s safe to touch, the rest leave it to the mechanics.
Looking at the below, I’ve isolated the theme into three color choices starting with Normal as being the primary color choice. Once the primary has been nominated then it’s a case of mixing some white/black to provide you shading contrasts.
Shades of Normal.
The shading is bit of a guestimation at this point, but so far I’ve rested on an 80 or 30% split. In that, using these two values with a white/black shading over the top of the base you can achieve a contrast setting that’s quite palette friendly to the ms-metro look and feel.
The shades themselves also have slight adjustment requirements depending on how you use them in your UI as if you use the darkest shade as your background for example (as in the below example) then you have to account for how your foreground is going to look that will differ from say your lightest color choice – the point is if you have a dark/light theme switch you need to adjust not just the base color selection but also foreground colors to accommodate the shading contrasts.
Chrome vs Brand
Inside a lot of my designs I use chrome decals, despite what Microsoft often preach around letting UI breathe, I still prefer to use decals to help provide separation amongst areas – imho, Microsoft UI is often barren and flat! We saw hints of this when a designer soon after the Windows 8 release whereby he designed a fake Steam UI which was an example of additive decals.
My approach in doing this is to separate the chrome into its own color channel and with its own set of shades of contrast (lighter,light, normal, dark, darker).
The same also goes for Input (ie using the car metaphor above), I typically will often spend a lot of time at kuler.adobe.com playing around with colors before I find a color that matches the branding (primary) nicely – in this case I prefer a blue/green/gray color selection.
You can add a fourth palette to this, but in all honesty when you start getting to around the fourth color choice things get a bit interesting in the color / contrast department – dangerous design imho.
Using the color palette(s) here I quickly knocked up a fake basic demo UI in metro style.
With the example, I put in a radial gradient starting with DARK-Gray and DARKER-Gray and simply put the radial gradient in the upper left area – it gives the UI that dull spotlight effect.
I then put the NORMAL-Blue as the accent color here, whereby the blues role in this design is to act as an opposing contrast to the chrome – you’ll often see this in ms-metro around say designs like Contoso etc.
The menu and most of the text uses the colors in the Darker TEST palette, but the thing to note here is I used the Normal-Blue as a selection state. In that whilst the green indicates input, the blue however is used to indicate current selection state. I’ve played around with this for a while now and in all honesty it annoys me personally how this works as to me input color should be consistent? But yet it works?
I should point out that I often will just use this technique in terms of giving users a spatial understanding of where they are in the user interface(s). In tests I’ve done with users over the past 2-3 years using this technique, they’ve never bucked the concept or idea – if anything have made consistent notary that this approach “feels right” – so despite some UX / UI colleagues giving me advice to avoid it, so far, the data says “you’re not right and your not wrong either” J (everyone becomes a UX expert over night mind you).
The Green in this UI stands out more, it highlights that these buttons are safe to touch and they are the focal point of input and like I said, provides that experience similar to popping the hood of your car. In all the tests that I’ve done in usability / ux over the last year or so, every single time the user has found their way around with minimal eLearning / Advice required – I have a theory that it has a link to how we humans handle perceptional organization when dealing with working memory (ie grab a few clipart pics, pick two categories the same and put them into a grid with 4 others that aren’t, then ask the candidates to tell you which two are the same and measure their reaction time – I should discuss this more, as its quite fascinating to see how peoples IQ matches to UX with a fairly consistent rate of predictability).
I have plans to really drill deeper into this area of design and I think I’m really only just scratching the surface of this conversation. The more I get asked to design metro themes for various Microsoft applications the more I question the overall strategy given for me this is quite simple stuff, yet it seems to be in high demand.
I enjoy working on it all now, I used to laugh at it but for me now the approach is getting much simpler by the day and I’d like to see the overall community raise the bar a bit more around this design language – that is to say, I really want to see what others do as I’m starving for alternative inspiration in this arena of metro-tastic design school.
Here is a sneak preview of my upcoming reset
Some Color Examples
Having recently, gone full METRO lately, I have in turn created what I'd call my 5 things you ought to know going full metro list. Here are five (5) things you probably might want to know if you head down this path like me?
1. Color choice is critical.
The thing that stands out about most "metro" inspired designs is they pretty much settle on around 2-3 primary colors of choice. They also then rely heavily on either black or white (maybe a shade of gray) for their canvas as well.
It's probably good thing to start by choosing your canvas to paint on upfront. White is great, it gives you more room to play around with and does not come across as obvious in terms of empty space. Black is also great, but keep in mind your empty space may become more obvious if you do not plan your designs as carefully.
Once you have outlined your canvas now comes the choice of a base color, any other accent you choose feeds off this color. Selection of your base color needs to keep one thing in mind; it will haunt you throughout your design.
The base color defines the "chrome" boundaries will give the user the pattern they have made a choice on something. Having often used the base color as both the partial chrome and when it comes to a selection. The reason I do this is in my own warped mind, the selection is part of the chrome, it's essentially a choice an active one at that so why does it need to be constantly visible in terms of difference? In that I've made my choice, I've noted the choice is visibly in place, let's move on please and focus on the parts I haven't made a choice on, am about to make a choice on and/or need to figure out whether a choice needs to be made?
After you have defined your base color, head on over to Adobe's Kuler site (that or use the Kuler extension found within Photoshop CS4+). Inject your base colors into the "create" area, and then decide how your color compliments by selecting an alternative/complimentary color. Kuler is pretty spot on in terms of helping you decide this, as if you choose a bright green; you have many colors to choose.
Example, one of the designs shown uses a bright blue, at first it seemed quite bright - but then after while of using it (own opinion), becomes a welcome relief from the green.
This alternative or secondary accent in your color, should become the color in which you decorate your buttons or inputs into.
Example, if you look under the hood of a new car, you will see areas colored yellow whereas the rest is the same color of the engine etc. Car manufacturers do this on purpose, they want you to touch yellow yourself but if it is not yellow and you are not mechanically minded - leave alone.
Having liked this principle and having fused it into designs constantly and personally used the secondary accent color to draw people's attention to the fact "I'm ok if you touch this, you won't break anything if you do" thinking. Personally, not entirely sure how popular it is amongst the UX/UI fraternity. So far, no users have made obvious complaints from this approach.
I have not seen data that contradicts my theory here, but ultimately the data I do see is if the end users are given a breadcrumb trail in terms of pattern recognition, you have won them over - complexity and efficiency formula's aside.
One digresses; finally keep your color palette to around four (4) shades in total. It forces you to keep your selection pretty consistent and close to the base as possible. Having liked this approach, as it prevents color conflicts occurring and again. It also maintains a pattern that is consistent - almost expected.
That is the interpretation of metro and colors so far - personal opinion based off current design style (which is slowly evolving - personal UI journey here).
2. Typography consistency is good, focus on that.
Designs shown are an example of how they do not keep typography settings consistent, as they will often fluctuate between 8pt to 30pt text depending on design purpose. These choices made only during the testing out layout composition from wireframes phase. The idea here is to see how it all stacks together inside Photoshop before you take the concept over into Expression Blend.
Once inside Expression Blend - much like HTML/CSS - I settle on a consistent and semantically named theme sizes. An example would be H1FontSize would be around 30pt, H2FontSize would be around 24pt and so on. The key here is to keep the approach in which you attack your UI consistent in your font size settings - goes without saying.
FontSizes are not the only issue, UpperCase, Camel Case, Lowercase etc. are all equally important. Do try to keep these consistent to their relative function, in that navigation kept lowercase but headings etc. all uppercase.
Zune team does this with the Zune Desktop, the actual navigation, and nav-headings and maybe category headings are all lowercase. The rest of the text fluctuates between all Uppercase and normal case
Not entirely convinced of a killer formula here as its one of those areas where more experimentation could be done around what can work vs. what cannot. Typography experts will definitely have an opinion here. Have yet to see one that outlines this. (Ping me if you have any bookmarks in this area of expertise).
Color choice per heading is also something that seems to have a bit of a formula around when it comes to my designs. I'll often use the base color on labels that I think are important enough to capture the users attention but then use opposite to the canvas colors in order to retain a normal state.
I typically think about this as a case of highs and lows in vocal tones. In that if describing a current screen to someone, one might say, "this is the USER MANAGEMENT screen within the security management area". This is personally, done naturally via voice emphasis the "User Management" vs. "Security Management". As who cares where it lives, it is not the end is it.
Welcome feedback on this approach, but the point is color selection helps carry that forward.
3. Text Chrome vs. Text Content balance it out.
This is one of those pet hates I have with the current implementation on Windows Phone 7 - in one way the team decided to abandon chrome artifacts in favor of text, the problem I personally have is switching gears between "Chrome" text and "Content" text. I find myself at times pausing and thinking, "ok, can I touch that..nope..ok what's touchable here..".
Overtime, personally, will develop some muscle memory in this space and will soon learn what the differences are but in given the current metro virginity I have, I just noticed this as a pattern which was not obvious (again, let users notice the scent for pattern recognition).
Would one put heading labels etc. as being the "Chrome" text category? Striking a balance here of too much text is important and again color choice can help you out here. I rely heavily on monochrome filled shapes and text in my current metro style, so for me it's a demon I'm always trying to wrestle to the ground - keep my text minimal and restrain from too much on the screen, especially if there is allot of data to view.
4. Element minimizations are ok, but add some life please.
Over lunch today, a colleague and I were discussing the metro way of life really does not allow too much in the way of gradients or watermark elements - most of the designs I have seen in this space are clean / white.
Is purity in no element additions bad or good?
I for one cannot honestly answer that as I am the type of guy who often just does not know to back off on the decals, I love a busy UI and it has nothing to do with the user experience it is more of an artistic habit.
Agreed, less is more, but sprinkle in some energy into the user interface. Think about what the end user is supposed to feel or relate to the said User Interface. One screen rather has a lot of fun with the idea that a boring concept like task tracking can take on more of a Bourne Identity / CIA feel. I then throw in a world map, as hey, all Fantasy User Interface(s) within Movies always have the map of the world behind them when hacking a large mainframe or accessing global data of some kind (it works, I love it, back off).
Point is, don't be a lemming and follow each other over the pure white cliff, sprinkle in some decals to take the edge of the seriousness of the UI and allow the end user to feel a small connection with the work you've put in front of them.
5. Fantasy User Interfaces in movies are your best friend.
Having found it difficult to get inspiration sources for metro and instead turning to local train stations etc., but they also have a much-prescribed look and feel throughout Australia. Often one use Google/Bing images and searches other transit signs etc. to get a pick out of what is out there in the wild - metro style.
The main source however for inspiration, is to watch movies that have kickass user interfaces in them and then pick them apart frame by frame. I analyze them and try to force myself to think outside the box more and how these concepts could relate to real-life user interfaces.
I like what Fantasy UI brings to the table, it creates this nice illusion within a TV Show or Movie that convinces you in under 30seconds that the actor is doing something high tech. It is obviously not real software, but you forgive it and go "yeah, suppose, I could buy what you're selling here" for that brief moment.
I think it's important to call that out, as it's at the core of probably our reaction to software and it gives off this pure signal of "that works" moment.
Metro can lend itself to simplistic Fantasy UI's, as often the user interfaces are very basic in their structure. Take the work of Mark Coleran (current geek UI hero); looking at his work, he has kept the UI basic in terms of color choice, composition and decals. The actual magic comes to live when there is animations etc. on it, but in the end, it is relatively simple in composition. - It works!
This is the only reason I am remotely convinced metro as a style so far (the one I am working towards anyway) might have some legs. It is not entirely rainbows and kisses, but at the same time, it is.
Also, look at HTML/CSS sites within csselite.com galleries for inspiration as well. As these sites typically rely quite heavily on CSS for their design governance - so in a way the metro concept really hails from this if you ask me...