Tag Archives: storyline

Navigation and Next button in Storyline 2

Posted on by
Reply

Several questions today about the navigation settings in Storyline:

  • Should we “block” the Next button in the slides, to ensure the trainees review all the content before continuing?
  • If yes, what are the main options in Storyline to do it?
  • What is the best option?

Let’s review those different questions.

Should we “block” the Next button in the slides, to ensure the trainees review all the content before continuing?

Short answer: no.
Longer answer: no, except in some cases.

Why is it a bad idea to disable the Next button, and in general, to have strict navigation settings in an e-learning module? Actually, e-learnings are supposed to be courses trainees take when they want, in the way they want. This learning method is supposed to be flexible, and trainees should be able to navigate within the module as they wish. Obviously, a lot of e-learning modules follow a specific path with several chapters, and often you can’t understand properly chapter 2 if you’ve not reviewed chapter 1. But I think we should trust our trainees and let them review the module freely. If they don’t understand a chapter, they will go back to the previous chapter. If we explain properly the module organization at the beginning, they will follow the order of chapters. Trainees need to be free to not review entirely the content of a slide, if they want to review it later and focus on another part of the e-learning.

Moreover, having too many restrictions in the navigation increases the risks of making a mistake in the designing of the course, and to have people stuck on a slide, because a trigger is not working properly, or because they don’t understand what they are supposed to do before being able to continue to the next slide.

Nevertheless, sometimes it can be interesting to disable the navigation to the next slide when you want the trainees to perform a specific action on the slide, such as an activity, clicking several buttons to reveal more text, or view a picture… If used sparingly, it can be useful and not frustrating for trainees.

What are the main options in Storyline to do it? What is the best option?

There are different ways to prevent someone from continuing to the next slide unless they perform a specific action on the slide. Let’s review the main 2 different options, and the pros and cons for each of them:

  • You can disable or hide the Next button when the timeline starts (it’s a new feature of Storyline 2), then re-enable it when a specific action is performed (timeline ends, user click a button, all the states of buttons/shapes X, Y and Z are Visited, etc.)

1

2

The pros and cons are a little bit different depending on if you choose to disable or hide the button, but the two options are pretty much similar:

Pros: in both cases, the trainee won’t try to click the Next button, and he/she will easily view when the button is re-enabled.

Cons: if you hide the button, the trainee may think there is a bug in the navigation, whereas if you disable the button, the trainee will probably understands better that he/she has to perform an action to re-enable the button.

But in both case, there is an issue caused by Storyline itself with this kind of settings: if you do not choose to reset the slide to initial state when revisiting the slide, and prefer to resume saved state, the trainee may be stuck when he/she revisits the slide. Indeed, resuming saved state on this kind of slide with disable/hide the Next button… with sometimes no possibility to re-perform the action to unlock the Next button. That’s typically the case when the trigger that re-enable the Next button is “when timeline reaches X seconds”.

The solution is simple: choose to reset the slide to initial state in case the trainee revisits it; but it means the trainee will have to re-perform the action or wait for the timeline to reach the end, so it can be boring.

3

In my opinion, that’s not the best option.

  • My favorite option is to not disable or hide the Next button, but to add a layer in the slide (it appears when the trainee clicks the Next button) inviting the trainee to perform the action I wish him/her to do before continuing. If the trainee has not performed the action, he/she will see this layer. When he/she has done the action, clicking on the Next button will take him/her to the Next slide. It is very easy to set in Storyline, and I like this option because in the layer, we clearly explain to the trainee what he/she is supposed to do before being able to continue, and the Next button is always available, so the trainee can’t think there is a bug.

4

I recommend a gray, transparent background in the later, and a shape indicating what to do (here, the orange shape indicates where are the two cards). Clicking OK hides the layer.

5.jpg

6.jpg

Pros: you can include a message and some help in the layer, to help your trainees perform the action and know what to do, and it avoids disabling/hiding the Next button, so you have no problem when revisiting the slide with saved state settings.

Cons: for now I have not seen any inconvenient with this option!

This is my favorite way to “force” trainees to perform an action before being able to continue. It is not frustrating, you know what to do, and I have not noticed any issue when revisiting the slide with the saved state setting. Obviously, I recommend to not use this kind of setting to much in a course. I think once per chapter is a maximum.

I hope this short article was helpful! If you use another way to “block” the Next button and/or the navigation in general in Storyline, or if you prefer to avoid blocking navigation, don’t hesitate to let me know how you proceed.

Creating items with Storyline or PowerPoint

Posted on by
Reply

I know it’s been a long time since I posted on my blog, but I’ve been very busy with some e-learning projects for the company I’m working for. Today, I will post a few items created with Storyline or PowerPoint shapes. I just want to show you how easy it is: you don’t need to be a graphic designer to create simple and nice items for your modules!

Cars

Capture

This car is made of 3 shapes in Storyline: a freeform for the main part of the car, and two circles for the wheels. Creating the freeform is not very hard, because the form is mainly made of straight lines. For the wheels, the shapes outline is white and thick.

Capture1

