There is a terrible trend among designers to start doing motion design for mobile apps way too early.
Before even the app's purpose is properly conceptualized, someone digs up one of those great new animation-oriented prototyping tools and starts making flipping buttons and sliding blocks like the ones shown in the original post. "This is going to be our app's unique personality!"
That effort can end up being misspent and misleading if it's done before proper prototyping. Having ultra-polished animations in mockups will guide development towards implementing those rather than asking questions about what users might want to do.
The article refers to Facebook's Paper app:
"Can you imagine Facebook designers presenting their iOS Paper app as a static layout? It would look pretty lame."
Ironically, Paper has been discontinued and the Facebook Creative Labs group that created it has been disbanded. Turns out that awesome animations didn't give the app a purpose of its own.
This is what I was thinking. Fluid UI is a nice-to-have. Sure it has value, but unless the UI is the product, the core functionality is always going to be a higher priority. That said, good UX is not something that can simply be bolted on after those core functions are tweaked. The application flow should be part of the early designs, with the intention to add the UX perfections in a subsequent iteration. The hard part is deciding when it is good enough for release.
Paper probably was discounted due to some business reasons - but it still was (and probably is) the best app created for iOS, in my opinion. Animations smoothness was just gorgeous and also really pleasant and intuitive to use.
Design is how it works, any designer working on motion design early in the lifecycle of a new product, to the detriment of focus on say, utility aren't designing. They're playing.
All interfaces already have motion without needing animations. If I click "minimize" and something disappears, then it obviously minimized. I don't need a timewasting animation telling me that.
I used to think this but now I honestly think that "pleasing" animations (fades, transitions) improve my mood. Also, sometimes the buttons are not very descriptive (like 3 different colored dots) so the animation can be helpful by showing you what happened with an animation.
Actually, I think you do. Maybe the app crashed without saving your data. Maybe you hit a button or pressed a key by accident without realizing what it did, and now all your precious work seems to be gone and you don’t know where it went or why.
Not all feedback is automatically bad.
The trick is to get rid of animations that force the user to wait for them (e.g. most “opening” animations are in this category; I do not want to wait for something to finish sliding open before I can use it, I want items to appear instantly).
In that case the correct solution is fixing the app so it doesn't crash, and fixing the input device so it doesn't generate spurious inputs. The Unix style of silence on success is the best feedback, because it means I can mentally queue multiple actions without being interrupted.
If it's an unfamiliar system, it may not be clear where it has been minimized. I can spare 0.2 seconds in exchange for a quick reminder of how to "unminimize" it.
It's only an unfamiliar system once. I'll accept animations as a tutorial mode if they can be turned off when they're no longer useful. I won't accept an additional 200ms of unnecessary latency every time. That's more that enough to feel like an interruption, so the harm as far more than the cumulative time wasted.
I always turn off as many OS-level and app animations I can. I hate the unnecessary delay and overall feeling of slowness that having to sit through animations creates. Even in games I often wish for a speed-mode that would reduce or remove all but the most necessary animations (especially in older games).
I come from a KDE background, but I find a noticable difference in user engagement when window resizing / minimizing / creation is not animated. The default animation moves minimized windows to its spot on the taskbar / dock, which gives a lot of useful context to users who would otherwise get lost.
That's just how the design industry is. You could say the same thing for almost all forms of design:
There is a terrible trend among designers to start doing visual design too early.
There is a terrible trend among designers to start doing typography too early.
There is a terrible trend among designers to start doing UI design too early.
The cold truth that designers don't want to admit is that most companies never even reach the stage where graphic design matters. It is almost entirely done to appease the fetishes of early adopters. Look at Craigslist. Look at Amazon. Look at Flappy Bird.
The thing is, the kind of design companies actually need: which is Capital D, integrated, cross-disclipline Design, most professional designers don't actually know how to do. They know how to push words and pictures around around in an image file. They know how to conduct a brainstorming session. If you're lucky they know how to do usability testing. And if you're really lucky they know how to think like a user. But they don't know how to move in a principled way through all of the domains of production at their company and articulate a vision for how design practices can be dispatched to advance their goals.
And the subset of designers who do know how to do that, are generally so disenfranchised within their organization that they are fought every step of the way until they give in and just make pretty mockups because that's what their coworkers want.
We tried that once with CSS. If that would have worked we wouldn't have seen so many articles about how to (ab)use it in better ways. Again, this stuff consumes too much time and effort.
Motion can be incredibly useful if it's used appropriately.
The vast majority of examples are not used appropriately adding distraction, or worse, they slow down actions. It's all over the place, cute or "helpful" animations or displays that just get in the way of using the damn thing. Home electronics that have "welcome" and "bye" messages delaying the on or off are in the same pointlessly annoying category.
To use his first example, if you use an animation for deleting a record, is it going to significantly slow down deleting? What about a number of records you want to delete?
Personally I'd stop using an app that decided to animate passwords like that. It's gratuitously distracting.
"we could even ditch the text completely, relying on our animations to provide user feedback"
Oh ffs no. So we have to guess what the bounce, shake, or dancing emoji is trying to tell us in place of "nothing selected"?
As someone who struggles with these people every day I would prefer it die with fire. UX (the abstract concept you are giving the user) and UI (the implementation) are there to make the user be able to get out of the application what they need. Spending ridiculous energy on stuff which does nothing to help the user along is a waste of effort. It's no different than worry more about the "look & feel" (using the old term) than building something that is understandable and adaptable to different experiences and abilities of users. There is nothing wrong with making it look pretty or even using motion to point a user in the right direction but like everything these days it becomes an end unto itself and just makes development take even longer and cost even more.
I get the feeling that UX/UI designers are doing this stuff to stand out from each other. No point in using the existing stuff that already works if it doesn't have your name on it right?
The more cynical among us would say that you're exactly right. Many designers have big egos, religious perspectives on what designs are "right" or "clean," and suffer from extreme cases of NIH syndrome. These types of articles are resume portfolios for many of them.
Next Steps
Ready to learn how to create these beautiful animations? Check out my blog and Motion Design course at The Kinetic UI.
It's not all that different from the endless stream of programming articles that promote a particular approach as the one true solution, when the writer happens to be a consultant in that specific approach.
"Awesome Agile Angular solves all your front-end woes! -- Sign up for my mailing list, buy my e-book, take my 3-day course, come see me talk at the TimeWaste 2016 conference."
Personally I prefer wxwindows, which doesn't need upgrading because it just works, but people keep telling me to use qt (which requires a commercial license) and to keep upgrading it too. So dunno who is right.
Wow I'm surprised that many of the comments here are negative.
Despite what you may feel, animation and UI/UX are extremely important, and the suggestions in the article are not the "overdoing" that many of the comments here are complaining about.
Motion is a great tool to hide latency, give some spacial awareness, and can be an additional tool to give quick feedback on an action.
I've personally found its one of the major reasons the "average" person chooses software.
Edit: per my last line, "its" is referring to UI/UX design in general.
And there's your answer. The average HN user and the average person are very far apart.
I personally love animation as part of good design, but I know plenty of people that don't care. Even non-tech people I know say things like 'I don't care how it looks, I just want it to work'. Which is a ridiculous sentiment, not because things need to be aesthetically pleasing to work well, but because aesthetically pleasing designs and good usability lead to you wanting to use an app more. It's not just vanity, it actually makes a difference to how you interact with software.
I think there is also space in the middle for valid critique of gratuitous motion design. Hiding latenecy with a cute animation is fun the first time you do it. By the 100th time, it's usually just slow.
I regularly out-pace guis. For example, the simple task of using google maps to go to work in the morning. This task is visually spread out with time-slowing animations that require constant active participation. It is like 5 taps made excrutiatingly long by the fact that my car is parked just far enough away from my home that wifi cuts out and the phone has to aquire 4g. Compare to Waze (also owned by Google) one tap, swipe and dialogs auto continue without needing to be "fed".
I love animation and motion graphics, but I've seen many motion devs fall into the trap of "oh this is so cool, but they won't see it unless I make it a bit longer" -- and unfortunately most of the JS animation frameworks do not encourage async interaction, so interaction phases are often held hostage to the animation cycles.
In these cases, I think motion design is rightly considered wasteful and not delightful.
Your statement, 'I don't care how it looks, I just want it to work', versus your argument against it, 'aesthetically pleasing designs and good usability lead to you wanting to use an app more' are perhaps misaligned.
Usability is not supposed to be aesthetically pleasing, it can be but it is not supposed to be. It's supposed to be usable.
If something is more usable by removing a microsecond delay, then it may not look as nice but it is more usable. I would prefer more usable to nicer looking.
Design is absolutely not just vanity, but artificial delays absolutely do hinder usability to increase the vanity. It may not "feel" as nice, but it is objectively better to use.
The Android Chrome browser is a great example. Swiping stuff around, amazing, smooth and great animations. The animations take only as long as it takes for me to use them. But when I click the button to show me more tabs, it takes a moment to swoop out, then I click and it takes a moment to swoop back in. Great, spatial awareness is introduced and it felt nice, neat.
But now I have 5 tabs open and I am trying to flip between them without losing my train of thought and all those delays add up, it is now no longer as nice to use because I feel like I am ahead of my device because it's slow, when it's really just the artificial delays.
You can still move up to the tab overview screen, it still gives spatial context, but the animation is not needed, and can be removed for better usability.
I also feel like good animations can still exist without delay in many contexts (not all). Complete the users action instantly, show them the results instantly, but in some contexts there is room to fade out auxiliary information out more slowly.
Moving up to the tab overview is a good example. The tabs can be shown instantly, and just a ghost of the previous screen could fade out behind it.
UI/UX is extremely important, but it should be remembered that it has its origins in usability and ergonomics. Does it make sense, is it intuitive, is it productive etc? Even removing features or interface elements if they're found to be confusing or unproductive. You're trying to help the user know where they need to go, or what they should do, at each step.
Animation on the other hand, is rarely important, but if used carefully can provide feedback that's difficult to achieve without. Hiding latency is another useful example. Effects on select or buttons fading in etc almost never adds anything helpful.
Trouble is UI/UX and animation is often becoming more about looking cute or professional than actually being productive or ergonomic. It's not a gain if it takes .5s longer to select each item, or takes two extra clicks. Code it to be snappy and professional (or cute, depending on app), then add animation if it's helpful at a sticking, latency or confusion point. That's very different to baking motion design into everything from the beginning, where it risks becoming style over substance.
Not to say I don't care about how things look, I do. The way it looks should be helping with what it does, not detracting from it.
Which is exactly what I am advocating. Animation is a very useful tool to improve good designs, and it can become a problem if abused just like anything else.
Despite what you may feel, animation and UI/UX are extremely important
I disagree. Well-conceived and well-executed animations can be a nice incremental refinement on top of an already good UI. However, they won't compensate for poor static elements like a bad layout or naff icons or illegible typography. In turn, no amount of beautiful UI whether animated or not will compensate for awkward interactions or a flawed conceptual model.
Motion is a great tool to hide latency
You know what's also great for hiding latency? Designing your system properly so it doesn't have noticeable latency in the first place, which is a viable alternative in the overwhelming majority of cases I've seen advocating this sort of animation-as-band-aid.
give some spacial awareness
You know what's also great for giving spacial awareness? A UI layout where the space is used logically in the first place and different areas of significance are clearly presented. Step 1: Don't dumb everything down to nothing but flat colour boxes and line art, thus giving up a whole array of other useful visual tools and creating a whole set of problems you didn't otherwise have.
can be an additional tool to give quick feedback on an action
True enough, but the key word there is "additional". Animating in response to every user interaction looks cute in demos for trivial gimmick apps, but gets old very quickly if you're using serious software for extended periods with numerous interactions per minute. There's also a frequent irony that those trivial gimmick apps tend to run on mobile devices with touchscreens, so all those clever button animations are right under the user's finger where they can't be seen anyway.
I've personally found its one of the major reasons the "average" person chooses software.
Really? I've never seen much evidence to suggest that in all my years doing UI design work. Much of the time, the user won't even have seen most of the animations before making a decision about whether to use the software or not. They're a nice incremental refinement, helping to reinforce an already well-designed and well-presented UI, but a major reason for choosing software? That seems highly unlikely.
You seem to be implying that I'm advocating you should give up working on a good UI in favor of animations, which I'm saying the opposite.
Animations are a tool, and should be applied carefully just like any other.
I chose my words carefully and I stand behind them. Animation is important, and it can be a great additional tool to improve usability of an application. It's not the only tool, but an additional one.
About my last line, I was talking about design and UI/UX in general, probably should have been more clear about that...
Animation is not 'extremely' important and never has been or how would we have survived all these years?
When done badly, modern motion animations are often distracting, annoying or so alien you wonder what just happened and if you just did something wrong but can't tell without doing the action again.
When done well, the only people who notice them are other designers, so are they really worth much?
"Animation is not 'extremely' important and never has been or how would we have survived all these years?"
Animation definitely has an important role to play in interface design and it's been used in applications for decades. For example, this video snippet of Mac OS 7 (released in 1991 - over 25 years ago) shows the animation that occurs when a new finder window opens.
Can you imagine minimizing and maximizing windows without some subtle effect to show the window shrinking or expanding? Without animation, the transition would feel clunky and abrupt.
Animation can be overdone of course (even for minimising a window). And that's the real problem with animation in UI design: when it's used purely for decorative puposes or if it slows you down, it quickly becomes irritating.
Previously, animations were subtle and focused on individual actions (and limited by what the hardware was capable of). Today, animations are smoother, faster but also longer (hence the term "Motion UI") and actions are conveyed with multiple, simultaneous animations. It means that sometimes the UI can feel too busy and overdone with movement.
But maybe it's also a generational thing? Taste and fashion change and perhaps users today aren't fazed or distracted by fast motion graphics?
> Can you imagine minimizing and maximizing windows without some subtle effect to show the window shrinking or expanding?
Easily. I work mostly on Linux, and have turned off all animations. The first time I tried Windows 10, everything felt as slow as molasses. When I turned off animations, I was stunned by how fast Windows 10 was. Opening small apps (terminal, basic editor, etc.) on Linux seemed instantaneous, until I spent some time on Windows 10. Now, Linux seems noticeably slow.
> Without animation, the transition would feel clunky and abrupt.
I tried it out a few times now. It was abrupt, but not clunky. I like it this way.
A lot of OS animation is async, hence doesn't detract from speed and usability in the slightest. Obvious exception for the OS X full screen animation, which is cute twice, then you google how to make it stop. I'd like fullscreen now, not in 2 seconds thanks.
How do the animations hold up when the machine is being hammered and running heavy CPU and GPU loads? (Or normal use when a user has filled it with malware) Windows holds up far less well than OSX in this regard, but does much better than it used to back in XP days where you could watch it paint the UI piece by painful piece often under surprisingly little load. In that case any animating is not helping anyone. Wireframing minimize/maximize etc mght have been more useful.
Much more phone app animation appears to be synchronous, blocking, so the pretty animation is making the app slower. Every time. It appears often to be there as gloss. That's fine the first day when you don't know the way around, beyond that it's just slowing everyone up.
> But maybe it's also a generational thing? Taste and fashion change and perhaps users today aren't fazed or distracted by fast motion graphics?
LOL please. It's not that I am fazed and distracted by fast motion graphics, it's when it's done badly. I'd hardly call material design fast motion graphics either. MD when done right can be excellent. There's some great material design apps on my phone. I do think they went too far with the current flatten all the things cargo cult, but that's my preference. At least they didnt go as far as W10.
Let's take an example of a delete as given in the OP. We'll ignore the asking "are you sure", OK? :) Can I tap my thumb as fast as I can three times and delete 3 records? Or will I have to wait for it to catch up because of the needless cute collapsing animation? Did you actually delete 3, or just 2 because the middle tap was lost during animation play? That's just bad design for any generation, no?
Make a fast app without need for latency animations, and give me animations that are async so if I've become expert within your app I never see them because my taps cancel them. Give me a latency anim just when the network connection is rubbish, and only as long as it's needed. Now test your cute anims on an older phone, or a phone with something greedy running in background, or latency with a horrible or intemittent net connection...
I LIKE fast motion graphics in games, where they're often not fast enough, and movies :p
I'm not a native developer but are there power considerations for these animations? If you're using what the OS gives you then I imagine it's been highly optimized. If not you're creating your own animations which require the device to work harder to achieve 60 FPS.
I'm not really up to date on Android here, but iOS uses a scene graph that lets you do a lot of things with great performance as long as you keep in mind some basic guidelines.
> If a password is entered, a simple ‘nod’ animation can be
introduced upon completion. Whereas a horizontal shake can be used when denying a password.
The NeXT used to do that on the login screen. It got huge applause at the premiere I saw in 1988.
> Any way you can avoid showing a loading status will make your app appear much faster.
The animation is now the loading status. The animation isn't making the user think the app is faster, it's just taking the place of a different animation that would show the asset is loading.
I do appreciate showing that loading status so I don't have to try to figure out what my phone is doing by looking for the spinner at the status line at the top of the screen, but don't change the size of the button and distract me from the content.
> The animation isn't making the user think the app is faster...
I disagree. The right hand animation, sure, but if I saw the middle animation, I don't think I'd register the latency at all. In fact I think I might misinterpret and get irritated that my time was being wasted with an unnecessary animation.
Not necessarily better, but I would have been distracted from the load time.
OS X has the same shake animation on failed login.
It's horrendous because there is a non deterministic delay before it shows. If I glance away from the screen and miss the animation I have no idea that the login has failed.
It also doesn't differentiate between different failure modes. I've had my company's active directory stop working, but I don't know this because the feedback is exactly the same as if I'd mistyped my complex password.
As a rule: a failed login is the wrong time to try and delight me with a beautiful UI.
It's like the flat / 3D shaded / flat / 3D shaded trends over the last 20 years. Bouncy animations, instant pop-in, whichever is in vogue right now, after a while it'll switch back to the other one.
Power Saver feature of android (or maybe just the Cyanogenmod flavor of it) disables all animation which is based on the android UI framework and besides making everything faster (and apparently less power hungry), it could also change the way a user uses an app or bypass restrictions that the app developer relies on to limit user activity (e.g. like/dislike on a series of items).
Don't use Power Saver for this. The mode affects many things pretty pervasively. Instead, under Settings->Developer Options, you'll find three settings related to animations. I keep them all turned off.
Of course, this is the first thing I do no matter what UI I'm using.
Dear UI/UX designers, I don't care what you do with these animations as long as you let me turn it off completely (via the OS, if necessary). Just don't force animations on users.
Not sure if that still happens now, but turning "Animator duration scale" off used to affect auto-scrolling in Hangouts. Might want to check that if you get any weird issues.
I don't use Hangouts, so I'll never know. But I'll keep your comment in mind for other software. Google doesn't help matters by being so terribly slow to act on bug reports.
I always assumed the animations were to mask existing delays. But wow, that iPhone is so fast and instant without them! Delays frustrate me when using a phone. I hope this fashion of artificial delays doesn't last!
It reminds me of old tape decks with the "soft" eject button. You'd be yanking the door because it opened so slowly.
It goes slow enough that it's a disappointment and a violation of the principle of least astonishment that you can't actually use the window while it's slinking away.
Steve Jobs used it in his original MacWorld SF 2000 OS/X demo, and it's been there ever since!
"I can slow this down. We built in a special slow-mo mode for the demo today. Look at this. Isn't that cool? It's just, it's just magical. And it shows you exactly where they go. Again, it's that thing, we call it the Genie Effect, that the sheets use when they come out. And, um, I can just play with it all day long actually."
For whatever is worth, animated UI has been a thing in window managers forever, and I've never had a good experience with it. If it was named "Forced latency" design it wouldn't be so sexy.
Window managers do offer a few genuinely useful applications for animation, though. For example, they often have functionality that hides part of the display, and clicking on some corresponding icon or text then restores it. A quick animation showing a just-hidden item shrinking down to wherever the user needs to go to find it again later does provide useful information in a transparent way, and is unlikely to interfere with or slow down whatever the user wants to do next.
Not necessarily. If you've got a whole row of icons across the top/bottom of your screen representing running or available programs, for example, the quick animation showing where the window you just minimized went to saves you hunting right across your screen if you want to restore that window again.
The better solution is for the icon representing the active window to be highlighted. Then you can look at the icons before you minimize if you want to be reminded. You shouldn't need to do this often, because the positions of the icons should be consistent and easy to remember.
Ironically enough, Microsoft seems to be making the icon highlighting (taskbar buttons, really) fainter with each new Windows version, to the point where the only indication in Windows 10 is a small brightness increase..
7/8's default theme aren't that much better; can you tell which of these are active?
User interfaces should always be able to lead, follow, or get out of the way.
Animation should never delay interaction, and it should never interfere with gestures and mouse-ahead (or whatever the input device is).
The user should never have to wait for animation to finish before they're able to do something, and the interface should never be disabled during animation, or ever ignore the user's input under any circumstances.
User input should always pre-empt and interrupt feedback and animation.
The interface should always support quick gestures (mousing ahead, touching ahead, or whatever), without ever requiring the user to pause and wait, or focus their attention on the screen to watch the animation play out before they know it's safe to make the next move.
I developed a gestural pie menu tabbed window manager for the NeWS window system in 1990, which supported mousing ahead, suppressing the pie menu display and pop-up animation until you stopped moving, showing light weight feedback on the overlay plane, and executing commands instantly without any animation or even popping up the menu, when you make a smooth quick gesture without hesitating.
Now you can press the right button to pop up a pie menu on the tab or on the frame itself. And that has commonly used commands like front and back in mnemonic directions. Back is down, and front is up.
When you make a menu selection by mousing ahead, it doesn't display the menu.
As long as you're moving, it suppresses the menu display.
And it gives you feedback on the overlay plane of the slice that you're in, and the label of that slice, so you can actually see what you're going to get before you choose it without even seeing the menu itself.
And when you wait, it pops up the menu once you stop moving.
So if you waste some time by just waiting around, it will waste a bit more time by giving you some stupid animation.
And this is meant to be negative reinforcement, to encourage you to mouse ahead.
The sub-menu pops up. This is "move to" which is unconstrained move.
You can always get that from the tab by mousing left and right.
That's an easy gesture. Just quickly...
Or mouse there and wait. There it is. It pops up the one you're at first.
This is constrained horizontal move.
And this is constrained vertical move.
So constrained horizontal... We'll wait.
Constrained vertical...
So, I mean, once you're there, and you know what you want, why wait?
This is "beam me up": put it in the next layout position. To tidy the windows.
So, if you've clicked the menu up and haven't moved, it will just spin it, because it's confused, and doesn't know what you're going to do.
----
In other words: As it pops up and scales up the round menu, it also tilts it along the axis perpendicular to the direction of movement to reinforce the selected direction, or spins around the center if you haven't moved to show no direction is selected.
And you only ever see any animation if you actually stop moving -- once you make a selection, the command always executes or the submenu always activates immediately.
You can mouse ahead smoothly through multiple levels of sub-menus, without popping any of them up or seeing any animation, as long as you never hesitate.
By "lead, follow, or get out of the way", I mean that pie menus can lead novice users by giving them feedback and animation when they pause, follow intermediate users who move in the right direction then pause for the feedback to make sure they got it right, and get out of the way of expert users who know the right direction and can quickly articulate gestures without pausing or waiting for feedback.
----
Here's another demo showing pie menus, mouse ahead gestur...
The other thing that came out of that Self research was the Java HotSpot JIT compiler, which led to V8 and other JavaScript VMs. And here we are again!
"Thinking about music is like dancing about architecture" The two are entirely separate modes of thought, like oil and water one might say. Any attempt to mix art and logic at a superficial level is futile. You need far deeper thinking than "Motion Design is the Future" to understand how to mix the two properly.
What I don't understand is how "motion design", or any UI design philosophy for that matter, must imply a certain fixed visual style.
Take android for example. I loved the clean and understated look of Holo. I hate the inconsistent light pastel whitespaced mess that is material design. However I'm forced to have it if I buy a <2 year old phone and what the latest security updates. Why couldn't I get the holo theme to choose from? The UI elements are the same; point is there isn't any reason to tie it to the visual design and impose a specific style.
The future or the past?... motion design for UIs started in the 80s/90s and gained traction in the web during the early 2000s with Flash/AS2/AS3... Denying this is knowing nothing about the history of UI design.
Browse the FWA for proof of cool UI animations starting in the year 2000 [0].
I'd say we're having a rediscovery (specially in the web) now that HTML5/JS/CSS3 allows fluid transitions and transforms.
Just imagine what we could have done if we didn't have to do everything in JavaScript, in web browsers... If we could write actual real rich-clients...
Motion design almost always makes things worse. Latency is cumulative, and I already have latency sources in the chain, so the maximum acceptable time for an animation to slow me down is 0ms. This can be accomplished by asynchronous animations that run in the background without forcing me to wait for them to finish before I can continue, like the animations in Gnome 2's window manager Metacity. But motion designers almost never do that, because if people aren't forced to wait they might not notice the animation, and then the motion designer would lose status.
Stuff just popping into existence made me click the wrong thing more than once. (not sure an animation with a sane length would have helped much though...)
I find that the human visual system is interrupt-driven in that it responds to changes --- any movement or change will cause some sort of processing in the brain, which is why I think animations are distracting since they compete for the resources of the user's brain which are devoted to the actual task, and could cause cognitive overload and inattentional blindness.
To use the example in the article, if I'm creating an item I want to be able to start interacting with it immediately, not wait even a little bit for it to finish animating. Having to wait and watch the animation breaks the "flow" of the sequence of actions I've mentally prepared.
Looks kids, Firstly its not motion design, its animation. Shoving in a non linear tween into an interface does not make it more useable. Thats why everyone hated flash, not because it was insecure or "slow", they hated it because it was full of stupid transitions.
Lets put it this way: Go look at FT.com Look at it, its horrific. In terms of design it basically a poorly translated printed page on the screen. However its wildly popular. 500,000 people pay for that interface, why? because the content is so good.
Let that sink in for a moment.
If the only differentiator between you and your competitor is the amount of ease-in tweens in your UI, you're in an over-saturated sector, go home, start again.
As for the OP's first assertion: "if something has been deleted, shove an animation in" NO. what if I want to delete multiple items quickly? (I'm looking at you IOS Mail app.) do I seriously have to suffer that battery sucking animation Every. Fucking. Time?
Just lay it out, make it consistent, remove as many steps as possible, and make it fast. Let your content/USP do the talking.
Another flowery buzzword for the same old technique (from judiciously using animation to draw and focus attention, to gratuitously abusing it to dazzle and titillate) is "cinematic interface". Of course like any flowery buzzword, different people have different takes on what it means, but here you go:
One concrete example from OpenLaszlo: there was a "cinematic" input focus indicator, so when you tabbed between controls in a form, it would smoothly fade in, animate over and fade out four corner chevrons from the current field to the next, to draw your attention and move your eyes to the next field in a form.
And of course it supported type-ahead: you could quickly press any number of tab or back-tabs, and it would continuously animate toward the current input focus.
I thought it was actually pretty nice and served a purpose, and was obvious enough that it didn't need any explanation, but yymv.
Here's a talk about OpenLaszlo that defined the term "Cinematic User Experience" (this was years ago so it all seemed so fascinating at the time):
What is meant by the term Cinematic User Experience? It’s characterized by the following:
Continuous User Interface: By featuring fluid application state changes, rather than today’s standard page-by-page format, a Laszlo-enabled site helps users stay oriented and efficiently complete multi-step online tasks.
Universal Canvas: With the ability to view common media data types including text, video and sound formats seamlessly on a single “universal canvas,” users are able to work with integrated multimedia information displays without the distraction of separate playback software for each media data type. Furthermore, Laszlo enables a wide array of media types without requiring users to install additional plug-in software.
Real Time Information: Traditional Web sites only update information when a page is reloaded. Laszlo enables live data push into standard browsers. This real-time messaging enables Laszlo-powered Web sites to provide integrated instant messaging and real-time inventory or financial information displays.
Other people have used the same term in various ways:
I really like the adjective "cinematic" in that you get an experience like watching an action movie, with stuff flying everywhere and general attention-getting mayhem every time something happens; but it also reflects the fact that, no, people do not want interacting with UI to be such an exciting experience. (Notwithstanding things like games where excitement can be appropriate.)
Translation: Annoying Power Point Transitions are the future.
Sorry but there's a reason why the comments here are negative. I'm a temp designer and even I stay away from transitions, they are almost always inappropriate, slow down the experience, distract attention, delay response. Especially as users get better and more familiar with using the app and use it more and more. These transitions start to become obnoxious.
Just look at the mess caused by CSS3 transitions over the last 4 years. Especially those stupid Parallax backgrounds. No longer can you simply scroll down and have the page and images go up... Oh no, now the images fade in as you scroll down, pop in off screen, backgrounds move at a different rate than the rest of the page. And for what? To impress someone? It's annoying, not impressive.
On the other hand, with the examples Craig Dehner gave in this article, motion design is great for tutorials so you can see what elements changed, where it went, etc... It would be nice for an app to have transitions only for the first 3 times you perform an action, after that they disable.
We're going through a wild west phase of UI ("UX") design where motion is being integrated into user interfaces in wild and crazy ways. Eventually a consensus will emerge (in the past, this has usually been driven by Apple either standardizing on something, like slide to open or elastic-banding) and we'll get library support for a standard "create a new item" "destroy an item" "create a child item" "establish a relationship" and so on. In many cases, there are already contenders, and you're probably better off picking whatever looks like a standard and imitating it.
The upshot is that we're in a period of flux, but eventually standards will emerge and "motion design" will be largely a matter of UI standards and style guides, just as "button design" is today.
I've been working on a web application for the past year or so. Many of the features are extremely valuable, but also hard to understand intuitively.
I started adding little animations with the purpose of "nudging" the user to understand the interface without having to think as hard. Just simple stuff like when toggling a button state, flipping it like a card so the user's intuitive mind more easily comprehends the state change.
I used slower animations in 0.4s range, but I think after reading these comments, I'll switch a lot of stuff to the faster 0.2s. It sounds like animations that are too slow are frustrating people.
If anyone is thinking of adding animations to a web app for the first time: I found them fairly easy to implement just using CSS. (a little bit of JavaScript here and there)
So much of this design stuff is masturbatory. It feels like they create a neat animation and then run off half-cocked thinking that a box moving will solve world hunger.
91 comments
[ 4.4 ms ] story [ 167 ms ] threadBefore even the app's purpose is properly conceptualized, someone digs up one of those great new animation-oriented prototyping tools and starts making flipping buttons and sliding blocks like the ones shown in the original post. "This is going to be our app's unique personality!"
That effort can end up being misspent and misleading if it's done before proper prototyping. Having ultra-polished animations in mockups will guide development towards implementing those rather than asking questions about what users might want to do.
The article refers to Facebook's Paper app: "Can you imagine Facebook designers presenting their iOS Paper app as a static layout? It would look pretty lame."
Ironically, Paper has been discontinued and the Facebook Creative Labs group that created it has been disbanded. Turns out that awesome animations didn't give the app a purpose of its own.
Design is how it works, any designer working on motion design early in the lifecycle of a new product, to the detriment of focus on say, utility aren't designing. They're playing.
Not all feedback is automatically bad.
The trick is to get rid of animations that force the user to wait for them (e.g. most “opening” animations are in this category; I do not want to wait for something to finish sliding open before I can use it, I want items to appear instantly).
There is a terrible trend among designers to start doing visual design too early.
There is a terrible trend among designers to start doing typography too early.
There is a terrible trend among designers to start doing UI design too early.
The cold truth that designers don't want to admit is that most companies never even reach the stage where graphic design matters. It is almost entirely done to appease the fetishes of early adopters. Look at Craigslist. Look at Amazon. Look at Flappy Bird.
The thing is, the kind of design companies actually need: which is Capital D, integrated, cross-disclipline Design, most professional designers don't actually know how to do. They know how to push words and pictures around around in an image file. They know how to conduct a brainstorming session. If you're lucky they know how to do usability testing. And if you're really lucky they know how to think like a user. But they don't know how to move in a principled way through all of the domains of production at their company and articulate a vision for how design practices can be dispatched to advance their goals.
And the subset of designers who do know how to do that, are generally so disenfranchised within their organization that they are fought every step of the way until they give in and just make pretty mockups because that's what their coworkers want.
The vast majority of examples are not used appropriately adding distraction, or worse, they slow down actions. It's all over the place, cute or "helpful" animations or displays that just get in the way of using the damn thing. Home electronics that have "welcome" and "bye" messages delaying the on or off are in the same pointlessly annoying category.
To use his first example, if you use an animation for deleting a record, is it going to significantly slow down deleting? What about a number of records you want to delete?
Personally I'd stop using an app that decided to animate passwords like that. It's gratuitously distracting.
"we could even ditch the text completely, relying on our animations to provide user feedback"
Oh ffs no. So we have to guess what the bounce, shake, or dancing emoji is trying to tell us in place of "nothing selected"?
- separate buttons from animation, (buttons jump/stay, content animates). This allows for fast clicking.
- fast animations, so the animation and the underlying UI are not separate for too long.
Next Steps Ready to learn how to create these beautiful animations? Check out my blog and Motion Design course at The Kinetic UI.
It's not all that different from the endless stream of programming articles that promote a particular approach as the one true solution, when the writer happens to be a consultant in that specific approach.
"Awesome Agile Angular solves all your front-end woes! -- Sign up for my mailing list, buy my e-book, take my 3-day course, come see me talk at the TimeWaste 2016 conference."
note to self, trademark that conference name ASAP ...
(also, there was an update on February 29th, so it's still being actively developed)
https://www.youtube.com/watch?v=isYZXwaP3Q4
https://www.youtube.com/watch?v=FBD0VlcVS1E
Despite what you may feel, animation and UI/UX are extremely important, and the suggestions in the article are not the "overdoing" that many of the comments here are complaining about.
Motion is a great tool to hide latency, give some spacial awareness, and can be an additional tool to give quick feedback on an action.
I've personally found its one of the major reasons the "average" person chooses software.
Edit: per my last line, "its" is referring to UI/UX design in general.
I personally love animation as part of good design, but I know plenty of people that don't care. Even non-tech people I know say things like 'I don't care how it looks, I just want it to work'. Which is a ridiculous sentiment, not because things need to be aesthetically pleasing to work well, but because aesthetically pleasing designs and good usability lead to you wanting to use an app more. It's not just vanity, it actually makes a difference to how you interact with software.
I regularly out-pace guis. For example, the simple task of using google maps to go to work in the morning. This task is visually spread out with time-slowing animations that require constant active participation. It is like 5 taps made excrutiatingly long by the fact that my car is parked just far enough away from my home that wifi cuts out and the phone has to aquire 4g. Compare to Waze (also owned by Google) one tap, swipe and dialogs auto continue without needing to be "fed".
I love animation and motion graphics, but I've seen many motion devs fall into the trap of "oh this is so cool, but they won't see it unless I make it a bit longer" -- and unfortunately most of the JS animation frameworks do not encourage async interaction, so interaction phases are often held hostage to the animation cycles.
In these cases, I think motion design is rightly considered wasteful and not delightful.
Usability is not supposed to be aesthetically pleasing, it can be but it is not supposed to be. It's supposed to be usable.
If something is more usable by removing a microsecond delay, then it may not look as nice but it is more usable. I would prefer more usable to nicer looking.
Design is absolutely not just vanity, but artificial delays absolutely do hinder usability to increase the vanity. It may not "feel" as nice, but it is objectively better to use.
The Android Chrome browser is a great example. Swiping stuff around, amazing, smooth and great animations. The animations take only as long as it takes for me to use them. But when I click the button to show me more tabs, it takes a moment to swoop out, then I click and it takes a moment to swoop back in. Great, spatial awareness is introduced and it felt nice, neat.
But now I have 5 tabs open and I am trying to flip between them without losing my train of thought and all those delays add up, it is now no longer as nice to use because I feel like I am ahead of my device because it's slow, when it's really just the artificial delays.
You can still move up to the tab overview screen, it still gives spatial context, but the animation is not needed, and can be removed for better usability.
I also feel like good animations can still exist without delay in many contexts (not all). Complete the users action instantly, show them the results instantly, but in some contexts there is room to fade out auxiliary information out more slowly.
Moving up to the tab overview is a good example. The tabs can be shown instantly, and just a ghost of the previous screen could fade out behind it.
Animation on the other hand, is rarely important, but if used carefully can provide feedback that's difficult to achieve without. Hiding latency is another useful example. Effects on select or buttons fading in etc almost never adds anything helpful.
Trouble is UI/UX and animation is often becoming more about looking cute or professional than actually being productive or ergonomic. It's not a gain if it takes .5s longer to select each item, or takes two extra clicks. Code it to be snappy and professional (or cute, depending on app), then add animation if it's helpful at a sticking, latency or confusion point. That's very different to baking motion design into everything from the beginning, where it risks becoming style over substance.
Not to say I don't care about how things look, I do. The way it looks should be helping with what it does, not detracting from it.
But nobody is advocating for abuse of animation.
I disagree. Well-conceived and well-executed animations can be a nice incremental refinement on top of an already good UI. However, they won't compensate for poor static elements like a bad layout or naff icons or illegible typography. In turn, no amount of beautiful UI whether animated or not will compensate for awkward interactions or a flawed conceptual model.
Motion is a great tool to hide latency
You know what's also great for hiding latency? Designing your system properly so it doesn't have noticeable latency in the first place, which is a viable alternative in the overwhelming majority of cases I've seen advocating this sort of animation-as-band-aid.
give some spacial awareness
You know what's also great for giving spacial awareness? A UI layout where the space is used logically in the first place and different areas of significance are clearly presented. Step 1: Don't dumb everything down to nothing but flat colour boxes and line art, thus giving up a whole array of other useful visual tools and creating a whole set of problems you didn't otherwise have.
can be an additional tool to give quick feedback on an action
True enough, but the key word there is "additional". Animating in response to every user interaction looks cute in demos for trivial gimmick apps, but gets old very quickly if you're using serious software for extended periods with numerous interactions per minute. There's also a frequent irony that those trivial gimmick apps tend to run on mobile devices with touchscreens, so all those clever button animations are right under the user's finger where they can't be seen anyway.
I've personally found its one of the major reasons the "average" person chooses software.
Really? I've never seen much evidence to suggest that in all my years doing UI design work. Much of the time, the user won't even have seen most of the animations before making a decision about whether to use the software or not. They're a nice incremental refinement, helping to reinforce an already well-designed and well-presented UI, but a major reason for choosing software? That seems highly unlikely.
Animations are a tool, and should be applied carefully just like any other.
I chose my words carefully and I stand behind them. Animation is important, and it can be a great additional tool to improve usability of an application. It's not the only tool, but an additional one.
About my last line, I was talking about design and UI/UX in general, probably should have been more clear about that...
Animation is not 'extremely' important and never has been or how would we have survived all these years?
When done badly, modern motion animations are often distracting, annoying or so alien you wonder what just happened and if you just did something wrong but can't tell without doing the action again.
When done well, the only people who notice them are other designers, so are they really worth much?
That's why there's a hostile reaction.
Animation definitely has an important role to play in interface design and it's been used in applications for decades. For example, this video snippet of Mac OS 7 (released in 1991 - over 25 years ago) shows the animation that occurs when a new finder window opens.
https://youtu.be/f_GBeKVijWQ?t=2m16s
Can you imagine minimizing and maximizing windows without some subtle effect to show the window shrinking or expanding? Without animation, the transition would feel clunky and abrupt.
Animation can be overdone of course (even for minimising a window). And that's the real problem with animation in UI design: when it's used purely for decorative puposes or if it slows you down, it quickly becomes irritating.
Previously, animations were subtle and focused on individual actions (and limited by what the hardware was capable of). Today, animations are smoother, faster but also longer (hence the term "Motion UI") and actions are conveyed with multiple, simultaneous animations. It means that sometimes the UI can feel too busy and overdone with movement.
But maybe it's also a generational thing? Taste and fashion change and perhaps users today aren't fazed or distracted by fast motion graphics?
https://www.youtube.com/watch?v=Q8TXgCzxEnw
Easily. I work mostly on Linux, and have turned off all animations. The first time I tried Windows 10, everything felt as slow as molasses. When I turned off animations, I was stunned by how fast Windows 10 was. Opening small apps (terminal, basic editor, etc.) on Linux seemed instantaneous, until I spent some time on Windows 10. Now, Linux seems noticeably slow.
> Without animation, the transition would feel clunky and abrupt.
I tried it out a few times now. It was abrupt, but not clunky. I like it this way.
How do the animations hold up when the machine is being hammered and running heavy CPU and GPU loads? (Or normal use when a user has filled it with malware) Windows holds up far less well than OSX in this regard, but does much better than it used to back in XP days where you could watch it paint the UI piece by painful piece often under surprisingly little load. In that case any animating is not helping anyone. Wireframing minimize/maximize etc mght have been more useful.
Much more phone app animation appears to be synchronous, blocking, so the pretty animation is making the app slower. Every time. It appears often to be there as gloss. That's fine the first day when you don't know the way around, beyond that it's just slowing everyone up.
> But maybe it's also a generational thing? Taste and fashion change and perhaps users today aren't fazed or distracted by fast motion graphics?
LOL please. It's not that I am fazed and distracted by fast motion graphics, it's when it's done badly. I'd hardly call material design fast motion graphics either. MD when done right can be excellent. There's some great material design apps on my phone. I do think they went too far with the current flatten all the things cargo cult, but that's my preference. At least they didnt go as far as W10.
Let's take an example of a delete as given in the OP. We'll ignore the asking "are you sure", OK? :) Can I tap my thumb as fast as I can three times and delete 3 records? Or will I have to wait for it to catch up because of the needless cute collapsing animation? Did you actually delete 3, or just 2 because the middle tap was lost during animation play? That's just bad design for any generation, no?
Make a fast app without need for latency animations, and give me animations that are async so if I've become expert within your app I never see them because my taps cancel them. Give me a latency anim just when the network connection is rubbish, and only as long as it's needed. Now test your cute anims on an older phone, or a phone with something greedy running in background, or latency with a horrible or intemittent net connection...
I LIKE fast motion graphics in games, where they're often not fast enough, and movies :p
The NeXT used to do that on the login screen. It got huge applause at the premiere I saw in 1988.
> Any way you can avoid showing a loading status will make your app appear much faster.
The animation is now the loading status. The animation isn't making the user think the app is faster, it's just taking the place of a different animation that would show the asset is loading.
I do appreciate showing that loading status so I don't have to try to figure out what my phone is doing by looking for the spinner at the status line at the top of the screen, but don't change the size of the button and distract me from the content.
I disagree. The right hand animation, sure, but if I saw the middle animation, I don't think I'd register the latency at all. In fact I think I might misinterpret and get irritated that my time was being wasted with an unnecessary animation.
Not necessarily better, but I would have been distracted from the load time.
It's horrendous because there is a non deterministic delay before it shows. If I glance away from the screen and miss the animation I have no idea that the login has failed.
It also doesn't differentiate between different failure modes. I've had my company's active directory stop working, but I don't know this because the feedback is exactly the same as if I'd mistyped my complex password.
As a rule: a failed login is the wrong time to try and delight me with a beautiful UI.
It just makes everything feel a bit faster.
Of course, this is the first thing I do no matter what UI I'm using.
Dear UI/UX designers, I don't care what you do with these animations as long as you let me turn it off completely (via the OS, if necessary). Just don't force animations on users.
It reminds me of old tape decks with the "soft" eject button. You'd be yanking the door because it opened so slowly.
http://hints.macworld.com/article.php?story=2005083023373517...
It goes slow enough that it's a disappointment and a violation of the principle of least astonishment that you can't actually use the window while it's slinking away.
Steve Jobs used it in his original MacWorld SF 2000 OS/X demo, and it's been there ever since!
https://www.youtube.com/watch?v=uGMQLfi0kGc&feature=youtu.be...
"I can slow this down. We built in a special slow-mo mode for the demo today. Look at this. Isn't that cool? It's just, it's just magical. And it shows you exactly where they go. Again, it's that thing, we call it the Genie Effect, that the sheets use when they come out. And, um, I can just play with it all day long actually."
7/8's default theme aren't that much better; can you tell which of these are active?
http://www.groovypost.com/wp-content/uploads/2012/10/Windows...
http://i.stack.imgur.com/rFOQm.png
XP/Vista, much clearer "pushed in" effect for the active button:
http://mytechquest.com/blog/wp-content/uploads/2009/09/Iconi...
Windows 9x/ME/2K/Classic - very clear pushed-in effect for the active button:
http://www.howtogeek.com/wp-content/uploads/2009/01/613x178x...
Animation should never delay interaction, and it should never interfere with gestures and mouse-ahead (or whatever the input device is).
The user should never have to wait for animation to finish before they're able to do something, and the interface should never be disabled during animation, or ever ignore the user's input under any circumstances.
User input should always pre-empt and interrupt feedback and animation.
The interface should always support quick gestures (mousing ahead, touching ahead, or whatever), without ever requiring the user to pause and wait, or focus their attention on the screen to watch the animation play out before they know it's safe to make the next move.
I developed a gestural pie menu tabbed window manager for the NeWS window system in 1990, which supported mousing ahead, suppressing the pie menu display and pop-up animation until you stopped moving, showing light weight feedback on the overlay plane, and executing commands instantly without any animation or even popping up the menu, when you make a smooth quick gesture without hesitating.
NeWS Tab Window Demo: https://www.youtube.com/watch?v=tMcmQk-q0k4
Transcript of the relevant part of the demo:
Now you can press the right button to pop up a pie menu on the tab or on the frame itself. And that has commonly used commands like front and back in mnemonic directions. Back is down, and front is up.
When you make a menu selection by mousing ahead, it doesn't display the menu.
As long as you're moving, it suppresses the menu display.
And it gives you feedback on the overlay plane of the slice that you're in, and the label of that slice, so you can actually see what you're going to get before you choose it without even seeing the menu itself.
And when you wait, it pops up the menu once you stop moving.
So if you waste some time by just waiting around, it will waste a bit more time by giving you some stupid animation.
And this is meant to be negative reinforcement, to encourage you to mouse ahead.
The sub-menu pops up. This is "move to" which is unconstrained move.
You can always get that from the tab by mousing left and right.
That's an easy gesture. Just quickly...
Or mouse there and wait. There it is. It pops up the one you're at first.
This is constrained horizontal move.
And this is constrained vertical move.
So constrained horizontal... We'll wait.
Constrained vertical...
So, I mean, once you're there, and you know what you want, why wait?
This is "beam me up": put it in the next layout position. To tidy the windows.
So, if you've clicked the menu up and haven't moved, it will just spin it, because it's confused, and doesn't know what you're going to do.
----
In other words: As it pops up and scales up the round menu, it also tilts it along the axis perpendicular to the direction of movement to reinforce the selected direction, or spins around the center if you haven't moved to show no direction is selected.
And you only ever see any animation if you actually stop moving -- once you make a selection, the command always executes or the submenu always activates immediately.
You can mouse ahead smoothly through multiple levels of sub-menus, without popping any of them up or seeing any animation, as long as you never hesitate.
By "lead, follow, or get out of the way", I mean that pie menus can lead novice users by giving them feedback and animation when they pause, follow intermediate users who move in the right direction then pause for the feedback to make sure they got it right, and get out of the way of expert users who know the right direction and can quickly articulate gestures without pausing or waiting for feedback.
----
Here's another demo showing pie menus, mouse ahead gestur...
http://dl.acm.org/citation.cfm?id=974941
Take android for example. I loved the clean and understated look of Holo. I hate the inconsistent light pastel whitespaced mess that is material design. However I'm forced to have it if I buy a <2 year old phone and what the latest security updates. Why couldn't I get the holo theme to choose from? The UI elements are the same; point is there isn't any reason to tie it to the visual design and impose a specific style.
Browse the FWA for proof of cool UI animations starting in the year 2000 [0].
I'd say we're having a rediscovery (specially in the web) now that HTML5/JS/CSS3 allows fluid transitions and transforms.
[0] http://www.thefwa.com/site/mmorph?c=SOTM
To any UX designers reading - if you put more motion in your design I will avoid your software.
(And yes, not everyone's the same)
Stuff just popping into existence made me click the wrong thing more than once. (not sure an animation with a sane length would have helped much though...)
To use the example in the article, if I'm creating an item I want to be able to start interacting with it immediately, not wait even a little bit for it to finish animating. Having to wait and watch the animation breaks the "flow" of the sequence of actions I've mentally prepared.
Looks kids, Firstly its not motion design, its animation. Shoving in a non linear tween into an interface does not make it more useable. Thats why everyone hated flash, not because it was insecure or "slow", they hated it because it was full of stupid transitions.
Lets put it this way: Go look at FT.com Look at it, its horrific. In terms of design it basically a poorly translated printed page on the screen. However its wildly popular. 500,000 people pay for that interface, why? because the content is so good.
Let that sink in for a moment.
If the only differentiator between you and your competitor is the amount of ease-in tweens in your UI, you're in an over-saturated sector, go home, start again.
As for the OP's first assertion: "if something has been deleted, shove an animation in" NO. what if I want to delete multiple items quickly? (I'm looking at you IOS Mail app.) do I seriously have to suffer that battery sucking animation Every. Fucking. Time?
Just lay it out, make it consistent, remove as many steps as possible, and make it fast. Let your content/USP do the talking.
One concrete example from OpenLaszlo: there was a "cinematic" input focus indicator, so when you tabbed between controls in a form, it would smoothly fade in, animate over and fade out four corner chevrons from the current field to the next, to draw your attention and move your eyes to the next field in a form.
And of course it supported type-ahead: you could quickly press any number of tab or back-tabs, and it would continuously animate toward the current input focus.
I thought it was actually pretty nice and served a purpose, and was obvious enough that it didn't need any explanation, but yymv.
Here's a talk about OpenLaszlo that defined the term "Cinematic User Experience" (this was years ago so it all seemed so fascinating at the time):
Creating a Cinematic User Experience with OpenLaszlo: http://webconf.hu/2007/program/i/openlaszloen.html
What is meant by the term Cinematic User Experience? It’s characterized by the following:
Continuous User Interface: By featuring fluid application state changes, rather than today’s standard page-by-page format, a Laszlo-enabled site helps users stay oriented and efficiently complete multi-step online tasks.
Universal Canvas: With the ability to view common media data types including text, video and sound formats seamlessly on a single “universal canvas,” users are able to work with integrated multimedia information displays without the distraction of separate playback software for each media data type. Furthermore, Laszlo enables a wide array of media types without requiring users to install additional plug-in software.
Real Time Information: Traditional Web sites only update information when a page is reloaded. Laszlo enables live data push into standard browsers. This real-time messaging enables Laszlo-powered Web sites to provide integrated instant messaging and real-time inventory or financial information displays.
Other people have used the same term in various ways:
Cinematic Continuity in User Interface Design: https://medium.com/ux-design-1/cinematic-continuity-on-ui-de...
Cinematic Interfaces -- Film Theory After New Media: https://www.routledge.com/products/9780415833158
Sorry but there's a reason why the comments here are negative. I'm a temp designer and even I stay away from transitions, they are almost always inappropriate, slow down the experience, distract attention, delay response. Especially as users get better and more familiar with using the app and use it more and more. These transitions start to become obnoxious.
Just look at the mess caused by CSS3 transitions over the last 4 years. Especially those stupid Parallax backgrounds. No longer can you simply scroll down and have the page and images go up... Oh no, now the images fade in as you scroll down, pop in off screen, backgrounds move at a different rate than the rest of the page. And for what? To impress someone? It's annoying, not impressive.
On the other hand, with the examples Craig Dehner gave in this article, motion design is great for tutorials so you can see what elements changed, where it went, etc... It would be nice for an app to have transitions only for the first 3 times you perform an action, after that they disable.
The upshot is that we're in a period of flux, but eventually standards will emerge and "motion design" will be largely a matter of UI standards and style guides, just as "button design" is today.
I started adding little animations with the purpose of "nudging" the user to understand the interface without having to think as hard. Just simple stuff like when toggling a button state, flipping it like a card so the user's intuitive mind more easily comprehends the state change.
I used slower animations in 0.4s range, but I think after reading these comments, I'll switch a lot of stuff to the faster 0.2s. It sounds like animations that are too slow are frustrating people.
If anyone is thinking of adding animations to a web app for the first time: I found them fairly easy to implement just using CSS. (a little bit of JavaScript here and there)
This is a demo if anyone is curious: https://demo.enterprisejazz.com