There are various ways to design effective teaching and learning with technology, and for various target segments of a population. Instructional design addresses issues of content creation, assignment design, activity planning, assessment creation, and other elements.

One less common path in the academic research literature is how to use animations, based on various motion designs. I am not talking about transitions as simple animations or textual movement or deictic gestures by digital avatars or puppets (as attention-getting motions), and I am not referring to motion video (as those are fairly popular), but I am referring to illustrative animations. Animations show changes over time. They show various types of cause and effect relationships. They show associational relationships.

These educational animations are designed motions / actions / changes over time that tell stories, provide examples of physical phenomena, offer explanatory depth, contrast competing ideas or phenomena, explain abstract ideas, show interactivity between various entities and elements, make particular dynamics memorable, and others. The speed may be slowed, paused, or speeded up. They may be shown at normal speed.

Bloom’s Taxonomy comes in handy to consider ever more complex levels of learning that may be achieved with animations, from the base to the top: remember, understand, apply, analyze, evaluate, and create. Animations may help learners remember particular motion dynamics, understand particular phenomena or relationships, apply new learning, analyze data, evaluate information, and produce new work. Animations may include work sequences beyond direct depictions of phenomena.

For various subject matter experts (SMEs), they may translate their knowledge, skills, and abilities (KSAs) into animations using common commercial technologies, like Adobe Animate (based on Flash), Adobe After Effects, and others. There are free animation tools available as well.

How Should an Instructional Designer Consider Motion Design, Then?

For a handout about Adobe Animate made and used in a training in June 2022, the author brainstormed various rationales for why an instructional designer might consider motion design. The following were conceptualized. A few small changes have been made to the handout since, and the changes may be seen here.

1. World building. Motion information shares insights about various in-world phenomena, in-world physics. Motion may be used to engage “world building” in digital games and virtual immersive spaces and other contexts. They may create a sense of physical space and in-world realities. Motion can help set scenes. It can help tell stories in-world. Exemplifying. Motion may be explanatory; it may be used in exemplifying ways. For example, they may show processes and changes over time.
2. Attention-getting. Motion draws human attention. Motion may make informational graphics more engaging. They may point to particular ideas or concepts or practices, for emphasis.
3. Evoking charm for utilitarian ends. Motion may convey humor. It may entertain.
4. Promoting learning. Motion may make some information or learning more appealing. Motion plays to human visual attention (and focus and attention span) and memory. Motion can offer a visual mnemonic (memory device). Motion may show something of changes over time, processes which benefit from motion over static depictions (Ploetzner, Berney, & Bétrancourt, 2021).
5. Offering art. Motion may serve as a form of artful visual aesthetics.
6. Animating learning characters. Motion may be applied to animated agent characters for learning and entertainment. (In video games, these are non-playable characters.)
7. Enabling lip-reading (from digital lip synching). Motion may involve mouth movements around natural language expressed through sound. Mouth shapes are built up around particular visemes (defined as "a set of phonemes which have identical appearance on the lips"). Phonemes are defined as “the perceptually distinct units of sound in a specified language that distinguish one word from another” in the Google dictionary.
8. Sparking the imagination. Motion may describe imaginary phenomena that has been conceptualized but not yet realized in the physical. The imaginary can be highly powerful.
9. And… And various combinations…and others… Remember that my “use case” is as an instructional designer. (Hai-Jew, June 2022, p. 6)

Video: A Light Intro to Adobe Character Animator

A tool that is not introduced here is the Adobe Character Animator. This enables using voice and video-captured motion (or mouse-captured motion) to present evocative characters.

What Should be Animated and Why and How?

It helps to think about why an animation might be beneficial. Then, it helps to consider what to animate. It helps to consider the possible granularity of details needed in the animation and the speed of the animation. Perhaps it helps to know when to pause or come to a full-stop for the thinking.

For example, if a lab simulation is being created, and the digital lab designers want to show a cell culture dish with the changes over time of the culture growing in the medium, it might be a good idea to conduct an environmental scan first, just to see if the visual has been created already and is available in an open-access way (or even better an open-source way, with the code available for usage on one’s own learning management system or module or website). If a resource is available, then the instructional designer (ID) only has to make sure that the resource is free and clear to use, document the release, and use the resource. The ID may also want to create effective lead-up and lead-away contents to ensure the usefulness of the learning resource. In some cases, the accessibility of the resource also has to be set up for wider usage and also for legality. [If the intellectual property, privacy protections, factuality, or other elements are improper in any way, the “heritable” learning object should not be adopted and used.]

If the resource does not exist, then it helps to go through some mental walk-throughs that would benefit the work.

• What is the learning context?
• What are the learning objectives?
• What are the learning outcomes?
• Who are the learners?
• What will be depicted in the animation?
• What are the purposes of the animation? (Explanation? Visualization? Explanation? Clarification? Capturing learner attention?)
• How will the animation be created?
• How will the animation be presented?
• How will learners interact with the animation? Why?
• How will the learning be designed around the animation? (Will the animation just be an object out in the world, or will there be some cognitive scaffolding around it?)
• Are there ways to assess the efficacy of the animation?

IDs do not as a matter of course engage in animation design and creation. Starting out, it can feel painstaking. There are practical considerations: Are there raw imagery that may be used in the animation (or as a reference visual)? Or stock imagery available for a low cost? Or free social imagery from one platform or another? What about videos? What about the software? What about the local talent to achieve particular work? Or are there those outside the organization that can accept delegated work for a fee? If human talent is to be used, are there ways to acquire their skills and proper releases—at a fair cost?

