Keywords

1 Introduction

The production of animated visual instructions, referred to as Animated Procedural Pictorial Sequences (APPSs) has become a focus of several media companies in the design and supply of specialized services to their clients in the industry of assembling products. As a result, DIY digital manuals and animated instructions have been developed to provide necessary and accurate information to users of such products. Despite the growing demand for animated instructions, this is still an emerging topic in research, particularly from the perspective of information design/information ergonomics. In Brazil, little has been investigated on how animated instructions should be graphically presented to promote effectiveness in communicating assembling contents.

Nevertheless, the use of animation with educational purposes has been researched since the 1980s [1–5], indicating its beneficial influence on understanding of ideas and complex concepts as well as in facilitating the visualization of processes/procedures [6] Animation was also found to reduce the cognitive load [7], to aid in addressing specific cognitive demands of learning tasks [8], and to promote motivation in learning [2]. Regarding animation conveying task related contents, [6] found a higher efficiency of animation in procedural knowledge than in descriptive knowledge and problem-solving. This seems to indicate that animation is a valuable resource to represent tasks, since they involve performing sequences of steps [9].

The literature on the role of animation on learning has produced not only empirical evidence to support its use in educational/instructional contexts, but also principles and recommendations to the effective design of animation. In this regard, [10] proposed the following principles based upon studies on learning of scientific and mathematical explanations by students:

  • Multimedia principle: content should be presented in animation and narration;

  • Spatial contiguity principle: on screen text that refers to an animation should come close to it (e.g., caption, lable);

  • Temporal contiguity principle: animation and narration must be presented simultaneously;

  • Coherence principle: only relevant and coherent elements of an animation should be presented to avoid extraneous text, images and/or sounds;

  • Modality principle: animation should be associated with narration rather than with text on screen;

  • Redundancy principle: content should be presented in both animation and narration only. Thus, text on screen should not be employed, since it may jeopardize information processing (cognitive overload).

  • Personalization principle: vebal content (on screen text/narration) should be presented in conversational manner to make the animation more friendly to users, aiding learning engagement.

Although those principles concern educational context, they also seem to be appropriate to animation in instructional/task related context, since both contexts regard learning. However, the principles proposed by Mayer and Moreno [10] seem to overlook an important aspect of learning from animation, that is interactivity that has been proved to promote comprehension [11]. Research on interactive animation has not only focused on the education field, but also on game design, looking at technical/technological aspects (e.g., software, tutorials), construction of narratives and characters, and task performance by players (e.g., [12–14]). Hence, there seems to be a lack of studies on interactive animation on the use, handling and/or assembling of products, despite its potential relevance to ease task comprehension and support performance. This was highlighted in a study conducted by Pottes [15] on interactive animated instruction, which presented positive results on participants’ performance when interactive functions were provided.

Among the aspects of interactive animation representing procedures, the graphic presentation of information is worth highlighting. This is due to deficiencies in the ways content is visually presented may negatively affect comprehension of task related contents, whether in print or digital material [16, 17]. Regarding animated procedural pictorial sequences (APPSs), an analytical study carried out by Buba [18] found deficiencies in the graphic presentation of content in a software showing procedures for assembling, repairing and replacing mechanical components of the automotive industry. Poor legibility of text on screen, lack of visual emphasis, weak hierarchy of graphic components on the screen and misleading identification of elements on the menu were some of the drawbacks pointed out. Although her study did not investigate comprehension of the APPs examined, it is plausible to infer that those drawbacks would affect understanding of the procedures represented in the animations.

Thus, to design animated instructions not only multimedia aspects should be considered – as recommended in Moreno and Mayer’s principles [10] – but also interactivity and graphic presentation of information. Accordingly, providing developers of animated instructions with guidance in this scope may support their decisions in the design process. An example of this is found in a research based digital guide to design medicine inserts in Brazil [19], which was validated with developers of the inserts. The results showed that the digital guide improved the design of inserts by aiding in the decision on the graphic presentation of information.

By considering this, together with the need for studies on Animated Procedural Pictorial Sequences (APPs) for assembling products, this paper presents a research-based interactive guide developed in Brazil to aid the design process of animated instructions from user-centered approach. The development of the guide was based upon related literature allied to outcomes of an analytical study on the graphic presentation of information in a sample of APPSs, and a study on comprehension of an APP representative of the sample. These are briefly explained next.

