5 ms·

I've always been confused by this type of animation: http://blogs.adobe.com/creativecloud/files/2016/10/blur07.gif http://blogs.adobe.com/creativecloud/files/20

by bbx 10y ago

I've always been confused by this type of animation: http://blogs.adobe.com/creativecloud/files/2016/10/blur07.gif http://blogs.adobe.com/creativecloud/files/2016/10/blur07.gi... The shadow grows, hinting at the fact that the element is elevated, and moves closer on the z-index. What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger as well? The right and bottom animations show the blue button as getting closer, but the end result on the left doesn't reflect that at all.

louhike 10y ago
I think it is inspired by industrial drawing/design where real perspective is not taken into account.
pvdebbe 10y ago
Oh yeah, it should. Would look rather nice as well. The size gain doesn't have to be more than couple percents, maybe 3-5?
Swizec 10y ago
Maybe it doesn't come closer enough for perspective to kick in? Why is it coming closer in the pressed state? Aren't I pushing it down?
- nnq 10y ago
  EXACTLY! "Material design" is very much opposed to how "real-world material interfaces" would look like in anything above the basics. Think about fucking ripple & light efects, but on otherwise solid-looking and matte-looking surfaces! I mostly label this whole "material design" crap as "flat & minimalistic (metro-like) design" + "minimal volumetric efdects backported from the abandoned skeumorphic design bandwagon" in order to give the user some "visual cues". In truly like the style and cues of material design practically... but there is a subconscious "uncanny valley intuition" about it that triggers a primitive warning sign in my primitive bran or something... kind of like "fear/stress about something that is practically the right thing but it... deceives you in a way and maybe also in others". I find both flat/minimalistic and rich/skeomorphic interfaces more soothing / calming / trust inducing. I think most banks and ecommerce and enterprise/infrastructure UI professionals also share this intuition with me: you see in most banking, AWS etc. UIs always "a touck of skomorphism" plus "a lack of unnatural/magical effects", and it makes you trust more the app, be more *relaxed and confident" and willing to open you soul & wallet to it...
  - moeffju 10y ago
    Yes, that's kinda the point. Touch screens are not like any other "material" interface we know. Read through the Material Design intro sometime - it's an interesting read regardless of whether you agree with their thinking.
  - sfifs 10y ago
    Which generation/age group would you belong to? Funnily enough, the opposite is true for me. Banks and eCom sites that don't have polished modern flattish interfaces make me think the company is out of its depth and likely insecure
- moeffju 10y ago
  It's not a physical button. In material design language, the button rises up towards your finger.
  - ethanbond 10y ago
    So it's a selectively applied metaphor aka arbitrary stylistic choices.
    - SippinLean 10y ago
      Are you aware that Material Design uses consistently applied metaphors and adheres to a style guide? That's the opposite of both of those.
      - ethanbond 10y ago
        "Consistently applied metaphors" except for where they don't want to be consistent. Copy/pasting from another comment of mine, quotes from the manifesto: > The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. "It's grounded in reality... but not!" > Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics. "Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing." > The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts. "Except where we decide we don't want to be realistic."
        SippinLean 10y ago
        It's grounded in reality, not bound by it. If you familiarize yourself with MD you'll realize the edge cases you tried to come up with have been covered and explained; it's not a contradiction.
- DonHopkins 10y ago
  Maybe the button is staying in the same place vertically, but you're pressing the entire background and all its other contents except the button away from you. :/
deleted 10y ago
[deleted]
cyxxon 10y ago
I guess that growing it would throw of the balance of the UI elements in the grid too much visually... /shrug What I find much worse is that the pressed state has a bigger shadow, meaning it is further away from the plane it casts the shadow on. Isn't that the wrong way around, or is the labeling wrong here?
- pluma 10y ago
  The shadow can be explained if you consider that it moves closer to the light source as well.
- moeffju 10y ago
  It's correct in the article, the intention being that the element rises towards your finger.
- on_and_off 10y ago
  well as long as it projects a shadow it is enough for you to know that it is a button. They can decide that the button raises when you touch it, since you are not touching it anyway, just the surface in top of it. So at least it is coherent with the material principles.
- deleted 10y ago
  [deleted]
amelius 10y ago
> What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger Depends. If they used parallel projection, then not. See [1]. This corresponds to an infinite focal length. [1] https://en.wikipedia.org/wiki/Parallel_projection https://en.wikipedia.org/wiki/Parallel_projection
- deleted 10y ago
  [deleted]
- vvanders 10y ago
  Yup, also traditional perspective is also incredibly non-linear so the distance from button -> back face is in the range where large perspective changes happen compared to where the virtual camera is. Also depends on what their lighting model is and a whole host of other factors.
teekert 10y ago
Now that you have mentioned it, the button seems to shrink when coming up. Stranger still is that nobody seems to find it strange that it comes up when pressed, sure there are such physical button but pressed should mean further down imo.
- onion2k 10y ago
  The button isn't a physical button though, so it doesn't have to behave like one. Sometimes you can make a better UI by ignoring reality - for example, in this case, bringing a button in to focus and apparently nearer to the user could make it much more obvious that it's the one you're about to press, rather than making it smaller and farther away.
  - SmooL 10y ago
    Sure, but isn't one of the goals of modern design to emulate the physical world for a more tactile feel? Googles material design has a whole section on how cards should behave so as not to break the rules of the physical world. It seems odd to strive for realism, but then break it somewhere because "it isn't a real button, so it doesnt have to feel like one"
