The trend away from skeuomorphic design toward flat design has in many ways been refreshing and enjoyable. And yet, it’s worth noting that flat can be taken too far, to the detriment of usability. Take for example Microsoft’s modern.ie site — see the commented screenshot below or check it out yourself.
I would argue they’ve taken interface design hyperflat, and in so doing have left users without important usability hints.
Yes, the gradients and shadows of yesterday have often been overdone. But there is such a thing as subtlety and sophistication, without complete abdication. Used well, gradients, shadows, and hover effects give users important visual cues for navigating your website’s interface more efficiently and effectively.
In other words, if you’re going to make use of flatness in design, do it while still giving your users the visual cues they need. Thus John Gruber has recently written on the topic of flat design:
Letterpress … is a perfect example. It is indeed, mostly flat … But Letterpress does have Z-axis depth: when you drag a letter tile, it pops up and has a drop shadow under it until you place it. There’s nothing “flat” about that. What Letterpress rejects is not depth, but depth as mere decoration. The visual “raising” of a tile as you play it is a natural visual cue, a way of emphasizing what it is you’re moving.
Visual cues are the key here.
Count me in favor of what Matthew Moore has called “almost flat design.” At times Apple has taken its skeuomorphic usability enhancements too far. But Microsoft’s position is worse. I think Moore is right — Google’s interface design gets it just about right.
Of course there are other examples. One I’ve recently enjoyed is Andy Clarke’s recent Stuff & Nonsense redesign. Check out his homepage, and you’ll see some elements that are flat, some with edges, some with shadows. All links and buttons have hover effects, begging to be clicked. Then there’s that one gorgeous button, darn near unavoidable in its lusciousness. (No Skitch arrows needed.)
What’s going on here? Is it flat or not? With the times? Or behind? One could be forgiven for suspecting that Clarke has subordinated such questions and privileged the point and purpose of the communicative task at hand. While obviously interacting with current trends, the design is enslaved to none of them. Rather it brings past, recent, and current conventions together under the auspices of time-tested and user-empowering design strategies, including visual affordances, interactive feedback, and visual hierarchy.
Clear, straightforward, expressive, and inviting, the design speaks a visual language that is easy to understand and navigate — it looks great to boot — and it leaves no uncertainty about the most important action items on the page.
For my money, that’s great web design.
Recommended Related Reads
I’ll add to this list as time goes by:
-
Flat Pixels: The Battle Between Flat Design And Skeuomorphism :: Sacha Greif
a must-read for its historical overview and depth, also for its fantastic notes section with links to other key contributions on the topic
-
Flat UI and Forms :: Jessica Enders :: A List Apart
“What is simplicity and clarity? It’s the user knowing exactly what to do, and how to do it, with a minimum of effort. Achieving this kind of user experience means finding the right balance — not just going flat for flatness’s sake.”
-
Button for a Hero
a nice little test to see which button is more frequently chosen to be clicked — the flat or the less-flat. (Guess which. Then click to see.)
Data Enhanced 
A lot of good points there. “The interface formerly known as Metro” looks crisp and is a refreshing change for Microsoft but it sacrifices a lot of tools that could help with usability. On the other hand, there are a lot of interfaces (especially on the Apple app store) that take skeuomorphism too far.
I agree that the best user interfaces lie somewhere in between. Personally I think the Apple.com website strikes a good balance.
Working on a lite landing/counter page and I really appreciate this perspective. For the noob, it is hard to discern what is a solid feature vs. just fluff. If only bootstrap provided for some more flexible icon placement around buttons (pointing towards)! Thanks for another excellent contribution.
Here’s an interesting example — a Metro-styled theme for Bootstrap.
http://talkslab.github.com/metro-bootstrap/components.html
A couple of notes:
* Parts of it are visually enjoyable. Brightly colored blocks help! (And they have feedback on hover.)
* Note that hover effects on buttons are retained, as are shadows on dropdowns, and little dividers between split button groups, etc. These definitely help.
* When it’s not done carefully and well (including padding, spacing, font family and weight, etc.) it suffers. As would any design I suppose. But I wonder if flat is a less forgiving design context?
* Overall, I find there are several areas — such as some of the tab examples — where the lack of effective visual cues forces me to think a little — which is not ideal for an interface.
Hi everyone, I’m going to use comments to keep trailing out thoughts a bit …
An interesting exercise would be to visit the flat-designed sites in a roundup like this one at line25 and evaluate the designs from usability perspective. There are surely good, better (and less good) uses of flat design. Some of them doing a better job of providing usabilities cues in some form or fashion.
The question: How are the needs of users most effectively addressed in a well executed flat design?
Great article, agree with the ie site looking too flat and not very interactive, plus your conclusion, really like the site http://stuffandnonsense.co.uk simplicity as well as effectiveness. ( oh and by the way, the image link for stuff and nonsense is missing a colon after http: )
While I have no affiliation with the young man, this programmer/designer has put together a nice package that I am using in my early work. HTH.
ace-subido.github.com/css3-microsoft-metro-buttons/index.html
Thanks Richard — Including for the heads-up re: the broken link, which I’ve fixed!
And Chief — Thanks for the link. I’d count Ace’s buttons among several examples I’ve begun collecting of user-friendly flat design. (Clearly distinguished by color and interacting on hover.)
Hi, Neat post. There is a problem with your web site
in internet explorer, would check this… IE still is the market leader and a good
portion of people will miss your wonderful writing due to
this problem.
Great to find your page as I’ve been thinking on the trend quite a bit recently. I agree with most everything except…
The http://talkslab.github.io/metro-bootstrap/components.html example (Comment 3). Although favorably reviewed, a couple of paragraphs led with white text on blue square fields concern me greatly. As a new user of the page, I learned quickly that the boxes at the top of the fold are buttons (good), so I experimented with the paragraph leads and found them not to have a function as I had now learned to expect (not good). This unnerved my confidence in the page’s design. Are squares links and rectangles not; are in-line buttons not buttons, etc?
In my Learning Designer hat, it is my priority to decrease the cognitive loads we assert on users. User’s metacognition of a GUI is noise, which is why we discuss these points on visual design while wearing our Interaction Design hats?
So, my penny’s worth is that the sum of the parts is to ease the user’s “journey” into the screen’s experience: it doesn’t matter what you see, but what you don’t have to look for. In this case, the paragraph lead style required me need to look (and click) twice.
My verdict is that I have no great preference to the flatty visual design, and I do enjoy Microsoft’s and Google’s GUI, but there are compromises that should not be made where our users have learned to interact in one way, and now need to learn another (increased cognitive load and metacognition). Take it easy on them?
On reflection, I should add that the the initial dilemma I found myself in and described above is probably compounded by the situation: these are the only buttons illustrated at the front of a copy text and contain meaningful text as part of the copy. Other buttons are generally more abstract, ‘Left’, ‘Middle’, ‘Right’, for example.
Putting ‘B’ of the following ‘Button’ copy in lower case would further compound my issue, so perhaps I’d like to see some copy before the button? Hey, I learned it was an illustration eventually, but that’s the point I was making: eventually. Perhaps if the button examples had been ‘skeuomorphic’ I’d not even raise the point?
Here’s a nice little randomized test. The gradient button appears to be approx. 50% more likely to be clicked.
http://www.zebraa.nl/buttonforahero/