I hope you know the Android Design Principles, if not shh quick read them here. There is also a great talk on the principles from Google IO, so if you prefer video click this. Here I want to talk about animations in your application. Animations are great, they can create a delightful, enchanting experience. Animations can also help people understand your application, for example using transitions so users see how they’re moving around your applications information, but also animations and transitions can become repetitive. “I’ve seen that cool intro spinny whizzbang too many times now, I know this page zooms up and out so I’m going deeper into the information, but now it feels slow because I know. I’m a dedicated user of your application and so now I know how to use it and I want quick access to the good stuff.”
The Android Design Principles have three ideas I want to target here. I’ll show you a new library Quicksand that allows you in your applications to be able to accomplish all three.
Delight me in surprising ways
A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.
I should always know where I am
Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.
Make important things fast
Not all actions are equal. Decide what’s most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.
Delighting users in surprising ways allows you to onboard your users with great animations for understanding your application, just remember once they understand your app they don’t need to use up time watching animation again and again make important things fast.
Transitions are a big part of helping new users know where they are in your application. Keeping a users focus on a part of the screen they understand whilst you transition in new features really helps with comprehension of the first experience of your application. After a while though your users knows what happening and no longer needs such a handholding, they just want to get to their information fast. This is how Quicksand can help.
Quicksand is here to bridge the gap between delightfulness and speed. The idea for the name comes up because with Quicksand the more you move about the more you get affected by the sand and stuck. The other term in the library is viscosity, this determines the duration of your animations (in comparison to their original set duration), in Android and animations this is known as an Interpolator and in terms of the metaphor the viscosity is how thick your quicksand is getting.
Useage needs two things, first you set up a ViscosityInterpolator to determine how you react to your animation being viewed multiple times.
public class TwoStepViscosity implements ViscosityInterpolator {
@Override
public long calculateDuration(long defaultDuration, long viewCount) {
return viewCount < 10 ? defaultDuration : defaultDuration / 2;
}
}
The above viscosity TwoStepViscosity for example. Shows the animation at its normal duration for ten views and from then on it will show the animation at half the duration (so twice as fast).
Once you have a viscosity, you map it to a key, give this key value pair to Quicksand and then when you run your animation it will have its duration corrected according to the viscosity! Simple.. I hope.
Map<String, Viscosity> map = new HashMap<>();
map.put("MyViscosityAnimation", new TwoStepViscosity());
Quicksand.create(context, map);
Running your animation just needs one extra line of code to feed it through Quicksand. This will then be monitored so that everytime the animation is started this counts as one viewing.
Quicksand.trap("MyViscosityAnimation", myViewToBeAnimated);
This library was written for two reasons. The first is to highlight the user experience of animations and transitions as a key area for careful consideration. Hopefully making more people think about how they can help the user understand by adding animations but also understanding that these animations don’t have to be static for the lifetime of a users download of your application. Secondly this library was written with extensibility in mind, it is open sourced so that it can be fully understood by you and the ViscosityInterpolators written are base examples and hopefully you can extend them to your needs as you see fit. If you look through the standard documentation for interpolators here you can a wide range is possible and I’m excited to see how these can be used to enhance the user experience. A great visual example of interpolators can be found here.
Feedback and pull requests always welcome.
GitHub Repo:
https://github.com/blundell/QuickSand
Adding to your Gradle application:
dependencies {
compile 'com.blundell:quicksand:x.x.x' // replace with latest version
}