Animations can help make an interface seem more tactile and engaging, particularly when they serve a purpose. A common example is the bouncing icon on the Mac OS X dock. By hopping up and down in the dock, an application’s icon lets you know that your attention is needed in a way that’s obvious and intuitive.
On the web, animated elements are not a common sight, which for the most part is a good thing. But in some instances they can help improve usability and turn a clunky interface into a more elegant user experience.
For Scopings.com, we designed an animated element that housed all three starting points to the application- the login, registration and a special code that lets a user jump to a specific page. It contains six links, three text boxes and two buttons without cluttering up the interface. By sliding in each starting point over one another, it avoids overlapping the rest of the page and keeps a user’s eyes and mouse in the same place.
Once mocked up, the technical implementation was straightforward with a little JavaScript and CSS. In the past, smooth animations that worked in every browser were not trivial. But there are now plenty of JavaScript frameworks that help with much of the heavy lifting. The most popular are jQuery, Prototype (with Script.aculo.us), Mootools, and the framework that we chose to use, YUI (Yahoo! User Interface Library).
Since our application had three entry points, we created three HTML elements or “sliders” for each and positioned them absolutely with a negative y-position that effectively hid them from view. We created one more slider with a link to each starting point, which would then slide in when clicked.
To slide in the elements, we used the YUI animation library. We pass in the element we want to slide in, the attributes to animate (the y-position in this case) and the duration in seconds that the animation should take. The final argument is the easing method, which we’ve set to “easeOutStrong” to make the slider slow down right at the end of the animation for a more natural feel.
function AnimateSlider(element, yPosition) {
var attributes = { top: { to: yPosition) } };
var animation = new YAHOO.util.Anim(element, attributes 1, YAHOO.util.Easing.easeOutStrong);
animation.animate();
}
You can take a look at the sliders in action on Scopings.com by clicking on sign in or register. We’ve also put up a demo page that has the minimum amount of HTML, CSS and JavaScript needed to implement similar functionality in another application.