Motion Design Is the Future of UI
blog.prototypr.io
blog.prototypr.io
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.
Design is how it works, any designer working on motion design early in the lifecycle of a new product, to the detriment of focus on say, utility aren't designing. They're playing.
Not all feedback is automatically bad.
The trick is to get rid of animations that force the user to wait for them (e.g. most “opening” animations are in this category; I do not want to wait for something to finish sliding open before I can use it, I want items to appear instantly).
There is a terrible trend among designers to start doing visual design too early.
There is a terrible trend among designers to start doing typography too early.
There is a terrible trend among designers to start doing UI design too early.
The cold truth that designers don't want to admit is that most companies never even reach the stage where graphic design matters. It is almost entirely done to appease the fetishes of early adopters. Look at Craigslist. Look at Amazon. Look at Flappy Bird.
The thing is, the kind of design companies actually need: which is Capital D, integrated, cross-disclipline Design, most professional designers don't actually know how to do. They know how to push words and pictures around around in an image file. They know how to conduct a brainstorming session. If you're lucky they know how to do usability testing. And if you're really lucky they know how to think like a user. But they don't know how to move in a principled way through all of the domains of production at their company and articulate a vision for how design practices can be dispatched to advance their goals.
And the subset of designers who do know how to do that, are generally so disenfranchised within their organization that they are fought every step of the way until they give in and just make pretty mockups because that's what their coworkers want.
It just makes everything feel a bit faster.
Of course, this is the first thing I do no matter what UI I'm using.
Dear UI/UX designers, I don't care what you do with these animations as long as you let me turn it off completely (via the OS, if necessary). Just don't force animations on users.
It reminds me of old tape decks with the "soft" eject button. You'd be yanking the door because it opened so slowly.
http://hints.macworld.com/article.php?story=2005083023373517...
It goes slow enough that it's a disappointment and a violation of the principle of least astonishment that you can't actually use the window while it's slinking away.
Steve Jobs used it in his original MacWorld SF 2000 OS/X demo, and it's been there ever since!
https://www.youtube.com/watch?v=uGMQLfi0kGc&feature=youtu.be...
"I can slow this down. We built in a special slow-mo mode for the demo today. Look at this. Isn't that cool? It's just, it's just magical. And it shows you exactly where they go. Again, it's that thing, we call it the Genie Effect, that the sheets use when they come out. And, um, I can just play with it all day long actually."
Despite what you may feel, animation and UI/UX are extremely important, and the suggestions in the article are not the "overdoing" that many of the comments here are complaining about.
Motion is a great tool to hide latency, give some spacial awareness, and can be an additional tool to give quick feedback on an action.
I've personally found its one of the major reasons the "average" person chooses software.
Edit: per my last line, "its" is referring to UI/UX design in general.
I personally love animation as part of good design, but I know plenty of people that don't care. Even non-tech people I know say things like 'I don't care how it looks, I just want it to work'. Which is a ridiculous sentiment, not because things need to be aesthetically pleasing to work well, but because aesthetically pleasing designs and good usability lead to you wanting to use an app more. It's not just vanity, it actually makes a difference to how you interact with software.
I regularly out-pace guis. For example, the simple task of using google maps to go to work in the morning. This task is visually spread out with time-slowing animations that require constant active participation. It is like 5 taps made excrutiatingly long by the fact that my car is parked just far enough away from my home that wifi cuts out and the phone has to aquire 4g. Compare to Waze (also owned by Google) one tap, swipe and dialogs auto continue without needing to be "fed".
I love animation and motion graphics, but I've seen many motion devs fall into the trap of "oh this is so cool, but they won't see it unless I make it a bit longer" -- and unfortunately most of the JS animation frameworks do not encourage async interaction, so interaction phases are often held hostage to the animation cycles.
In these cases, I think motion design is rightly considered wasteful and not delightful.
Usability is not supposed to be aesthetically pleasing, it can be but it is not supposed to be. It's supposed to be usable.
If something is more usable by removing a microsecond delay, then it may not look as nice but it is more usable. I would prefer more usable to nicer looking.
Design is absolutely not just vanity, but artificial delays absolutely do hinder usability to increase the vanity. It may not "feel" as nice, but it is objectively better to use.
The Android Chrome browser is a great example. Swiping stuff around, amazing, smooth and great animations. The animations take only as long as it takes for me to use them. But when I click the button to show me more tabs, it takes a moment to swoop out, then I click and it takes a moment to swoop back in. Great, spatial awareness is introduced and it felt nice, neat.
But now I have 5 tabs open and I am trying to flip between them without losing my train of thought and all those delays add up, it is now no longer as nice to use because I feel like I am ahead of my device because it's slow, when it's really just the artificial delays.
You can still move up to the tab overview screen, it still gives spatial context, but the animation is not needed, and can be removed for better usability.
I also feel like good animations can still exist without delay in many contexts (not all). Complete the users action instantly, show them the results instantly, but in some contexts there is room to fade out auxiliary information out more slowly.
Moving up to the tab overview is a good example. The tabs can be shown instantly, and just a ghost of the previous screen could fade out behind it.
Animation on the other hand, is rarely important, but if used carefully can provide feedback that's difficult to achieve without. Hiding latency is another useful example. Effects on select or buttons fading in etc almost never adds anything helpful.
Trouble is UI/UX and animation is often becoming more about looking cute or professional than actually being productive or ergonomic. It's not a gain if it takes .5s longer to select each item, or takes two extra clicks. Code it to be snappy and professional (or cute, depending on app), then add animation if it's helpful at a sticking, latency or confusion point. That's very different to baking motion design into everything from the beginning, where it risks becoming style over substance.
Not to say I don't care about how things look, I do. The way it looks should be helping with what it does, not detracting from it.
But nobody is advocating for abuse of animation.
I disagree. Well-conceived and well-executed animations can be a nice incremental refinement on top of an already good UI. However, they won't compensate for poor static elements like a bad layout or naff icons or illegible typography. In turn, no amount of beautiful UI whether animated or not will compensate for awkward interactions or a flawed conceptual model.
Motion is a great tool to hide latency
You know what's also great for hiding latency? Designing your system properly so it doesn't have noticeable latency in the first place, which is a viable alternative in the overwhelming majority of cases I've seen advocating this sort of animation-as-band-aid.
give some spacial awareness
You know what's also great for giving spacial awareness? A UI layout where the space is used logically in the first place and different areas of significance are clearly presented. Step 1: Don't dumb everything down to nothing but flat colour boxes and line art, thus giving up a whole array of other useful visual tools and creating a whole set of problems you didn't otherwise have.
can be an additional tool to give quick feedback on an action
True enough, but the key word there is "additional". Animating in response to every user interaction looks cute in demos for trivial gimmick apps, but gets old very quickly if you're using serious software for extended periods with numerous interactions per minute. There's also a frequent irony that those trivial gimmick apps tend to run on mobile devices with touchscreens, so all those clever button animations are right under the user's finger where they can't be seen anyway.
I've personally found its one of the major reasons the "average" person chooses software.
Really? I've never seen much evidence to suggest that in all my years doing UI design work. Much of the time, the user won't even have seen most of the animations before making a decision about whether to use the software or not. They're a nice incremental refinement, helping to reinforce an already well-designed and well-presented UI, but a major reason for choosing software? That seems highly unlikely.
Animations are a tool, and should be applied carefully just like any other.
I chose my words carefully and I stand behind them. Animation is important, and it can be a great additional tool to improve usability of an application. It's not the only tool, but an additional one.
About my last line, I was talking about design and UI/UX in general, probably should have been more clear about that...
Animation is not 'extremely' important and never has been or how would we have survived all these years?
When done badly, modern motion animations are often distracting, annoying or so alien you wonder what just happened and if you just did something wrong but can't tell without doing the action again.
When done well, the only people who notice them are other designers, so are they really worth much?
That's why there's a hostile reaction.
Animation definitely has an important role to play in interface design and it's been used in applications for decades. For example, this video snippet of Mac OS 7 (released in 1991 - over 25 years ago) shows the animation that occurs when a new finder window opens.
https://youtu.be/f_GBeKVijWQ?t=2m16s
Can you imagine minimizing and maximizing windows without some subtle effect to show the window shrinking or expanding? Without animation, the transition would feel clunky and abrupt.
Animation can be overdone of course (even for minimising a window). And that's the real problem with animation in UI design: when it's used purely for decorative puposes or if it slows you down, it quickly becomes irritating.
Previously, animations were subtle and focused on individual actions (and limited by what the hardware was capable of). Today, animations are smoother, faster but also longer (hence the term "Motion UI") and actions are conveyed with multiple, simultaneous animations. It means that sometimes the UI can feel too busy and overdone with movement.
But maybe it's also a generational thing? Taste and fashion change and perhaps users today aren't fazed or distracted by fast motion graphics?
Easily. I work mostly on Linux, and have turned off all animations. The first time I tried Windows 10, everything felt as slow as molasses. When I turned off animations, I was stunned by how fast Windows 10 was. Opening small apps (terminal, basic editor, etc.) on Linux seemed instantaneous, until I spent some time on Windows 10. Now, Linux seems noticeably slow.
> Without animation, the transition would feel clunky and abrupt.
I tried it out a few times now. It was abrupt, but not clunky. I like it this way.
How do the animations hold up when the machine is being hammered and running heavy CPU and GPU loads? (Or normal use when a user has filled it with malware) Windows holds up far less well than OSX in this regard, but does much better than it used to back in XP days where you could watch it paint the UI piece by painful piece often under surprisingly little load. In that case any animating is not helping anyone. Wireframing minimize/maximize etc mght have been more useful.
Much more phone app animation appears to be synchronous, blocking, so the pretty animation is making the app slower. Every time. It appears often to be there as gloss. That's fine the first day when you don't know the way around, beyond that it's just slowing everyone up.
> But maybe it's also a generational thing? Taste and fashion change and perhaps users today aren't fazed or distracted by fast motion graphics?
LOL please. It's not that I am fazed and distracted by fast motion graphics, it's when it's done badly. I'd hardly call material design fast motion graphics either. MD when done right can be excellent. There's some great material design apps on my phone. I do think they went too far with the current flatten all the things cargo cult, but that's my preference. At least they didnt go as far as W10.
Let's take an example of a delete as given in the OP. We'll ignore the asking "are you sure", OK? :) Can I tap my thumb as fast as I can three times and delete 3 records? Or will I have to wait for it to catch up because of the needless cute collapsing animation? Did you actually delete 3, or just 2 because the middle tap was lost during animation play? That's just bad design for any generation, no?
Make a fast app without need for latency animations, and give me animations that are async so if I've become expert within your app I never see them because my taps cancel them. Give me a latency anim just when the network connection is rubbish, and only as long as it's needed. Now test your cute anims on an older phone, or a phone with something greedy running in background, or latency with a horrible or intemittent net connection...
I LIKE fast motion graphics in games, where they're often not fast enough, and movies :p
The vast majority of examples are not used appropriately adding distraction, or worse, they slow down actions. It's all over the place, cute or "helpful" animations or displays that just get in the way of using the damn thing. Home electronics that have "welcome" and "bye" messages delaying the on or off are in the same pointlessly annoying category.
To use his first example, if you use an animation for deleting a record, is it going to significantly slow down deleting? What about a number of records you want to delete?
Personally I'd stop using an app that decided to animate passwords like that. It's gratuitously distracting.
"we could even ditch the text completely, relying on our animations to provide user feedback"
Oh ffs no. So we have to guess what the bounce, shake, or dancing emoji is trying to tell us in place of "nothing selected"?
- separate buttons from animation, (buttons jump/stay, content animates). This allows for fast clicking.
- fast animations, so the animation and the underlying UI are not separate for too long.
Next Steps Ready to learn how to create these beautiful animations? Check out my blog and Motion Design course at The Kinetic UI.
It's not all that different from the endless stream of programming articles that promote a particular approach as the one true solution, when the writer happens to be a consultant in that specific approach.
"Awesome Agile Angular solves all your front-end woes! -- Sign up for my mailing list, buy my e-book, take my 3-day course, come see me talk at the TimeWaste 2016 conference."
note to self, trademark that conference name ASAP ...
(also, there was an update on February 29th, so it's still being actively developed)
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
7/8's default theme aren't that much better; can you tell which of these are active?
http://www.groovypost.com/wp-content/uploads/2012/10/Windows...
http://i.stack.imgur.com/rFOQm.png
XP/Vista, much clearer "pushed in" effect for the active button:
http://mytechquest.com/blog/wp-content/uploads/2009/09/Iconi...
Windows 9x/ME/2K/Classic - very clear pushed-in effect for the active button:
http://www.howtogeek.com/wp-content/uploads/2009/01/613x178x...
Animation should never delay interaction, and it should never interfere with gestures and mouse-ahead (or whatever the input device is).
The user should never have to wait for animation to finish before they're able to do something, and the interface should never be disabled during animation, or ever ignore the user's input under any circumstances.
User input should always pre-empt and interrupt feedback and animation.
The interface should always support quick gestures (mousing ahead, touching ahead, or whatever), without ever requiring the user to pause and wait, or focus their attention on the screen to watch the animation play out before they know it's safe to make the next move.
I developed a gestural pie menu tabbed window manager for the NeWS window system in 1990, which supported mousing ahead, suppressing the pie menu display and pop-up animation until you stopped moving, showing light weight feedback on the overlay plane, and executing commands instantly without any animation or even popping up the menu, when you make a smooth quick gesture without hesitating.
NeWS Tab Window Demo: https://www.youtube.com/watch?v=tMcmQk-q0k4
Transcript of the relevant part of the demo:
Now you can press the right button to pop up a pie menu on the tab or on the frame itself. And that has commonly used commands like front and back in mnemonic directions. Back is down, and front is up.
When you make a menu selection by mousing ahead, it doesn't display the menu.
As long as you're moving, it suppresses the menu display.
And it gives you feedback on the overlay plane of the slice that you're in, and the label of that slice, so you can actually see what you're going to get before you choose it without even seeing the menu itself.
And when you wait, it pops up the menu once you stop moving.
So if you waste some time by just waiting around, it will waste a bit more time by giving you some stupid animation.
And this is meant to be negative reinforcement, to encourage you to mouse ahead.
The sub-menu pops up. This is "move to" which is unconstrained move.
You can always get that from the tab by mousing left and right.
That's an easy gesture. Just quickly...
Or mouse there and wait. There it is. It pops up the one you're at first.
This is constrained horizontal move.
And this is constrained vertical move.
So constrained horizontal... We'll wait.
Constrained vertical...
So, I mean, once you're there, and you know what you want, why wait?
This is "beam me up": put it in the next layout position. To tidy the windows.
So, if you've clicked the menu up and haven't moved, it will just spin it, because it's confused, and doesn't know what you're going to do.
----
In other words: As it pops up and scales up the round menu, it also tilts it along the axis perpendicular to the direction of movement to reinforce the selected direction, or spins around the center if you haven't moved to show no direction is selected.
And you only ever see any animation if you actually stop moving -- once you make a selection, the command always executes or the submenu always activates immediately.
You can mouse ahead smoothly through multiple levels of sub-menus, without popping any of them up or seeing any animation, as long as you never hesitate.
By "lead, follow, or get out of the way", I mean that pie menus can lead novice users by giving them feedback and animation when they pause, follow intermediate users who move in the right direction then pause for the feedback to make sure they got it right, and get out of the way of expert users who know the right direction and can quickly articulate gestures without pausing or waiting for feedback.
----
Here's another demo showing pie menus, mouse ahead 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
Looks kids, Firstly its not motion design, its animation. Shoving in a non linear tween into an interface does not make it more useable. Thats why everyone hated flash, not because it was insecure or "slow", they hated it because it was full of stupid transitions.
Lets put it this way: Go look at FT.com Look at it, its horrific. In terms of design it basically a poorly translated printed page on the screen. However its wildly popular. 500,000 people pay for that interface, why? because the content is so good.
Let that sink in for a moment.
If the only differentiator between you and your competitor is the amount of ease-in tweens in your UI, you're in an over-saturated sector, go home, start again.
As for the OP's first assertion: "if something has been deleted, shove an animation in" NO. what if I want to delete multiple items quickly? (I'm looking at you IOS Mail app.) do I seriously have to suffer that battery sucking animation Every. Fucking. Time?
Just lay it out, make it consistent, remove as many steps as possible, and make it fast. Let your content/USP do the talking.
One concrete example from OpenLaszlo: there was a "cinematic" input focus indicator, so when you tabbed between controls in a form, it would smoothly fade in, animate over and fade out four corner chevrons from the current field to the next, to draw your attention and move your eyes to the next field in a form.
And of course it supported type-ahead: you could quickly press any number of tab or back-tabs, and it would continuously animate toward the current input focus.
I thought it was actually pretty nice and served a purpose, and was obvious enough that it didn't need any explanation, but yymv.
Here's a talk about OpenLaszlo that defined the term "Cinematic User Experience" (this was years ago so it all seemed so fascinating at the time):
Creating a Cinematic User Experience with OpenLaszlo: http://webconf.hu/2007/program/i/openlaszloen.html
What is meant by the term Cinematic User Experience? It’s characterized by the following:
Continuous User Interface: By featuring fluid application state changes, rather than today’s standard page-by-page format, a Laszlo-enabled site helps users stay oriented and efficiently complete multi-step online tasks.
Universal Canvas: With the ability to view common media data types including text, video and sound formats seamlessly on a single “universal canvas,” users are able to work with integrated multimedia information displays without the distraction of separate playback software for each media data type. Furthermore, Laszlo enables a wide array of media types without requiring users to install additional plug-in software.
Real Time Information: Traditional Web sites only update information when a page is reloaded. Laszlo enables live data push into standard browsers. This real-time messaging enables Laszlo-powered Web sites to provide integrated instant messaging and real-time inventory or financial information displays.
Other people have used the same term in various ways:
Cinematic Continuity in User Interface Design: https://medium.com/ux-design-1/cinematic-continuity-on-ui-de...
Cinematic Interfaces -- Film Theory After New Media: https://www.routledge.com/products/9780415833158
The NeXT used to do that on the login screen. It got huge applause at the premiere I saw in 1988.
> Any way you can avoid showing a loading status will make your app appear much faster.
The animation is now the loading status. The animation isn't making the user think the app is faster, it's just taking the place of a different animation that would show the asset is loading.
I do appreciate showing that loading status so I don't have to try to figure out what my phone is doing by looking for the spinner at the status line at the top of the screen, but don't change the size of the button and distract me from the content.
I disagree. The right hand animation, sure, but if I saw the middle animation, I don't think I'd register the latency at all. In fact I think I might misinterpret and get irritated that my time was being wasted with an unnecessary animation.
Not necessarily better, but I would have been distracted from the load time.
It's horrendous because there is a non deterministic delay before it shows. If I glance away from the screen and miss the animation I have no idea that the login has failed.
It also doesn't differentiate between different failure modes. I've had my company's active directory stop working, but I don't know this because the feedback is exactly the same as if I'd mistyped my complex password.
As a rule: a failed login is the wrong time to try and delight me with a beautiful UI.
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.
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)
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.
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...)
Sorry but there's a reason why the comments here are negative. I'm a temp designer and even I stay away from transitions, they are almost always inappropriate, slow down the experience, distract attention, delay response. Especially as users get better and more familiar with using the app and use it more and more. These transitions start to become obnoxious.
Just look at the mess caused by CSS3 transitions over the last 4 years. Especially those stupid Parallax backgrounds. No longer can you simply scroll down and have the page and images go up... Oh no, now the images fade in as you scroll down, pop in off screen, backgrounds move at a different rate than the rest of the page. And for what? To impress someone? It's annoying, not impressive.
On the other hand, with the examples Craig Dehner gave in this article, motion design is great for tutorials so you can see what elements changed, where it went, etc... It would be nice for an app to have transitions only for the first 3 times you perform an action, after that they disable.
The upshot is that we're in a period of flux, but eventually standards will emerge and "motion design" will be largely a matter of UI standards and style guides, just as "button design" is today.
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.
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.
In some cases, we could even ditch the text completely, relying on our animations to provide user feedback.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.