Creating Usability with Motion: The UX in Motion Manifesto | Hacker News Reader

Creating Usability with Motion: The UX in Motion Manifesto

medium.com

84 pointstontonius20 comments

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-choreog...

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.

There is always this classic UIST 93 paper:

http://www.cs.uml.edu/~grinstei/91.510/Papers/p45-chang.pdf

(Animation: From Cartoons to the User Interface)

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.

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

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

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

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.

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

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.

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.

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.

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.

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.

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.

*{transition-duration: 100ms}

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.

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.

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.

The point is not necessarily fun or enchantment -- animations can actually increase usability.

Reply on news.ycombinator.com