2 Contributions from the Analytical and Experimental Studies on APPSs to Develop the Interactive Guide

The analytical study examined a sample of 23 APPSs available in the internet and in manuals for assembling products. Their procedural (steps) and non-procedural (e.g., warnings, introductory information) contents were identified and their mode of presentation (audio/narration, text on screen and animation) as well as the graphic presentation of information regarding menus, animation style and framing, text-animation integration and the time related aspects (animation speed and time lapses). In general, the results showed a trend in representing assembling procedures through animation with text on screen. Photographic style (3D images) was generally employed in the animations. Regarding drawbacks in the APPs analyzed, they were found in the representation of warnings and actions in animated steps, high use of time lapses in sequences of steps, omission of the person performing the steps (i.e., ellipsis of the doer) and differences in animation speed. Among these outcomes, those on animation speed were considered for further investigation, since little has been researched on the influence of animation speed on understanding instructional content.

Thus, an APP on assembling a 3D puzzle was chosen to the experimental study as it was representative of the sample characteristics. The APP was adapted into three versions varying in speed of animation presentation: spontaneous (actual), accelerated and slow speed. Then, the APP versions were tested in comprehension and preference with 25 participants. The results indicated that the variation of presentation speed seemed not to affect the understanding of the animation content/task, but the participants’ preference for the animation (which were for spontaneous, followed by accelerated and slow speeds). These results were related to participants’ emotional reactions, in which spontaneous speed produced greater empathy, whereas slow speed higher rejection. Participants showed greater interest for the animation presented in accelerated speed however, it produced the lowest rate in comprehension.

The outcomes of the analytical and experimental studies supported the development of the content of the interactive guide to APPSs by providing evidence regarding deficiencies in the graphic presentation of information and the aspects that may affect their comprehension.

3 The Interactive Guide to Design APPs

The interactive guide to design APPs was developed based upon Garrett [20] five-planed model for user experience within websites, that has a bottom-up approach: (a) strategy plane: to identify the informational demands of potential users of interactive digital material, (b) scope plane: to define the content and functions of the interactive digital material, (c) structure plane: to organize the informational content, (d) skeleton plane: to define the location of the informational and functional elements on the screen to maintain consistency across levels and within each level, and (e) surface plane: to define the layout and graphic presentation of the material. Accordingly, a prototype version of the guide was developed for testing, as explained next.

In the strategy plane, the findings of empirical research on animation and the outcomes of the study on the APP comprehension and preference were considered. Perceptual cognitive aspects of animation and interaction that influence the communicative efficacy of digital artifacts mentioned in the literature were also taken into account. Then, the information needs of potential users of the Guide were determined, and the contents were compiled and organized according to the following requirements:

  • Design the system as a practical guide, with easy and accessible contents.

  • Produce text in clear/plain and objective language.

  • Use examples and visual interactivity to support learning the guidelines.

  • Use graphic elements to organized content into hierarchical topics.

  • Structure the content as step-by-step navigation flow.

  • Provide a printable version of the content to ease access in the workplace.

  • Provide supporting documentation to strengthen the guidelines and to aid in the design process.

Next in the scope and structure planes, the menus and headings were defined considering the outcomes of the previous plane, as follows:

  1. 1.

    Presentation (what is the Guide for and how to use it).

  2. 2.

    APPs (definition and characteristics).

  3. 3.

    Problems regarding APPs.

  4. 4.

    The user centered design for APPs.

  5. 5.

    The guidelines and recommendations for content and graphic presentation.

  6. 6.

    How to evaluate APPs (suggestion of protocols and checklists).

  7. 7.

    Useful literature and links (abstracts/links).

  8. 8.

    The Guide map.

  9. 9.

    Contact us.

Then, the texts were produced for each heading, seeking a clear and objective language. The information architecture was designed based on criteria of proximity and pertinence of the content for the users.

Afterwards, the skeleton and surface planes were carried out in which the system/guide interface and navigation were designed for the Guide. A single grid showing fields for menus, main text and navigational elements was chosen for the interface. The system was structured to allow linear navigation of the contents in the main menu. A secondary menu presented icons related to general information and staff collaboration. Regarding clickable areas, two forms of interaction were made available: clicking on a link to access the examples illustrating the guidelines, and clicking on highlighted parts of the examples to see details of the image/animation.

