24

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

Improve this question
3
  • 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.
    – Pedro Custódio
    Sep 23, 2016 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, 2017 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, 2018 at 16:59

5 Answers 5

Reset to default
31

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.

Improve this answer
7
  • 15
    This is a great answer--though it makes me really disagree with Google's decision on this.
    – DA01
    Jan 30, 2015 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, 2015 at 5:39
  • Really good explanation, makes a lot of sense. Thanks
    – General_Twyckenham
    Jan 30, 2015 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, 2016 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, 2018 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

Improve this answer
0
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.

Improve this answer
1
  • An automated drawer in a car (or disk drive of a cd player) works often like this, press it to let the drawer open. Press again and it closes.
    – paul23
    Jul 30, 2019 at 16:27
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.

Improve this answer
4
  • 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, 2015 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, 2015 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, 2015 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, 2015 at 10:49
-1

Serious answer: It is a bad design. No matter how many tried to justify and explain this decision, it's just that, plain and simple: bad design.

  • It is not obvious and confusing. You may say it even looks like a bug. Good design is obvious and intuitive.
  • It requires explanation. The best and only explanation is "piece of material resting" buried somewhere in documentation that you need to find and interpret. Good design does not require an explanation.
  • It looks like a result of "design by committee". The reasoning behind this decision buried too deep and cannot be found. Someone was too insistent on either going too far with "real world paper" concept or simply wanted to be different just to make a point. Can you imagine design-centric company like Apple releasing UI where button raises on press?
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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