deleted 10y ago
[deleted]
bluthru 10y ago
The only thing that animation suggests is that the white background is lowering and that's frustrating.

by bbx 10y ago

louhike 10y ago

I think it is inspired by industrial drawing/design where real perspective is not taken into account.

pvdebbe 10y ago

Oh yeah, it should. Would look rather nice as well. The size gain doesn't have to be more than couple percents, maybe 3-5?

Swizec 10y ago

Maybe it doesn't come closer enough for perspective to kick in? Why is it coming closer in the pressed state? Aren't I pushing it down?

nnq 10y ago
EXACTLY! "Material design" is very much opposed to how "real-world material interfaces" would look like in anything above the basics. Think about fucking ripple & light efects, but on otherwise solid-looking and matte-looking surfaces! I mostly label this whole "material design" crap as "flat & minimalistic (metro-like) design" + "minimal volumetric efdects backported from the abandoned skeumorphic design bandwagon" in order to give the user some "visual cues". In truly like the style and cues of material design practically... but there is a subconscious "uncanny valley intuition" about it that triggers a primitive warning sign in my primitive bran or something... kind of like "fear/stress about something that is practically the right thing but it... deceives you in a way and maybe also in others". I find both flat/minimalistic and rich/skeomorphic interfaces more soothing / calming / trust inducing. I think most banks and ecommerce and enterprise/infrastructure UI professionals also share this intuition with me: you see in most banking, AWS etc. UIs always "a touck of skomorphism" plus "a lack of unnatural/magical effects", and it makes you trust more the app, be more *relaxed and confident" and willing to open you soul & wallet to it...
- moeffju 10y ago
  Yes, that's kinda the point. Touch screens are not like any other "material" interface we know. Read through the Material Design intro sometime - it's an interesting read regardless of whether you agree with their thinking.
- sfifs 10y ago
  Which generation/age group would you belong to? Funnily enough, the opposite is true for me. Banks and eCom sites that don't have polished modern flattish interfaces make me think the company is out of its depth and likely insecure
moeffju 10y ago
It's not a physical button. In material design language, the button rises up towards your finger.
- ethanbond 10y ago
  So it's a selectively applied metaphor aka arbitrary stylistic choices.
  - SippinLean 10y ago
    Are you aware that Material Design uses consistently applied metaphors and adheres to a style guide? That's the opposite of both of those.
    - ethanbond 10y ago
      "Consistently applied metaphors" except for where they don't want to be consistent. Copy/pasting from another comment of mine, quotes from the manifesto: > The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. "It's grounded in reality... but not!" > Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics. "Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing." > The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts. "Except where we decide we don't want to be realistic."
      - SippinLean 10y ago
        It's grounded in reality, not bound by it. If you familiarize yourself with MD you'll realize the edge cases you tried to come up with have been covered and explained; it's not a contradiction.
DonHopkins 10y ago
Maybe the button is staying in the same place vertically, but you're pressing the entire background and all its other contents except the button away from you. :/

deleted 10y ago

[deleted]

cyxxon 10y ago

I guess that growing it would throw of the balance of the UI elements in the grid too much visually... /shrug What I find much worse is that the pressed state has a bigger shadow, meaning it is further away from the plane it casts the shadow on. Isn't that the wrong way around, or is the labeling wrong here?

pluma 10y ago
The shadow can be explained if you consider that it moves closer to the light source as well.
moeffju 10y ago
It's correct in the article, the intention being that the element rises towards your finger.
on_and_off 10y ago
well as long as it projects a shadow it is enough for you to know that it is a button. They can decide that the button raises when you touch it, since you are not touching it anyway, just the surface in top of it. So at least it is coherent with the material principles.
deleted 10y ago
[deleted]

amelius 10y ago

> What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger Depends. If they used parallel projection, then not. See [1]. This corresponds to an infinite focal length. [1] https://en.wikipedia.org/wiki/Parallel_projection https://en.wikipedia.org/wiki/Parallel_projection

deleted 10y ago
[deleted]
vvanders 10y ago
Yup, also traditional perspective is also incredibly non-linear so the distance from button -> back face is in the range where large perspective changes happen compared to where the virtual camera is. Also depends on what their lighting model is and a whole host of other factors.

teekert 10y ago

Now that you have mentioned it, the button seems to shrink when coming up. Stranger still is that nobody seems to find it strange that it comes up when pressed, sure there are such physical button but pressed should mean further down imo.

onion2k 10y ago
The button isn't a physical button though, so it doesn't have to behave like one. Sometimes you can make a better UI by ignoring reality - for example, in this case, bringing a button in to focus and apparently nearer to the user could make it much more obvious that it's the one you're about to press, rather than making it smaller and farther away.
- SmooL 10y ago
  Sure, but isn't one of the goals of modern design to emulate the physical world for a more tactile feel? Googles material design has a whole section on how cards should behave so as not to break the rules of the physical world. It seems odd to strive for realism, but then break it somewhere because "it isn't a real button, so it doesnt have to feel like one"

deleted 10y ago

[deleted]

bluthru 10y ago

The only thing that animation suggests is that the white background is lowering and that's frustrating.