Animations are not easy to use effectively in Web design if they are not used to convey specific messages. Indeed, most uses of 2D animation on the Web are a distraction. It can often get to the point where it is difficult to concentrate on important or desired content for various things moving and flashing endlessly at the peripheral of vision. In order for the use animation to be effective, correct type of animation needs to be used, used in the right context, and with consideration. As with any other media, in order to be able to use animation effectively and in a way that does not compromise user experience, it is useful to know as much as possible about it, such as common uses and the shortcomings of using it. User experience refers largely to users’ emotions or affective states during their interaction with your design, and many factors affect it; how animation is used is one of them. Other elements that contribute to user experience are discussed in Chapters 24 and 25.
The uses of animation vary widely, but the main ones are to attract attention, provide feedback, provide explanation, provide entertainment, and set mood. If you use it for reasons unrelated to these, then you should ask pointed questions about its appropriateness in your design.
1. Animation in Attracting Attention
On a screen with a lot of information, it can be difficult to ensure that users definitely notice a specific item. Animation can be quite useful for achieving this. This is because moving objects can often have an overwhelming effect on human peripheral vision, thereby compelling people to attend to them. However, this same property of animation can be a disadvantage if users have to constantly make conscious effort to ignore objects they do not want to see or have already seen. This can be annoying to many users and can turn them away rather than consider the message you intend to convey. This is one reason care is needed when using animation in a design. So, for example, when flashing is used to attract attention, it should not be made to go on endlessly.
A more appropriate use of flashing in attracting attention is to let any item to which you want to attract users’ attention flash for only a few times, say, on entry to a page. If it is not feasible to do this, then other ways of attracting attention, such as using a different color, should be used. An option can also be provided for users to stop a flashing object, although this might be a harder option, as it might be more difficult to implement. Alternatively, a separate window could be used, so that the user can stop the animation by closing the window. Similarly, if animating a headline, for example, by moving it to and fro to draw attention to it, as done on some Web pages, it is important to remember that it can be distracting if it goes on endlessly. So, just moving the text a few times on entry to a page is usually enough to get the attention of the user.
2. Animation in Providing Feedback
The use of animation in feedback spans a variety of areas, but the most common purpose is to inform a user about what is going on in an application. Without feedback, users generally find it difficult to tell if an action has been successful, or whether or not a system is attending to a request. It is not uncommon for users to think a system has crashed when there is no feedback. The following are some of the common ways animation is used for feedbacks.
2.1. Depiction of Transition
This type of feedback involves communicating transition from one state to another, as can be achieved with the transition property. One common use of transition is when the in-between stages are shown of an opening or closing window. Using animation in this way simulates natural behavior and can help inform users about what is going on, thereby enhancing the general quality of interaction with a system. However, the image of the inbetween stages of transition should not be too imposing, as this can look like a flash across the screen, which can be jarring.
2.2. Rollover Effect
Feedback can also be in the form of a direct response to an action, such as the movement of cursor or finger over a navigational aid like a button, a hyperlink, or a menu item. This is almost like a query-response situation. A user placing the cursor or finger over a button, for example, is synonymous to asking the button about itself (its state, what it does, etc.) and the button’s reaction is the response. This query-response type of feedback, previously introduced as rollover effect or hover effect, can involve manipulating different elements. For example, the shape of a button can be slightly changed; the background of text may be made to change color, an active area can be made to shimmer, or display some other effects, such as surrounding marching ants or flashing background. Figure 18.20 shows an example of the use of rollover effect for giving feedback. Notice that the background of the text changes only when the cursor is in the bounding area of the text (i.e., the immediate area around the text). It is particularly common to use this form of feedback when the cursor moves over a list of menu items, whether the cursor is moved by a mouse or other types of interaction devices, such as eye-tracking devices. Notice also that the shape of the cursor is also changed. Incidentally, hover effect as of time of writing does not apply to touch screen interaction.
Feedback in hover effect can also be in the form of presenting a brief description of an element’s function or state. For example, placing the cursor over the icon for setting the viewing parameters for a YouTube video says “Settings.” Typically, the animation used in hover effect is noncontinuous and fit for purpose. However, in some cases, it may be more useful to have continuous animation that better describes a function, particularly when icons project ambiguous messages about their functions. For example, when the cursor goes over a print-function icon, the icon can change state to one of continuous animation, in which paper seems to come out of a printer, rather than the icon or its border just changing color.
3. Animation in Providing Explanation
Content sometimes contains materials that are only best explained with motion. Using animation in this way is particularly common in Web learning applications and presentations. It is used, for example, to visualize concepts and relationships in various fields like engineering and meteorology and to show how things work, such as the movements of machine parts in engineering, how elements react in chemistry, and how animal body parts work in biology and medicine.
4. Animation in Providing Entertainment
In general, animation can provide a source of entertainment when used within the right context. Although the right contexts are not always easy to find when designing applications for adult users, they are much easier when children’s applications are concerned. For example, it is almost standard to use animation in children’s learning applications. It can be particularly effective in making the applications more interesting, exciting, and entertaining, and possibly more capable of retaining children’s attention. Animation, along with vivid colors, is central to making children’s applications entertaining. Again, even when using animation in children’s applications, it still needs to be used appropriately in order for the right result to be achieved, particularly in learning applications.
5. Animation in Setting Mood
Setting mood is important to users’ experience in some types of applications, and animation can play a role in doing this. For example, it can be used to create a sense of liveliness in a website that is providing information about a party. Party balloons, for instance, may be animated to float down the screen, on entry to a page; or to float in the background. Similarly, falling snow can be simulated to set a Christmas mood. Of course, it is important, again, to remember that animation that goes on all the time can be distracting, although for a party page this may be tolerable
to an extent, particularly as no serious reading or comprehension is usually involved.
6. Animation in Providing a Sequence of Items
In some contexts, it is useful to inform users of available options without them having to use any navigational aids. In such contexts, animation is sometimes used to present these options in the form of a rotating sequence, as if on a revolving conveyor belt or carousel, for users to click on the item of interest and be taken to a page that provides detailed information about it. This technique is sometimes used to provide news summaries. A potential problem, though, is that the change from one summary to the next can sometimes occur before users finish reading. This can be particularly frustrating for users, which means that some sort of user control is useful in the form of an option to pause or stop the animation. One common implementation of this is to provide a set of controls at the bottom of the animation to pause, go forward or go back. Ideally, when users click any of the controls, the animation should stop, allowing users to then manually navigate the content.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.