The Flat Design Era
layervault.tumblr.com
layervault.tumblr.com
In a few years, designers will start to get tired of looking at and creating flat designs day in and day out. They'll add little flourishes and write blog posts proclaiming "The Era of Living Design", where designs have all the spark and texture of real living things.
I mean, it's absolutely great that these folks are so excited, so passionate about design. But I don't think it has to be so cosmically meaningful for it to be exciting.
And this is not to say that Layer Vault is poorly designed. It's just that it can be a good design without every non-flat design being bad or dishonest.
Trends are not indicators of best practice, and they cannot be applied to just any site at random and work as effectively as they did on another. I love LayerVault and think Allan Grinshtein is a great designer, but this post was a little too much for me.
In a sense, this is creating a language to talk about UX in the same way we talk about architecture. No doubt it's a bit grandiose, but it works.
Yes, only those were major art movements, this "flat" thing is this month's design fad...
When I see this: http://www.istartedsomething.com/wp-content/uploads/2011/09/... I have no idea what is and is not a button. I suppose it's all a button. But there are zero affordances in this UI.
This is now finding its way to Microsoft's websites. On outlook, I can't quickly find the buttons to do key tasks: http://cdn-static.zdnet.com/i/story/70/00/001893/eb-new-outl...
I think the reaction to excessive skeuomorphism is well founded, but removing all affordances isn't the proper way to move forward either.
Usability is so much more about how it work, not just how it look.
All design systems will have some learning curve. A learning curve where you have to understand that everything a button is pretty close to being easy to learn.
So in my mind, the problem you seem to think there is is a pseudo problem. I.e. it's not actually a problem.
The Map is not the territory.
I think they are doing the right thing by making sure that they get the fundamentals right and then they can add to improve.
That is hell of a lot easier than if you have to fight with a and already established strong visual hierarchy.
I would do exactly as they are. That seems to be the right approach for such a huge undertaking that this will be.
Microsoft's problem isn't inherent in having a 'flat' design. It arises because of their alternately uniform (outlook), and seemingly arbitrary (metro desktop), color, contrast, layout and font-weight choices.
They could conceivably shift to a design-language where those attributes could be used to hint at interactivity at least as well as a big shiny buttons.
Everything on that Outlook screen seems to be clickable, with the possible exception of the logo (upper left) and copyright notice (bottom left).
It reminds me of the `acme`[0] editor a bit; not nearly as flexible, of course, because it is executing pre-programmed commands, not arbitrary shell commands.
I bring `acme` up for two reasons: (a) it gives you an interesting perspective on "text as actions" and (b) look at that menu system... no buttons, no distinguishing marker, the menu is just text! The buttons are just text!
The editor itself is fairly nice to work in; a big departure, yes. Intuitive? Kind of; it only becomes intuitive once you understand "mouse-chording", after that the UI makes plenty of sense, even when it's almost entirely "flat."
--
So, if you assume everything is clickable by default (which is true, give or take a few very specific targets that have no obvious action anyways), why then does the user need skeuomorphic hints?
If 90% of the non-whitespace results in a "button press", that fact should become obvious fairly quickly, even to the uninitiated.
If you cut out all the cruft and only leave the functionality, the functionality will inherently "float" to the surface. And that seems to be the case in Microsoft's latest bout of UX.
In Gmail, there's a big ass red button that does exactly what you think it will do. (http://25.media.tumblr.com/tumblr_lyrwjaXatd1qea4hso1_500.pn...) I bet I could use Gmail for the first time in Arabic if I had to. I'm not sure I could use Outlook.com.
MS is doing something very wise here. They are starting flat and then over time they will find a balance between what needs to be more obvious than other things. Just wait and see.
If I was seeing GMail for the first time in a completely foreign language: I wouldn't associate "red" with Compose/New Message.
Colors carry significant cultural baggage.
Here in the U.S, for e.g: I associate Red with `danger`, `anger`, and perhaps `stop` or `caution.` [0]
At first glance, a red button (relying solely on skeuomorphic distinction, and not the text) is something I _definitely_ don't want to click. I would assume it would delete my selected mail, or perhaps mark it as spam.
At least with text you don't have that cultural baggage. You have the baggage of the language, e.g: you definitely have the steeper learning curve of learning the UI's language.
Though I'd rather it be grammatically ambiguous, as opposed to being visually ambiguous. For instance: if MS used slang or abbreviations in their Metro applications, it may throw off non-native speakers.
---
While I agree with GP that MS could benefit from using a bit more distinction. I'd still steer away from using colors and gradients and such (rather: such distinctions wouldn't be my first choice). Cultural differences aside, you have to consider biological differences, such as color-blindness.
You can add visual distinction without necessarily resorting to skeuomorphism. For example: add some vertical lines, mess with font-weighting (which MS seems to use heavily), etc.
[0]: http://www.informationisbeautiful.net/visualizations/colours...
(Everything in that screenshot is a button. That's how Metro works)
As someone started with a 286 EGA graphics PC from the eighties, boy are we spoiled...
Think about it: Microsoft is a big proponent of a design language, and helped the trend to take off.
Granted, the visual clues from bevels, drop shadows and whatnot had the bonus of instant familiarity to people not accustomed to GUIs. Nevertheless this might have been a sort of a crutch and nowadays people even if they expect the computer to emulate their home appliances, the appliances themselves have less and less buttons and levers and more and more touchscreens or at least touch-buttons.
What I love most about flat design is that it forces you to simplify, since you aren't giving the user as much visual information. The flat aesthetic magnifies any clutter, because objects and shapes don't communicate their "possession" as much, so having too many pieces on the page at once doesn't work. Remove a line here or a drop shadow there. Make your text more succinct. It's awesome. It might even be a good challenge for startups, just because it forces you to focus your product more.
A huge bonus for me to flat design is that I'm not constrained by my earlier true-to-life decisions like gradients and drop shadows. Before I started using a flat aesthetic, I'd often run into situations where I couldn't place a button or a plane right where I wanted it, because it would contradict the other dimensionality that my gradients and drop shadows were creating. I'm glad to be rid of those constraints now (or almost).
Though, I'm always scared that we'll a/b test a gradient-filled button on our call to action and it'll crazily out-perform our flat one.
---
It might depend on who the interface is for. But it also depends on what the interface is for. LayerVault is a perfect example of an interface that needs to recede when a user is viewing their own work. You don't want your flashy buttons competing for their attention. Similarly, with Segment.io, I don't want all of our UI to be competing with the data we show in graphs.
That button can still be really good. It can be like reading pages of Hemingway longing for all the adjectives. When they show up, they're such a treat. The girl in the red dress in Schindler's list is another great example. It blows the flat aesthetic, but gives mountains of importance.
It's not about flat design being right or wrong, it's more about whether it's appropriate for the job/task and audience/market.
There are good movies with special effects and good movies without special effects -- it's just a one element of the entire experience and by no means the most important.
Skeuomorphism is an easy target because it is dishonest by definition. Things that appear "cutting edge" or "high quality" today will, in a few years, seem dated, clunky, and pointless.
By contrast, pick up a copy of Die Neue Typography and see how well not just Tschichold's designs, but his ideas, hold up today. Skeuomorphism is a symbol of the Old UI. What we need is the New UI.
http://byamt.wordpress.com/2009/03/03/dieter-rams/
> By contrast, pick up a copy of Die Neue Typography and see how well not just Tschichold's designs, but his ideas, hold up today.
Dieter Ram's designs also hold up. Honesty is at the center of it all. This is also the reason why people still quote Confucius. Honesty is simply living and experiencing in the purest way possible.
I think your own example illustrates it: a film without special effects is just a film.
These guys are confused, they're lying to themselves.
Honesty in the context of industrial design takes into account the materials, manufacturing and physical form.
And in graphic design, respecting the limitations of print.
Pixels are intangible. The 'honest' that's respected within industrial/graphic design, fields that have influenced this new 'flat' digital style do not translate due to the fact that pixels are intangible. The ideals that defined the modernism movement were based on the tangible.
What if a "non-flat" design improved communication/interaction? E.g. I touch this button therefore using 3D to communicate such interaction would make sense.
The designers that promote these ideals are confused.
Honesty for me in this context comes down to the HTML/CSS/JS crafted to create these visual and interaction elements.
Wordplay aside, I completely agree with you. I think throwing in that an interface or scheme is "honest" is just another way to make one feel good about their decisions.
"honest" is the new "clean"
It sounds like that MacBook isn't the only thing that's unhinged...
But normal people need their hand held as to what a button is. Subtle drop shadows and gradients are the best way to instantly get someone to understand that yes, this element does something. Something important is lost in flatland.
On a side note, the vault and picture frame image on the main homepage for layervault.com is the height of skeumorphism and realistic design. Beautiful, but also kinda ironic.
As for the image on our homepage — that's our app icon. Pretty funny that it's quite realistic (done by the talented folks at SoftFacade). We didn't think it was a huge contradiction, since it serves as more of a pretty picture than an interface.
That said, we probably will end up throwing it out when redesign our rather outdated external site :)
"According to various reports, when someone suggested to include a touch-typing tutorial in this intro as well, since many people did not know how to use a keyboard, steve Jobs simply said not to bother as those people would die out eventually."
* http://orangejuiceliberationfront.com/theyll-die-out-eventua...
When the interface is to facilitate a straight-forward task, one could make the argument for a more embellished interface.
I disagree. Go to http://google.com. How many of the items in the bar at the top have gradients? Is there any confusion about whether they're clickable? Now go to Google+. Is there any confusion about whether the icons on the left are clickable, despite being flat (and even grayed out)? I'm looking at Chrome right now and none of the buttons in the toolbar look 3D. All of these examples do have a rollover effect, but even without that, the design informs you what's clickable. And mind you, these are all examples from a company that is not embracing flat design as its major aesthetic.
Users have plenty of experience with clickable items that don't look like buttons. There are a ton of ways to convey that something is clickable without trying to make it look like a physical button.
> On a side note, the vault and picture frame image on the main homepage for layervault.com is the height of skeumorphism and realistic design. Beautiful, but also kinda ironic.
Agreed. It seems quite out of place to me.
The spinning background is also really rough. It's completely gratuitous and actually makes me queasy.
If I had to advocate for just one aesthetic (which is silly on its face), I suppose restrained skeuomorphism would be the one.
I've got to say, I don't understand why people keep mentioning drop shadows, though. Drop shadows seem fairly uncommon. Even Google only uses them for mouseover.
And mouseover is, in my opinion, too late to indicate what's clickable and what isn't. It's a nice confirmation, but the user should already know before they even move their mouse. If you've got a user aimlessly moving their mouse over things trying to determine what's clickable, you've failed at design.
I agree with this so hard I think I hurt my back.
Put your cursor in the search field. More shadowy goodness there. Click on your avatar in the upper right, the popover has a prominent (too prominent IMO) drop shadow. It's everywhere.
As to mouseover, I agree it's for confirmation. But if we need to confirm functionality with drop shadows and gradients - what message does that send about usability?
One thought is that perhaps we should have the drop shadows and gradients there to begin with.
I should have been clearer. I was referring to drop shadows on buttons.
I have to say, though, I think the search box picking up a drop shadow is the perfect example of gratuitous affordance. Putting the focus on the search box turns the border blue. Does anyone actually need the drop shadow? Alternatively, if users need the drop shadow, do they need the blue border. Do they need either one, given that the cursor appears?
> As to mouseover, I agree it's for confirmation. But if we need to confirm functionality with drop shadows and gradients - what message does that send about usability?
Tells me that they aren't really needed in the first place. And given the increasing prevalence of touch devices, I'd say that making your UI clear without resorting to mouseover effects has become a requirement.
> One thought is that perhaps we should have the drop shadows and gradients there to begin with.
If they were there to start with, the designers would no doubt have added some other hover indicator. People have grown to expect hover changes (especially with web UIs), and indeed UIs seem awkward without them. However they should still not be necessary to indicate that something is clickable.
From Wikipedia: a skeuomorph is "an element of design or structure that serves little or no purpose in the artifact fashioned from the new material, but was essential to the object made from the original material"
The gradient and shadow on buttons are not just ornamental, they serve the purpose of conveying depth, and consequently that they afford being pushed (also, real-world buttons are usually a solid color).
The reason why I use the term skeuomorphic in this context is because there are those who believe that what you and I believe is affordance is actually superfluous and ornamental.
What else is flatland design if not a complete rejection of the value of drop shadows and gradients as affordance?
I adore flat design in a aesthetic way, but saying flat design is the answer to or even plays a part in UX decisions making just sounds silly. Is there really a point in advocating an aesthetic? It is subjective in every way. Though if the purpose is to make a style trendy, the article perhaps does make a great deal of sense. Flat design and skeuomorphism are both styles, whereas applying affordance IS a means to an end.
Visiting LayerVault's website, there's no immediately apparent way to contact the company other than signing up or contacting support; the Support link can be found in the footer navigation. When going to the Support page, I see a partial phone number (but pixelated because only premium customers get to call, haha!) there is an actual email for support, but I don't want support.
Usually the About page will have some contact information, so let's check that out. I see Twitter handles for the two founders, and a picture of NYC.
Why do you guys invite people to email you, then make that process as difficult as possible?
Buttons can have depth without gradients. Check the ones on http://www.facebook.com. A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around.
Depth is not only achieved through "3D" gradients and shadows. It is achieved in flat design through size, color, spacing. It's hierarchy by balance.
It's like a well-balanced music mix: if it sounds good on average level, it'll even sound better on loud level. Flat design is balance before the lighting tweaks.
This is exactly how Windows 3.1 was drawing its UI. :) (not that there is anything wrong with that)
Facebook lighting is directly overhead; Windows 3.1 was off to the left a bit :)
An upcoming (da da DA) Minefold release will convert the entire site to "Flat Design". One thing that goes hand in hand with "flat design" is clear simple writing. I've spent the better part of the last month brainstorming names and finding clear, simple ways of explaining what we do.
It's modern and clean and flat but doesn't take it as far as windows 8 where everything is text, a rectangle or an icon.
Granted marketing content has different usability requirements than functional software. But I'd argue that dizzying your prospective customers with swirling animations is counterproductive and not an example of "lean design".
That would be Leonard Nimoy - best known for his role as Spock in the original Star Trek.
It is as if there were a natural law which ordained that to achieve this end, to refine the curve of a piece of furniture, or a ship's keel, or the fuselage of an airplane, until gradually it partakes of the elementary purity of the curve of a human breast or shoulder, there must be the experimentation of several generations of craftsmen. In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away, when a body has been stripped down to its nakedness.»
-- Antoine St. Exupery, Wind Sand and Stars.
We experimented on a website a while back with making stylish "flat" buttons vs bog standard grey embossed buttons. Turns out the grey buttons made site navigation way easier, people who were given these buttons spent more time on the site on average.
Also for a company that talks about good design, I actually couldn't look at their home page for long because the rotating image at the top started to genuinely make me feel slightly sick.
Also, is this page (https://layervault.com/payments?plancode=freelancer&sign...) an example of this flat design? For some reason, I don't find it as beautiful as the rest of the website (Such as https://layervault.com/about).
To me this trend comes really naturally when you're trying to expose the function of something, rather than make something appear to function in 'space' or with certain 'materials'
It'll also help blank slates like me adopt this "flat design" faster.
I like the idea of digital brutalism - celebrating the materials, if you will - but the damn thing still has to be easy to use. It'll always be a moving target and that's good.
For examples look no further than Apple's iOS (borderline kitsch) and Microsoft's Metro (reduced affordance). I think one UI that gets this balance done very well is Facebook.
The big damage comes from 3rd party apps that don't get skeumorphism right.
I find it funny that the author refers to this as "flatland," when one of the most prominent uses of that word was probably by Edward Tufte when he was exploring how data visualizations allow an escape from flatland. The same lesson applies here. Skeumorphism isn't necessarily the solution, but overly flat designs aren't either.... flatness is what you want to escape from.
I can still say that Tufte was probably the most prominent to use it in a design sense (but I'm probably wrong about that as well..)
And this site gives me a bit of a headache, too.
Just skimming it, it's a bit too dark and a bit of a strain to read; part of that may be the office lighting though.
The funny thing is: it's _very close_ to my terminal color scheme, just lacking a lighter shade of the background [which would differentiate content from the background], and a "brownish-orange" for highlights/accents [links and things].
The text in my terminal is also slightly "whiter" and a much bolder font-face.
So perhaps some of these suggestions would help make the site more readable in general, though I've never tested my terminal style with a color-blind audience so YMMV. :)