Regarding graphic presentation of the interface, a color code and the typeface were defined. For the former, blue and gray were chosen as the main colors to follow the university institutional colors. Yellow and black were chosen as secondary colors to be employed for emphasis and for setting texts, respectively. The typeface Verdana was chosen for the texts due to its good legibility on screen. Figure 1 shows examples of screen shots of the Guide graphic interface. The prototype version of the interactive guide was then, validated in its usability as explained next.

Fig. 1.
figure 1

Examples of the interface of Guide

Full size image

4 Validating the Guide

The interactive guide was validated with five experts in graphic design/animation and with ten potential users. The expert validation made use of a protocol with heuristics and recommendations from the literature for the design of interactive digital artifacts and animation [10, 21]. Each expert was asked to freely navigate in the Guide and then complete the evaluation protocol individually and in an isolated manner. The validation with the ten users consisted of interviews post-interaction with open and closed questions. The interview protocol also presented statements about the Guide navigation and interface with scales varying from strongly agree to strongly disagree. Each participant (individually and in isolation) was asked to freely interact with the Guide and then perform the tasks for finding information in the Guide. Afterwards, the post-interaction interview was conducted about the tasks performed and participants’ impressions. The results of the two validations were analyzed qualitatively to better identify participants’ reactions and the aspects to be improved in the Guide for designing APPs.

The results of the validation with experts showed that in general, they considered the Guide to meet the heuristics provided on information design and usability, since 107 out of 155 responses were positive in this regard. All participants felt that the Guide was satisfactory in terms of content classification, location of menus, area for the map guide, icons consistency, clarity and intuitiveness of the interface graphic presentation. The main shortcoming pointed out by four of the five experts was a lack of visualization of the path taken during navigation. Moreover, weaknesses were identified regarding clarity of terms, amount of clickable areas to facilitate interaction, clarity of the system structure, and lack of cues for local and global orientation actions.

As for the validation with ten potential users, in general they considered finding information in the Guide easy, thus, succeeding in this task. However, they had difficulties in finding images illustrating the guidelines, since links were used to access those images, i.e., the images were not displayed near the guidelines. Although nine of the ten participants considered the content of the guide sufficient, they suggested the inclusion of more images showing details of the animated content. They also proposed adjustment in the informational hierarchy of the second level menu of the Guide. Regarding satisfaction, positive responses were given to a general assessment of the Guide, its content, information organization, navigation, and interactive resources. However, participants were not fully satisfied with certain navigation items and found animations lacking contents presented in the text.

By comparing the results of validation with experts and potential users, consistencies are found regarding positive overall assessment of the Guide and the negative evaluation of some items. Deficiencies identified by the experts in the heuristic evaluation were proven true during the participants’ interaction with the Guide. On the other hand, the results showed that reactions of potential users differed from the experts’ in aspects such as content to be animated and navigation features. This indicates that to assess effectiveness of interactive animated guides not only experts should be consulted and heuristic evaluation should be conducted, but also potential users should be listened and usability tests should be carried out. It is worth mentioning that the results of both validations were in alignment with literature findings on the role of animation in learning [7, 8, 10, 20].

Considering the results of the validation with experts and potential users, the following adjustments were made in Guide:

  • Improvement of clarity of the text, avoiding technical terms.

  • Inclusion of images as examples of contents and place them near theirs referring guidelines (avoiding links).

  • Improvement in the navigation buttons.

  • Inclusion of animations showing improvements with the use of the guidelines (‘before’ and ‘after’ situations).

  • Inclusion of emphatic elements in text and pictures.

5 Final Considerations

Although the limited number of participants (experts and users) in the studies neither allows generalization nor takes effectiveness for grant, the results of the abovementioned studies indicate the potential of the interactive guide as a tool in the design process of animated procedural pictorial sequences. The contribution of the Guide for designing APPs can also regard its development process in which analytical and empirical research built the system/guide foundation. Deciding on the Guide content and interface was more than a technical choice in a design process: it was a user centered approach to it. Consulting APPs’ developers (users of the Guide) and experts made conscientious design decisions possible.

Finally, we hope the interactive guide for APPs and its development process may contribute to improve the design of instructional digital material for users that are produced by the industry of assembling products in Brazil.