WritersUA - Training and Information for User Assistance Professionals

Animated Visual Instructions: Can We Do Better?

By Carla Galvão Spinillo, The Federal University of Paraná

Bookmark and Share

Animation is used to convey instructions in several fields. However, how effective are they for people? This paper discusses some drawbacks in the graphic presentation of instructions through animation from the information design perspective. It takes into account the functions of images and text/audio, interactivity, the time/speed presentation of the animation, and the cognitive aspects. Experimental and analytical studies are discussed to illustrate the relevance of graphic presentation of information to effectiveness of animated instructions.


Click a link below to jump to a particular section; click any "CONTENTS" image following a section heading to jump back here.

Introduction    Link to contents

Animated visual instructions are widely employed to represent step-by-step procedures to users in instructional material. Ideally, they should optimize task performance by allowing the inclusion of realistic depiction of action/motion and interactivity in digital environment. However, making information clear to people may go beyond realistic depiction (1), (2), (3) particularly in instructional contexts. The use of less realistic picture style (e.g. drawings) may be better than realistic ones (e.g. photographs) in providing users with relevant information to carry the task out. Similarly, schematic elements such as arrows and lines, may function as a support to better inform users about an action to be performed rather than using only the realistic depiction of the action. Thus, the design of animated visual instructions is not simply a matter of representing a procedure realistically, but of making information understandable to people so as to enable them to perform a task.

It is worth highlighting that despite the role animation plays in representing instructions it may not always be the best alternative. Depending on the context of use, user's profile, the learning goals, among other aspects, the choice for static representations may lead to best results. In this sense, Hegarty (4) claims that considering animation a better alternative to static representation is a naïve and constraining assumption that should give place to the concern about the conditions to use animation as an effective learning tool.

The appropriateness of using static or animated instructions was investigated by Wright (5) in a study on people's preference for information formats for procedural and reference tasks. She discussed the relevance of providing people with choices on the modes of content presentation. Regarding the preference for static or animated instructions both with the use of audio, she found no significant difference between these modes of presentation: 36% participants listened when the images were animated, and 33% when they were static. Such results indicate that communication effectiveness and people's preference are important aspects when designing instructions.

Moreover, animation may pose constraints to users in visualizing dynamic images representing steps. The temporary character of such images due to the short time of exposure in the animation may make information processing difficult to users (6) (7). Besides, animated images may not be able to provide or highlight the key-moment of an action/step, that is, they may not show the main information features which characterize an action/step (8). On the other hand, animation is claimed to promote learning motivation (9), to reduce cognitive load (10), and to facilitate visualization of complex procedures (11). These are, certainly, strong arguments for the use of animation to communicate instructions, as far as the representational constraints are taken into consideration in the design of animated visual instructions.

So, nowadays, designers' responsibilities go beyond the specification of animation to visually represent instructions. They regard the appropriateness of animation to convey different contents, the users' information needs and cognitive processes. In this sense, the modes of content presentation (verbal, pictorial, schematic), information hierarchy, and visual organization of elements are aspects to be taken into account in the design of animated instructions as they may influence users' preference and comprehension (5) (12).

Cognitive Aspects in the Design of Animated Visual Instructions    Link to contents

The visual representation of instructions is an inferential activity, which regards the level of accuracy of the description of the actions/task representation (13). User's partial knowledge, information gaps and/or general information may lead to mistakes and task failure when following instructions (13) (14), whether in print or animation. To follow an instruction users produce mental images of the task, and build an action plan to carry the steps out. One of the difficulties in using instructions regards users' mental representations of the action plan for the task. A mental representation of a task that provides the necessary information to users to perform the steps, results in a complete action plan for the task. Otherwise, users will fill the information gaps in the action plan with their assumptions on the task, and this may lead to task failure. Animated visual instructions as dynamic depictions of actions may then aid users to build accurate action plans for the task.

Other aspect that influences the effectiveness of animated instructions is the way information is organized and represented (15) (16). These may affect users' metacognitive processes during task performance. Wright (17) claims that cognitive and metacognitive processes regard the capacity of understanding and interpreting the visual structure and the content of written instructions. The cognitive process involve subconscious actions, whereas the metacognitive one the conscious actions taken to solve a problem (18). Thus, in the metagocnitive process the person is aware of her/his understanding of the message, and may even take measures when facing difficulties in grasping the message. Accordingly, following an instruction, whether represented by static or animated steps, can be considered a problem-solving activity that demands reading text and images.