Here are more complex cars, created in PowerPoint:

Capture2

Those cars require more shapes, and to be very careful with the front/back order of each shape. Here are the different shapes used to create each car:

Capture3 Capture4

In the second car, the two white shapes for the windows are freeform too.

Then, I grouped all the shapes, and added a ‘glow’ effect.

Forklift

This one is very simple!

Capture5

Capture6

Screens (tablet, laptop…)

Creating a laptop, a tablet or a smartphone is very simple with Storyline or PowerPoint. I think I don’t need to show you the different shapes I used for the following items. There are very easy to do.

Capture7

Buildings

Capture8

I created those building in Storyline. It was not complicated but required a lot of shapes (for the windows). Also, the outlines and the front/back settings between shapes are important.

Capture9

Capture10

Various items

Capture11

A plant

Capture12

A truck

Capture13

A folder

Pies and some other graphic charts in Storyline 2

Posted on by
Reply

Today, I’m going to explain you how to create a few animations for your graphic charts in Storyline 2.

We all know presenting data in an interesting (and non-boring) way can be very hard, especially in e-learning modules. It’s very important to make your e-learning attractive and interesting: you don’t want to loose your learners’ attention after 3 minutes of navigation within the course. You are not going to show a graphic charts with numbers and labels like you would do in a powerpoint presentation. We are in an e-learning course, so you need to add some animation and interactions, even if it is only some basic interactive effects. We need it because we want our learners to learn and remember, and we know we learn and remember better if the form supports the content, and when we are active and not passive.

For presenting data, it’s not always possible to have complex interactions, but you have to do a minimum. That’s what I am going to show you: how to present data like pie chats (and others) nicely, with entrance animations and interactive actions. I’m not going to show complex things, only basics that can be useful to know how to do.

Before going any further, I invite you to read the following:

Now let’s start with some pie charts.

Pie chart entrance animation

Here is an example of a pie chart entrance animation: click here to view it. Now, let’s see how to create it in Storyline 2.

NB: it does NOT work in HTML5.

  • First, you have to create your pie chart in Storyline 2 directly. Forget Excel or copying/pasting a picture or whatever. To create your pie chart in Storyline 2, you will have to create several forms, one per part:

Untitled

  • Then, customize the color, borders and size of your first part:

Capture

  • Now, add the other parts of your pie. For this, my advice is to copy and paste your first part, to ensure the shape has the same dimensions. Then, ensure the position in the slide of your second and other shapes are exactly the same than the first one.

Untitled1

Position of the first shape.

Untitled2

Position of the second shape. Etc.

  • It’s very easy to customize the size of each part: just click the 2 yellow dots at each extremity of the pie part and move them to create each part.
  • Then, to create the entrance animation, first set the parts in the proper order in the time line (and don’t forget to adjust your labels too):

timeline

  • Now, select all the parts of your pie, and select the “Wheel” entrance animation:

Untitled3

  • You may have to adjust the duration of the entrance effect, depending on the size of each part, to ensure they all appear in a similar way.

And that’s it for the entrance animation for a pie chart. Of course, it’s only one way to animate the entrance of a pie chart, you may prefer other ways, but this one is my favorite.

“Piling” entrance animation for a pyramid (and other forms)

Here are two examples of a “pilling” entrance animation: click here to view it.

This is a very basic entrance animation. I’m showing it only for the idea itself, not for the complexity of the settings in Storyline.

  • Create your forms in Storyline. For the first slide, I used the “Can” form, and for the pyramid in the second slide, I used the “Trapezoid” form.
  • Then, adjust each form on the time line.
  • Finally, choose the entrance animation: “Float in” (first slide) or “Fly in” (second slide).

Untitled4

Effects on the shapes and layers for more content

Here are two examples of a pie and a pyramid where the learner has to click to reveal more content about the data presented in the slide: click here to view it.

NB: not all the shape effects are compatible with HTML5.

  • Hover effects: it’s something really easy to do, just add a ‘Hover’ state to your shapes, and customize this state with the effect of your choice. For pie parts, I recommend the ‘shadow’ effect; don’t forget to choose the proper direction of the shadow for each part, or you may have a wrong effect. For the pyramid, I chose a ‘glow’ effect. but it’s really up to you.

Capture2 Untitled6

  • Effects when you click a part: here, the easiest way, in my opinion, but not the only one, is to copy and paste the clicked part in the layer; indeed, if the learner has to click parts/shapes to reveal more content, the best is to use layers for the specific content. Then, in each layer, customize the effects on the shape. I recommend the ‘shadow’ effect again, but this time inside the shape! It create a nice effect, it feels like you ‘pushed’ the part when you click it. Don’t forget to remove the ‘hover’ state of the copied shape, if you copied it in your layer after adding the hover state.

Capture1 Untitled5

That’s all for today. I could show and describe more animations, and data presentation, but it would take me hours 🙂 ! My advice: try and experiment! Look at other designers’ work! That’s the best way to have new ideas and to get new tips.

See you next time for some examples of forms like cars, buildings or characters, made with Storyline shapes only!