How to Use Animation in E-Learning



all right we're going to go ahead and get started so welcome folks to elearning cupboards free webinar designing with animation for e-learning my name is Tim Slade and we're going to go ahead and get started so so the first question I have is what is animation when you think about animation movement you know how do you actually define what animation is and this is a topic that I've researched quite a bit over the past couple of years because animation is something that for myself I realized that I've incorporated quite a bit into my own elearning design and I've seen other ways people have incorporated it into their design and it's something that it's something animation is something that I've noticed can be very subtle it's something you incorporate very subtly and it's something that when done properly can really help enhance your learning content so you think about what is animation most people say it's movement but one of the things that I've discovered is that animation when you think about what animation is it shares this really common space with storytelling and you think about the way we use movement or animation to convey some sort of meaning that might otherwise have to be conveyed or explained with words and the use of movement and animation goes back pretty far in our history if you think about you know thousands and thousands and thousands of years ago when there were cave drawings on walls in these caves of showing you know everyday life or showing the way you know these cavemen hunted although they didn't move because they were cave drawings it did show a sense of movement it told a story of movement through the way those different petroglyphs or hieroglyphs were carved into the stone and of course if we move forward a few thousand years movement if you will our animation was translated on the stage you think about Greek theater Greek theater is very organized and it was used not only for entertainment but also was a way for communication and there was a lot of meaning behind the movement in the way the different actors or players moved across the screen of course if we now go forward to you know the past hundred years you know animation of movement became really an important part of entertainment do you think about the way cartoons moved on the screen and this was only within the past you know 100 years or so did animation modern animation if you will become pretty prevalent and of course if we move forward to modern days animation is a really important part of design not only on TV animations become much more sophisticated than what we saw 100 years ago but also animation and movement is used a lot in user interface design on the internet and in the apps that we use on our smart devices and I'll talk a little bit more about that as we move forward so today we're talking about designing with animation designing with animation and and primarily I'm focusing on designing with animation as it relates to e-learning or learning content but before I tell you a little bit more about what we're going to talk about I do want to talk about a few things that we're not talking about all right so first thing we're not talking about is why shouldn't I be using these fine animations you know PowerPoint and storyline and captivate has all sorts of interesting fun animations that although they're there you should not be using them so I'm not going to be talking about why you shouldn't be using those funny animations we're going to be talking about you know some other things but don't just don't use those ugly fun cheesy animations just don't use them we're also not going to be talking about hey that was a fun slide transition should I put that in my next e-learning course no you shouldn't put that into your next day learning course you know again storyline PowerPoint captivate and all those tools that you use to create great learning has a lot of fun cheesy slide transitions should you be using them not all the time hmm why don't these animated being people help my learning content I don't know but I can tell you don't use them they don't help your learning content and that's not what we're talking about today we're not talking about animated being people they don't help your learning content don't use them so what are we talking about today and as this slide transition occurs I will tell you it's the last awful slide transition I will be using but we're going to talking about three things today first off we're going to be talking about how you can use animations to guide your learner's attention I call those directional animations we're also going to be talking about what I call transitional animations how can you navigate a learner through changing content get them from point A to point B and help them understand how they got there through the use of movement or animation we're also going to be talking about what is perhaps most important the most important type of animation which is called instructional animations how can you communicate meaning in learning content through the use of movement or animation so let's start with directional animations so directional animations are used to guide learners attention across the screen and to help the image that helped illustrate this I want to conduct a quick experiment so I'm going to play video or it's going to be animation and there's going to be these red balls moving across the screen and I want you to try and count how many red balls you see all right and if you can count them you know raise your hand alright if you find count how many balls are alright so I'm giving you a second to prepare yourself alright we're going to start in three two one all right so my question for you is why didn't you raise your hand even if you didn't count all the red balls why didn't you raise your hand you know if you were watching that video you are probably intently trying to count all the red balls on the screen but what you may not have noticed and if you did notice it good for you but if you didn't notice at the bottom of the screen during the animation some text came on this is if you're reading this raise your hand right and the reason why I do this little experiment is to prove to you that in reality although we think we're really smart individuals we're more like a cat chasing a laser pointer than we are these really sophisticated beings that we like to think that we are we're easily distracted and animation and movement on the screen can be used to easily distract you and that's what directional animations are about not distracting your learner of course I use that experiment to prove that you can guide your attention but directional animations should be used to to guide your learners attention to help them focus on the things that you want them to focus on on so you've probably seen this text before click the next button to continue you may have seen on the screen or you may have heard it in the audio and I'm sure anyone listening to this webinar has incorporated this text in one way or another in their e-learning courses click the next button to continue after completing the slide or after clicking on all these items click the next button to continue and the thing is is I hate click the next button to continue we tend to and I I'm guilty of this as well is we put this on put this on every single slide because we think our learners don't know how to proceed forward and in a way we treat them like they're stupid you know we tell them this over and over and over again as if they're going to forget between from one slide to the next that they have to click the next button to continue and we can actually use animation to to alleviate this if you will you know so here's an example of a slide here and I might put some text here on the screen I might in company accompany it with some audiences click the next one to continue and there's nothing wrong with that but it's not as elegant as I think it could be so you know here's an example of a course safety in the workplace and let's say that we wanted the learner to click on that little arrow icon on the far right hand side of the screen I could add some Texas's click the next button to continue but if you think about you know animation and what we want the learner to do is there any other thing is there anything else that we could do to make this a little bit more elegant maybe something where it doesn't require us to add text on the screen right think about that for a moment what else could we do well what if what if we animated that arrow what if we had a pulse or move back and forth as a way to indicate to the learner what we want them to do now as you as you observe this occurring on the screen I want you to think about whether or not you've ever seen that before in real life and you probably have if you've ever used an iPad app or an iPhone app or any mobile app you've probably seen an arrow a pulsing arrow like this before to indicate to you it's that's how you move forward if you click on that or scroll over it that's how you move forward and so in by taking inspiration from things like apps that most people have learned or have used we can indicate to the learner that that that's moving forward because this is something familiar to them now of course you know if the learner was to sit here for 10 15 seconds maybe then at that point we would bring in the text that says you know click the next button or click that arrow to move forward now this is a more elegant way to get the learner to do that without having to add additional text or audio to the screen here's another example of a slide let's say you know we want the learner to click on every single one of these icons on the screen to get some information about Millennium Park in Chicago of course I could add some text says click on each icon to learn more but what else could we do what else could we do to draw the learners attention to those icons well what if what have we animated the icons right there's something about the animation that immediately draw your draws your eyes to those icons and you want to click on them there's something about the world around us the way we've used apps and the way we use the computers that has taught us you know if something's animating like this we should click on it it we can do something with it and this is a great way to visually indicate to the learner hey maybe I can do something there right again using animation to communicate that here's another example let's say on this slide we wanted to learner to click on that thumbprint to initiate this course right again I could add some Texas's click on the thumbprint when you're ready to continue right but let's watch this and I'll show you what I did here on a slide welcome to this course presented to help you prevent identity theft click on the thumbprint when you are ready to begin all right so you can see from that example you know the animation if you will of the slide kind of masking out that vignette and focusing it on that thumb frame your eyes immediately went to the thumbprint there's no doubt about it and it clearly shows to the learner what they should be doing even even though it was reinforced with the audio their eyes or your eyes immediately go to that thumbprint and you know what your call-to-action is at that point because of that subtle animation alright so those are directional animations we're going to transition into transitional animations no pun they're intended in transitional animations like I said earlier help guide the learner through changing content how do you get the learner from point A to point B and help them understand where they were where they're going and how they got there so transactional animations work something like this let's say we have a menu right here of three items that we want the learner to click on and we want to introduce a fourth item to that learner you know if I were to just do something like this and just show you that fourth item the the change that's happened on the screen happens so abruptly that your mind has to mentally comprehend what's changed on the screen and although for most people that seems instantaneous it does take an extra few milliseconds for your mind to to process that in those extra few seconds milliseconds I should say that your mind is having to take to process that those are that's time taken away you know the learners attention from the course its cognitive load right it takes a little bit more and the blow for for you to process that so you know is there any other way we can introduce this fourth menu item we could add some text that says hey please take of the new note or the new menu item but that's not really very elegant if you think about it so what else can we do well you know if we think about these menu items in physical space we could introduce that fourth item like you would in real space so for example if we have three items here and we want to introduce a fourth item we could physically move those three items out of the way to make room for the fourth item and that animation of those three items moving across the screen and the fourth one animating in actually communicates meaning to the learner that hey I'm sure I'm introducing a fourth item to you and that movement communicates that to them you don't have to take the extra time to think about hey what changed on the screen compared to you know where I was before and where I'm at now you don't have to process that I'm doing that for you through the use of the animation so transitional animations like I've said all about from getting you from point A to point B and communicating how you got there so that you don't have to figure it out on your own here's another example let's say we have some sticky notes that we want to visually organize on the screen if I were to do something like this and all of a sudden you know just snap and they're all in this you know the sticky notes are all in a different location again your mind might have to take some additional energy expend some additional time and energy to process hey what's changed on the screen how did those items move around and that's especially true if say those sticky notes actually had content on it if they actually had something written on it it's going to take even longer to figure out hey where did that sticky move – and how is it grouped with the other items and what does that mean so again if we think about animations in the way high you know things move in physical space what else could we do to communicate that we've reorganized these sticky notes and there's meaning behind that organization well if we go back here to our sticky notes scattered all over the screen well what if we move these sticky notes in physical space right they move across the screen and reorganize visually on the screen through actual movement that creates meaning for you as the observer you get to see oh hey this is where I was this is where I'm going and this is where I'm at and you understand how you got there again reducing the cognitive load on the learner to process that on their own this next slide this is an example of a slide that I use in a separate presentation I give on user interface design and in this presentation I explained that elearning courses are built in layers right and I show this and and I after I talk about what's on the screen I go to this slide where I say oh there's an interface layer there's a content layer there's a background layer but one of the things that I found about this particular presentation is that my audience was having a hard time understanding the difference between this slide and this slide and how they correlated to one another right so what's happening here is these three images you see on the screen are essentially layered versions of this of that computer and people are having a hard time understanding that those layers were expanded so I ultimately ended up redesigning this slide to actually visually represent those different layers expanding from the computer I'll show you what this looks like now so this is what it looks like now as we say you know elearning courses are built in layers and then this animation you know expands those three items out from the computer and that that actually provides meaning to you if you didn't know what these three items were you now have a better understanding of how you got here from from where we started which was here so I'll do that one more time expand out that animation that movement that transitional animation provides meaning to explains where you were at Point a and now at point B and how you got there here's another example this is from a free template that I had created many many years ago and you can download this for free off of the articulate elearning heroes community and it's one of the more popular templates that that's out there and one of the things that i've been trying to figure out is why is this template so popular because from a graphic design perspective there's not a lot happening here you have some text you have three colors and it's pretty much just boxes on the screen it's nothing too remarkable but what I realized is the reason that this template has been so popular is not because of the graphic design because graphic design isn't remarkable but because of the animations I used in this template and so as I play this I want you to notice how each screen constructs itself and then deconstructs itself as it transitions from one slide to a next to another so I'll go ahead and play this so you can see how that opening slide you know disassembled in this new slide for the learning objectives is reassembling in this these transitions this is providing a better sense of meaning and understanding about where you were where you're at now and how you got there here's another one this is another template I created and same basic principle here the slides build in and then they build out as a transition from one screen to another we're going to play this so here's the opening screen this is the menu and if I click on the values menu item notice how the main menu deconstructs in the values screen animates in again transitioning you the learner from point A to point B reducing that cognitive load here's another example this is another template I've created you can download this from the e-learning and cover blog or the articulate elearning here's community and on this one I don't want you to worry about the content but I want you to notice how the transition from one menu to another occurs so in this example there's a series of menus if you will that the learner has to move through before they start this course and in this one they enter their name they select the character and then they select a scenario and I want you to notice how we transition from each menu and think of this in terms of an app you know if you ever download a new app and you have to register for it or sign up for it you know if you enter your name and then it'll transition to the next section or the next form and then it will transition to the next one that was my inspiration for this so I want you to notice that as I play this all right so everything animates in if I click that next arrow everything transitions to this first field where we enter our name enter the name and then it's going to animate out and the next one's going to animate in all right where we select our character and we move on forward to select the scenario so same basic principle here but that transitioning is help helping mentally guide the learner from one area to another so they don't have to take the time to mentally process hey something changed on the screen they're actually seeing a change right in front of their eyes alright here's another example this was a another template that I created that you can download from the articulate elearning heroes community and in this one if you notice there's that yellow you know button in the top left corner and this is supposed to be a pulldown menu and when the learner clicks on this this menu comes down from the screen and it looks something like this and if I were to just make it do that if I were just make it appear the learner may not understand hey that was a pulldown menu and where did it come from so I want you to notice that the animation actually communicates this is a pulldown menu just through the use of the animation in the movement so you see how that comes down if I click it goes back away it kind of goes back up and it's moving in physical space you have a sense of where it goes you know when it goes away it actually lives somewhere and then it comes down from from the top of the screen and even notice the subtle you know when it comes down the blurring in the background the background blurs out so your focus is on the menu versus the content alright here's another example this one is from a course that I built the year before last or last year I believe on how to cook a turkey and I use this as an example and in this one there's these series of pop-up windows or pop-up menus and it's funny how we talk about pop-up windows but rarely do we have our pop-up windows pop-up they kind of just appear on the screen without having any sense of where it came from right so I want you to notice again just like the pulldown menu how these pop-up windows literally pop up in physical space and giving you a sense of where you're at in the course so I'll go to play this so notice when the mouse clicks on the little extra button the pop-up window pops up and then if I click on the X to close it it pops down again physical space and again the background blurs out ever so slightly giving a sense of where you're at and where you came from to communicate what's happening here alright so those were transitional animations the last one I'm going to talk about which I think is the most important one if you're going to take away anything from this presentation our instructional animations instructional animations are quite great way if you use them properly you can communicate meaning you can give meaning to what might otherwise be meaningless content or content that you'd have to explain with additional words on the screen or additional words in your audio narration so instructional animation is all about nonverbal communication how can you communicate something without using extra words right and I oftentimes like to think of it as a menu without images right I'll be the first one to admit that I like to visually see what it is I'm ordering I like to see what the food looks like so I can have an idea of what it is I'm going to eat right and that's I guess in a way is nonverbal communication I'm not having to use words to understand what it is that I'm ordering and it sounds really sad and stupid and but it's true we like to see what we're going to eat and instructional animations the nonverbal communication component of instructional animations is all about showing your learners what it is you're trying to say so if I say something like the moon orbits the earth I say the moon orbits the earth you have an idea in your head of what that means you might visualize the moon orbiting the Earth you might visualize it literally or you might in some way create your own little animation in your mind about what this means you have an idea of what that means but what if you didn't know what that means the moon orbits earth how would you have to explain that well you might do something like this where you show the earth and the moon right and then to visualize you know the movement I might add a dotted line to say the moon orbits earth but you know what else can we do well what if I actually showed the moon orbiting the Earth using animations to help illustrate the meaning behind that so what if I actually made the moon orbit the Earth that's what instructional animations are all about showing your learner's what it is you're trying to say actually showing it to them and this is this is a sample that I'm showing you what I mean when I say the moon orbits the earth so instructional animations are all about you know you explain something to learners or an audience or whoever it is you know each person in your audience or each of your learners has a different idea in their head about what it is that you're trying to say in the meaning behind that and instructional animations are all about rather than you know explaining it to your learner's and having your learner's be responsible for having an idea of what it is it's about taking that out of their mind and putting it on the screen and showing them what it is you mean so that they don't have to comprehend it for themselves you can show them and now everybody has a consistent idea of what it is you're talking about that's what instructional animations are about now there are two different types of instructional animations you have conceptual instructional animations and technical instructional animations conceptual instructional animations explain some conceptual ideas something that maybe not may not be true to life and technically a technical animations actually physically shows something that might be real or physical or technical something that is real to life and I'll show you examples of both so I'm going to show you this example from a course that we created on steel reinforced concrete and it's about how steel reinforced concrete as I'm sure you can imagine so I'll go ahead and show this and let it explain itself steel reinforced concrete succeeds reliably as a unified system because its material components concrete and reinforcing steel work so harmoniously to support each other concrete provides strength under compression while reinforcing steel provides inner strength under tension compression and tension are opposing forces basically push and pull with no reinforcement concrete handles compression well but over time tension forces can compromise concrete's strength steel reinforcement is added to concrete because it handles tension well using them together is a remarkably efficient use of two of the world's most common and economical building materials producing a sustainable result all right so in that example we used animations to physically show something that you may not be able to demonstrate otherwise that you know steel reinforces concrete and helps it you know be more flexible and allows it to bend rather than collapse under the pressure that's placed upon it and that's something you would not be able to show with pictures probably wouldn't be able to show with pictures and probably wouldn't have a lot of meaning if it was just words so we showed an animation to help explain that and even this image alone that you see here if you even if we put this image here some people may not be able to understand that but the animation showing it actually bending or failing under the pressure gives it meaning that wouldn't be there otherwise so here's another example this is a conceptual animation on identity theft I'll go ahead and play this and then we'll talk a little bit about it whether you realize it or not identity theft is a major concern both here in the US and globally according to the Federal Trade Commission identity theft was the number one fraud complaint during the calendar year 2008 and cost Americans nearly one point five two billion dollars in 2012 even more startling to 2009 study released by javelin strategy and research found that 43% of all identity thefts were committed by someone the victim knows this means anyone has the potential to be an identity thief alright I'll go ahead and stop that there so in that example um you know I wasn't explaining anything technical but I was telling a visual story through the use of the animations and the inspiration from that came from like a Dateline MSNBC special right where you see the image of the FTC and then of course you have some you know generic documents anime then and then you zoom in a fun fact that highlights it that's something you might see on a news program and by by explaining that information visually on the screen the learner you as the learner or the audience member is going to be a little bit more captivated by it even though the animation doesn't serve any other purpose than just to explain something conceptually here's another example this one's a little bit different example of conceptual animation this one I like a lot this one was about this form that we did for the Red Cross this forum had to be filled out every single day by 5:00 p.m. and and anything that got added to the forum after 5:00 p.m. actually went on the next day's forum and this is what the content looked like originally for the client and we ultimately redesigned it now before I play this I will mention it is a couple years old so it does look a little bit dated compared to today's design aesthetics but it still stands strong as a good example of conceptual animations so I'll going to play this after the first forum 50 to 66 is submitted subsequent forms should be completed daily until there is minimal activity the forum should capture all activity up until the close of business which is 5:00 o'clock p.m. local time for example a Health Services contact made at 4:45 p.m. who go on that day's forum fifty to sixty six however a contact made at six o'clock p.m. would go on the next day's forum all right so in that example as you can see you know we actually we were talking about how often the forum needs to be filled out and by what time so rather than just having a bunch of blow points on the screen we physically showed this we showed a calendar and we said you know each day the forum 50 to 66 has to be filled out and then we zoomed in and showed a representation of what a Damon and the deadline and again visually explaining this and you might be able to understand this information with the bullet points right but it's not going to be as engaging or memorable this is something you might remember otherwise all right here's another example this is one I did on inventory shortage about how a retail environment calculates inventory shortage the information you didn't know and this is actually the information that was originally provided to the learner in the form of all these bullet points you don't need to read through this but know that it's about how does a store calculate inventory shortage when somebody steals something how does that how's that counted for financially in the retail environment so going to play how we transform these bullet points into something more visual and using animations to explain this concept so how do we figure out a stores inventory shortage it is a simple concept to understand we just need to know how the compound values its merchandise it goes without saying that all of the merchandise in our store has value the value represents the retail dollar amount at which the company owns the merchandise for example this t-shirt has a ticketed retail price of $30 so the company owns this shirt at $30 if a store has 10 of these t-shirts then the company owns these shirts for a total of 300 dollars this same concept applies to clearance merchandise as well whatever the retail price is of the merchandise that's the price the company owns it at so how does this apply to inventory shortage going back to our t-shirt example if our inventory system states that a store should have 10 t-shirts at $30 a piece but we find that three of them are missing we have an inventory shortage of 90 dollars all right so you can see in that example we explained the concept of inventory shortage by showing a visual representation of shirts on the screen and those animations of things coming in and out of the screen helps create a visual story about what is inventory shortage something that's a little bit more engaging than bullet points all right this last example I'm going to show you is on inventory tags this is another retail example about inventory and this is what the content originally looked like and the important thing for you to know as you observe this is that these inventory tags you may have seen them in a retail environment before when you've been shopping but these inventory tags during a stores inventory get placed on every single fixture and they have to be placed in a specific order and that order is front to back left to right and they snake through the department right and again these bullet points explain that and that might be clear for some people but I don't know if it actually prepares somebody to actually go do this in their you know real-life work environment and so we visually showed what does it mean to place these inventory tags from front to back left right I'll go ahead and let you watch the example to see what I mean area tickets should be placed in numerical order from front to back and left to right snaking through the department for example in this department of the store area ticket placement would start here and continue through the department until reaching the end the wall should be tagged either before or after the department fixtures just be sure to be consistent from one department to another in this example the wall is tagged after the department fixtures alright so you can see that example again we we we took the concept of placing those inventory tags and saying that they have to be placed front back left right and actually showed what does that mean to be placed from front to back left to right and after watching this somebody might be much more prepared to go do this and execute this process in their work environment than they would be otherwise if they were to just read those bullet points and the nice thing about this example is that it lends itself to all sorts of other interactive components that you can incorporate into your course for example once I demonstrate this through the use of the animations later on in the course I could create a drag-and-drop interaction or quiz question where the learner actually has to you know do this in a simulated environment where they could click and drag these tags in that particular order and we probably wouldn't it probably would have never occurred to us otherwise if we hadn't presented the information in this way so those are the three types of animations I typically use in my elearning content directional animations to help guide the learners attention to focus their attention on a certain area of the screen transitional animations to help guide the learner through changing content and explaining you know from point A to point B and helping them understand how they got there and then finally most importantly instructional animations how can you explain concepts or ideas through the use of animations how do you provide meaning to content that might otherwise be meaningless through the use of animations and allows you to reduce the amount of words or audio you have in your course so what I'm going to close out with is by saying that when we think about the e-learning development process we usually think of it as as it's starting with instructional design and the instructional design is obviously really important the course is nothing without good content good instruct content and we also have graphic design and of course the interface design but one thing of a challenge you all to do is to make room make time for animation design animation design can really help support your instructional design it can support and enhance your graphic design and of course it can support your interface design and make it a course that's easier to use so don't think of you know elearning design is just being instructional design or graphic design figure out ways to incorporate animation design into your content as well and then the last thing I'll close with our three simple rules for designing with animation so rule number one is use animations to help learners see what you're saying alright and that's the most important thing to help learners see what you're saying you can use animations to reduce the amount of wording you have on the screen or the amount that you have to explain an audio content if you use really well-designed animations you can provide meaning to content that might otherwise be meaningless so help learners see what you're saying through the use of animations use animations with purpose and intention or intent if you incorporate an animation and you can't explain why you're doing that you probably shouldn't incorporate the animation animation should always be used with some intent in mind whether it's to help focus the learners attention or whether you're helping transition the learner through complicated content or you're trying to explain some concept use animations with purpose and then finally when in doubt fade in and out there's a lot of animations available to us doesn't mean we should use them also when in doubt if you don't notice other animation to use just fade in and out that is my number one bit of advice so thank you that is designing with animations dan signing with animation for e-learning content thank you for coming hey did you like that video make sure to check out some of our other great content at elearning and covered com

10 Comments

  1. WindPilgrim said:

    Awesome video! What font are you using throughout the webinar?

    May 22, 2019
    Reply
  2. Fatin Aina said:

    It is good

    May 22, 2019
    Reply
  3. Bahare Omrani said:

    This was really useful, thanks for sharing.

    May 22, 2019
    Reply
  4. Joshua Pulikottil said:

    Thank you for sharing. This would certainly help me in creating better animations. 🙂

    May 22, 2019
    Reply
  5. Marcel van Lierop said:

    Very powerfull! Thanks for sharing 🙂

    May 22, 2019
    Reply
  6. Samuel Ramos said:

    LOL! …So True.

    May 22, 2019
    Reply
  7. Barbara Yalof said:

    Terrific content and excellent graphics- simple to follow and learn what to do and what not to do

    May 22, 2019
    Reply
  8. Panuwat Pinyoboon said:

    Thank you for a very insightful content!

    May 22, 2019
    Reply
  9. Olga Revyakina said:

    Very clear and useful, thanks a lot!

    May 22, 2019
    Reply
  10. ggfrisoli said:

    Great webinar!

    May 22, 2019
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *