Article written by : The Great American Small Business Challenge
Another user interface paradigm that has grown thanks to smartphones and faster connections are rich animations. It makes the experience more interactive and entertaining while providing functional feedback to the user. The animations need to be placed carefully so that it enhances rather than takes away from the user experience. Animation on websites can be classified in two ways:
Unlike small-scale animation described below, these are used for interaction purposes. A basic example would be a hidden menu which appears with a large page shift animation. Another would be where content changes when the mouse cursor hovers over a selection. While not exactly an animation, even the usage of slideshows and galleries to show multiple sets of photographs falls into the large animation category. The most striking example is the background animation. PayPal uses this to good effect.
Small scale animation
These are small animations in size and are used to convey an action of some sort. An example would the loading animation. Depending on how it is used, this can be a progress bar, a spinner. Another example would be motion animation where a product or service is shown in motion on the website. Look carefully the next time you browse and you will a lot of examples of small-scale animation usage.
Most other animation techniques actually use a combination of the two to both lead up to and enhance the larger animation.