There is a terrible trend among designers to start doing motion design for mobile apps way too early.<p>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!"<p>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.<p>The article refers to Facebook's Paper app:
<i>"Can you imagine Facebook designers presenting their iOS Paper app as a static layout? It would look pretty lame."</i><p>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.
On the other hand, a recently discovered glitch in iOS 9 that lets you disable system animations has been very popular: <a href="https://m.reddit.com/r/jailbreak/comments/49capx/tutorial_disable_ios_system_animations_opening/" rel="nofollow">https://m.reddit.com/r/jailbreak/comments/49capx/tutorial_di...</a><p>It just makes everything feel a bit faster.
Wow I'm surprised that many of the comments here are negative.<p>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.<p>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.<p>I've personally found its one of the major reasons the "average" person chooses software.<p>Edit: per my last line, "its" is referring to UI/UX design in general.
Motion can be incredibly useful if it's used appropriately.<p>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.<p>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?<p>Personally I'd <i>stop using</i> an app that decided to animate passwords like that. It's gratuitously distracting.<p><i>"we could even ditch the text completely, relying on our animations to provide user feedback"</i><p>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'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.<p>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.<p>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.<p>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)<p>This is a demo if anyone is curious: <a href="https://demo.enterprisejazz.com" rel="nofollow">https://demo.enterprisejazz.com</a>
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.
Oh please god, not <i>again</i><p>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.<p>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.<p>Let that sink in for a moment.<p>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.<p>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?<p>Just lay it out, make it consistent, remove as many steps as possible, and make it fast. Let your content/USP do the talking.
> 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.<p>The NeXT used to do that on the login screen. It got huge applause at the premiere I saw in 1988.<p>> Any way you can avoid showing a loading status will make your app appear much faster.<p>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.<p>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.
While I agree motion design is important why is it presented as "The Future"? This stuff is old. The seminal paper dates to 1995.<p><a href="http://dl.acm.org/citation.cfm?id=974941" rel="nofollow">http://dl.acm.org/citation.cfm?id=974941</a>
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.<p>To use the example in the article, if I'm creating an item I want to be able to start interacting with it <i>immediately</i>, 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.
As a user I can't stand motion in UIs. Even Google's new buttons that show ripples when you click are disconcerting.<p>To any UX designers reading - if you put more motion in your design I will avoid your software.<p>(And yes, not everyone's the same)
The <i>future</i> 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.<p>Browse the FWA for proof of cool UI animations starting in the year 2000 [0].<p>I'd say we're having a <i>rediscovery</i> (specially in the web) now that HTML5/JS/CSS3 allows fluid transitions and transforms.<p>[0] <a href="http://www.thefwa.com/site/mmorph?c=SOTM" rel="nofollow">http://www.thefwa.com/site/mmorph?c=SOTM</a>
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.
Translation: Annoying Power Point Transitions are the future.<p>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.<p>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.<p>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.
"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.
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.<p>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.
A couple of talks about it at Google I/O 2014:<p><a href="https://www.youtube.com/watch?v=isYZXwaP3Q4" rel="nofollow">https://www.youtube.com/watch?v=isYZXwaP3Q4</a><p><a href="https://www.youtube.com/watch?v=FBD0VlcVS1E" rel="nofollow">https://www.youtube.com/watch?v=FBD0VlcVS1E</a>
I hate to pile on with criticism of what is, in a vacuum, an improvement over pushing buttons and entering text. BUT the point should not be "motion design" as a goal, the point should be that direct manipulation should be used where memory of an action helps the user learn and discover things the UI can do. Motion is part of direct manipulation, and using it effectively is a Very Good Thing, but it isn't the only thing and it's not the main thing.<p>Touch is magical. Babies and the aged like touch because it is a direct link to actions. But apps don't use touch as effectively as they could, and direction manipulation is the central concept behind making touch even more effective.
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.
Interesting article. I agree that subtle animations can improve my mental model of how an application works. But I hate stuff like this:<p><pre><code> In some cases, we could even ditch the text completely, relying on our animations to provide user feedback.</code></pre>
What I don't understand is how "motion design", or any UI design philosophy for that matter, must imply a certain fixed visual style.<p>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.