7 ms·

Motion Design Is the Future of UI

117 points by nerdy 11y ago

pavlov 11y ago
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.
- bottled_poe 11y ago
  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.
- karkub 11y ago
  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.
- nc 11y ago
  Completely agree, it's premature optimisation! 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.
- vvanders 11y ago
  Motion is the the bass player in the band. You shouldn't notice them but when they're gone something definitely doesn't feel right.
  - mrob 11y ago
    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.
    - bcook 11y ago
      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.
    - makecheck 11y ago
      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).
      - mrob 11y ago
        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.
    - dandelany 11y ago
      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.
- DonHopkins 11y ago
  There is also a terrible trend among "designrs" to leave out the "e" before the "r" at the end of their domain name.
- erikpukinskis 11y ago
  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.
amelius 11y ago
This is time consuming stuff. Do we really want our smartest engineers to spend hours on trivial things like animations?
- vvanders 11y ago
  That's why you build tooling around it so your engineers don't spend time on it.
  - amelius 11y ago
    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.
anexprogrammer 11y ago
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"?
- anotheryou 11y ago
  what I used on my very first flash website for an animation like the deleting: - 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.
coldcode 11y ago
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.
- Yhippa 11y ago
  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?
  - nathanaldensr 11y ago
    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.
    - pavlov 11y ago
      I feel you're on the mark with this. 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."
deleted 11y ago
[deleted]
mtgx 11y ago
A couple of talks about it at Google I/O 2014: https://www.youtube.com/watch?v=isYZXwaP3Q4 https://www.youtube.com/watch?v=isYZXwaP3Q4 https://www.youtube.com/watch?v=FBD0VlcVS1E https://www.youtube.com/watch?v=FBD0VlcVS1E
Klathmon 11y ago
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.
- Niksko 11y ago
  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.
  - coldnebo 11y ago
    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.
Yhippa 11y ago
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.
- sjmulder 11y ago
  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.
TYPE_FASTER 11y ago
> 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.
- wyattpeak 11y ago
  > 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.
- underwater 11y ago
  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.
tlrobinson 11y ago
On the other hand, a recently discovered glitch in iOS 9 that lets you disable system animations has been very popular: https://m.reddit.com/r/jailbreak/comments/49capx/tutorial_disable_ios_system_animations_opening/ https://m.reddit.com/r/jailbreak/comments/49capx/tutorial_di... It just makes everything feel a bit faster.
- taneq 11y ago
  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.
- oxplot 11y ago
  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).
  - lake99 11y ago
    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.
    - ferbivore 11y ago
      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.
FranOntanaya 11y ago
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.
- Silhouette 11y ago
  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.
  - FranOntanaya 11y ago
    That's like a permanent "tutorial mode" though, why do we treat users as if they would never learn.
    - Silhouette 11y ago
      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.
      - mrob 11y ago
        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.
        11y ago
joshmarinacci 11y ago
While I agree motion design is important why is it presented as "The Future"? This stuff is old. The seminal paper dates to 1995. http://dl.acm.org/citation.cfm?id=974941 http://dl.acm.org/citation.cfm?id=974941
- DonHopkins 11y ago
  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!
ilostmykeys 11y ago
"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.
andrepd 11y ago
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.
joeyspn 11y ago
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. [0] http://www.thefwa.com/site/mmorph?c=SOTM http://www.thefwa.com/site/mmorph?c=SOTM
- BatFastard 11y ago
  3 more years and they will catch up to where flash was in 2000.
  - douche 11y ago
    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...
afandian 11y ago
As a user I can't stand motion in UIs. Even Google's new buttons that show ripples when you click are disconcerting. 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)
mrob 11y ago
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.
e40 11y ago
When elements in the UI move it increases the chances that I'll click on the wrong element. When it happens, it's so incredibly frustrating.
- BatFastard 11y ago
  Its not hard to add blocking elements, which stop more changes until animation is complete.
  - DonHopkins 11y ago
    It's not hard but it's mean.
