[jhermsmeyer]

If your audience is developers and designers, a pure flat design is great and will likely work well.

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.

[dpark]

> 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.

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.

[jhermsmeyer]

The two most prominent buttons on the home page have subtle drop shadows and gradients. Google is actually a great example of restrained skeuomorphic design.

If I had to advocate for just one aesthetic (which is silly on its face), I suppose restrained skeuomorphism would be the one.

[ricardobeat]

That's affordance, not skeuomorphism.

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).

[jhermsmeyer]

I think we are splitting hairs here, but I agree that what we are talking about is affordance.

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?

[goldfeld]

Gradients and drop shadows on buttons are usually modelling solid color real world buttons; design uses an imaginary light source coming from above to mimic the way our world usually has a lamp or the sun shining up there.

[ricardobeat]

That's precisely what makes them affordances: gradients and shadows are modelling real-world clues, not mimicking design features.

[dpark]

For sure, Google doesn't seem to be headed toward "flatland", which was my point. Even Google, who seems to be clinging to "restrained skeuomorphism" uses flat, clickable elements in many places. I seriously doubt that they'd do so if their usability testing showed that users don't understand them.

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.

[jhermsmeyer]

> 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.

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.

[dpark]

> 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.

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.

[rralian]

> 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.

[goldfeld]

Plus mouseover generally goes in the opposite direction of responsive design.

[allang]

Not sure I agree that normal people need a ton of hand holding, but even that's true, those people will eventually disappear.

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 :)

[babesh]

No, they are born every minute of every day. They are known as kids. Check out kids using iPads and iPhones. Compare that to Android. Kids can figure out how to use iPads and iPhones really quickly. Very, very doubt the same for the Metro or Android for that matter.

[jhermsmeyer]

You are in good company:

"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...

[goldfeld]

Define good.

[kellysutton]

We were also talking when writing the blog post that it depends on what the interface is for. When designing a site that accepts user-generated content (whether it be LayerVault or Facebook), the interface—is in many respects—only there to get out of the way. A flat design is often best at showcasing others' content.

When the interface is to facilitate a straight-forward task, one could make the argument for a more embellished interface.

[muan]

Cannot agree more on that layerVault's audiences being designers and developers sure does make things simpler. It's simply true that "designing specifically for tech savvy people OR a group of 60 years old folks" has each a set of very different things to take into consideration. Although if we are saying that those 60 years old non tech savvy people would eventually disappear, then sure, why not?

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.