Thus, the visual organization and presentation of information in animated instructions allow users to make decisions, modeling behavior based upon the outcomes of the task (13). They function as metainstructions. In this sense, the organization of the elements (the position of menus, texts and images) on the screen layout of animated instructions may ease users' metacognitive processes. Furthermore, the representation of introductory information about the task to be carried out may facilitate users' decision-making process. In this regard, the title of an instruction, the inventorial and the contextual pictures may also be considered metainstructions, as they play an important part in user's decision-making process (19). For instance, in an animated visual instruction on assembling a chair, the title 'How to assemble the chair', the inventory picture showing the necessary components and/or tools to carry the task out, and the contextual image of the chair assembled may help users to decide if they want to/can (or not) perform the task. Thus, the misplacement of menus, texts and/or images in the screen layout as well as the omission of introductory information may jeopardize comprehension of the animated instruction, affecting users' metacognitive processes.

In addition, providing users with the control of the format of animated instruction may also facilitate users' metacognitive processes. This makes possible for users to personalize the animated instruction in some of its features according to their information needs. So, they can decide for instance, on the picture style, the sequence of steps, the animation framing, and on the presentation of text and audio. Then, interactivity is an important resource to customize and personalize animated instructions. It may reduce users' cognitive load, promoting comprehension of the instructions, and therefore positively affecting task performance.

In Wright's (5) study on people's preference for information formats for procedural and reference tasks, earlier mentioned, she also conducted an experiment on choosing (or not) audio information together with images/graphics. She found that 96 out of 128 participants selected the audio mode more often in the procedural than in the reference tasks. This suggests that the use of audio information may be considered to support visual instructions by users. Similarly, in other experiment on combining information modes (text, audio and graphics/images), she found that 61 out of 128 participants preferred two modes of information presentation to the instruction on how to set an alarm clock. However, 28% chose to have the information presented in only one mode (verbal information), whereas 24% preferred the three modes of presentation. In face of these results, Wright claims that the lack of patterns in people's preference for information representation suggests the relevance of providing users with choices to decide on how information could be presented to them. Wright's results may also lead to the assumption that there is no general satisfactory way to represent instructions to people, and therefore personalization of information is perhaps the ultimate alternative.

Thus, designing animated instructions for people implies in empowering them to make decisions and in this regard, the modes of representation play an import part.

Multimodal Representation    Link to contents

In the design of instructions, different sensory modalities and media can be employed to promote comprehension and attention according to the message design and users' profile and information needs (20) (13). Thus, the pictorial and verbal modes (written and audio text) have been used to represent instructional messages in combination or separately, and their role in promoting communication success has been widely discussed in the literature (21)(15)(16). The functions of text and image can be of relay and/or anchorage (22)(23). In animated visual instructions the former regards the use of written text and/or audio text to complete the meaning of the dynamic image, and the latter regards text and image used to convey the same message.

The combined use of verbal and pictorial modes in animated instructions is in accordance to the Cognitive Theory of Multimedia Learning (21)(15). This theory is based upon the Dual Coding Theory proposed by Paivio (24), in which cognition regards two systems: the verbal and the non-verbal. The former processes the linguistic information, whereas the latter the non- linguistic information, such as images. Both systems work independently and cooperatively to mediate verbal and nonverbal behaviors, and cognition interplays the two systems according to the degree to which they have developed. Accordingly, to prevent information overload in one of the systems, the combined use of pictures and words are recommended, so as to in the Cognitive Theory of Multimedia Learning.

Several studies have investigated how and in what conditions verbal and pictorial modes support learning in animated instructions (15). In a study conducted by Spinillo et al (12) on the graphic representation of warnings in animated instructions, they found drawbacks in the relation between pictorial and verbal modes. Thus, users were not properly informed on the risks they and/or the product were exposed to.

