4 ms·

Creating Usability with Motion: The UX in Motion Manifesto

84 points by tontonius 10y ago

awinter-py 10y ago
hmm -- the DOM time-complexity that comes from motion is not worth it in most cases. We have material design because google needed something delightful to combat IOS swipe physics, not because it's useful. Scrolling is useful. Every other kind of animation is painful to serious users. If anything, UI changes should blink for a second to show that they happened. This (and every other notification+delay) is a boon to novice users who don't yet know 'where to look' to get feedback about their change. All delays are annoying to experts who just want to get to the next screen and don't need a supercomputer in their pocket to send emails & read proquest.
- macandcheese 10y ago
  There are always places where animations can be useful, to users of any proficiency. Although the best ones, and the ones that work even for "serious users", are subtle and involve quick fades and the use of colors that refer to states (incorrect entry, success, etc.) rather than moving x/y position of DOM elements.
- lomereiter 10y ago
  There are lots of not so serious apps, however. Also on mobile devices there are no keyboard shortcuts, so swipes and time intervals between taps present very natural opportunities for animation.
- andrewfong 10y ago
  It'd be awesome if animation speed could be tied to some sort sort of global user setting -- e.g. how `em` and `rem` let web designers key font size to user preference. It's common in desktop OSes to let the user change things like the speed at which the mouse pointer moves or how fast a double-click is, with "experienced" users usually opting for faster settings and newer users starting with the slower speeds. Makes sense to do it for animations as well.
  - macandcheese 10y ago
    It'd be simple enough to have a few body classes (e.g. "animations-slow, animations-default, animations-fast"), and have it be a user-enabled setting somewhere that simply swaps those classes based on cookie. Similar to how some table-density padding / spacing options are constructed.
  - scottmf 10y ago
    *{transition-duration: 100ms}
- radley 10y ago
  I must disagree. Developers / data people want the fastest, most immediate response to data. But for the general population, animations bring content to life, making the experience fun and enchanting. The key is knowing how much and how little to apply. We're in a new age for UI animation, so there's much to figure out.
  - awinter-py 10y ago
    Content brings content to life. If someone emails me a poem I don't need gmail to do a dance. On the day I need a twitching paperclip at the bottom of my screen I won't be setting my time machine to 'future'. UI animations are like unskippable cutscenes in video games.
    - wsinks 10y ago
      That's the analogy! I really wish every single application had a 'turn off animations after I use this for X amount'. Or the OS level could have that. Ahhhhh. Zen.
  - panic 10y ago
    The point is not necessarily fun or enchantment -- animations can actually increase usability.
anotheryou 10y ago
Oh I want to work somewhere with enough budget for nice animations and custom icons everywhere...
gdubs 10y ago
I saw a talk a while back with Glen Keane – legendary Disney Animator – called "The Principles of UX Choreography". [1] It was fascinating. The Disney Principles of animation went beyond 'looks good', and existed to solve real problems – like helping the audience follow the action. 1: https://medium.freecodecamp.com/the-principles-of-ux-choreography-69c91c2cbc2a https://medium.freecodecamp.com/the-principles-of-ux-choreog...
- deleted 10y ago
  [deleted]
- jacobolus 10y ago
  Disney’s animation book (The Illusion of Life) is very nice, but the best animation source I’ve seen anywhere is The Animator’s Survival Kit. Unfortunately the excellent videos that go with the book are pretty expensive for someone who is vaguely curious (but not deciding to make animation their career) to stomach. I recommend trying to find a library with a copy, or similar.
