How I Made This Custom Locked Menu in Storyline 360

One of the things I love about Storyline 360 is that it’s so easy to create a completely custom learning experience for your learners. While I’m a proponent of allowing learners to move through their courses freely, I get that some projects warrant locked navigation—like compliance training. 

Since compliance courses make up such a significant portion of e-learning projects, I field a lot of questions about how to make a custom locked menu—like the one in this example:

Click to view the interactive version.

There are several different ways to do this in Storyline 360, but I thought I’d show you my go-to method in this tutorial. Let’s get started!

1. Build Out Course Structure

Start by inserting your menu slide and at least the first slide of each section. This will allow you to set up your branching on your menu slide. Here’s a tutorial that walks you through this process: Adding New Slides.

2. Add Buttons to Menu Slide

On your menu slide, insert the objects that will serve as your buttons. You can use the prebuilt buttons if you’d like, or you can use shapes or even images. It’s up to you! In this example, I’ve simply inserted some rectangles.

3. Add States to Buttons

One advantage of using the prebuilt buttons is that they’ve already got some prebuilt states, as shown in the screenshot below.

If you choose to use shapes or images, like I have here, you’ll need to add your own states. That being said, if you plan on customizing the formatting anyway, it really doesn’t take much more time to create your own states. If you’ve never worked with states in Storyline 360, check out this tutorial: Adding and Editing States.

For this example, you’ll want to create these three states in addition to the default Normal state: Hover, Disabled, and Visited. You can format them however you’d like. Here’s what my states look like:

If you’re curious, this is how I formatted my states and why:

• Hover: I made the fill color lighter and brighter so it’d stand out when the mouse hovers over the button.

• Disabled: I added some transparency to the button for my Disabled state based on the advice in this article: Why You Shouldn’t Gray Out Disabled Buttons. To make it extra clear that those buttons aren’t clickable yet, I added a lock icon.

• Visited: I chose a darker fill color here so that the Normal state would stand out, making it obvious which button the learner should click next. I also added a checkbox icon to make it clear that the learner has already visited this chapter.

4. Disable Buttons 2 and Up by Default

To lock your buttons, the first thing you’ll want to do is set the default state for all the buttons except the first one to Disabled. To do that, simply select the button, open the States tab, and choose Disabled from the Initial State drop-down list, as shown below:

Once you’ve done that for all your buttons, you should see the initial states appear on your slide, like in the screenshot below:

5. Add “Jump To” Triggers to Buttons

Next, go ahead and add triggers to your buttons so that they jump to the appropriate slides when the user clicks. If you’re new to triggers, check out this tutorial: Working with Triggers.

When you’re done, your trigger panel should look something like this:

5. Add “State Change” Triggers to Buttons

Now you’ll need to create another trigger for each button, except the first one, to change the state from Disabled to Normal after the learner has viewed the previous section. Take a look at what my trigger for Section 02 looks like below:

I’ve set it up so that the state of my Section 02 button changes to Normal when the timeline starts on my menu slide if the state of my Section 01 button is Visited AND the state of my Section 02 button is NOT Visited. This second condition is important, because otherwise when you get back to the menu slide after viewing Section 02, the Normal state will appear instead of the Visited state. And that’s not what we want!

For each subsequent button, you’ll need to add an additional condition, to make sure that all the preceding buttons are Visited before the state changes to Normal. Take a look at the trigger for my Section 03 button to see what I mean:

This time I’ve added three conditions:

• If the state of Section 01 is Visited
• If the state of Section 02 is Visited, and 
• If the state of Section 03 is NOT Visited

You’ll want to do the same for the rest of your buttons. So for the Section 04 button, you’d have four conditions, for the Section 05 button you’d have five conditions, and so on.

6. Adjust Prev/Next Button Settings

To make sure your learner doesn’t get lost or confused, you’ll want to adjust the settings of your Previous and Next buttons. You’ll find those options in the Slide Properties. Find out how to access those here: Accessing Slide Properties.

On the menu slide, I’ve gone ahead and hidden those buttons, since I want learners to use the buttons I’ve built on the screen to jump to the appropriate sections.

I also decided to hide the Previous button on the first slide in each section since I don’t want learners to be able to go back to the menu without viewing the entire section.

Finally, I changed the “Jump To” trigger on the next button on the last slide in each section so that it leads back to the menu slide. 

If you’d like, you can stop here. You’ve got a fully-functional locking menu; hooray! However, in my example I took it one step further.

7. Add Exit Layer to Menu Slide (Optional)

To give my example a clear ending, I added a layer to the menu slide and set it to appear when the learner has viewed all the sections in my course. If you’ve never used layers, check out this tutorial: Working with Layers.

This is what the trigger on my Exit layer looks like:

On my exit layer, I decided to add a couple of buttons to allow learners to exit the course, go back and review the sections in any order, or restart the course, which will lock the navigation like it was when they took the course the first time. It’s entirely up to you which (if any) of these options you include! 

In Sum

So there you have it! That’s my go-to technique for creating a custom, locked menu in Storyline 360. Do you have another technique for creating a personalized locked menu in Storyline 360? Feel free to share your tips below! And if you’re short on time, pop on over here to download my file.

If you get stuck while following along with this tutorial, let me know by leaving a comment below. And be sure to 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.