Some warnings were presented only by the verbal mode (text and/or audio text) with no relation to the animated images showing the steps which they refer to. Other warnings were in relay relationship with the animated steps. This was considered to negatively affect users' cognitive information processes, as they have to watch the animation and read carefully the text as well as listen carefully to the audio to process the complementary information about the hazards. It was also claimed that the relay relation between verbal and pictorial modes in warnings might divide users' attention, as they deal with different contents presented in different sensory modalities. This was considered a misemployment of multi sensory modalities and media to communicate warnings in animated instructions.

The study results also showed that emphasis and conventions for prohibitions (cross or diagonal bar) were rarely or even not employed to make the warnings visually noticeable in the animated instructions. Attention is a key element in warnings, as they should firstly be noticeable and salient in a surrounding context, and then be legible and brief to allow prompt visualization (3). Thus, most animated instructions analyzed in the study seem to fail in this respect. As a possible consequence, the prompt visualization of warnings may not occur, preventing users to make decisions to avoid the hazard/risk. Moreover, the misinformation or lack of information about possible hazards in task performance may lead manufactures to be sued and to pay high fines if users are injured and/or the product is damaged due to their neglecting attitude toward consumers.

This study ratifies the important part graphic presentation of information plays in communicating instructional messages. It does not only regard the use of verbal and pictorial modes, but also how graphic resources are employed to aid them to represent content in animated instructions.

Some Aspects of the Graphic Presentation of Animated Instructions    Link to contents

Among the graphic aspects of the representation of instructions through animation, the visual relation between text and images, and the ways menus are displayed in the screen deserve special attention. Studies have suggested that they affect users/learners visual perception of information (25)(12) and, therefore, the misplacement of menus, text and images may jeopardize comprehension in animated instructions.

When texts are used, they can be presented integrated to the animated image as a caption and/or a label. In general, the former describes the step/content represented by the image, and the latter is employed to name parts of the image. Text may also be displayed apart from the images. In such cases, letters or numbers are added to the text and image to link them. The omission of visual cues linking the animated image to its corresponding text may endanger success in communicating the instructional message. Users/learners may not be able to establish a relation between the image and its separated text, preventing them to fully understand the image (without the support of the text).

Text may also vary in their typographic aspects in animated instructions, such as alignment (left, centred, right, justified), gender (bold, italic, regular), case (upper, lower), typeface, type size and space (line space, space between elements). These can be employed to confer hierarchy and/or emphasis, particularly in headings and warnings. The misuse of typographic resources may not only lead to legibility problems, but also negatively affect users' reading strategies (26)(17). For instance, in an animated instruction presenting a warning text, the signal word (e.g. caution, attention) should be highlighted (e.g., bold, upper case) to call users' attention to the hazard involved in the performance of the step.

Regarding menus in animated instructions, in general they are responsible for the interaction between users and the steps depicted in the animation. They can be displayed horizontally, vertically or in a hybrid form, integrated to or separated from the animated image. The can also be visible on the screen, or hidden. The hidden menus appear only when the cursor is positioned over them on the screen. The menu's functions can be represented by pictorial, verbal and schematic elements, such as pictograms, letters and arrows. They allow users to decide on the visualization of the steps (e.g. stop, forward, zoom) and on the use of audio/text; as well as to access non-procedural information (inventorial, contextual).

A study on the graphic presentation of animated instructions for the car industry (25) found that generally more than one menu was used on the interface and they were placed apart from the main image. However, when placed near the animated image, the menus were hidden. Moreover, the visible menus displayed the basic interactive functions (e.g., play, stop), whereas the hidden menus displayed specialized functions. These were only necessary when users want control of particular or detailed aspects of the animation (e.g., sectional view). Thus, there seems to be a relation between the menus' visualization and their interactive functions. The use of different kinds of menu visualization was considered beneficial to the design of animated instructions for car industry, as it may facilitate users' information processing, preventing cognitive overload. Figure 1 shows the interface of an animated instruction for the car industry presenting visible and hidden menus.

Figure 1: Hidden (top) and visible (bottom and right) menus. Source: Buba (25) page 54.