- anotheryou 11y ago
  To counter this: 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...)
- deleted 11y ago
  [deleted]
- deleted 11y ago
  [deleted]
userbinator 11y ago
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.
KaiserPro 11y ago
Oh please god, not again 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.
- DonHopkins 11y ago
  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): Creating a Cinematic User Experience with OpenLaszlo: http://webconf.hu/2007/program/i/openlaszloen.html 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-design-8aa191ab9c8e#.ijfn4dnko https://medium.com/ux-design-1/cinematic-continuity-on-ui-de... Cinematic Interfaces -- Film Theory After New Media: https://www.routledge.com/products/9780415833158 https://www.routledge.com/products/9780415833158
jcoffland 11y ago
This will be considered annoying in a few years. Probably sooner, if not now.
ChrisNorstrom 11y ago
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.
Tloewald 11y ago
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.
ChrisDutrow 11y ago
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) This is a demo if anyone is curious: https://demo.enterprisejazz.com https://demo.enterprisejazz.com
rocky1138 11y ago
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.
Zigurd 11y ago
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. 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.
- douche 11y ago
  >Touch is magical. Touch is at best a second-class input system. It's never going to have the kind of pointing precision we got used to twenty years ago with mice, and it's never going to be comparable for text-input with a dedicated keyboard. We use it on our phones because it's all we've got, and as terrible as touch screens on a device that small are (my Samsung phone has an effective touch resolution of about 4x7 finger tips, and any elements smaller than that I can't reliably interact with), the alternatives are worse.
  - Zigurd 11y ago
    Touch is spatially lo-fi, but the numbers show that humans favor the obviousness of touch over pointing device precision. And then you have the dominance of laptops, where most users are relying on a touchpad to hit tiny targets, the worst of both worlds.
zimbatm 11y ago
Animations are mostly useful for learning users because it gives them a cue. Every UI should have a way to turn those off and stop wasting my time.
dylnclrk 11y ago
Interesting article. I agree that subtle animations can improve my mental model of how an application works. But I hate stuff like this: In some cases, we could even ditch the text completely, relying on our animations to provide user feedback.

117 points by nerdy 11y ago

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.

bottled_poe 11y ago
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.
karkub 11y ago
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.
nc 11y ago
Completely agree, it's premature optimisation! 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.
vvanders 11y ago
Motion is the the bass player in the band. You shouldn't notice them but when they're gone something definitely doesn't feel right.
- mrob 11y ago
  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.
  - bcook 11y ago
    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.
  - makecheck 11y ago
    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).
    - mrob 11y ago
      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.
  - dandelany 11y ago
    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.
DonHopkins 11y ago
There is also a terrible trend among "designrs" to leave out the "e" before the "r" at the end of their domain name.
erikpukinskis 11y ago
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.

amelius 11y ago

This is time consuming stuff. Do we really want our smartest engineers to spend hours on trivial things like animations?

vvanders 11y ago
That's why you build tooling around it so your engineers don't spend time on it.
- amelius 11y ago
  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.

anexprogrammer 11y ago

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"?

anotheryou 11y ago
what I used on my very first flash website for an animation like the deleting: - 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.

coldcode 11y ago

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.

Yhippa 11y ago
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?
- nathanaldensr 11y ago
  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.
  - pavlov 11y ago
    I feel you're on the mark with this. 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."

deleted 11y ago

[deleted]

mtgx 11y ago

A couple of talks about it at Google I/O 2014: https://www.youtube.com/watch?v=isYZXwaP3Q4 https://www.youtube.com/watch?v=isYZXwaP3Q4 https://www.youtube.com/watch?v=FBD0VlcVS1E https://www.youtube.com/watch?v=FBD0VlcVS1E

Klathmon 11y ago

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.

Niksko 11y ago
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.
- coldnebo 11y ago
  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.

Yhippa 11y ago

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.

sjmulder 11y ago
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.

TYPE_FASTER 11y ago

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

wyattpeak 11y ago
> 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.
underwater 11y ago
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.

