First, when you select the documents you want to move, they swoop into a stack under your cursor and a number appears to remind you of how many you selected. As you move this stack of documents over your folders, the background color animates to indicate where items can or cannot be dropped. And, finally, when you drop your documents into a folder each document in the stack animates back on the z-axes into the folder, one at a time.
That’s a lot of animation happening over the course of that drag-and-drop interaction! The key to what makes it work is how the animation always moves with you, you’re never waiting for it to do its thing before you can move on. Throughout the whole process the animation is giving you the feedback you need, right when you need it, to be confident everything is going as you intend.
Reinforcing continuity with animation
With all the different screen sizes our interfaces have to appear on these days (especially the small ones!), it is not uncommon to have parts of the interface offscreen at any given time. With limited space, we often have to move things in and out of view depending on the current task or point of focus. Usually, as the one designing the interface, you have an idea of where all these interface objects are, even when they’re not in view (kind of like a mental map of where all the interface elements “live,” even when they are off screen). Surfacing this mental map to your users helps to make your product easier to use, and you can use animation to lower the cognitive load required for them to keep track of where everything is.
Sliding in to save cognitive load
One example of this is the navigation and add to cart functionality on Cotton Bureau’s site. Neither part of the interface is visible when you initially browse for your new favorite T-shirt, but when you click on the menu icon, the navigation slides in from the left. And when you add a shirt to your cart, the cart slides in from the right: