Human-Computer Interaction: Guidelines for Web Animation - 5 December 2006
by Golnessa Galyani Moghaddam and Mostafa Moballeghi
Read this article in Chinese (translated by Zhiqun Liao and Wenjing Yin, proofread by Sean Liu)
Human-computer interaction in the large is an interdisciplinary area which attracts researchers, educators, and practioners from many differenf fields. Human-computer interaction studies a human and a machine in communication, it draws from supporting knowledge on both the machine and the human side. This paper is related to the human side of human-computer interaction and focuses on animations. The growing use of animation in Web pages testifies to the increasing ease with which such multimedia features can be created. This trend shows a commitment to animation that is often unmatched by the skill of the implementers. The paper presents a set of guidelines and tips to help designers prepare better and more effective Web sites. These guidelines are drawn from an extensive literature survey.
Human-computer interaction (HCI) is known as an interdiciplinary area which attracts researchers, educators, and practioners from many differenf fields.There is currently no agreed upon definition of the range of topics which form the area of human-computer interaction. However, it is a discipline concerened with the design, evaluation and implementation of interactive computing systems for human use and with study of major phenomena surrounding them1.
Human-computer interaction in the large is an interdisciplinary area. It is emerging as a specialty concern within several disciplines such as computer science, psychology, sociology and anthropology, and industrial design. So, human-computer interaction studies a human and a machine in communication, it draws from supporting knowledge on both the machine and the human side. On the machine side, techniques in computer graphics, operating systems, programming languages, and development environments are relevant. On the human side, communication theory, graphic and industrial design disciplines, linguistics, social sciences, cognitive psychology, and human performance are relevant. And, of course, engineering and design methods are relevant.
This paper is related to the human side of human-computer interaction and focuses on animations. The paper presents a set of guidelines and tips to help designers prepare better and more effective web sites. These guidelines are drawn from an extensive literature survey coloured by personal experience.
Animations have long been promoted as an even more compelling way to educate users by showing the dynamics of user interface actions. However, the research results have often surprised and frustrated the promoters of animations, since it is rare to find measurable benefits for users of animations2. User satisfaction with animations is usually high, but animations appear to distract users from concentrating on key issues3.
A recent review covered research on computer animation in education, human-computer interaction and psychology4. These authors concluded that computer animation is not a panacea, but it can improve users’ performance and attitude under certain circumstances. They summarized five factors that could influence the effectiveness of animation: the content to be animated, the level of interactivity, objective of animation, design of animated interface, and individual differences.
Haas and al. (2005) compared text, graphic and animation to provide meanings of statistical terms. There was little difference among formats in the effectiveness of presentations. User preferences varied but results suggest that the type of terms being explained made a difference, animations being more useful when there is an action or process. The lack of control of the timing of animations was seen as a problem5.
3. Animation in the Web Environment
Animation is a dynamic visual statement, form, and structure evolving through movement over time6. Animations are popular objects that users encounter frequently, if not all the time. They have been used for different purposes and can be found in many computing environments, especially Web pages and online advertisements. Some designers use animations to convey messages, believing they are more powerful than text within a limited display area of a computer screen7, although there are cautions regarding animations’ efficacy8.
It seems that to most people and at most times, animations on the Web are disturbing and annoying. Being interrupted or having one’s attention involuntarily shifted by animation on a Web page is a typical experience for many Web users. This is especially so when animations carry information that has nothing to do with viewers’ tasks and needs at the time. Zhang refers to this type of animation as non-primary information stimulus or secondary stimulus to users9. In other words, they carry no information for users’ information-seeking tasks or immediate information needs.
Zhang believes that animations as non-primary information stimulus can create visual interference that affects one’s information-seeking performance. Extraneous animation that is present continuously or appears suddenly can act as a distraction, interfering with users’ concentration on pertinent information. Thus, it disturbs and often annoys people as they search for useful information on the Web, lengthening the time needed to obtain information correctly9.
She also pointed out, although there are visual attention theories that may explain certain visual interference phenomena, it is unclear whether we can apply them directly to information-seeking tasks in a computing environment such as the Web. A primary reason for this is that the exposure time of stimuli in traditional visual attention studies is much shorter (milliseconds) than that on the Web (seconds or minutes), and one’s visual attention behavior may change during this relatively long exposure time9. The second reason is that the experimental environment or setting in visual attention studies is different from that in a computing environment, such as the Web. In visual attention studies, special types of equipment are used to display stimuli and capture responses. To date, few empirical studies report the effects of animation in a Web environment. So the applicability of visual attention studies needs to be tested in the Web environment. Zhang study concluded that (1) Animation as a secondary stimulus deteriorates viewer information seeking performance. (2) As the difficulty of the task increases, viewer performance is less affected by animation. (3) Animation that is similar but irrelevant to a task has more negative impact on viewer performance than animation that is dissimilar to the task. (4) Animation that is brightly colored has a stronger negative effect on viewer performance than does dull colored animation9.
4. Visual Attention Theories and Disturbance Phenomenon
Research results from studies in visual attention and perception can provide a plausible explanation for the disturbance phenomenon. Studies show that in general, objects in our peripheral vision can capture our attention10. Because attention has limited capacity, the available resource for attention on the pertinent information is reduced, thus information processing performance, including time and accuracy, deteriorates11. Since our ability to attend to stimuli is limited, the direction of attention determines how well we perceive, remember, and act on information. Objects or information that do not receive attention usually fall outside our awareness and, hence, have little influence on performance12. Perceptual attention is usually studied with two primary themes: selectivity (conscious perception is always selective) and capacity limitations (our limited ability to carry out various mental operations at the same time), although a variety of other notions are also studied13. Specifically, attention has been studied from two perspectives in order to understand different aspects of attention: selective attention and divided attention.
Selective attention is also known as “focused attention”. It concerns our ability to focus on certain sources of information and ignore others12. Usually the criterion of selection is a simple physical attribute such as location or color13.
Divided attention is also studied by presenting at least two stimulus inputs at the same time, but with instructions that all stimulus inputs must be attended to and responded to14. In divided attention, the question asked of the subject depends on the categorical identity of more than one of the stimuli13. Studies on divided attention provide useful information about our processing limitations (ability to divide attention among multiple tasks), and tell us something about attentional mechanisms and their capacity[14, 12].
5. Guidelines for Web Animation
As mentioned earlier, research results show that the animation of Web pages should be carefully designed to avoid negative effects on the users. Some authors such as Wier and Heeps have given comprehensive guidelines for designers15. Their ten principles for Web animation are listed as follow:
5.1. Do not Distract Attention from Salient Information
Attention must be drawn to the essential features of an animation, so that users focus on the relevant aspect of the animation16. Creating a simple, uncluttered animation where the information is directly mapped to the visual information can facilitate users in selecting the essential information from an animated display17. Animations as non-primary information stimulus can create visual interference that affects one’s information-seeking performance9.
The principle recommends avoiding the use of animation that distracts attention from critical areas, but has a corresponding positive message, viz., animation can be used effectively to attract attention and help direct a user’s visual focus and perception. Thereby, ‘pointers’ which attract attention and emphasise relevant information are desirable uses for animation.
5.2. Avoid Clutter
The human information processor has adequate but limited visual processing capacity so that multiple representations of static and moving objects in the visual field competing for this capacity frequently result in ambiguity. As it mentioned in the literature, since our ability to attend to stimuli is limited, the direction of attention determines how well we perceive, remember, and act on information. Objects or information that do not receive attention usually fall outside our awareness and, hence, have little influence on performance12.Users may attempt to ignore some components in their perceptual field when faced with a cluttered display and this is often detrimental to message delivery. The principle of avoiding clutter also suggests the positive message that brevity and succinctness are desirable in animation.
5.3. Allow Appropriate Exposure Duration
The human eye takes time to process change and rapid exposures simply divide the brain’s attention between the previous image and the current one18. The brain is tricked into believing that two things have to be processed at once19. A related problem may occur where a user is given more time than is necessary. Additional time is likely to cause boredom and the onset of fatigue will impair the viewer’s concentration and comprehension.
Precise guidance on suitable exposure duration is problematic since it depends largely on the environment and the context of the particular animation. However it should be noted that for information exposure, ‘too much is generally better than too little’.
5.4. Manage the Positioning and Organization of Objects
These aspects should be influenced by Gestalt theory20. The Gestalt law of proximity advises that related items should be located closer together than non-related items.
Information should also be organised in terms of precedence. According to this law when things are placed closely together, the individual’s perception recalls the members of the group more accurately. Similarly, things which are similar are likely to form groups. In terms of motion, objects that move simultaneously may be ‘grouped’ by the viewer. Information should also be organised in terms of precedence. Objects of greater importance must appear in positions of greater importance on the screen from the user’s perspective21.
5.5. Adhere to Colour Conventions
The influence of colour is greater than a mere cosmetic effect and where used wisely they can aid the animator in conveying a message and removing possible ambiguity.
There are standards for the association of meaning to colours from organisations such as the Occupational Safety and Health Administration (www.osha.gov). They have standardized: red with danger, orange with warning, yellow with caution, blue with notice and green with safety. Other conventions associate red with heat (or blood), green with nature and black with death. Animators should be aware of the potential influence of preconceived ideas of colour association them. Colour should be used primarily to discriminate objects or aspects of objects that are relevant. Irrelevant differences in colour can distract and mislead users; colours used should provide additional representational information for a particular animated concept.
The result of Zhang study is notable here “Animation that is brightly colored has a stronger negative effect on viewer performance than does dull colored animation”.
5.6. Support Animation with Textual and Auditory Information
Animation alone is always at risk of ambiguity through differing user interpretations. The use of text, sound and possibly, narration, can provide constraints to the interpretation of any animation.
Although text may also hold ambiguities, when combined with animation the likelihood of an ambiguity is reduced. Where a user’s view of an animation is likely to be mistaken the presentation of ‘backup’ text is likely to eliminate the ambiguity.
Sound is perhaps the overlooked medium and is often neglected within animation. Like colour, sound should only highlight or provide an additional backup to existing objects and their behaviour (e.g. linking a sound to an action). Sound can help to discriminate between different actions within an animation or to provide feedback dependant on a particular result.
Narration is often favoured in instructional animations on the principle that it facilitates successful learning. Narration must occur simultaneously with the relevant animation or learning and recall benefits are significantly diminished. In addition, animation irrelevant to the narration should be avoided. Given the content of an animation design, further nongraphical communication modes should be used to support the meaning. In other words, the pictorial content should determine the non-graphical features.
5.7. Appreciate the Insights of Semiotics
Semiotics ‘deals with meanings and messages in all their forms and in all their contexts’; ‘the subject matter of semiotics is the exchange of any messages whatsoever – in a word communication’. Acquaintance with this discipline will assist potential animators to determine how meaning is produced and conveyed in animations that are meanings from visual communication cues. Animators must also appreciate the need to use appropriate levels of abstraction. Animations should not contain objects or actions which are so detailed that they cause information overload.
5.8. Comply with the Cooperative Maxims
Grice’s Cooperative Principle24 notes that in ordinary conversation both parties to the interaction share a cooperative principle which serves to promote understanding and comprehension. Grice analyses interaction as involving four maxims related to quantity, quality, relation, and manner. Although Grice conceived these principles in the context of spoken language they are easily adapted and well suited to the promotion of successful animation. Weir and Heeps have rewritten maxims for the context of animation as fallow:
- quality: animator tells and portrays the truth not showing what is false
- quantity: the content expressed is adequately conveys the required message but avoids excess animation
- relation: the animation flows and is organised in a meaningful order
- manner: animate clearly, avoid generalisation, obscurity, ambiguity, disorder, and be natural
If we apply these derivatives from Grice to animation, this should aid in promoting comprehension and successful interaction.
5.9. Learn from Disney
Many traditional features of animation were developed in the 1930’s at the Walt Disney studios, where the emphasis lay in making animation realistic and entertaining25. Many of these insights are still pertinent as means of enhancing or optimising our Web-based animations. The main insights are listed briefly below.
- Squash and Stretch – define the rigidity and mass of an object by distorting its shape during an action
- Timing and Motion – space actions to characterize weight and size of objects and the personality of characters
- Anticipation – prepare for an action
- Staging – present an idea so that it is unmistakably clear
- Follow Through and Overlapping Action – terminate an action and establish its relationship to the next action
- Straight Ahead Action and Pose-to-Pose Action – two contrasting approaches to creation of movement
- Slow In and Out – the space in-between frames to achieve subtlety of timing and movement
- Arcs – design the path of action for natural movement
- Exaggeration – accentuate the essence of an idea by the design and the action
- Secondary Action – consider actions of an object that result from another action
- Appeal – create a design or an action that the audience enjoys watching
These Disney lessons, intended to secure greater realism in animation, will have a direct effect in reducing ambiguity. This will also tend to make the conveyed message more apparent by removing potentially unreal aspects of object behaviour.
5.10 Avoid Design Myopia
When animation aims to express a specific message, there is always a risk of ‘design myopia’. This condition is characterised by short-sightedness on the part of the designer. Generally, the designer’s view of a system is coloured by their familiarity with the aims and objectives that motivated the design. With the designer’s expert insight, the design may appear suitable, even ideal. Yet, to the naïve viewer the system may seem obscure and unobvious.
Animation is a dynamic visual statement, form, and structure evolving through movement over time. Animations are popular objects that users encounter frequently, if not all the time. They have been used for different purposes and can be found in many computing environments, especially Web pages and online advertisements. The growing use of animation in Web pages testifies to the increasing ease with which such multimedia features can be created. This trend shows a commitment to animation that is often unmatched by the skill of the implementers. There are some principles which can help Web designers to prepare better Web pages. These priciples have been traced in the literature. They have drwan based on the research results. The primary aim of these principles is to alert and sensitive animators to potential problems.
1 Hewett, T., R. Baecker, S. Card, T. Carey, J. Gasen, M. Mantei, G. Perlman, G. Strong, and W. Verplank, ACM SIHCHI Curricula for Human-Computer Interaction, New York, NY: Association for Computing Machinery, 1992.
2 Morrison, Julie B., Tversky, Barbara, and Betrancourt, M., Animation: Does it facilitate learning, Proc. Workshop on Smart Graphics, AAAI Press, Menlo Park, CA., 2000.
3 Weiss, Renee E., Knowlton, Dave S., and Morrison, Gary R., “Principles for using animation in computer based instruction: Theoretical heuristics for effective design”, Computers in Human Behavior 18, 2002, pp. 465-477.
4 Bétrancourt, M. & Tversky, B., “Effect of computer animation on users’ performance: a review”, Le travail Humain, 63(4), 2000, pp. 311-330.
5 Haas, S., Brown, R., Cao, L., and Wilbur, J., “Evaluation of the GovStat Statistical Interactive Glossary: Implications for Just-in-Time Help”, U. of North Carolina Technical Report, 2005. Available at: http://ils.unc.edu/govstat [viewed: 14 May. 2006]
6 Baecker, R., and Small, I. Animation at the Interface. In Laurel, B. (ed.), The Art of Human-Computer Interface Design.Addison-Wesley Publishing Company, 1990, pp. 251-267.
7 Gonzalez, C., and Kasper, G.M., “Animation in user interfaces designed for decision support systems: The effects of image abstraction, transition, and interactivity on decision quality”, Decision Sciences, 28, 4, 1997, p. 793.
8 Tversky, B.; Morrison, J.B.; and Betrancourt, M., “Animation: can it facilitate?”, International Journal of Human-Computer Studies, 57, 4 (2002), pp. 247-262.
9 Zhang, P., “The Effect of Animation on Information Seeking Performance on the World Wide Web: Securing Attention or Interfering with Primary Tasks”, Journal of Association for Information Systems, 1, 1 2000.
10 Driver, J., and Baylis, G.C., “Movement and Visual Attention: The Spotlight Metaphor Breaks Down”, Journal of Experimental Psychology: Human Perception and Performance, 15, 3 (1989), pp. 448-456.
11 Spieler, D.H.; Balota, D.A.; and Faust, M.E., “Levels of Selective Attention Revealed Through Analyses of Response Time Distributions”, Journal of Experimental Psychology: Human Perception and Performance, 26, 2 (2000), pp. 506-526.
12 Proctor, R., and Van Zandt, T. Human Factors in Simple and Complex Systems. Allyn and Bacon, 1994.
13 Pashler, H.E. The Psychology of Attention. Cambridge, MA: The MIT Press, 1998.
14 Eysenck, M., and Keane, M. Cognitive Psychology: A Student’s Handbook. Psychology Press, UK, 1995.
15 Wier, George R.S. and Steven Heeps “Getting the Message Across: Ten Principles for Web Animation”
Available at: http//:www.cis.strath.ac.uk/~gw/pubs.html [viewed: 14 May. 2006]
16 H. Petersen & J. Nielsen, The Eye of the Use: the Influence of Movement on Users Visual Attention, Department of Informatics, Copenhagen Business School, 2002.
17 Y.K. Beak, & B.H. Layne, “Colour, graphics, and animation in a computer-assisted learning tutorial lesson”, Journal of Computer-based Instruction, 15 (4), 1988, pp. 131-135.
18 M.G.H. Coles, A.F. Kramer & G. Logan, Converging Operations in the Study of Visual Selective Attention, American Psychological Association, Washington, 1996.
19 H. Shibuya & C. Bundesen, “Visual selection from multielement displays: Measuring and modeling effects of exposure duration”, Journal of Experimental Psychology: Human Perception and Performance, 14, 1988, pp. 591-600.
20 W. Kohler, Gestalt Psychology: An Introduction to New Concepts in Modern Psychology, New York; New American Library, 1966.
21 W. Kohler, The Task of Gestalt Psychology, New Jersey; Princeton University Press, 1969.
22 R.E. Innis, (ed.) Semiotics: An Introductory Anthology, Bloomington: Indiana University Press, 1985.
23 T.A. Sebeok, Signs: An Introduction to Semiotics, Toronto: University of Toronto Press, 1994.
24 H.P. Grice, Logic and conversation, reprinted in P. Cole and J. L. Morgan (eds.). Syntax and Semantics, vol 3. Speech acts,: Academic Press, New York, 1975, pp. 41-58.
25 F. Thomas & O. Johnston, The illusion of life: Disney animation, Hyperion, 1995.
26 G.R.S. Weir, J.D. Ferguson & J.N. Wilson, Animating complex concepts, Proceedings of ICHED2003, Aveiro, Portugal, 2003.
Golnessa Galyani Moghaddam, M.L.I.Sc, PhD
Faculty of Dept. of Studies in Library & Information Science, Shahed University, Tehran, IRAN
Mostafa Moballeghi, B.E., M.Tech.,
Ph.D Student, B.N.Bahadur Institute of Management Sciences,
University of Mysore, Mysore-570 006, INDIA
Golnessa Galyani Moghaddam, P.O. Box 673, Tonekabon, Mazandaran, IRAN
Possible Related Articles: