How I Built This Recycling Parallax Interaction in Storyline 360
If you’ve ever been on a road trip and gazed out the side window (hopefully only as a passenger 😉), you’ve probably noticed that objects close to you—like trees—appear to zip by really fast, while objects further in the distance—such as mountains—seem to barely move. This phenomenon is known as motion parallax. In the digital world, the parallax effect gives the illusion of depth and movement. Combine that with a realistic learning scenario—like in this Recycling Guide example—and you’ve got yourself a truly engaging interaction. View | Download Let’s take a look at how to create this interactive parallax example in Storyline 360! Create layered components To create a parallax effect you need several layered components that move at different speeds. So, the first thing I did was create all my slide elements with the different layers in mind. Using a combination of shapes in Storyline 360 and Content Library 360 assets, I ended up with six layered components. Component 1: Recycling bin For this example, I wanted the recycling bin to be the main focus—after all, that’s what the course is all about. Since I planned to tilt the bin and make the wheels spin, having it front and center would give the optical illusion that the bin was rolling as the background moved. Component 2: Park Next, I needed to create the main interactive piece—the park. This is the only component that learners engage with to reveal additional content, so I was very intentional about how I designed the space. Since the graphics were going to move horizontally, I made sure to extend those designs past the slide size. I carefully placed each object—such as buttons and litter—in different parts of the park and in a specific order to help guide the experience. And because I used only Content Library 360 icons/illustrations and simple shapes, it was easy to move things around and reposition them as needed. Pro tip: Before duplicating a button, create all the states beforehand so they copy over. Big time-saver! Component 3: Mountains (light) To add a sense of depth and movement, I included mountains in the background. I combined several different mountain-shaped icons to create the extra-wide graphic. I made the first mountain layer a light tan color since objects up close are generally lighter in color. Component 4: Mountains (dark) Behind the lightly colored mountains, I added a darker version for contrast. To save time, I copied and pasted some of the shapes from the lighter mountain. Since not all mountains look alike, I flipped and resized some of the shapes so that when they moved, they didn’t line up exactly the same. Component 5: Sky The scene wouldn’t be complete without a sky! I added a sun for reference. I mostly kept this component simple to save time and to keep the main focus on content. Component 6: Frame (optional) Okay, so this is where it gets a little tricky. I could’ve made things easier by extending the sky and ground to fill the slide. That way, I wouldn’t need a frame and objects could freely animate on and off the rectangular slide. But I really wanted to create a unique learning experience. To give this course a custom look and feel I designed a frame to show content within a unique shape. The frame is comprised of the title, a white border, arrow buttons, a background, and two side shapes to match so that the other components only show inside the unique shape. Pro tip: To make the slide look seamless with the player background, go to your Player settings and change the background color to match. And here’s how it all looks together. Save static objects Once I created all the components, I realized there were a lot of objects on my slide. So, I decided to make my file easier to manage by saving some of the layered components that had a lot of objects—such as the Park, Mountains (Light), and Mountains (Dark)—as their own image and then replacing them with a scalable vector graphic (SVG) to keep image quality. For example, I selected all the objects in the Mountains (Dark) component, right-clicked, and selected Export Shape as Picture. I saved the shapes as a PNG. For the best image quality, I simply opened that PNG file in Adobe Illustrator and saved it as an SVG. I went back to my Storyline 360 project, inserted and resized my SVG to match the objects on the slide, and then deleted all of the Mountains (Dark) objects. I repeated this process with the Mountains (Light) component. For the Park component, I took a few extra steps before exporting it as a picture since it had a lot of interactive elements and I only wanted to save the static parts of the image. On the timeline, I clicked the eye icon to hide objects with states, animations, and text so I could still edit them or assign triggers at any time. Here are all of the static components I exported as a shape to save as an SVG. And for context, here are all the elements I did not include in the export. After inserting and resizing the Park SVG, I moved it beneath the hidden park objects on the timeline. I selected the eye icons to make all the Park components visible again where they remained in the same location as designed. Then, I grouped them and renamed the group “Park.” Saving some of the components as an SVG really sped up my workflow. With fewer objects on my timeline, it was easier to select the ones I wanted to edit or add triggers to. It also reduced the file size so content could load faster. To learn more about scalable vector graphics (SVG), check out this article: Storyline 360: SVG Support. Get things moving With all the graphics on the base layer in place, I created several additional layers to reveal content and help tell the story. Now it was time to connect everything with movement. To explain how to create the parallax effect, let’s roll through the example.😊 Background When you move right, the background moves left, making it look like the recycling bin is rolling forward. If you move left, those same background components move right, making it look like the recycling bin is rolling backward. To create this parallax effect, I added motion path animations to move some of the background components—Park, Mountains (Light), and Mountains (Dark). And in case you didn’t already know, you can add more than one motion path to the same object. That feature really came in handy here. For each component, I added a Left and Right line motion path. Since I wanted the components to all move at the same pace, I edited the easing direction to None for each motion path. I also selected Relative Start Point to ensure each component always moved from its current position. Next, I changed the duration of the paths to one second. I chose this duration because I planned to have the recycling bin roll left or right for one second as well. That way, all the animations would stop and start at the same time. To make it easier to manage triggers later on, I also renamed the motion paths to include the component name and the direction of the path. For example, I named the motion path that moves the park group right “Park Right.” Next, I changed the length of the paths. This is where it differs for each component. Since I wanted the background objects to move at a slower speed than the foreground objects, I edited the left and right motion path lengths for each component to the following. Park: 180 px Mountains (Light): 90 px Mountains (Dark): 40 px Using these settings, the furthest-away component, Mountains (Dark), would only move left and right 40 px during the one-second duration. Whereas, Mountains (Light) would move about twice the distance, at 90 px, during that same time. And that was it for the motion path settings! Now it was time to add triggers to make these components move in the right direction. By default, when you add a motion path animation to an object, a trigger is automatically created. Since I wanted the components to move based on the user selecting Right or Left, I deleted those triggers from the base layer and instead added them to the Bin Right and Bin Left layers. On the Bin Left layer, I added triggers to move the components right when the timeline starts. And on the Bin Right layer, I added triggers to move the components left when the timeline starts. Now, when the learner selects Left or Right, they’ll see the background move accordingly. Recycling bin Now for the recycling bin. I put it front and center to make it appear like it was rolling when the background moved. When you go right, the bin tilts and rolls forward. When you move left, it tilts and moves backward. After one second, the animations stop and the recycling bin returns to its upright position. To create this optical illusion, on the Bin Right and Bin Left layers I hid the recycling bin that was on the base layer so it was no longer visible. In its place, I added a tilted bin with dirt paths depending on the direction it was going to move. Bin left layer Bin right layer Next, I added a Spin entrance animation to the wheels. Just like a regular wheel, if you go left, the wheel’s direction moves counterclockwise. If you go right, the wheel’s direction moves clockwise. As for the amount it spins in each direction, I landed on a quarter spin since that looked the most accurate. To emphasize the direction the recycling bin was moving, I included dirt paths and added Wipe and Fade animations. And because both the duration of the background components and the timeline on these layers are set to only one second, all the animations come to a stop at the same time. To ensure the recycling bin returned to its original upright position, I added a trigger to hide whichever layer you’re on—Bin Left or Bin Right—when the timeline ends. The learner automatically returns to the base layer, where they can continue the learning journey. Set boundaries With the freedom to move the recycling bin left and right as you please, you may be wondering how I stopped the background components from moving too far. If you go left at the very beginning, you’ll see a little tortoise and a deactivated Left button so you can’t move any further. To keep learners from navigating outside of the main area, I needed to set some boundaries. To achieve this, I added a Deactivated button over the Left button that only shows when you navigate to that side of the screen. To make the button visible, I added a transparent shape and pasted it inside the existing group, “Park.” When you navigate left, the Park group moves right, causing the bin and the transparent shape to intersect, which changes the Deactivated button to Normal (visible). When you navigate away, it stops intersecting and returns to its original hidden state. I used this same technique at the end of the learning experience. When the recycling bin intersects with the transparent shape next to the house, it shows the final layer. This allowed me to end the parallax learning experience at the end of the graphic. Wrap-Up And that’s all there is to it! Using the parallax effect can create an engaging learning experience that truly brings your content to life. If you haven’t already, download this Recycling Guide project to take a closer look at how I built it. For more advice on working with motion paths, head on over to this article: 7 Pro Tips for Working With Motion Path Animations in Storyline 360. If you want to see more ways to create a motion effect, check out this webinar: Create Parallax Effects With Sliders in Storyline 360. Want to try to create your own parallax example, 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.How I Built This Dial-Driven Map Activity in Storyline 360 (With Help from ChatGPT)
Despite our increasingly ‘touchscreen’ and ‘hands-free’ world, dials are still a big part of everyday life. If you need to emulate a dial in your e-learning experience, this feature can make your interaction more realistic, tactile, and relevant for the learner. For the Using Interactive Dials E-Learning Challenge, I created a Storyline 360 example that used dials as a sort of drag-and-drop. Along the way, I tried out some creative techniques that helped this project work in unexpected ways—including using the dial feature to animate an object and an unconventional approach to enable the dial to spin in both directions. Here’s a behind-the-scenes look at how this project works. Project Overview This demo project teaches people some simple map navigation techniques. You can try it out for yourself here and download the Storyline 360 project file here. To complete the activity, you end up interacting with three ‘picture as dial’ controls: To start the course, you need to turn the compass so its edge connects Point A and Point B Then, you have to turn the compass housing to the correct orientation to get your bearing While you’re doing this, the compass needle—which is also a dial locked in a disabled state—will oscillate slightly Creating my dial graphics I created the compass in PowerPoint and exported it as a large, hi-res PNG image. I doubled its height using Pixlr and used Storyline’s Convert to Dial feature to create a custom dial. Using the dial as a drag-and-drop This dial has four states, which are triggered by changes to the associated Compass_Base variable: Changes to the same variable also trigger events within the demo, effectively making this a drag-and-drop activity, but with a fixed axis. Unlike most drag-and-drops, though, it is accessible via the keyboard. Allowing the dial to turn in both directions In its default setting, a dial can only make one complete turn, which is limiting when you are trying to mimic a real-life object that can turn in both directions. To overcome this, the second dial in my demo has a 1440° rotation and its starting position is 687°—about halfway, just left of center—to match the appearance of the compass base. This dial can turn clockwise or counterclockwise for two rotations in each direction before coming to a stop. But that does make it quite tricky to use its position to calculate a bearing, as positions 0, 360, 720, 1080, and 1440 all point north. To compensate for this, I asked ChatGPT to write some custom JavaScript for me: // Function to calculate the heading function calculateHeading(compass) { // Calculate the heading with special handling for multiples of 360 var heading = 360 - (compass % 360); // Adjust heading for cases where it's 360 but should be 0 if (heading === 360) { heading = 0; } return heading; } // Function to adjust heading to 0 whenever it becomes 360 function adjustHeading(heading) { if (heading === 360) { heading = 0; } return heading; } // Get the value of the Storyline variable Compass and calculate Heading var Compass = player.GetVar("Compass"); // Assuming "Compass" is the name of your Storyline variable var Heading = calculateHeading(Compass); // Adjust Heading to 0 whenever it becomes 360 Heading = adjustHeading(Heading); // Set the Storyline variable "Heading" to the adjusted value player.SetVar("Heading", Heading); // Assuming "Heading" is the name of your Storyline variable And this is the result: With this code, I can tell if the compass housing is upside down even if it has been turned more than once. Pointing the compass housing south is a common mistake for novice navigators, but my demo will spot this and provide correction. Using animation to enhance the dial experience The third dial is purely for decoration. During the second part of the activity, I wanted the compass needle to move gently as you were turning the compass housing—just as it does in real life. This dial has a more limited rotation and range: I used ChatGPT again to create some custom JavaScript that makes the compass needle oscillate each time the compass housing is turned: // Function to randomly adjust Compass_Needle between 8 and 15, returning to 11 within 0.50 seconds function adjustCompassNeedle() { var randomValue = Math.floor(Math.random() * 8) + 8; // Generates a random number between 8 and 15 player.SetVar("Compass_Needle", randomValue); setTimeout(function() { player.SetVar("Compass_Needle", 11); // Return Compass_Needle to 11 after 0.50 seconds }, 500); } // Variable to store the previous value of Compass var previousCompassValue; // Function to handle changes in the Compass variable function handleCompassChange() { var currentCompassValue = player.GetVar("Compass"); // Get the current value of the Compass variable // Check if the Compass value has changed if (currentCompassValue !== previousCompassValue) { // Call the function to adjust Compass_Needle adjustCompassNeedle(); // Update the previous value of Compass previousCompassValue = currentCompassValue; } } And here’s a close-up of the result: Wrap-Up As you can see, there are lots of creative ways to use dials to produce all sorts of fascinating interactions! And I hope these insights about my project creation process give you ideas to try in your own work. As you might imagine, there’s quite a bit more going on in this demo beyond just dials—notably some Jump to Time–powered animations and an approach for controlling a Zoom panel with pause/play timeline triggers. So be sure to check out the project Storyline 360 file to see how the whole experience comes together. And please dial me up if you have any more questions! Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox. If you have questions, please share them in the comments.4 Pro Tips for Working with Sliders
When you’re looking to up your e-learning game and give learners more control over how they interact with information, sliders are a fantastic option. Sliders are an interactive element you can add to your Articulate Storyline projects, and you’ll find that e-learning pros use them for all sorts of things, including: Illustrating cause-and-effect relationships, like in this safe lifting example Controlling objects on the screen like images or characters, as in this space-themed download Capturing and manipulating data and numeric values, like in this self-assessment for paramedics If it seems like you can use sliders for a lot of different things, you’re right! So let’s plant some seeds of creativity by walking through a few slider basics. Along the way I’ll share some handy pro tips to make working with sliders even easier. Adding Sliders First things first! Adding a slider to your project is easy. You’ll find sliders on the Insert tab in Storyline 3/360, grouped with dials and buttons and other interactive objects. Once you’ve selected Slider, you’ll see three slider styles to choose from: Regardless of the style you pick, the process of customizing and working with sliders is all the same. With your slider inserted and selected, you’ll find that a Slider Tools menu becomes available with two tabs: Design and Format. The Design tab contains options for customizing the function of your slider. The Format tab has options for customizing the look and feel of your slider. Let’s focus on some of the options under the Format tab first. Later we’ll dive into the options on the Design tab. Customizing the Look and Feel of Sliders One of my favorite things about sliders is how flexible they are. You can easily blend them into your project by changing the appearance of your slider using the options under Slider Tools > Format tab. Sliders are composed of two basic parts: the track and the thumb. To interact with the slider, learners drag the thumb along the track. As I mentioned, you can integrate sliders into the look and feel of your project (or make them stand out from the background if you prefer) by customizing the size, color, and effects of both the track and thumb. You can even swap out the built-in thumb and track for images of your own—opening up a load of creative possibilities! Let’s walk through some of the ways you can format and customize your sliders. Resizing & Rotating The track and thumb can be resized individually or together. To resize the whole slider (both the track and thumb), drag a corner sizing handle. To change the length of the track, drag the left or right sizing handle. To change the thickness of the track, drag the left yellow handle up or down. To resize only the slider thumb, drag the top yellow handle up or down. Wishing your slider could be vertical? No problem! Although sliders are added to your Storyline project in a horizontal orientation, you can easily change that to any orientation you’d like by grabbing the rotation handle on the top of the slider, or by accessing the Rotate drop-down on the ribbon. Recoloring Changing the color fill for the track and thumb is also easy. Just select the slider and go to the Format tab, located under Slider Tools. Change the color of the track fill by selecting Track Fill. Pro tip: Coordinate your slider colors with the objects or images on your slide by using the eyedropper tool to select specific colors. This is a super-simple way to make your slider look and feel customized and fully integrated with the other objects on your slide! Changing the Thumb A lot of folks like to use their own images in place of the default thumb and track options available in Storyline. This can come in handy when you’re trying to give your project a cohesive look and feel that really blends the slider into your slide. You can see an example of how cool an integrated slider can be in this recent e-learning challenge on drug safety and awareness. To change a thumb to an image, simply select the slider, go to the Format tab under Slider Tools and select Thumb Fill and then Picture. Similarly, to change a track to an image, simply select the slider, go to the Format tab under Slider Tools and select Track Fill and then Picture. Pro tip: If you’re trying to use a picture for the track fill and struggling to get the right look, you might find it’s easier to make the track translucent or transparent and then just place it over the image on your slide. You can control the transparency of the color fill by selecting Gradient from the Track Fill options and then selecting More Gradients. From there, just drag the transparency slider (or enter a value) to adjust transparency from 0 (no transparency) to 100 (totally transparent). Setting Up Slider Properties Now that you’ve seen how to add a slider and a few ways to customize the look and feel of sliders, let’s get into the nitty-gritty of how to work with them. That means we’re going to dig into the options available under Slider Tools > Design tab. Controlling Slider Behavior When you add a slider to a project, Storyline automatically creates a variable associated with that slider and labels it Slider1. You’ll find this slider variable under the Slider Properties group on the Design tab. This slider variable is a number variable that Storyline automatically creates. Storyline creates a new number variable for each slider in your course. If you want to change the number variable that’s controlled by the slider, simply use the Variable drop-down to select another number variable in your course. If you want to change the name assigned to your slider (e.g., Slider1, Slider2, etc.) to something more intuitive or easily recognizable, just right-click on the slider and select Rename. Enter a new name and click OK. You can also change the name of your slider on the timeline. To do that, just double-click on the slider in the timeline to open it for editing. Enter the new name for your slider and press Enter. I find that taking the time to rename my sliders makes it a whole lot quicker and easier to select the correct slider when I’m assigning triggers—especially when I’m working with multiple sliders in my project. When a slider is added to your project, by default, it’s inserted as an object with a starting value of 0 and an ending value of 10. This means there are 11 “steps” as you drag the slider from left to right. Let’s take a closer look at how you can control the number of steps and the value for each step, as well as other slider properties on the Design tab. Update Storyline gives you the ability to control when the slider variable is updated. You can update the variable as the learner is dragging the slider (which is the default setting) or only after the learner releases it. Start This is the starting value for your slider. In other words, this is the value assigned to the step where the thumb initially appears on the track (also see initial, below). By default this value is set to 0, but the starting value can be any value up to two decimal places. The minimum value is -9999 and the maximum value is 9999. For most projects this value can be left at 0, but for some projects it makes more sense for this value to match what your learners are seeing on the screen. For instance, if you’re using a slider to create an interactive thermometer that scales from 32°F to 100°F, you’d probably want that starting value to be 32 to avoid confusion. Initial This is the initial position for the slider thumb on the track. Again, Storyline defaults to 0 (left), but you can designate any value of up to two decimal places. For instance, if you wanted the thumb to initially appear in the middle of the slider, assuming a total slider value of 10, you’d set the initial value to 5. End This is the ending value for your slider. It defaults to 10, but again you can make it any value of up to two decimal places. The minimum value is -9999 and the maximum value is 9999. Much like the starting value, for certain interactions it might make sense to change this value to reflect what your learners are seeing on the screen. Step This is the incremental value for the slider thumb as it moves to each step along the track. By default, Storyline sets this to 1, but it can be given any value of up to two decimal places. Folks often add more steps to their slider when they’re trying to use it to fluidly change the state of an object, like in this example. Triggering Actions So you’ve got your slider looking good and set up the way you want—now what? Well, sliders are a tool for interaction, so you'll probably want your slider to do something when the learner uses it! That’s where triggers come into the picture. You’ll need to add triggers that execute when the slider moves or the variable changes. Let’s say you want to show a series of layers to progressively reveal an image as the learner drags the slider, like in this water treatment process example. Here’s what the layer trigger on the triggers panel looks like for this project: Of course, this is just an example of one type of action you can trigger with sliders. There are tons more! To learn more about triggers, check out this handy user guide. Pro tip: One common use of sliders is to capture the slider value and display it in a textbox or a shape. This can be a really cool way for learners to rate themselves. For instance, you could ask them to drag the slider to reflect their comfort level in performing a new task they've just learned, like in this example below. Building something like the above interaction is easily done by adding a variable reference to a textbox or shape. A variable reference is simply text that reflects the variable name surrounded by the % sign. So typing %slider1% into any textbox or shape will display the value of slider1 when previewed/published. Likewise, typing %slider2% will display the value of slider2 … and so on. The really cool thing is that this reference can be automatically updated to show the value as your learner moves the thumb along the track (assuming you've left the update setting in its default). You can see an example of this idea in the gif below. More Tips and Resources By now you’re probably seeing all the interactive potential of adding sliders to your projects. This article touched on a lot of information and tips, but there’s much more to learn. Here are a few more bonus tips and resources to check out. Not quite sure how you’d use a slider in your course? No worries! Our community is super-generous about showing their work. Check out some of their creative ideas for using sliders in this recent e-learning challenge and in this round-up of slider interactions. Love the idea of capturing slider value to display to learners, but want to limit their input or prevent them from changing their selection? Check out this discussion for a brilliant tip from our very own Superhero Wendy Farmer. So clever! One cool idea for using sliders is to create an interactive bar graph that changes as the learner drags the slider. Here’s a gif to illustrate the idea: This effect is super-cool, right? The trick to making this work is to add lots of states to your bars and lots of steps to your slider. These incremental changes give the slider and the bars that nice, fluid movement. To see what’s under the hood of this slider interaction, grab this free bar chart download. As I mentioned above, inserting a slider automatically adds a slider number variable to your project. Obviously, renaming the slider variable to something more relevant is a big win for a lot of reasons, but particularly when you’re troubleshooting your project. There are even more helpful troubleshooting tips for all sorts of Storyline interactions in this must-read article, Troubleshooting Advanced Interactions by Nicole Legault. Are you just looking for a general guide on sliders? We’ve got you covered there too. Check out our Storyline 360 User Guide. What are your tricks for working with sliders? Share your tips, ideas, and questions below or strike up a conversation with your fellow e-learning pros in our Building Better Courses forum. Did you find this article helpful? If so, don’t forget to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.Everything You Need to Know About States in Storyline 360
The states feature in Storyline 360 is incredibly powerful. States allow you to alter the appearance of objects based on the learner’s actions. To illustrate this, take a look at the GIF below: See how the formatting of the buttons changes as I hover, and then again when I click on them? And did you notice that once I’ve clicked on the top three buttons, a fourth one appears? These formatting changes are made possible thanks to the states feature in Storyline 360. But this is only the tip of the iceberg when it comes to what’s possible with states. Let’s do a breakdown of this super-powerful feature to help you better understand how you can use states in your courses: Built-In Object States Custom Object States Drag-and-Drop States Character States Built-In Object States When you click on an object, open the States panel and click on the New State icon. You’ll notice that there are already a few built-in states: The great thing about these built-in states is that when you add them to objects in Storyline 360, most of them work automatically—without any triggers. Let’s take a look at how prebuilt states work and how you might want to use them in your courses. Normal This is what your learners see by default if they don’t interact with the object in any way. This state is created automatically when you insert an object. Any formatting that you apply to your object is automatically applied to the Normal state. Here’s a cool pro tip: you can actually add objects to the Normal state instead of adding them to your slide! There are many situations where this technique can be useful. For example, if you’d like to create a custom button by combining several objects, you’ll want to add the secondary objects to the Normal state instead of grouping them, because states can’t be added to a group of objects. To add objects to the Normal state, simply select an object, open the States panel, click on Edit States, select Normal, and insert the objects, as shown in the GIF below: As you can see, adding the icon to the Normal state instead of adding it to the slide itself allows you to interact with both the rectangle and the icon as if they were a single object. From here, you can add whatever other states you’d like! Speaking of, let’s take a look at the next prebuilt state. Hover This is what an object looks like when a learner moves their mouse over it. Adding a Hover state is a great way to signal to learners that an object is clickable. It’s up to you what formatting you apply to an object. Here’s an example of a Hover state that simply changes the fill color to a lighter shade of blue: Down The Down state appears when the learner is actively clicking on an object. This signals to the learner that their action is working. As always, the design of this state is your call. In the example below, the Down state simply changes the fill color to a darker shade of blue: Selected When you’ve added the Selected state to an object, it’ll appear when the learner clicks. If they click on the same object again, it’ll go back to the Normal state (unless they’re part of a Button Set). This state is great for interactions where you want learners to see which objects they’ve selected. Here’s an example of a couple of rectangles to which I’ve added Selected states with glow formatting: If you want to create an interaction where learners are supposed to select a single object from a set of options, you’ll want to use this state in combination with a Button Set, which automatically changes the state of a Selected object to Normal when the learner selects another object in the set, much like how radio buttons work in multiple choice questions. Here’s the same example you see above with a button set applied to the three rectangles: Visited Like the Selected state, the Visited state appears automatically when the learner clicks on an object. However, unlike the Selected state, which turns on and off automatically when learners click on the same object multiple times (unless they’re part of a Button Set), once the Visited state is activated, the only way to turn it off is by adding a trigger. This is because the purpose of the Visited state is to show that an object has been clicked on in the past, not to show that it’s currently selected. The Visited state is super-useful when you create custom menus or click-and-reveal interactions because it allows you to give learners a visual reminder of the buttons they’ve already clicked. Here’s an example of how that works: Disabled The Disabled state allows you to temporarily prevent an object from changing states or activating a trigger when learners interact with it. Unlike the other prebuilt states we’ve seen, you need to add a trigger for this state to work, unless you’ve set it as the initial state for an object. When the Disabled state is activated, nothing will happen when learners try hover, click, or drag that object. The Disabled state is useful in many situations. For example, if you’d like to create a custom menu that requires learners to view the different sections of your course in a certain order rather than allowing them to view the content in the order of their choosing, you can use the Disable state to unlock one button at a time, like in the GIF below: Notice how when I hover over the buttons, nothing happens? The Hover state doesn’t appear and the hand cursor doesn’t appear, making it clear that I can’t click on them. If you’d like to build a menu like this but are short on time, hop on over and download this template. Hidden As you may have guessed, when the Hidden state is activated, the object is invisible. Like the Disabled state, you need to add a trigger to activate this state unless you’ve set it as the initial state for an object. The Hidden state could be useful if you wanted to hide the quiz button until the learner completes all the sections of the course, as shown in the GIF below: Before we move on to Custom Object states, here’s another pro tip for you: if you’re creating states for an image, you can quickly create a series of states for it by bulk-importing image files. Find out how in this tutorial: Inserting Pictures as States. Custom Object States In addition to these prebuilt states, you can create an unlimited number of Custom Object states that can look and work any way you want. Adding a Custom Object state is super-easy! Simply select the object, open the States panel, click Edit States, and type the name of your Custom Object state, as shown in the GIF below: Once you’ve created your Custom Object state, go ahead and format it any way you’d like. Then, add a trigger to that object to show that state whenever you’d like it to appear. There are tons of situations in which it can be useful to create Custom Object states. One example would be to create different versions of the same object that appear as the learner interacts with a slider or a dial, as shown in the GIF below: To create the example above, I inserted a bunch of Custom Object states and changed the height of the rectangles in each one. Check out the screenshot below to get an idea of what my states look like: This is just one example of a situation where you might want to use Custom Object states—there are plenty of others! Let your imagination run wild. Drag-and-Drop States When we were looking at prebuilt states earlier, you may have noticed that at the bottom of that drop-down list there was another category of prebuilt states: the Drag-and-Drop states. As their name suggests, these states were specifically designed to be used with drag-and-drop interactions. They allow you to give the learner visual feedback as they’re interacting with the exercise. There are three Drag-and-Drop states. Let’s take a closer look at each one. Drag Over If you add this state to a draggable object, the learner will see it when an object is dragged over a drop target. If you have multiple drop targets, this state will be applied no matter which one it’s dragged over. Take a look at this GIF to get an idea of what that could look like: Instead of adding this state to a drag item, you could add it to your drop target(s). Here’s what that looks like: No matter which option you choose, the objective is the same: to give the learner a visual cue that they’re dropping the object onto a drop target—without letting them know if their answer is correct or incorrect. Drop Correct and Incorrect States The remaining two states are generally used together. The Drop Correct state is what your learner will see when they drop an object on the correct drop target, and the Drop Incorrect state is what they’ll see if they drop an object on the incorrect drop target. By default, these states won’t appear until the learner clicks on the Submit button, like in the GIF below: This is a great way to let learners know which answers they dragged to the right and wrong spots, instead of simply telling them they didn’t drag them all to the right spot. If you want the Drop Correct or Drop Incorrect state to display right away, simply go to the drag-and-drop options and uncheck the box marked Delay Item Drop States until Interaction Is Submitted, as shown in the GIF below: Once you’ve unchecked that box, your interaction will work as shown below: This option is great for practice exercises, where the score doesn’t matter. Pro tip: Did you notice that in addition to changing the color of the draggable items for the Correct and Incorrect states, I added icons to indicate whether they were correct? It’s a good practice to avoid using color alone to indicate correctness; this enables people who have trouble distinguishing colors or who come from cultures where green and red don’t indicate Correct and Incorrect to be able to understand. Character States Did you know that the illustrated characters in Storyline 360 come with a dozen prebuilt states? Well, now you do! There’s a prebuilt state for each of the 12 facial expressions included with each illustrated character. So if you want your character to suddenly look angry or disappointed, you don’t have to build out those states—they’re already there! All that’s left to do is insert an illustrated character and set up a trigger to change the state. Wrap Up And there you have it—you know everything there is to know about states in Storyline 360! Well, maybe not everything, but pretty close. If you want to dig even deeper, check out these great resources: Adding and Editing States Definition of Built-In States Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.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.4 Things to Know About the Triggers Panel in Storyline 360
As you’re creating engaging e-learning projects in Storyline 360, you might find you need to use a combination of triggers to create the exact interactions you envisioned. In general, the more complex the interaction, the more triggers you’ll need to create it. But increasing the number of triggers you’re using doesn’t mean you have to also increase your stress levels. That’s because the Triggers panel in Storyline 360 makes it easy to manage them all and troubleshoot anything that isn’t working as you’d expected. Let’s walk through some of the most helpful features of the trigger panel to make sure you’re getting the most out of it. 1. What Can You Do in the Triggers Panel? The Triggers panel is your one-stop-shop for viewing, creating, and editing the triggers on a slide or layer. You can find it on the top right-hand side of the Storyline window. The buttons at the top of the Triggers panel make creating and adjusting your triggers incredibly easy. Here’s more about what each of them can help you do. Button Icon Action Create a new trigger. This is one of the two places you can create a new trigger. The other way is to click Trigger in the Insert tab Edit the selected trigger. This opens the Trigger Wizard window. But you can also easily edit your triggers directly in the Triggers panel too. Just click the segment of each trigger description you want to change, and then choose a new option from the drop-down list or value field. These segments are also color coded, which makes it easier to scan them quickly and see what’s going on with your interactions. Download this cheat sheet to discover what each color means. Copy the selected trigger. This one is pretty self-explanatory. Paste the copied trigger to the selected object. Just make sure you select an object first! Delete the selected trigger. Again, I think you get the idea. Reorder triggers. You’ll sometimes need to adjust the order of your triggers because trigger order does matter in some cases—more on that later. Group triggers: When you have multiple triggers associated with the same action, you can group them together. This not only saves space in the Triggers Panel, but it also allows you to quickly make edits to the entire group at all at once. Manage project variables. This opens a separate Variables window. Variables allow your course to remember information, and using them with triggers is another easy way to add interactivity to your course. Below those buttons, you’ll find all the triggers on your slide or layer organized into five categories: Object triggers, Slide triggers, Key press triggers, Player triggers, and Variable triggers. To keep things tidy, you can collapse and expand that list by trigger category or groups of triggers. 2. Does Trigger Order Matter? There are a number of circumstances where it does. That’s because triggers on the same object activate one at a time. That’s why it’s important to check that the order of the triggers in the Triggers panel reflects the order you want things to happen in. That check isn’t hard to do at all. Just remember: You can add triggers not just to your slides and layers, but also your slide masters too! So if there’s a trigger you expect to always use on a particular layout, it’s often easier to add it to the slide master rather than copy and paste it to every slide you’re using it on. Keep in mind, though, that slide master triggers execute before the slide and layer triggers. If there are multiple triggers on the same object that are activated by the same action, they’ll execute sequentially in the order they appear in the Triggers panel. If you have multiple triggers on the same object, their order is easy. Just drag and drop them in the list or use the Up and Down arrows at the top of the Triggers panel. Pro tip: if you’re troubleshooting a slide with several triggers and something isn’t working quite right, take a closer look at your trigger order. That’s often the culprit! 3. Is There A Way to Temporarily Turn Off a Trigger? When an interaction isn’t working as expected, sometimes eliminating individual triggers one-by-one can help narrow down the culprit. But you don’t need to delete each trigger to troubleshoot your work. Instead, hover over the trigger you want to disable and click the Disable Trigger icon that appears (it looks like a lightning bolt). Click the icon again to re-enable your trigger. 4. What's That Unassigned Triggers Section All About? When you’re in the middle of reworking a slide or layer, you might not realize that a change you made ended up breaking a connected trigger. Luckily, Storyline 360 has a safety net of sorts for when this happens: the Unassigned Triggers category. If a trigger loses the information about what should happen or when it should take place, it’ll move itself to this section and turn red so you know to fix it. Wrap-Up With the help of the Triggers panel, keeping track of all your triggers is super easy— no matter how complex the interaction. Interested in learning even more about how triggers and variables can help you create any e-learning experience you can imagine? Check out these articles: Storyline 360: Working with Triggers Storyline 360: Working with Variables Get a Step-by-Step Guide to the New Triggers Panel and Workflow in Storyline 360 Storyline 360: What Are Triggers? Want to try something you learned here, 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 Tips for Creating Immersive Learning Experiences with Interactive 360° Images
If you’re like many course authors, you’re constantly looking for ways to make your e-learning more immersive. And while there’s no one-size-fits-all solution, your focus should always be on creating learning experiences that entice learners to mentally and emotionally engage with the content. One way to do that is with 360° images—sometimes referred to as panoramas or photospheres. Working with interactive 360° images in Storyline 360 gives you endless opportunities to create immersive learning experiences that let learners explore a realistic environment, like in this demo. If you’re intrigued by all the creative possibilities of working with 360° images in Storyline 360 and want to learn effective ways to use them, you’re in the right place! In this article, I’ll walk you through 7 pro tips for creating 360° image interactions that capture learners’ attention as efficiently as possible. 1. Save time by customizing project settings upfront When I start any new e-learning project, I like to spend a few minutes customizing the course settings to save time in the long run. This is a good general practice, especially if you plan on adding interactive elements like 360° images to your project. That way, if you need to change your colors or fonts later on, you won’t have to worry about manually editing each object. I always start by creating theme colors and theme fonts to ensure that the navigational elements I add to my 360° images—such as hotspots and markers—will maintain the design scheme I’m using for the rest of my project. Then, if I need to make changes, all I have to do is edit the project’s theme colors and fonts and all markers and hotspots will update automatically. 2. Use images that capture every angle Adding 360° images to Storyline 360 is super easy. The key to building a really cool and immersive experience is to focus on making a really great image. The good news is you don’t need any specialized equipment to create a 360° image. Some phones, such as the Pixel, have a built-in feature that allows you to capture your own 360° images. But not all phones have this feature or are built the same. For example, an Apple device’s camera with panoramic mode enabled captures 240° cylindrical panoramas. And although you can still add 240° images into Storyline 360, the way they render isn’t as immersive as the experience you’ll get when using a 360° image. (You can see an example of a 240° image here.) If your phone doesn’t include a built-in feature that allows you to take 360° equirectangular images, no need to worry. There are a growing number of 360° camera apps you can download to create your own. Either way, for the best learning experience you’ll want to use images that give a full 360° field of view. If you’re unsure where to find or how to create 360° images for your e-learning projects, check out these ideas to get started. You can also dig into this article to learn more about supported 360° image formats in Storyline 360. 3. Set the initial view to create a realistic scene They say first impressions are everything, and it’s especially true when you’re working with 360° images. Thankfully, Storyline 360 makes it super easy to adjust the initial view so learners see something inviting and relevant right from the start. For example, if you were creating an office tour for your new-hire onboarding course, you wouldn’t want the camera facing the ground when the learner first launches the interaction. Instead, you’d want them to be able to look straight into the office. To do that, simply open the 360° image editor, navigate to the Interaction tab, click Edit, and move the image to your preferred angle. 4. Choose how learners will navigate As you design the 360° learning experience you’d like to create, consider how you want learners to move through content. Do you want them to be guided around the space or invited to explore freely? With 360° images, it’s up to you. You can choose between free navigation and guided tour options to help learners make the most of the interaction. As an example, let’s say you want to give your new employees a way to tour the office before their first day. Using free navigation, learners can explore interactive objects in any order and familiarize themselves with the surroundings. Now let’s say you want to guide the learner through the office from room to room so they know what to do and where to go on their first day. In that case, you might want to use the guided tour option so you can take learners through the space in a specific order. 5. Add markers and hotspots to encourage engagement With a high-quality 360° image in your project and a vision for how you want learners to experience it, you’re now ready to add some navigational “nudges” learners will need to immerse themselves and start interacting with the content. Those navigational elements take the form of markers and hotspots in Storyline 360. You can use markers to reveal text, insert images, import audio, or add video content. You can even customize markers by changing their icon, color, and placement. Using our office example, let’s say you want to add a welcome video to the 360° interactive experience. Simply add the video to a marker and learners will see this content when they click on it. If you’ve added a video, you can personalize the video play button color within a marker by going into the player settings and choosing an accent color. Another great option to test learners’ knowledge or to help them learn more about their surroundings is to create hotspots. With hotspots, you can either give learners a hint that part of the screen is clickable or hide them so learners discover additional content on their own. You can draw hotspots anywhere on the slide and in any shape and color. 6. Build more immersive interactions by adding triggers You might be wondering: what if I want to add a knowledge check to my 360° image? Storyline 360 has you covered. One way to accomplish this is to just add a trigger to any marker or hotspot. With triggers, you have several options—such as Show Layer, Lightbox Slide, and Adjust Variable. By simply creating a trigger, you can easily open a layer with an ungraded knowledge check or display a graded quiz slide in a lightbox. And you’re not limited to just knowledge checks. If you wanted to add a checklist to your office tour to ensure learners complete their onboarding tasks, you could add a button that opens a layer where you’ve created a checklist, as shown in the .GIF below. 7. Personalize the interaction with variables One of the great things about custom e-learning built in Storyline 360 are all the options to personalize the experience with variables. When you combine the power of variables with 360° images, there are almost infinite possibilities! For instance, there might be times you want to show learners their progress, display a lightbox slide when a certain number of markers have been visited, or ensure learners visit all markers before moving on—just to name a few ideas. In these instances, using triggers to track variables is a good way to go. To learn more about using the built-in tracking variables in Storyline 360, check out this article. What are you going to create with 360° images? Adding 360° images to your Storyline 360 courses is a great way to invite learners to explore and engage with your content. And with these tips, you’ll be creating immersive 360° learning experiences like a pro. One of the best ways to come up with new ideas for using 360° images is to look at what other e-learning pros are doing. To see some inspiring designs, check out this recent challenge on Interactive 360° Images in E-Learning. And while you’re at it, create your own 360° example to add to the mix. We love seeing your creative ideas. For more details on using 360° images in Storyline 360, check out the following helpful articles: How to Find and Create 360° Images for Your Storyline 360 Projects New in Storyline 360: Create More Immersive Interactions with 360° Images Storyline 360: Working with 360° Images What tips do you have for creating immersive learning experiences with interactive 360° images? Please share your ideas in the comments below. Want to create your own 360° Storyline 360 project, 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.Make Giving Advice Fun With These Do’s & Don’ts Examples
Framing advice as do’s and don’ts is a classic strategy for creating clear, easy-to-understand learning. But presenting information as a long list can get overwhelming and tedious—two things that mean your content is likely to be forgotten. Thankfully, you can shake things up with a few simple e-learning techniques. Let’s explore how to grab attention and create memorable learning with a few examples of the approaches you can try. Storyline: Do’s and Don’ts Knowledge Check Give real-world context and coaching with this interaction from Aman Vohra. Here, learners select which email comment they believe is best for each situation. They’re then given feedback on which option is most effective and why. Storyline: Flip Card Do’s and Don’ts A combination of elegant design and animations makes this interaction from Ridvan Saglam stand out. The individual tip cards chunk out advice about web conferencing—making it eye-catching and memorable. Storyline: Do’s and Don’ts Spoke Template Empower learners to work at their own pace with this downloadable template created by Jodi Sansone. The template uses button interactions and an attractive layout so that learners can concentrate on each tip one at a time. Storyline: Do’s and Don’ts Slider Interaction This example from Montse Anderson is a handy reminder that there’s more than one way to input an answer. Here, learners use an unexpected mechanism—a slider bar—to indicate whether an action is helpful or harmful. Wrap-Up The projects above share creative approaches for making do’s and don’ts feel less like a lecture and more like good advice. For even more inspiration, check out the regular updates to our weekly challenges, downloads, and examples. Looking for other themed roundups of e-learning content? Give these articles a try: Get Employees Up to Speed with These Inspiring Onboarding Examples Breathe New Life into Health & Safety Training with These Examples These 7 K-12 E-Learning Examples Are Best in Class Want to try something you learned here, 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.Add Custom Interactions to Rise 360 Projects with the Storyline Block
One of the best things about Articulate 360 is that you always have the right tool for the job: you can create custom interactivity with Storyline 360 and build gorgeous, responsive courses with Rise 360. And with the Storyline block for Rise 360, you have the best of both worlds—custom interactivity with responsive output. Easily add custom interactions built in Storyline 360 to the beautiful, responsive courses you’re creating with Rise 360. And because it’s Rise 360, your interaction will look perfect on every device. Check out this video to see how easy it is to add Storyline 360 interactions to Rise 360: Sign in to Articulate 360 to try the Storyline block yourself. And if you haven’t tried Articulate 360, you’re missing out! Get a free 30-day trial to try out this new feature and much, much more.3 Things to Consider Before You Add Interactivity
A while back I wrote an article on five ideas for turning boring bulleted lists into engaging interactions. Fundamentally, those ideas were about transforming static content into something more engaging for learners. But making content interactive doesn’t always improve the learning experience—or even guarantee it’s more engaging. Adding interactivity in the wrong situations just puts more clicks between learners and the information they need to do their jobs. So, if you’re not sure when to turn content into something complex like a full-blown branched scenario and when to keep it streamlined and simple, here’s some food for thought. What’s the Training Goal? Generally speaking, there are two types of training goals that instructional designers see. Let’s take a look at them and see how they impact course design. Sharing information Here, the goal of training is to convey critical information—like policies or procedures—and for learners to show they can correctly recall them. When the goal is strictly to share information, try to keep it simple. Make finding those facts in your course as straightforward as possible, and even consider if you need a course at all. In some cases, an online glossary, an interactive job aid, or some other helpful performance support tool could solve your training challenge more effectively. Building or acquiring skills In this case, the goal is to acquire or improve skills. While this training may also involve sharing information, there’s much more emphasis on how learners should apply it while performing their jobs. Building a skill often takes time, guidance, and practice. And including interactions can give learners the support they need along the way. Consider experiences that help them practice application or break down complex skills into smaller ones that are easier to master. For instance, learning how to drive a forklift for the first time involves understanding how several different controls on it work. Rather than creating an interaction that has someone try to learn them all at once, you can make this complex skill more approachable by creating several smaller interactions: one for each control. Interactions like scenarios and simulations can give learners a safe environment to try out how they’d use their new skills on the job. Going back to the example, once your learners had those simple skills mastered, they could take things up to the next level and try a scenario where they use multiple controls together. And since it’s just a scenario, they can safely make mistakes until they get it right. Is the Interaction Relevant? I once met with a client who wanted to build a training program for new salespeople. Their vision for it was an interactive history of the company. Learners would start by selecting an avatar and then they’d curate key pieces of company information to get familiar with the organization’s rich past. I’ll admit: it was a very cool concept. But it was also an hour’s worth of content that wasn’t particularly helpful or relevant to new salespeople. Ultimately I had to let the client know that idea wouldn’t help their new salespeople do their job: sell products. When it comes to training content, relevance is key. When the information you’re sharing is easy to digest and helps folks perform their jobs, you won’t need to add lots of bells and whistles (or clicks) to get their attention. That said, learners will appreciate a more complex interaction if it’s the best way to help them grasp or refine a skill they care about. Where and How Will It Be Used? Another important aspect of context is use. Learners accessing training on the go may not have half an hour to invest in a how-to course. Take an internet installation technician, for example. When you’re training them ahead of time to set up a fancy new modem, that’s the perfect time for an interactive simulation. But when that same technician is out on the job with a customer peering over their shoulder, asking them to sit through a thirty-minute interactive simulation to troubleshoot a faulty setup isn’t very helpful, is it? More Learning By considering these three questions before you add interactivity to your e-learning, you’ll avoid sinking valuable development time into interactions that aren’t necessary. It’ll also help you refine the interactions that you do include, giving learners experiences they'll find to the point and useful. For more on this topic, be sure to check out these articles from the E-Learning Heroes archives: What Does Interactive E-Learning Look Like? 5 Ideas for Turning Boring Bullets into Engaging Interactions 10 Reasons Why It’s Easy to Create Interactions with Storyline 360 When do you add interactivity to your courses? When do you keep it simple? Jump into the conversation with a comment below, or add your voice to the mix in our Building Better Courses forum. 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.
