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