23

There is some discussion of this here but I haven't found a more comprehensive discussion of it.

With Material Design, objects that wish to convey being pressed appear to rise up towards the user, rather than get depressed away, as normal buttons do. (Example)

Why? As pointed out in the original link, it's contrary to what we usually expect, and more importantly, it's contrary to what happens in real life (which is what material design is supposed to represent)

On one of my own sites, at the time this was originally posted, I specifically designed the social media buttons in the footer (and most other buttons) to appear satisfyingly pressed when active

  • Ya, its strange. I would like to think it is like the phone is a box and the UI is inside that box with material stacked up, and at the top of the box there is this glass plane that is the real material of the phone. The user can only touch the glass, and somehow, the button raised to react to the interaction, moving closer to the finger. – PAC Sep 23 '16 at 18:10
  • :) Maybe your finger is magnetic - and lifts the button up when you touch the screen. This would also fit with the drag and drop behavior mentioned in Eric's answer. – Daniel Schilling Jun 6 '17 at 13:40
  • @Schmuddi Thanks I'll update the link. In the example you posted, take a look at any of the "toggles". What differentiates the toggled "on" state from the toggled "off" state? A more pronounced box-shadow, which gives the impression the button is "raised" off the page more, i.e. closer to the user – General_Twyckenham Jun 26 '18 at 16:59
30

Material Design is based around materials in the world of print design. Two of these concepts that get to the your point is the (1) the surface you are interacting with and (2) paper.

In material design, your environment is a 3D space. The z-axis extends from the surface of the screen towards the user and there is no definition of a negative z-axis.

This jives with the physical print design world. You can't have something "below" the surface you're printing on.

The other concept material design focuses around is paper, and how it rests on top of other layers. Paper does not "float" above the surface, it rests on the piece of paper directly below it. You shouldn't, for example, have a raised button greater than 1 step above its parent surface. As a result, you can't "push" a piece of paper (aka: the button) into another piece of paper (aka: the surface).

The Material Design page actually talks about button interaction in terms of "raising" when "pressed":

Raised buttons behave like a piece of material resting on another sheet – they lift and color on press.

That is confusing. As you point out in your question, when you press something it doesn't normally raise. But check out the first part of the sentence again...

Raised buttons behave like a piece of material resting on another sheet...

The button is resting on the sheet below it. It has nowhere to go but up.

Google still does use the word "pressed" but a more suitable phrase would be "interacted with". When you "interact with a button" the only z-index you have available to you is up. When you "interact with a piece of paper" you pick it up.

So, while you pressed on the screen you are interacting with the piece of paper that makes up the button -- so it lifts up as a result.

It is odd, yes. But it does flow with the underlying principles of the design definition.

  • 12
    This is a great answer--though it makes me really disagree with Google's decision on this. – DA01 Jan 30 '15 at 5:37
  • OK, I spoke too soon. Looking at the actual examples, I'd say they did a pretty good job in most cases simply making the pressed button change state. It does still feel a little odd where the raised buttons make the shadow larger when active, but the main visual is the color change, so I think I can forgive them. :) – DA01 Jan 30 '15 at 5:39
  • Really good explanation, makes a lot of sense. Thanks – General_Twyckenham Jan 30 '15 at 17:30
  • The answer emphasis on print design but failed to justify another principle material design is based upon: obey the rules of physics. A button raised when pressed is clearly a violation of which. This is the spirit of the question. – abbr Nov 20 '16 at 2:07
  • @abbr, well in my Jetta, I push the stick shift forward to go backwards. It's really a matter of actuating, and not emulating physical behavior -- which MD may do better in totality of the specification. – bvj Jan 23 '18 at 4:41
7

In addition to the other notes here, there's also a consistency argument for the spec behavior. Material isn't just pressed. It is also long-pressed and dragged (here's an example video, from this spec.)

As you can see, the active material being dragged naturally must increase in the Z-plane, so that it floats above its siblings. Making the press interaction mirror that of the long-press avoids what could otherwise be a jarring inconsistency in the UX.

A bit of material, mid-drag over its siblings

2

The thing is, once we're out of the world of strictly skeuomorphic design, all (most) bets are off. In flat design, buttons usually change color on press: that is contrary to what happens in real life. Or a hamburger button that slides out a menu from the side — that has no real-world analog that I know of.

I believe that what's most important in interactions is that the user understands that their action caused something to happen — they need feedback. It may prove that this particular interaction paradigm is too confusing to folks, but I think Google's bet is that throwing out the skeuomorphic script isn't that big of a deal. That this fun, different interaction on touch works just as well as a button press interaction.

2

The button is not actually raised on press but on hover, this signals the user that the area is clickable.

After the click action is performed, the button shines/blinks/waves, which is visual feedback that informs the user the action has been taken.

Remember Google identified two types of buttons also:

Flat buttons are printed on material. They do not lift, but fill with color on press.

Raised buttons behave like a piece of material resting on another sheet—they lift and fill with color on press.

This is text from the Google Material Design Guidelines, click on the link for more information.

  • 1
    Welcome to the site, @Stevie. The first sentence of your post says that the "button is not actually raised on press but on hover"; yet the final sentence of the quote you've included says that they "lift...on press." These appear to say opposite things. Please clarify. – Graham Herrli Nov 27 '15 at 6:51
  • Thank you, the issue with that last sentence is that it is a bit misleading, if you visit the link and look at the examples the actual behavior of the buttons is how I explained it. – Stevie De La Cruz Nov 27 '15 at 15:00
  • The Material Design spec makes it quite confusing on that point, they should consider to use another term instead of "pressed", but, I think you are right... If you look at the elevation diagram (google.com/design/spec/what-is-material/elevation-shadows.html, section "Component elevation comparisons") it's quite clear, "pressed and resting" elevations are at the same level while on hover, it goes up. Problem is that they say the opposite later, on the same page (google.com/design/spec/what-is-material/elevation-shadows.html, section "Component reference shadows")... – cedbeu Dec 23 '15 at 10:34
  • hum actually no, I was wrong... they also say the "pressed" state is higher than "rested" state on the diagram... So... dunno... Actually, I think when we hover on a button, it's raising, and when we click/press, elevation doesn't change, only color. That is why we end up with a confusing description "rested: 4dppx" and "pressed: 6dppx"... So do they forget to speak about the "hovering on button" step on purpose? – cedbeu Dec 23 '15 at 10:49

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.