July 15, 2016

Creating a Badge Interaction in Storyline 2

In this post I will walk you through the creation of this badge interaction in Storyline 2, which was a part of my submission for this ELH Challenge. Please see my previous post for more background and context for this interaction.

This tutorial is quite detailed, however, it assumes that you are familiar with the interface, tool names, and know how to create variables, objects and states. By the end of this tutorial you will create 4 slides: three slides for badge creation and one for badge overview.

Step 1: Create the first slide

Create a blank slide with the background color of your choice. Since we will be using animated transition in this interaction, I recommend using a simple solid-color background.

Step 2: Start the badge 

Start by creating a blank badge on the first slide. You can use a "Rounded Rectangle" shape and fill it with the color of your choice or the color of actual badges if such are used within your company. In my example I'm using #F3F3F3 color for both fill and the outline.

Add the text box with the question "What's your avatar?" Adjust the text size and properties as you desire. In this example, I'm using Open Sans, size 44, text color #C45500 and the text box has the same width as the badge.

Make sure that your badge shape extends slightly beyond the slide on the bottom. It doesn't matter how far it goes, as long as it extends beyond slide limits:


While you can adjust the image to the bottom of the slide, so nothing spills over, but I prefer making shapes larger than the slide to make sure that there are no gaps or surprises later on when we'll add the slide transition.

Optional detail

