2

Since Material Design came to the surface, we "learned" to design according to 3D planes based on the sheets metaphor. This replaced flat design, which in turn replaced skeuomorphic design.

In this last type of design, we (I mean the old designers like me) used a resource that clearly resembled a pressed button: inner shadow to imply pressed buttons.

enter image description here

Now, I believe this "trick" conveys a pressed button much more effectively than anything Material Design has ever achieved. Furthermore, the use of the "raised" button as a metaphor for pressed remains a highly controversial approach. The relation between pressed (active) buttons and reality requires almost no translation. As a matter of fact, it's almost a literal translation of users' mental models for a pressed button. And this model still fitted in Material Design's 3D-ish guidelines. Only that instead of having the sheet at level 0, we'd have a level -1.

So the question is: was there a reason not to use this approach? I think that a possible reason is that it would apply to only one item. So adding negative elevation for just one item could make things inconsistent. But maybe there was another reason.

Anyway, aside from Material Design's decision, was there any study that made this type of negative elevation elements be swept from all UI systems in the last 10-15 years?

3
  • 1
    I'll look for official info, but I seem to remember problems with elevated buttons "jumping" a few pixels when they became sunken. The label would shift, and that was considered problematic. There might be accessibility concerns.
    – Izquierdo
    Commented Jul 31, 2023 at 20:22
  • 1
    Possibly, there can be several points of view - psychology- and tecnology-based. First is based on the perception of "pressed button" ('mental model'), and second - on reflecting the image of button the actual state of the controlled system (I suppose, there are some delays between re-drawing the images and changing the behaviour of device) ..... Sorry, it was just basic thoughts
    – Tom Newton
    Commented Aug 1, 2023 at 9:43
  • 1
    The 3rd P[oint]O[f]V[iew] can be historical (or evolutional), based on @Devin's =..swept from all UI systems in the last 10-15 years= ( I am not a designer, but last time more and more, tends to this speciality )
    – Tom Newton
    Commented Aug 1, 2023 at 10:01

1 Answer 1

1

My first thought was that it could be something to do with accessibility, in the sense that if you apply the design philosophy and existing components, the effect of introducing the inner shadow would not be as easy to perceive as other ways of indicating a pressed state.

But if you think about whether it makes more sense for Material Design to keep what it has compared to introducing a variation like this, I imagine that the actual amount of overhead that will be introduced to the rest of the design system would be more than worth the effort.

Reading this post about the design variations you can apply to create the pressed state on a toggle button, there is no reason why you can't introduce enough visual contrast to make it accessible. However, I don't think many of those visual elements are consistent with Material Design's simpler and flatter designs.

Also, I think the negative elevations concept or analogy probably breaks the physical metaphor of pieces of paper that stack, which it extends into the digital sense.

Your Answer

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

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