There is always the basic math of whether the inputs equal the outputs. Will all this effort be worthwhile? Once a decision is made, effort and resources have to be committed.

Designing, Developing, and Deploying

For funded work, the authorizing documents (such as the grant funder requirements) are critical to informing the design of the animation. Important, too, are the legal requirements related to accessibility, intellectual property, privacy protections, media publications, and other requirements.

An early ID step involves planning the light animation, including the instructional design teaching and learning aspects, storyboarding the sequence…listing out necessary resources…and defining assessments. The animation is then paper-prototyped and assessed for appropriate design. A “light” simulation is one that only captures a small part of a sequence or a simplified motion. More complex simulations often require more complex technologies and perhaps even full physics engines in immersive spaces.

Revisions are made after the various stakeholders have assessed the paper prototype. The stakeholders may be internal to the team or external to the team (such as clients, such as target users). Oftentimes, though, the various paper prototyping elements have to be explained in depth…for outsiders…or light simulations have to be made for deeper understandings for some stakeholders. The stakeholders may have questions about the storytelling, the pacing, the visuals, the assessments, the accessibility, and other factors. They may have questions about lead-up learning and lead-away learning. They may need explanations for the value to the designed motion.

A “paper prototype” is documentation of the planned design. The major evaluations have to be done at this stage so as to head off the possible costs of a full development. If a “fatal error” is discovered, the costs are much lesser when the plan is evaluated than if a full digital object has been fully created.

It helps to use a consensus stylebook if working on a team, so that everyone understands the standards being built to. There should be a central location to store all contents, so the team can work as efficiently as possible.

In the development phase, various digital resources are acquired and / or created. Actual direct creation is preferred in many cases because of unique needs of the learning context. However, if others’ resources are used, then the team members have to engage due diligence to ensure that the intellectual property releases and media releases are all accurate and appropriate.

In this phase, it helps to version the contents for various deployments on various platforms. Raw files should be protected as raws, in case it is necessary to go back to the unedited versions for the best quality to work from. In every phase, it helps to think of both human- and computational- costs, so that no unnecessary resource is spent.

Some Essentials to Get Started Creating Animations using Adobe Animate

Adobe Animate is an extant technology that has evolved from Macromedia Flash. The interface is straightforward and flexible. There are built-in animated and inanimate objects that may be used. There are plenty of context-sensitive and other natural language help features in the tool. (Figure 1)

Figure 1. A Simple View of the GUI for Adobe Animate

To get started, it helps to consume a variety of animations that are available for teaching and learning. It helps to understand two-dimensional and three-dimensional visuals. It helps to differentiate between raster and vector visuals and what each can bring to the animation…and the costs of using each (with the first requiring more computational and resulting in larger-size animation files). It helps to think about motion design and purposeful harnessing of motion for learning and visualization and thinking. It helps to understand frames, key frames, framerates, and pacing. It helps to understand the automation between key frames.

Figure 2. A Frame

There are ways to acquire more simplified visuals to use for animations, such as tracings of digital content that one owns.

Video: Automated Tracings of Visuals in Adobe Illustrator 2022

The following is a link to a video about various types of automated tracings using Adobe Illustrator 2022.

There are other ways to acquire visuals for animations. Animations are an inherent part of video, but video can be transcoded into still images (jpgs) in a series, which can be animated. Animations may be made over the tops of videos. Animations may be drawn from scratch using analog materials or digital ones. Motion may be applied to text objects (but these have to be wrapped in a “graphic” or “movie clip” symbol first, so the motion can be applied to that symbol wrap). Vast swaths of people are acculturated to animations.

Do note that some animation file types work in some digital contexts…and not others. It is critical to create and test. It is important to keep master files so that various versions may be exported in different formats to meet necessary functionality.

Alpha Testing for Legality and Functionality and Beta Testing for User Receptivity

Classically, “alpha testing” refers to in-house testing by the team for all technical functionalities, legal requirements (IP, accessibility, media releases, legal marks, and others), and adherence to the original (or updated) design. There is an accessibility conformance report for Adobe Animate CC (2018).   “Beta testing” refers to assessing the digital learning objects (DLOs) in terms of user receptivity, usability, adoptability, and other factors, with live learners / stakeholders. If a work is versioned in multiple languages, it is not enough just to go with computational language translation; rather, first-language speakers need to be brought to bear. Similarly, in terms of accessibility, computational checks are not enough. Those with various abilities should be included in the beta testing.

Conclusion

Figure 3. A Sphere

The more learning an ID has about digital visuals—still, 2d, 3d, 4d (2d or 3d with motion)—the better the final outcomes. With the popular advent of motion, VR (virtual reality), AR (augmented reality), and MR (mixed reality), better understanding motion is a way to advance one’s work.

References

Hai-Jew, S. (2022, June). Intro to Adobe Animate (handout/notes). 1 – 43. https://idme-test.ome.ksu.edu/AdobeAnimateHandout.pdf (for the non-motion handout) https://idme-test.ome.ksu.edu/AdobeAnimateHandout.docx (for the full motion handout, but larger size file).

---

About the Author

Shalin Hai-Jew works as an instructional designer and researcher at Kansas State University. Her email is shalin@ksu.edu.