KaiserPro 10y ago
Please please please remember, that for most people animations are not smooth. They are an annoyance and a barrier to using an interface at any speed. They can be useful for hiding transitions for things that are slow. However instead of engineering an animation stack, make the backend faster.... cough linkedin, salesforce, workday cough
- radley 10y ago
  That's simply not true. You're talking about "intrusive animation" which is the byproduct of poor design and/or implementation. As an extreme example of UI animation, here's Persona 5: https://youtu.be/XniK5Q5amoA?t=2m44s https://youtu.be/XniK5Q5amoA?t=2m44s
  - Stanleyc23 10y ago
    I think you may have missed their point. >for most people animations are not smooth I don't know about most, but it's definitely true that there are processing limits inherent to user's hardware that make certain animations run very clunky, thereby turning a perfectly good animation into an 'intrusive animation'. Because we often have no control over the user's hardware we have 2 options, stay conservative and optimize things that improve the UX for everyone or ignore the possibility that certain users will have a bad experience and push forward with such animations. Unfortunately, many product owners tend to build for only the 'happy path' scenario and choose the latter.
  - KaiserPro 10y ago
    Depends on your perspective. Intrusive Animation is still animation. (Not that its entirely related, but I've worked on a number of feature animation films ) OSX is considered to have good animation flow, but its still too slow. Any animation that is inserted between fast moving actions is an obstacle. then you consider that animation is CPU/GPU heavy, so will chug on anything less that tiptop hardware. Unless there is a definite need, it really should be used sparingly
seanmcdirmid 10y ago
There is always this classic UIST 93 paper: http://www.cs.uml.edu/~grinstei/91.510/Papers/p45-chang.pdf http://www.cs.uml.edu/~grinstei/91.510/Papers/p45-chang.pdf (Animation: From Cartoons to the User Interface)
ex3ndr 10y ago
Before building animations learn how to implement them to work smooth. Hint: It is not possible anywhere except iOS native apps. Even google doesn't have all animations from their material guides on Android, web is a nightmare. Also adding complex animations require pretty high budget. Create fancy counter takes 1 hour, make it with animation - couple of days of testing and adjusting timings.
jack1243star 10y ago
Many problems addressed won't exist in the first place, had the UI world not chase after those flat designs. Static UI elements work as great, without the need for enhancement using non-realtime animations, which will be inconsistent between platforms.

84 points by tontonius 10y ago

hmm -- the DOM time-complexity that comes from motion is not worth it in most cases. We have material design because google needed something delightful to combat IOS swipe physics, not because it's useful. Scrolling is useful. Every other kind of animation is painful to serious users. If anything, UI changes should blink for a second to show that they happened. This (and every other notification+delay) is a boon to novice users who don't yet know 'where to look' to get feedback about their change. All delays are annoying to experts who just want to get to the next screen and don't need a supercomputer in their pocket to send emails & read proquest.

macandcheese 10y ago
There are always places where animations can be useful, to users of any proficiency. Although the best ones, and the ones that work even for "serious users", are subtle and involve quick fades and the use of colors that refer to states (incorrect entry, success, etc.) rather than moving x/y position of DOM elements.
lomereiter 10y ago
There are lots of not so serious apps, however. Also on mobile devices there are no keyboard shortcuts, so swipes and time intervals between taps present very natural opportunities for animation.
andrewfong 10y ago
It'd be awesome if animation speed could be tied to some sort sort of global user setting -- e.g. how `em` and `rem` let web designers key font size to user preference. It's common in desktop OSes to let the user change things like the speed at which the mouse pointer moves or how fast a double-click is, with "experienced" users usually opting for faster settings and newer users starting with the slower speeds. Makes sense to do it for animations as well.
- macandcheese 10y ago
  It'd be simple enough to have a few body classes (e.g. "animations-slow, animations-default, animations-fast"), and have it be a user-enabled setting somewhere that simply swaps those classes based on cookie. Similar to how some table-density padding / spacing options are constructed.
- scottmf 10y ago
  *{transition-duration: 100ms}
radley 10y ago
I must disagree. Developers / data people want the fastest, most immediate response to data. But for the general population, animations bring content to life, making the experience fun and enchanting. The key is knowing how much and how little to apply. We're in a new age for UI animation, so there's much to figure out.
- awinter-py 10y ago
  Content brings content to life. If someone emails me a poem I don't need gmail to do a dance. On the day I need a twitching paperclip at the bottom of my screen I won't be setting my time machine to 'future'. UI animations are like unskippable cutscenes in video games.
  - wsinks 10y ago
    That's the analogy! I really wish every single application had a 'turn off animations after I use this for X amount'. Or the OS level could have that. Ahhhhh. Zen.
- panic 10y ago
  The point is not necessarily fun or enchantment -- animations can actually increase usability.

anotheryou 10y ago

Oh I want to work somewhere with enough budget for nice animations and custom icons everywhere...

gdubs 10y ago

I saw a talk a while back with Glen Keane – legendary Disney Animator – called "The Principles of UX Choreography". [1] It was fascinating. The Disney Principles of animation went beyond 'looks good', and existed to solve real problems – like helping the audience follow the action. 1: https://medium.freecodecamp.com/the-principles-of-ux-choreography-69c91c2cbc2a https://medium.freecodecamp.com/the-principles-of-ux-choreog...

deleted 10y ago
[deleted]
jacobolus 10y ago
Disney’s animation book (The Illusion of Life) is very nice, but the best animation source I’ve seen anywhere is The Animator’s Survival Kit. Unfortunately the excellent videos that go with the book are pretty expensive for someone who is vaguely curious (but not deciding to make animation their career) to stomach. I recommend trying to find a library with a copy, or similar.

KaiserPro 10y ago

Please please please remember, that for most people animations are not smooth. They are an annoyance and a barrier to using an interface at any speed. They can be useful for hiding transitions for things that are slow. However instead of engineering an animation stack, make the backend faster.... cough linkedin, salesforce, workday cough

radley 10y ago
That's simply not true. You're talking about "intrusive animation" which is the byproduct of poor design and/or implementation. As an extreme example of UI animation, here's Persona 5: https://youtu.be/XniK5Q5amoA?t=2m44s https://youtu.be/XniK5Q5amoA?t=2m44s
- Stanleyc23 10y ago
  I think you may have missed their point. >for most people animations are not smooth I don't know about most, but it's definitely true that there are processing limits inherent to user's hardware that make certain animations run very clunky, thereby turning a perfectly good animation into an 'intrusive animation'. Because we often have no control over the user's hardware we have 2 options, stay conservative and optimize things that improve the UX for everyone or ignore the possibility that certain users will have a bad experience and push forward with such animations. Unfortunately, many product owners tend to build for only the 'happy path' scenario and choose the latter.
- KaiserPro 10y ago
  Depends on your perspective. Intrusive Animation is still animation. (Not that its entirely related, but I've worked on a number of feature animation films ) OSX is considered to have good animation flow, but its still too slow. Any animation that is inserted between fast moving actions is an obstacle. then you consider that animation is CPU/GPU heavy, so will chug on anything less that tiptop hardware. Unless there is a definite need, it really should be used sparingly

seanmcdirmid 10y ago

There is always this classic UIST 93 paper: http://www.cs.uml.edu/~grinstei/91.510/Papers/p45-chang.pdf http://www.cs.uml.edu/~grinstei/91.510/Papers/p45-chang.pdf (Animation: From Cartoons to the User Interface)

ex3ndr 10y ago

Before building animations learn how to implement them to work smooth. Hint: It is not possible anywhere except iOS native apps. Even google doesn't have all animations from their material guides on Android, web is a nightmare. Also adding complex animations require pretty high budget. Create fancy counter takes 1 hour, make it with animation - couple of days of testing and adjusting timings.

jack1243star 10y ago

Many problems addressed won't exist in the first place, had the UI world not chase after those flat designs. Static UI elements work as great, without the need for enhancement using non-realtime animations, which will be inconsistent between platforms.