5 Ways to Use Animated GIFs in Your E-Learning
Animated GIFs—or image files that act like a short video that loops endlessly—are everywhere these days, on social media, in blogs, and even in e-learning courses! That’s right, instructional designers are using these eye-catching multimedia assets to grab their learners’ attention—and you can too. Check out these ideas to get inspiration on how to incorporate animated GIFs in your courses. 1. As Course Header Images If your learners have a ton of courses in their dashboard and you want yours to stand out, try using an animated GIF in the course header, like in this example: Mars Curiosity Rover. It’s a surefire way to get your course noticed. 2. As Attention Getters GIFs are eye-catching. Have you noticed how hard it is to look away even when you’ve already seen the same animation loop 10 times over? That’s what’s so great about them. Their movement naturally draws your learners in and incites them to pay attention. Not convinced? Take a look at this Rise 360 course: Space Travel–Themed Interactive Infographic See how the GIFs draw you in and make you want to click on the interactive parts? I thought so. 3. To Illustrate Key Messages But GIFs can do more than just catch your learners’ eye. They can actually help learners better understand the concepts you’re teaching them. Check out the GIFs in this course, for example: An American’s Guide to Driving in France. See how the GIFs support the key messages? 4. To Lay Out the Steps in a Process If you’re creating a how-to course, you might be tempted to make a video. And that’s definitely one way of doing it! But if people need to replicate the steps one by one, they might need to rewind each step and watch it over and over again. What a pain! Instead of creating a lengthy video or screencast, why not create a GIF of each step, making it easy for people to rewatch the steps as needed, like in this article on how to make coffee? 5. For Comic Relief If the topic of your course is particularly dry, it might be a good idea to work in some humor to make sure your learners don’t fall asleep. GIFs are a great way to do that! However, be careful to not overdo it. A humorous GIF here and there is one thing; peppering every section of your course with them is another. Here's an example that uses humorous GIFs effectively. Another thing to keep in mind with humor is that it’s subjective. Test your course out on a trusted coworker or two and make sure they find the GIFs to be both work-appropriate and funny. The Bottom Line As with anything, it’s important to keep in mind that too much of a good thing is bad. When using animated GIFs, make sure they’re helping and not hindering the learning process. After all, the goal is to get your learners to focus on the content and retain the key messages. If you’re sold on using animated GIFs in your courses but aren’t sure how to go about creating your own, check out this tutorial. Like this article? Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).Cropped Shadow with Pop Out Character
I like the look of the avatars in this dribble account and the way the shadows were inside the box while the character popped out. See the example here. About Me I love helping people learn to use the Articulate software to meet their needs at work. I especially like to help those new instructional designers who are trying their best to get a handle on things. I regularly contribute to the training team's blog where we assemble all sorts of tips and tricks. Follow it to stay up to date. I post every Wednesday to Articulate's company blogwhere I share more general instructional design tips. I used to write the Rapid E-learning Blog. Still lots of good tips & tricks in there. Connect with me on LinkedIn and follow my YouTube for more tips & tricks.7 Most Popular Rise 360 Examples of 2022
If you’re looking for course design inspiration, E-Learning Heroes is a great place to go. That’s because our amazing members generously share examples they’ve created with the community, so we can all learn from one another! Here are some of the most popular Rise 360 examples published in 2022, in case you missed them: 1. Implementing WCAG Guidelines for Instructional Designers Refer to this resource created by our very own Community Team to make your e-learning courses more accessible to all learners. 2. Interactive Sales Brochure See how Rise 360 empowers everyone to create gorgeous sales assets like this stunning interactive brochure built by Trina Rimmer. 3. Airline Innovation 101 Learn how to help others proactively bring their ideas to life in this infographic-style e-learning course. 4. Comics-Inspired Empathy Training Combine the storytelling powers of graphic novels and e-learning in this interactive example brought to you by Tracy Carroll. 5. Rise 360: Performance Support Demo This handy example by Allison LaMotte shows how you can easily use Rise 360 to create job aides or quick reference guides. 6. Mocktail Recipes Guide This example by Ron Katz shows how mixing and matching a variety of block types while still using a similar layout for each lesson can help learners easily find what they’re looking for and follow along. 7. Interactive Event Guide Check out this creative example by Bianca Woods to get ideas for building a custom conference app fast with the help of a tool you already have. Wrap-Up We hope these examples will get your creative juices flowing! And if you’re looking for more helpful content from 2022, don’t miss the articles below: A Year of Quick Tips & Tricks from Articulate Training Explore the 65+ Articulate 360 Features We Added in 2022 Your 10 Favorite General E-Learning Articles of 2022 10 Most Popular Storyline 360 Examples and Downloads of 2022 If we missed any other general e-learning articles that you found helpful over the past year, comment below and let us know what they are. And remember to follow us on Twitter and LinkedIn and come back to E-Learning Heroes for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.10 E-Learning Attention-Getters That Really Work
As an e-learning pro, you’re always looking for new ways to connect with learners, to grab their attention and keep them engaged so they can get the most out of your courses. So how do you hook your learners right from the start, so they’re motivated—and maybe even excited—about learning something new? Let’s take a look at some tried-and-true techniques. 1. A Surprising Fact One way to grab your learners’ attention is to start off with a surprising fact. This could be something that most people don’t know or that challenges a commonly held belief. Here are a few example courses that use this simple but effective method. View example View example View example View example and download template View example 2. An Eye-Catching Animation Another way to catch your learner’s eye is by using animations. This could be anything from a simple GIF to a more elaborate combination of moving objects. Take a peek at these effective examples for inspiration. View example View example View example View example View example View example and download template 3. An Intriguing Video There’s something captivating about the combination of imagery, animations, and audio in a video that captures attention. Here are a few examples of using compelling video footage. View example View example View example 4. A Realistic Scenario Scenarios invite learners to interact and understand the practical application of the content you’re sharing. But they don’t need to be buried in the middle of the course! Use them to kick-start your course, or as the basis for your entire course. See for yourself how engaging this technique can be by checking out the examples below. View example View example View example View example 5. A Thought-Provoking Question (or Two!) Asking curious questions is a great way to start a conversation—and an e-learning course. Questions pique the learner’s interest in your course right off the bat! You can use questions that you write on the screen, inviting learners to reflect on their own, or ask quiz questions learners must answer to move forward in the course. It’s up to you to decide what makes the most sense for your situation. Here are some examples to get your creative wheels spinning. View example View example View example 6. A Stimulating Challenge When faced with a challenge, most people are naturally motivated to solve it. That’s why challenging your learners from the start can be a really powerful engagement strategy. These two courses will give you ideas on how to go about it. View example View example 7. A Powerful Quote Having trouble coming up with the exact words to say? Then find a relevant quote and include it in your course. Sharing the wisdom of others can be inspiring and give your content instant credibility. Here’s an example course that starts with a quote from the Declaration of Independence. View example 8. An Unexpected or Unique Interaction Most e-learning courses behave in a similar way . . . a Start button here, a Next button there. And while that makes it easy for learners to know how to move forward, it can also be a little boring. Why not throw in a couple of surprises? As long as navigation is still clear, there’s no harm in shaking things up! Here are a couple examples to show you what I mean. View example View example 9. A Humorous Image or Statement People love to laugh, but humor can be hard to get right in a corporate setting, so many course designers shy away from it. However, if you strike the right balance and ensure your humor is appropriate, it can be a great way to catch people off guard and leave them wanting more. Here’s a great example of that. View example View example 10. Evoke an Emotional Response A lot of our memories are derived from life experiences and how they made us feel. For this reason, starting with something that learners emotionally connect with can be a good way to get them to engage with your course. And if you continue on that path throughout the course, they’re more likely to retain what they learn. Check out these courses for some tips on appealing to your learners’ emotions. View example View example View example More Resources This list of attention-getters is far from exhaustive, but it’s a good place to start! And if you looked at the examples I shared, you probably noticed that course designers often use a combination of these ideas to maximize their effect. As you’re deciding how to capture your learners’ attention, make sure to keep your subject matter, learning objectives, and audience in mind. After all, those should always be your guiding principles as you design your course! If you’re looking for more examples of attention-getters, be sure to check out E-Learning Challenge #279: 23 Creative Ways to Motivate and Grab Attention in E-Learning Courses. And for more instructional design tips, check out the following articles: What to Include in Your Course Introduction 4 Summary Screen Ideas for Your E-Learning Courses What to Include on Your Course Closing Screen Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.How I Made This Progress Meter in Storyline 360
Including a progress meter in your e-learning course is a great way to give learners visual feedback about how far along in the course they are. Progress meters can take many shapes and forms, but typically you’ll see a bar near the bottom of the slide that fills up as the learner moves forward in the course, like in the animated .GIF below. Click here to see the interactive version. It’s particularly useful to include a progress meter in longer courses, so learners can estimate how much longer they’ll need to finish the course and can then decide whether to finish up or come back later. Orienting learners also helps prevent them from feeling lost or overwhelmed due to having no clue as to where they are in a course. Thanks to slide numbers in Storyline 360, you can create a custom progress meter like the one above by adding a single trigger. Let me quickly walk you through how I created mine. 1. Insert & Format a Slider If you want the progress bar to appear on all your slides, you’ll need to put it on your slide master. To do that, open the view tab and click Slide Master. From there, open the insert tab, click Slider, and select one of the slider options. For this example, it doesn’t really matter which one you choose because of the formatting options you’ll apply later. Next, go ahead and insert a thin rectangle that’s the same length as your slide. This rectangle will be what fills up the progress bar as the learner advances through your course. With your rectangle selected, choose the fill color you want and select No Outline. When you’re happy with the formatting, right-click on the rectangle and choose Export Shape as Picture. Save your rectangle to an easy-to-find location—like your desktop—and give it a name that’s easy to identify. Then, click on the rectangle in your project, go down to the timeline, and click on the eye to hide it. We’ll use it again later, but for now we want to make sure it doesn’t get in the way. Now, select your slider, open the format tab, click Thumb Fill, select Picture, and browse for the rectangle you just saved. The next step is to adjust the size of your slider until the rectangle (or thumb) is entirely off the slide, as shown in the animated .GIF below. If you’ve set it up correctly, the rectangle (or thumb) should be completely off the slide. The part of the track that's on the slide should be empty but take up the entire width of the slide, like in the screenshot below: Once your slider is the right size, you’ll format it to look the way you want. For this example, you’ll choose No Outline for the thumb border ... … and No Fill and No Outline for the track fill and border. Next, unhide that rectangle you used to create the slider thumb. You’re going to use this rectangle to create the outline of the progress bar. For this example, get rid of the fill color and add a gray contour, so it looks like the screenshot below. Then move your slider and rectangle to the bottom of the slide and line them up. You want the rectangle to be slightly taller than the slider thumb—as pictured below—so you might need to adjust the height of your rectangle. Once your rectangle is the right height, center it on your slide. Finally, click on your slider, open the design tab, and change the end value to 100. 2. Create a Trigger Now that your slider is all set up, you’ll need to add a trigger to make it show your learner’s progress. Here’s what the trigger should look like: Note that the object should be the name of your master slide, so it might be different than what you see above. 3. Insert a Hotspot Next, you’ll want to add a hotspot to prevent learners from clicking on the slider and changing its position manually. To do that, simply open the insert tab, click Hotspot, and select the rectangle. Then, right-click on your hotspot and uncheck Show Hand Cursor on the hover option so learners don’t think there’s something to click on. If you’d like, you could stop here! Your progress bar should now be fully functional. However, if you want to take it further, move on to step four. 4. Add a Hover State (Optional) To take your progress bar to the next level, add the exact percentage of the course that’s been completed to the hover state for learners to see when they hover over the progress meter. To do so, open the insert tab, choose Slide Number, and click More in the drop-down menu. Then select Progress through project (or Progress through menu, if you’re using the menu order to number your slides) and click on the place you’d like to insert it on your slide. The percentage will appear in a textbox, like this: From there, you can format the text—change the color, for example—and move it to the exact spot you’d like it to appear, like I’ve done below: To make the hover state work, you’ll need to add a trigger since there’s a hotspot preventing the learner from interacting with the slider. Here’s what that trigger should look like: And that’s it! Now your learners can see how they’re progressing through your course. Here’s what the end result looks like. Keep in mind that this isn’t the only way to create a progress meter. Feel free to get creative! Want to download my file to better understand how I've set everything up? Pop on over to this page. More Resources Want to learn more about the slide number feature? Check out this article for ideas of ways to use this feature and this tutorial for a step-by-step guide on adding slide numbers to your project. If you want to try something you learned here, but don’t have Articulate 360, why not start a free 30-day trial? And be sure to subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).How I Designed This Immersive Scenario on Prioritizing Tasks
Recently my fellow instructional designers Sarah Hodge and Madison McCartney and I teamed up to prove that there’s always more than one way to present course content. Each of us created a mini-course on prioritizing tasks, using the Eisenhower Decision Matrix as our starting point. In this article, I’m going to walk you through how I got from this: … to this: View interactive version | Download template Without further ado, let’s get into it! Setting the Scene Since I created this project as an example, there’s no real target audience, much less learning objectives. But to make it feel realistic I set some basic parameters to guide my design thinking. Here’s what I came up with: Audience: Novice e-learning project managers Learning objective: Be able to identify tasks, classify them as important and/or urgent, and prioritize them accordingly Coming Up with the Concept Over the years, I’ve seen a lot of great e-learning examples in the E-Learning Heroes community, but a few really stand out to me. One in particular is this time management game by Phil Eagles. I love the way he took a series of simple multiple choice questions and made them into a scenario that feels real and meaningful. And since time management is so closely related to task prioritization, it’s the first thing I thought of when I started brainstorming ideas for my project. I wanted to create something similar—but put my own spin on it. Because I wanted to create a totally custom and immersive scenario, Storyline 360 was the perfect choice for this project. I decided to simulate a desk and let learners identify tasks and prioritize items for themselves. The idea behind this was to emulate real life—where learners have to identify tasks and decide which ones to do first—while also following one of the key principles of adult learning by giving them control over their learning experience. Refining the Scenario Once I had a general idea of what I wanted to do, it was time to iron out the scenario details. I wanted to give learners enough opportunities to practice prioritizing tasks without it feeling repetitive. I included a few different types of tasks—since that’s what it’s like in real life. In the end, I settled on a total of six tasks, including a few emails, a couple of text messages, and a Post-it. As I started to build out my scenario, I ran into some challenges. One of the main issues was that my slide was getting overcrowded. To overcome this challenge and help learners focus on one thing at a time, I divided the process of task prioritization into two parts: Step 1: identify and analyze the tasks to determine how urgent/important they are Step 2: prioritize the tasks based on their level of urgency/importance For step one, I used a series of toggles so the learner can decide if each task is urgent and/or important. Based on their answer, I provide custom feedback. This is how that turned out: For step two, I made a simple drag-and-drop interaction so the learner can decide where each task belongs on their to-do list based on its level of urgency and importance. Here’s what that ended up looking like: Because this project was intended for adults who may have previous experience with the Eisenhower Decision Matrix, I made the explanation walk-through optional, as shown in the screenshot below: Is this how I initially envisioned my project? Absolutely not. To be honest, I don’t think I really had a clear mental picture of what it would look like. Some people can map out their entire project before they even open up the authoring app, while others do better jumping straight into building and get inspired along the way. Both methods are totally fine as long as you always keep your learners’ needs at the center of your design. Designing the Graphics As someone with no formal graphic design training, I can be challenged to come up with ideas for the look and feel of my courses. To find inspiration, I usually start by checking out the examples and templates on E-Learning Heroes as well as the Content Library 360 templates. Even if I don’t find exactly what I need, I usually come across something I can use as a starting point. Personally, I find that starting with a template is less intimidating than starting from a blank slide. And even if the final result ends up looking completely different than the original template, having something to start with helps me channel my ideas and inch closer to a place I feel good about. So, once I knew that I wanted to create an immersive scenario, I headed straight to E-Learning Heroes to look for templates I could use as a springboard for my design. A quick search for “desk” led me to this template, which I thought was perfect: Download Template After opening the template, I made some adjustments and played around with different color options. Here’s what my first version looked like: There’s nothing wrong with the way this looks, but—as I mentioned earlier in this article—it was at this point I realized there wasn’t enough room on the slide to allow learners to both identify and prioritize tasks in one spot. Splitting the activity up into two parts gave me more screen real estate to work with. Around this time, I also decided I wasn’t sure about the mint green wall and wanted to give white a try . . . . . . but I wasn’t totally sold on that either. I also felt lukewarm about the way the desk looked and decided to incorporate some texture. This is what the next version looked like: Wondering how I created the wood texture? I did a Google search for “flat design wood,” inserted one of the images I found onto my slide master, and then used the curve tool and shapes in Storyline 360 to achieve a similar effect. This is what it looks like behind the scenes: I was pretty happy with the way this looked, but when I started adding other objects to the screen, I realized they didn’t stand out enough against the dark blue background. That’s when I settled on the design you see in the final version: I went through a similar process for the other slides in my project, so I thought I’d share the different versions with you as well. . . . and here’s the final version. You’ll notice that in the final version I pulled in the computer screen from the previous slide to tie it together a bit more. I also changed the size of the boxes to make it all fit on the screen. As I was working on my core content slides, I also started to pull together my title slide. Since my other two slides used a flat design style, I wanted to stick with something similar. I found this simple slide template in Content Library 360 and used it as a starting point: I didn’t want to include characters, so I deleted those and changed the color of the background to match the dark blue I was using at the time. After taking out the characters and changing the color, I felt like the slide was too minimal. It was missing something, so I sat and thought about how I could incorporate more visual interest. That’s when I had an idea: what if the title slide was a view of the desk from above? And since we’re talking about prioritizing tasks—and many people write their to-do lists in a notebook—I thought that might make sense and look nice. So I went back to E-Learning Heroes for some inspiration and ended up finding this spiral notebook template: Download I imported it into Storyline 360 and made a few adjustments to make it all come together. Here’s what it ended up looking like: As you can see, graphic design isn’t always a straightforward process. It doesn’t necessarily go from zero to perfect in one fell swoop. In many cases it’s an iterative process involving incremental changes until you’re happy with what you’ve got. So the next time you’re feeling stuck and unsure about your design, try doing what I did and search E-Learning Heroes or Content Library 360 for a template you can use as a starting point. Then, make small changes here and there. Eventually you’ll get to a place where you feel good about your design. More Resources Hopefully you’ve found this inside look at my design process interesting and insightful! Remember, it’s okay if your first draft isn’t perfect. Design (whether it’s instructional or graphic) is a process, and it often takes trial and error to get it to where it needs to be. And there’s absolutely nothing wrong with that! If you enjoyed this article and are looking for more insight into what goes on in the minds of instructional designers as they’re creating courses, be sure to check out these articles: How I Designed This Personalized Decision Matrix How I Designed This Interactive Dial Matrix A Behind-the-Scenes Look at How I Designed This Gamified Quiz Want to try building your own immersive scenario in Storyline 360, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.7 Most Popular Storyline 360 Examples & Downloads of 2023
E-Learning Heroes Community is the perfect place to get inspired by examples from both our amazing community members and our Articulate staff members. Below are the top seven Storyline 360 examples from 2023. 1. Storyline Comics Style Communication: Branched Scenario See how you can use interactive storytelling elements and branching techniques to teach learners the skills they need in this cool example. 2. Power of Self-Motivation Scrolling Experience Check out this completely unique interactive example that engages learners right from the start. 3. Office Safety Training Template Want to teach workplace safety in a memorable and interactive way? Check out this downloadable template to help kickstart your project. 4. Interactive Storytelling Template Learn how to leverage storytelling in Storyline 360 to help your learners apply their skills in a real-life scenario with this inspiring example. 5. Room Exploration Interaction Template Make searching an office, home, warehouse, store, or any other 2D environment feel more cinematic with this downloadable interaction. With the help of hotspots, triggers, and layers, learners can use the on-screen flashlight to help them discover clues. 6. Reset Drag-and-Drop Incorrect Choices Template Ever wanted to reset only the incorrect drag choices in Storyline 360? Use this starter template and supporting video tutorial to learn how to reset your own drag-and-drop interactions. 7. Employee Health and Wellness Check out this stunning example to see some of the immersive and custom learning experiences you can create with Storyline 360. Wrap-Up We hope these examples inspire you as you work on your next e-learning projects! Did we miss any of your favorites? Be sure to let us know in the comments below. You can view more article recaps from 2023 by checking out our latest compilation of articles here: All the Best E-Learning Heroes Content from 2023 in One Place. Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (formerly Twitter). And if you have questions, please share them in the comments.How I Made This Digital Board Game in Storyline 360
When a company needed to quickly pivot its in-person board game to an online digital version, Storyline 360 came to the rescue. And the result won DemoFest’s Best in Show: Vendor award at Learning Solutions 2023! In this behind-the-scenes project tour from creator Kai Dean, you’ll discover creative ways to use Storyline 360 features—like dials, question banks, states, triggers, and variables—to replicate common aspects of board games. If you want to play the game, check it out here. Want to try creating something similar in Storyline 360, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to stay up-to-date on the latest e-learning examples.Rise 360 or Storyline 360: Which One Should You Use for Your Project?
Ever since we launched Rise 360, customers have been asking me the same question: How do I decide whether to use Storyline 360 or Rise 360 for my e-learning project? This is what I usually say: Personally, I find that Rise 360 is perfect for most of my projects. It lets me create beautiful, responsive e-learning courses in a matter of hours. If I need a custom interaction or two, I’ll build them out in Storyline 360 and insert them into my Rise 360 course as blocks. And when I need to be able to customize my entire course down to the last pixel, I use Storyline 360. To help you better understand the kinds of projects that are best suited for each app, I pulled together some examples. Rise 360 Course Examples Rise 360 makes it easy to create lessons by mixing and matching different blocks—or stackable multimedia elements—to create a unique learning experience. Here are some examples of Rise 360 courses to give you an idea of the types of projects you could create in Rise 360: New Employee Orientation New Manager's Toolkit Sales Fundamentals Conflict of Interest Compliance Example Can You Talk Your Way Into Higher Pay? Driving in France What You Need to Know About Multi-Device E-Learning Common Workplace Injuries Training Schedule Template Training Needs Analysis 101 Rise 360 Course Examples with Storyline 360 Blocks If you’re creating a course in Rise 360 and realize that you need to create a custom interaction, no need to start over! Simply create your custom interaction in Storyline 360 and add it to your Rise 360 course as a block. Here are some examples of projects that seamlessly combine Rise 360 and Storyline 360: Space Travel–Themed Interactive Infographic Nursing Module Working Across Cultures How to Create E-Learning The Four Mindsets of Change Your Kidneys at Work The Mars Curiosity Rover Name That Breed If you’re looking for some inspiration for when to use the Storyline 360 block in Rise 360, check out these resources: When to Use the Storyline 360 Block in Rise 360 Three Ideas for Enhancing Rise 360 Courses Using the Storyline 360 Block Here’s How Course Designers Are Using Storyline 360 Blocks in Rise 360 Storyline 360 Course Examples Some projects call for a more tailored look and feel throughout—for example, if you want to immerse learners in a realistic scenario. Others require a lot of custom interactions. For those projects, you'll want to use Storyline 360. Here are some examples of courses where authors have leveraged the features in Storyline 360 to create a fully customized experience: How to Fight a Bear Follow Santa’s Instructions for Packing a Gift Movie Trivia Game Instructional Design Basics Review 101 Software Simulation Customer Service Scenario Multilingual Course with Text to Speech Further Reading Hopefully, these examples give you a clearer picture of the types of courses you can create in both Rise 360 and Storyline 360 so you can more easily decide which to use for your next project. To dig deeper into this topic, check out this article: How Pros Use Rise 360 and Storyline 360. Want to try out Rise 360 and Storyline 360 for yourself, but don’t have Articulate 360? Start a free 30-day trial. And if you found this article helpful, subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.