Other study on the graphic presentation of animated instructions found several drawbacks in the visualization of assembling procedures (12). They regard not only typographic aspects and menus, but also the depiction of actions. In the analysis of a sample of 23 animated instructions, the ellipses of the doer (the person represented in the animation) and events (time lapse) were considered the main problems. Some animated instructions omitted certain of steps, making the instruction shorter, as for instance, showing the first and the last steps and skipping the intermediary ones. Other animated instructions omitted the doer, showing for instance, the assembling tools moving by themselves. These representation strategies lead users to make inferences regarding the meaning implicit in the given representation of the action/steps and in time lapses, that is, in the gaps of the sequence of steps in the animated images. For experienced users, ellipsis of the doer and time lapses may not pose constraints in understanding, but for inexperienced ones these may cause difficulties (16)(27). Thus, the lack of information was considered to impair comprehension of visual instructions, which is related to users' capability to infer meaning from the depiction provided (13). This would also prevent users to build an accurate action plan for the procedural task, and therefore lead to action errors and even to failure in task performance.

The results abovementioned allied to the aspects discussed so far seem to point to the need of investigation on the effects of the graphic presentation of animated instruction on users comprehension and preference.

Validating Animated Instructions with People    Link to contents

The relevance of time presentation in visual instructions to content learning has been acknowledge in the literature (27)(28)(29). Regarding dynamic representations, a taxonomy was proposed by Ainsworth and Van Labeke (28) in which time can be categorized as time-persistent, time-implicit and time-singular. The first regards the use of spatial dimension showing a range of values to indicate time notion, whereas the second only regards the indication of a range of values (but when they occur). The third category, time-singular, embraces the representations that show one value of a variable at a time. This taxonomy is considered useful to differ animation from other kinds of dynamic representations, aiding to understand the role time plays in animated instructions.

A previous study (30) also brings an interesting classification for time notion, however regarding narrative texts. Time was considered to have two dimensions: the content time or actual time, and the discourse time. The former regards the natural time length of the event described; whereas the latter the ways the content of the event is narrated. The time dimensions may both occur in a narrative whether visual or verbal, and it is up to the viewer/reader to conciliate and comprehend the relations between these two dimensions of time. In this sense, the content time and discourse time in animated instruction may regard the speed the animation is presented to users/viewers. In other words, it refers to presenting the animation in the actual speed of the task or in a manipulated speed (faster/slower). Concerning this aspect, an exploratory study investigated comprehension of and preference for animated instructions on assembling a 3D puzzle, varying in time of presentation to users: spontaneous (actual time/speed for the task), slow and fast speeds (31). It was conducted with 25 adults in Brazil and task performance was observed. Figure 2 shows four screen shots of the animation tested.

Figure 2: Screen shots of the animated instruction tested.

The results indicated that the variation in time presentation/speed of the animation seems to have not affected comprehension nor task performance, as most participants understood the instructions and performed the task satisfactorily. However, speed variation did affect participants' preference for the animation presentation. The animation in spontaneous speed produced better results in preference, whereas the one in slow speed had the worst results. Some participants showed irritation and anxiety when watching the animation in slow speed. Others considered that the animation in fast speed, although interesting to watch, was not helpful when assembling the 3D puzzle. These results suggest that exaggeration in the time of presentation/speed of animation for more (faster) or for less (slower) produce unpleasant reactions towards the representation. Therefore, this negatively influences users' opinion on the animated instructions.

The study also found that participants expected the animated instructions to present interactive functions, allowing them to control, for instance, the animation speed, and to choose ways to visualize of the steps (backward and forward functions). This is in accordance with studies earlier mentioned here, ratifying the relevance of interactivity to animated instructions.

Final Considerations: Can We Do Better?    Link to contents

Based upon the aspects discussed here, it seems pertinent to state that animated visual instructions demand attention to their graphic presentation from a research based perspective. It also seems pertinent to claim that the effectiveness of animated instructions depends not only on the use of pictorial and verbal modes of representation, but also on (a) how these modes are employed, (b) the time of animation presentation and (c) the interactivity of the animation. These are aspects to be taken into consideration in the design of animated instructions, together with aspects of comprehension and preference for format presentations.

As an attempt to answer the question: Can we do better? some recommendations are proposed here. They are grounded in the literature on animated instructions and on the outcomes of the studies earlier mentioned. They are intended to identify where improvements would be welcomed in the design of animated visual instructions, as follows.

  1. Multi sensory modalities and media presentation should be used in order to promote comprehension (anchorage relation) and attention to information in animated instructions, and;
  2. Slow and fast speed presentations should be avoided as they may produce unwanted results (anxiety or information loss);
  3. Time lapse should be used carefully, as it may lead to omission of relevant events to task performance;
  4. Resources of interactivity should be used to allow users to control the animation, as this promote understanding;
  5. Emphatic devices should be employed to promote information visualization;
  6. When possible the doer should be depicted in the animated steps to promote comprehension;
  7. When pertinent, inventorial and contextual images should be used to ease information processing and the action plan for the task
  8. Users' emotion/affective aspect should be taken into account when designing animated instructions as it affect users' reaction toward the instruction depicted;
  9. When warnings are necessary, emphatic devices should be used to call attention to the hazard message in the animated instruction; and
  10. The verbal and pictorial modes should be in anchorage relation in warnings.

Despite the possible contributions of those recommendations to the design of animated instructions, investigations on the effectiveness of the graphic representation of instructions are still needed. In this sense, it is important to highlight that not only content comprehension should be verified, but also peoples' preference and task performance. This implies in conceiving communication effectiveness in animated instructions as a matter of usability, acceptability and satisfaction. So, quantitative as well as qualitative approaches to research on this topic are necessary from a person-centered design perspective, in which one person is more than one data to the design of animated instructions.

Acknowledgement    Link to contents

Thanks are due to CNPq- National Council for Scientific and Technologic Development of Brazil for supporting this study.

References    Link to contents

(1) Goldsmith, E. (1984). Research into illustration: an approach and a review. Cambridge: Cambridge University Press.
(2) Mijksenaar, P.; & Westendorp, P. (1999). Open here: the art of instructional design. London: Thames and Hudson.
(3) Wogalter, M. (2006). Handbook of Warnings. Mahwah, N.J: Erlbaum.
(4) Hegarty, M. (2004). Dynamic visualizations and learning: Getting to the difficult questions. Learning and Instruction, 14, pp. 343-351.
(5) Wright, P. (2007). Cognitively congenial interfaces for public informaton. In: C. Spinillo, P. Farias and S. Padovani (Eds). Selected Readings of the 2nd Information Design Ingernational Conference. Curitiba: SBDI-The Brazileian Society of Information Design. p110-116.
(6) Lowe, R. K. (1999). Extracting information from an animation during complex visual learning. European Journal of Psychology of Education, 14, pp. 225-244.
(7) Lowe, R. K. (2003). Animation and learning: selective processing of information in dynamic graphics. Learning and Instruction, 13, pp. 157-176.
(8) Catrambone, R.; & Seay, A. F. (2002). Using animation to help students learn computer algorithms. Human Factors, 44, pp. 495-511.
(9) Rieber, L. P. (1991). Animation, incidental learning, and continuing motivation. Journal of Educational Psychology, 83, pp. 318-328.
(10) Schnotz, W.; & Lowe, R.K. (2008). A unified view of learning from animated and static graphics. In R.K. Lowe & W. Schnotz (eds.), Learning with animation. Research implications for design, pp. 304-356. New York: Cambridge University Press.
(11) Höffler, T. N.; & Leutner, D. (2007). Instructional animation versus static pictures: a meta-analysis. Learning and Instruction, n. 17, pp. 722-738.
(12) Spinillo, C. G.; Souza, J. M. B, Maia; T. C.; Storck, G. R.; & Oselame, A. (2010). A representação gráfica de instruções visuais animadas: Um estudo analítico na perspectiva da ergonomia informacional. In: Proceedings of the do10º Ergodesign.
(13) Ganier, F. (2004). Les apports de la psychologie cognitive a la conception d'instructions Procedurales. InfoDesign- Revista Brasileira de Design da Informação 1, v1.pp 16-28.
(14) Wright, P. (1991). Issues of content and presentation in document design. In M. Helander (Ed.), Handbook of human-computer interaction, pp. 629-652. Amsterdam: Elsevier Science Publishers.
(15) Mayer, R. E. (2001). Multimedia learning. Cambridge: Cambridge University Press.
(16) Souza, J. M. B. (2008). Towards the optimization of software instructional demonstrations. PhD Thesis. Department of Typography & Graphic Communication, University of Reading. 227 p.
(17) Wright. P. (1999). Printed instructions: can research make a difference? In H. J. G. Zwaga, T. Boersema, & H. C. M. Hoonhout (eds.) Visual Information for everyday use: design and research perspectives. London, Taylor & Francis, pp. 45-67.
(18) Kato, M. (1986). No mundo da escrita: uma perspectiva psicolingu¨ística. São Paulo: Ática, 144p.
(19) Spinillo, C.G. (2011). Design da informação em instruções visuais animadas. Unpublished Research Report. Curitiba: The Federal University of Paraná.
(20) Conzola, V.; & Wogalter, M. (1999). Using voice and print directives and warnings to supplement product manual instructions. International Journal of Industrial Ergonomics, v. 23, p. 549-556.
(21) Mayer, R. E; & Sims, V. K. (1994). For Whom Is a Picture Worth a Thousand Words? Extensions of a Dual-Coding Theory of Multimedia Learning. Journal of Educational Psychology, Vol. 86, No. 3, 389-401.
(22) Barthes, R. (1964). Rhéthoric de l'image. Communications, 4. 40-51.
(23) Bassy, A-M. (1974). Du texte a l'illustration pour un semiologie des étapes. Semiotica, XI, 295-334.
(24) Paivio, A. (1986). Mental representations: A dual coding approach. Oxford, England: Oxford University Press.
(25) Buba, D. (2008). Instruções visuais animadas para a indústria automotiva: uma abordagem analitica em design informacional. Monografia de Especialização em Design Informacional - Pontifícia Universidade Católica do Paraná.
(26) Fujita, P. T. L.; & Spinillo, C. G. (2008). Verbal Protocol as an information ergonomics tool to verify reading strategies in medicine inserts. In: Proceedings of the AHFE International Conference 2008. Las Vegas, Nevada. Louisville: USA Publishing | AHFE International. v. 1.
(27) Maia, T. C. (2008). Representação de dimensões de tempo em instruções visuais e sua relação com imagens mentais de usuários. Dissertação de Mestrado não publicada. Departamento de Design. Universidade Federal do Paraná.
(28) Ainsworth, S.; & Van Labeke, N. (2004). Multiple forms of dynamic representation. Learning and Instruction, 14(3), 241-255.
(29) Chandler, P. (2004). The crucial role of cognitive processes in the design of dynamic visualizations. Learning and Instruction 14 353-357.
(30) Nunes, B. (1988). O tempo na narrativa. Série Fundamentos. São Paulo: Editora Ática. 84p.

Carla Galvão Spinillo holds a PhD by The University Reading, UK. She is a lecturer and researcher at UFPR- The Federal University of Paraná, Brazil, where she is the head of the Postgraduate Program Master in Design (2009-2011). Her main research interest is in visual instructions in print and animation, publishing several articles in Brazil, Germany, UK, USA, and a book in Mexico. In 2010 she conducted her post-doctoral studies on visual instructions in European medicine inserts as a visiting professor at The University of Avans, The Netherlands. She is co-editor of the Brazilian Journal of Information Design and Associate Editor of the Books of Selected Readings of the IVLA -International Visual Literacy Association (USA). Carla is co-founder of and affiliated to the SBDI -Brazilian Society of Information Design (president 2003-2005, 2005-2007), and member of the IVLA (board of directors 2008-2010).

Carla G. Spinillo, Dr
The Federal University of Paraná
Rua Gal. Carneiro, 460 Edf. D. Pedro I, Sala 811
Centro Curitiba Paraná
80.060-150, Brazil
55. 41. 3360 5210


Copyright © 2011 WritersUA. All Rights Reserved.
shannonm *at* writersua *dot* com


The Conference for Software User Assistance

'Developing User Assistance for Mobile Apps' by Joe Welinske

UI Text Design

WritersUA offers cutting-edge training and information to Technical Writers, Information Analysts and Architects, Documentation Designers, Help Authors, Publication Managers, Documentation Leads, Senior Writers and Documentation Contractors, and User Education Specialists. The focus is on software user assistance, which encompasses writing, editing, planning, coding, indexing, testing, programming, localization, and standards development.

WritersUA Home Page First Time Here Contact Us Join Our Mailing List OASIS Member RSS Resource Directory Tools Contractors Training Articles Blogs Web Resources