Animation is similar in anatomy to video in that it is made up of a series of images, except that animation is not a capture of the real life. While animation can be bitmapped- or vector-based, it is vector-based animation, which has made animation widespread on the Web, because it produces much smaller files. This means that the need for compression is not as much a major issue in the preparation and delivery of animation as it is in video.
1. Guidelines on Effective Use of Animation
The popularity of 2D animation had been largely due to the advent of Flash technology, and now, the advent of HTML5 and CSS3 is set to take this to a higher level, with functionalities such as transform, transition, and animation. These functionalities allow for a whole new range of animations to be seamlessly and easily incorporated into a Web page, such as moving objects around, changing their color and shape, making messages appear to notify users and then disappearing, and so on.
Unfortunately, the problem with the abundance of such functionalities is that attention often seems to be paid more to using as much of them as possible to showcase what can be done than to using them selectively and purposefully to ensure that usage helps user experience. Even large corporations that presumably employ professionals to build their websites still seem to end up with designs that are frustrating to use because of too many movements going in them. For example, there might be videos starting automatically, animations going on at the peripheral of vision, and texts expanding and collapsing, because it is updating in real time, causing the position of the content to shift without warning. All this leads to bad user experience. Moving objects are especially powerful things, because they attract our attention, whether we like it or not. However, this same property can also cause distraction and annoyance. This is why thoughtfulness is essential when using animation. Some guidelines based on results from studies, for example, from Nielsen Norman Group, a group specializing in interaction design, are presented here.
1.1. Common Uses of Animation
Animations are used for many purposes. Knowing what animations are commonly used for and determining whether or not they match your reasons for using animations can help in using them appropriately. Some of the ways in which they are used include:
- Attracting user’s attention, for example, to a notification that the user is required to respond to or notice immediately.
- Illustrating change over time, such as how something or an area has changed over time.
- Showing transition, such as between states, as animation enables users to follow and understand the change from one state to another better than if the change is abrupt.
- Showing relationship between objects on which the user is already focused, such as showing how the parts of a machine work.
- Providing feedback to inform users that an action has been successful or that something is going on. Examples include rollover effect, depicting progress, such as when a file is being downloaded.
- Setting mood. For example, it can be used to create a sense of liveliness on a page that is providing information about a party. Party balloons, for instance, can be animated to float down the screen on entry or to float in the background. Similarly, falling snow can be simulated to set a Christmas mood. Naturally, when these are done, care should be taken not to compromise legibility.
One way of achieving this is by placing text in a plain-color box, as illustrated in Figure 6.32 in Chapter 6.
- Adding entertainment or fun value, which includes elements changing color or moving, especially in designs targeted at children.
- Showcasing new technologies and techniques; however, this is not usually appreciated if it compromises user experience, as is sometimes the case.
1.2. Using Animation Effectively
While using animations appropriately ensures that your desired goals are achieved, it does not address the matter of how they affect user experience. In order for the use of animation to be considered completely effective, it should cause users little or no inconvenience.
- Notifications that appear near the edge of the screen should be made to appear slowly, either by slowly sliding in or by gradually fading into place. This is because we instinctively direct our attention to movement, especially fast, abrupt, or large movement, at the periphery (i.e., corners of the eyes). The periphery of a Web page includes areas outside the central area and is where animation adverts are typically placed.
- Animation is best used based on the user’s action, rather than on indirect actions, such as on the loading of a page, when the user is scrolling, or on some other events; otherwise, it might confuse users. For example, when text is collapsed or expanded, it should be as a response to the user’s action, such as when user checks a checkbox in a form or clicks some other element on a page.
- The user should not be made to encounter an animation too frequently in a session. Once, it might be tolerable, but when it happens repeatedly, it can be irritating. An example is using unnecessary animation for the start of every page, such as objects zooming into place. Another example is hiding and revealing the main menu of a page, either from the top or from the side, compelling users to go through the animation each time they want to access the menu. If space permits, main menu should be permanently displayed. Users will not miss the animation.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.