Motion Design Is the Future of UI

https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f

by nerdy • 10 years ago

117 86 10 years ago

blog.prototypr.io

pavlov2• 10 years 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• 10 years 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• 10 years 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• 10 years 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.

vvanders2• 10 years 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.

mrob5• 10 years 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.

DonHopkins6• 10 years 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• 10 years 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.

amelius2• 10 years ago

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

vvanders2• 10 years ago

That's why you build tooling around it so your engineers don't spend time on it.

amelius2• 10 years 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.

anexprogrammer3• 10 years 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"?

anotheryou2• 10 years 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• 10 years 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.

Yhippa2• 10 years 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• 10 years 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.

mattip• 10 years ago

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.

0942v8653• 10 years ago

Hopefully you've at least updated since it was renamed to wxWidgets: https://github.com/wxWidgets/wxWidgets/commit/fc2171bd4c660b...

(also, there was an update on February 29th, so it's still being actively developed)

mtgx• 10 years 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=FBD0VlcVS1E

Klathmon3• 10 years 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• 10 years 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• 10 years 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.

ehnto• 10 years ago

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.

anexprogrammer3• 10 years ago

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.

Klathmon3• 10 years ago

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.

But nobody is advocating for abuse of animation.

Silhouette3• 10 years ago

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.

Klathmon3• 10 years ago

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

mattmanser• 10 years ago

This is little more than hyperbole.

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.

chestnut-tree• 10 years ago

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

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

Yhippa2• 10 years 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• 10 years 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• 10 years 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• 10 years 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• 10 years 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• 10 years 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_di...

It just makes everything feel a bit faster.

taneq• 10 years 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• 10 years 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).

lake993• 10 years 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.

Nutmog• 10 years ago

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.

DonHopkins6• 10 years ago

If you like that feature, I'm sure you'll hate what happens when you hold down Shift and minimize a window in OS/X!

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

FranOntanaya2• 10 years 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.

Silhouette3• 10 years 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.

FranOntanaya2• 10 years ago

That's like a permanent "tutorial mode" though, why do we treat users as if they would never learn.

DonHopkins6• 10 years ago

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.

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 gestures, and display pre-emption in SimCity:

X11 SimCity Demo: https://www.youtube.com/watch?v=Jvi98wVUmQA

----

And here's a really old demo from June 1986 of the "uwm" window manager for the X10 window system, that I hacked to support pie menus with mouse-ahead and display pre-emption.

X10 Pie Menu Window Manager: https://www.youtube.com/watch?v=IJhvB6kwmog

---

More info here:

The Design and Implementation of Pie Menus -- Dr. Dobb's Journal, Dec. 1991: http://www.donhopkins.com/drupal/node/98

joshmarinacci• 10 years 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

DonHopkins6• 10 years 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• 10 years 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• 10 years 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• 10 years 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

BatFastard2• 10 years ago

3 more years and they will catch up to where flash was in 2000.

douche2• 10 years 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• 10 years 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)

mrob5• 10 years 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• 10 years 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.

BatFastard2• 10 years ago

Its not hard to add blocking elements, which stop more changes until animation is complete.

DonHopkins6• 10 years ago

It's not hard but it's mean.

anotheryou2• 10 years 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...)

userbinator3• 10 years 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• 10 years 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.

DonHopkins6• 10 years 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

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

userbinator3• 10 years ago

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

jcoffland• 10 years ago

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

ChrisNorstrom• 10 years 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• 10 years 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• 10 years 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

Zigurd2• 10 years 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.

douche2• 10 years 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.

Zigurd2• 10 years 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• 10 years 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• 10 years 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.

Motion Design Is the Future of UI

Related Stories