tlrobinson 11y ago

On the other hand, a recently discovered glitch in iOS 9 that lets you disable system animations has been very popular: https://m.reddit.com/r/jailbreak/comments/49capx/tutorial_disable_ios_system_animations_opening/ https://m.reddit.com/r/jailbreak/comments/49capx/tutorial_di... It just makes everything feel a bit faster.

taneq 11y ago
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.
oxplot 11y ago
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).
- lake99 11y ago
  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.
  - ferbivore 11y ago
    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.

FranOntanaya 11y ago

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.

Silhouette 11y ago
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.
- FranOntanaya 11y ago
  That's like a permanent "tutorial mode" though, why do we treat users as if they would never learn.
  - Silhouette 11y ago
    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.
    - mrob 11y ago
      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.
      - 11y ago

joshmarinacci 11y ago

While I agree motion design is important why is it presented as "The Future"? This stuff is old. The seminal paper dates to 1995. http://dl.acm.org/citation.cfm?id=974941 http://dl.acm.org/citation.cfm?id=974941

DonHopkins 11y ago
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!

ilostmykeys 11y ago

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

andrepd 11y ago

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.

joeyspn 11y ago

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. [0] http://www.thefwa.com/site/mmorph?c=SOTM http://www.thefwa.com/site/mmorph?c=SOTM

BatFastard 11y ago
3 more years and they will catch up to where flash was in 2000.
- douche 11y ago
  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...

afandian 11y ago

As a user I can't stand motion in UIs. Even Google's new buttons that show ripples when you click are disconcerting. 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)

mrob 11y ago

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.

e40 11y ago

When elements in the UI move it increases the chances that I'll click on the wrong element. When it happens, it's so incredibly frustrating.

BatFastard 11y ago
Its not hard to add blocking elements, which stop more changes until animation is complete.
- DonHopkins 11y ago
  It's not hard but it's mean.
anotheryou 11y ago
To counter this: 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...)
deleted 11y ago
[deleted]
deleted 11y ago
[deleted]

userbinator 11y ago

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.

KaiserPro 11y ago

Oh please god, not again 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.

DonHopkins 11y ago
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): Creating a Cinematic User Experience with OpenLaszlo: http://webconf.hu/2007/program/i/openlaszloen.html 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-design-8aa191ab9c8e#.ijfn4dnko https://medium.com/ux-design-1/cinematic-continuity-on-ui-de... Cinematic Interfaces -- Film Theory After New Media: https://www.routledge.com/products/9780415833158 https://www.routledge.com/products/9780415833158

jcoffland 11y ago

This will be considered annoying in a few years. Probably sooner, if not now.

ChrisNorstrom 11y ago

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.

Tloewald 11y ago

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.

ChrisDutrow 11y ago

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) This is a demo if anyone is curious: https://demo.enterprisejazz.com https://demo.enterprisejazz.com

rocky1138 11y ago

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.

Zigurd 11y ago

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

douche 11y ago
>Touch is magical. Touch is at best a second-class input system. It's never going to have the kind of pointing precision we got used to twenty years ago with mice, and it's never going to be comparable for text-input with a dedicated keyboard. We use it on our phones because it's all we've got, and as terrible as touch screens on a device that small are (my Samsung phone has an effective touch resolution of about 4x7 finger tips, and any elements smaller than that I can't reliably interact with), the alternatives are worse.
- Zigurd 11y ago
  Touch is spatially lo-fi, but the numbers show that humans favor the obviousness of touch over pointing device precision. And then you have the dominance of laptops, where most users are relying on a touchpad to hit tiny targets, the worst of both worlds.

zimbatm 11y ago

Animations are mostly useful for learning users because it gives them a cue. Every UI should have a way to turn those off and stop wasting my time.

dylnclrk 11y ago

Interesting article. I agree that subtle animations can improve my mental model of how an application works. But I hate stuff like this: In some cases, we could even ditch the text completely, relying on our animations to provide user feedback.