To create a lanyard hole in your badge:
  • Draw a small rounded rectangle shape and adjust the rounded corners to maximum.
  • Fill the shape with the background color (use Eyedropper if you didn't save the color in the palette).
  • Add an inner shadow to the shape. In this example I'm using "inside top" shadow, as I'm assuming that my light source is at the top of the screen. 

Step 3: Copy and adjust the badge

Duplicate Slide 1 to create Slide 2. Delete the lanyard hole if you created one and change the question text to "What's your name?". Then adjust the height of the badge so that it extends beyond the slide borders on both top and bottom:


Don't forget to adjust the position of the text box. For example, you can use these position settings:


When you're done, duplicate Slide 2 to create Slide 3. All you need to do here is to change the text of the question and drag the bottom of the badge up so that that the shape extends beyond the top slide border only:


Step 4: Set up transitions

Select all three slides and add the Push / From Bottom transition to them (note that if you're working on a real project, you may want to change the slide transition for the very first slide, depending on what type of slide or interaction precedes it). This way you will achieve the effect of the badge moving/scrolling as if before the user's eyes.

You can preview the project at this stage to check if everything works well. The transition should be smooth and the badge should not "jump":


Step 5: Photo selector - create objects

Go back to Slide 1 and create the following objects (feel free to adjust these to your needs or design):
  • Background for the avatar.
  • Two buttons or shapes for paging between the avatars. Note that both of them should have a "Disabled" state. 
  • Button to save the avatar.
  • An avatar with as many different states as you like. 

Objects on Slide 1

For making your life easier later on, I recommend naming the states with numbers, starting with 0. As a result, you will have a "normal" state, state 0, which is a duplicate of "Normal" and as many additional states as you need:


Why? This is because of the triggers and variables we're going to use later as you will need to match the state names with numerical variable values and matching state names will help you avoid confusion. If you feel that what I just said doesn't make sense, don't worry - just try creating and naming the avatar states as you see on the screenshot above and you'll see the system behind this madness later, I promise! For the rest of the tutorial I will assume that the amount and names of your avatar states match the ones on the screenshot.

With the avatar states created, set its initial state to "0".
If you're wondering why I am using avatar states rather than creating separate objects - in my opinion, states reduce visual clutter on the slide and often reduce the need for triggers. When a trigger changes an object's state, all other states become invisible, without any additional efforts on your side. If instead of 10 states you have 10 objects, you will most likely have to write either more or more complex triggers to manage their visibility and states. 

Step 6: Photo selector - create variables

With your objects created and arranged, create the following numerical variables:
  • ClickCounter (default value 0): to enable/disable avatar selection arrows and help Storyline understand which avatar state it should be displaying.
  • AvatarSelected (default value 0): to store the information about the selected avatar for further use throughout the course.

Step 7: Photo selector - create triggers

By now we have prepared all our objects and variables. Now we're going to bring them to life. Our end goal for the photo selector is to ensure that the user can page back and forth between the avatars and that the avatar selection arrows become disabled when the user reaches the end of the avatar selection. 

In case you haven't done so, name one of the buttons "PhotoNext" and the other "PhotoBack" to avoid confusion. Change the initial state of PhotoBack to "Disabled".

Create the following trigger for PhotoNext:


And a similar trigger for PhotoBack, except in this case we will be reducing the ClickCounter value by one:


This way we can tell the course what the user is doing with the buttons and which avatar should be displayed.

Next, let's add a trigger to change the state of the avatar based on the value of the ClickCounter variable - this is where avatar state naming becomes handy!


Repeat this for each state of the avatar you have, except state Normal which we don't count in this case:

As you've probably noticed, the creation of triggers is easy because the state names are identical to the values of clicks. In other words, if the ClickValue is 5, Storyline should display avatar state 5, if the value is 3 - state 3 and so on. This way you can have as many states as you want without losing track of what should happen. Way better than naming your states "Male01" or "FemaleYoung-10-happy".

At this stage you can preview the slide to admire your work. If everything worked well, you will be able to flip through the avatars, but you won't be able to go back, since we set the PhotoBack button to appear disabled from the start and didn't create any triggers to enable it. You'll also notice that there's no limit to how much you can click PhotoNext button. Let's correct that.

Step 8: Photo selector - create intelligent buttons

In essence, we need to enable PhotoBack button as soon as the user navigates away from Avatar 0 but disable it back when the user returns to Avatar 0. Similarly, we need to disable PhotoNext button once the user has seen the last avatar in the series and enable it once the user goes away from the last avatar. 

Let's create triggers for PhotoBack button. This trigger enables it: 


And this trigger will disables it again:


As a small challenge for you, I won't include instructions for creating triggers for enabling/disabling PhotoNext button, but I can tell you that they are pretty similar.

Step 9: Photo selector - sanity check

Create a text box anywhere on the slide and add text %ClickCounter% to it. Alternatively, you can use the option Insert / Reference. Don't worry about formatting or position, this is just a way to verify that the value of clicks matches the state of the avatar. 

Preview the slide, click the back/next button, check that the ClickCounter variable adjusts properly and that the avatar states and the button behaviour match the variable values: 

Photo Selector in action (note the changing variable value)

If all is well, delete the text box with the variable reference. 

Step 10: Photo selector - saving information

Finally, we need to make sure that the course can remember which avatar did the user choose. For this you will need to create a very simple trigger like this: 



In other words, if current avatar's state is 0, the value of AvatarSelected should be set to 0 when the user clicks "Save" button. If avatar's state is 1, the value should be 1, and so forth. Again, numerical state numbers are helpful here. 

Duplicate the trigger and adjust variable values/state names until you've covered all avatar states. 

Congratulations, you've created the most complicate part of this interaction! 

Step 11: Name field

On Slide 2 we will collect user's name to use it throughout the module. First, you will need to create at least the following objects:
  • Question (you should already have the text box with the big orange text)
  • Text Entry field (you can find it in Insert > Controls menu)
  • "Save" button or shape
You can, of course, add more elements. 

Objects on Slide 2

You have probably noticed, that when you create a new Text Entry field, Storyline automatically creates a text variable called TextEntry, as well as the trigger that changes its value based on what the user typed into the text entry box: 


To avoid confusion, you can rename TextEntry variable into something more memorable. In this tutorial I'll assume that you renamed it to Name. 

Technically, once you've done that, there's not a lot left to do on this slide, since the trigger for adjusting the variable has been created automatically and you don't have to do anything else. However, in this example, I wanted to prevent users from not entering anything. With this in mind, I added two triggers to the "Save" button:


This way the user cannot proceed until they have entered at least something into the text entry field. My objective here was to prevent blank values due to attention slips. While the name of the learner is not critical to this module, I didn't want to have any blank values as these would look like errors or strange issues in the e-learning. I didn't worry about gibberish entries (e.g. Ahkjhakshj) as that would be the user's choice. A blank value, however, could be more confusing, as well as not a user's choice. For instance, let's say a user wanted to enter their name, but got distracted. When they came back, they had to hurry up, so they forgot that they didn't enter any name and just clicked "Save". In this situation, having a reminder that the name hasn't been entered may be quite helpful.

Step 12: Department selector

In the real project this interaction is based on, the branching and flow of the slides as well as the type of content presented to the user depended on the nature of their work. Therefore, I needed to gather some information about what my users do. You can use the same idea to display content to users based on their seniority (New Hire vs Veteran employee), position in the department or company (e.g. Junior Associate vs Senior Associate), or location (e.g. Berlin vs Frankfurt; USA vs UK) and so on. 

In this example, I have only three mutually exclusive options available for selection: phone, e-mail, chat. To recreate the same slide, you will need:
  • a question (which you should have)
  • a radio button for each available choice
  • "Save" button or shape
Objects on Slide 3

Once you have created the radio buttons, add them to a Button Set. This way you will need to write less triggers. 

Then create the following True/False variables, all with the default value of "False":
  • Chat
  • Phone
  • Email 
Of course, you can match the names of the variables to the choices you have created.

For every radio button you've created, add two triggers. One of the triggers should adjust the matching variable to the value "True" if the button's state is selected. Second trigger should adjust the variable value to "False" if the button's state is not selected. For example:


Since the radio buttons are in one Button Set, their states will automatically change to normal one another radio button is selected and the variable values will be adjusted without any additional triggers.

Step 13: Prevent user errors

Since navigation and the slides displayed depended on the user's input at this stage, it was crucial for me to ensure that the user does not leave the slide without making a choice. 

To prevent the users from navigating away from this slide, you can add two simple triggers to the "Save" button. One to allow the users to move to next slide if at least one of the radio buttons is selected. The other trigger should show a warning (in this example - a layer with a tooltip message) in case none of the radio buttons is selected: 


Step 14: Badge overview

The final overview slide has very easy triggers. You simply need to adjust the states of the avatar and radio buttons based on the variable values created earlier. You will also need to include a reference to the "Name" variable to display learner's name. To save time, you can copy the avatar with all the states from Slide 1.

Objects on Slide 4

First, create the triggers to adjust avatar state when the timeline starts, based on the value of variable AvatarSelected: 


 Again, easy state names become quite handy in here, as you will need to have a trigger for each avatar state. 
You will notice that sometimes avatars take time to change their state at the slide timeline start and as a result for a second you see the wrong avatar. To work around this issue, I try to add a short (less than a second) "Fade" animation to the avatars, so that the course has a bit more time to change their states.
Finally, you will need to create the triggers to adjust the state of radio buttons to either "Selected" or "Disabled" based on the value of the respective variables. For example:


Respectively, you should create a trigger to adjust the radio button state to "Disabled" if the variable value equals to False. Although you can skip this part, I would recommend disabling the buttons to show the users that no changes are possible on this slide and that they really have to go back to make corrections. 

Congratulations, you've created the badge interaction!

Is there anything missing in this tutorial? Do you have questions? Don't hesitate to let me know in the comments. 

No comments:

Post a Comment