A few days ago, I wrote a post on that highlighted a few common E-Learning mistakes. If you didn’t get a chance to read it, click here. If you have already read the post then it’s time to move to the next phase… cleaning up the mess.
Let’s review our starting point. As you can see in the image below, there were several things wrong with the e-Learning module: No title for the lesson, hard to read fonts, images that don’t fit the topic matter, duplicate navigational structures and alignment issues. Wow! That’s a lot but I know we can fix this and make it something really “beautiful” and useful. If you don’t know how to make a pumpkin pie, I promise you will after watching this completed sample.
Let’s take a look at some of the changes I made to this one.
1. The course is now published with a title, How to Make a Pumpkin Pie.
2. The font used was originally Edwardian Script ITC which was very hard to read. I replaced it with Cambria for the lesson title and Open Sans for the text boxes.
3. The pumpkin has been removed as has the player navigation. Both were replaced with a single navigational structure.
4. The apple pie had to go. Enough said! I did replace it with a piece of pumpkin pie which made more sense to me.
5. The tulip field was also removed. I originally thought I would add a field of pumpkins but decided to keep the image simple.
6. I removed Andy Appleton. He and Penelope no longer have a “thing” going on and he was just not a good fit for this topic. For this “How To” lesson, I decided to use a single illustrated character.
7. Penelope Patterson was my “go to” character for this lesson. I also modified the original illustration (from Storyline) and gave her a chef hat and an apron to fit the context of the lesson.
8. The alignment issue was addressed by redesigning the background. I maintained the orange but then changed the Storyline player to a green color. I also used the same green for the buttons throughout this lesson.
Here’s is the new title screen. Next, I’ll provide some background on what to look for in this sample.
My goal was to create something very interactive that required the learner to participate in the process of preparing the ingredients and eventually baking the pie. After starting the demo, one of the first steps to baking a pumpkin pie is to preheat the oven. What a great place to introduce my first interaction! To do this, I created a base layer and then used a hotspot over the red dial to allow the learner to change the temperature. Each time they click it, the temperature changes. If the user clicks it too many times, they will get a warning that they need to lower the temperature. You don’t want to burn the pie crust right?! Each temperature is a different Storyline layer. When the temperature is set appropriately, the user can continue.
The next interaction was built from scratch to allow the user to drag and drop items into a mixing bowl. There is a lot going on behind the scene for this one. I had to create the Ingredients layer (which you see below) as well as a Correct and Incorrect layer. To make sure the items disappeared once they were dropped into the mixing bowl, I used states. For example, the state of the 3/4 cup sugar image is set to normal when you enter this screen. I created a dropped state for the same image and then deleted the image from the screen. I then did this for all of the ingredients shown. A trigger was created to change the state of each image to “dropped” (i.e., invisible) when the user drops the shape on the Mixing bowl object. I also created an initial hidden state for the Mix button until the user dropped the appropriate number of items into the mixing bowl. The next thing I wanted to accomplish was to send the user to the Correct layer if they dropped the appropriate ingredients into the bowl and the Incorrect layer if they dropped something that was not supposed to go into the mixing bowl (e.g., the pie crust). If you decide to drop the pie crust into the mixing bowl (you know you want to do it!), Penelope will have something to say about it.
Once all of the ingredients were in the mixing bowl, I wanted to introduce a little animation to simulate the process of pouring the mixture into the pie crust. To do this, I had to create a pair of illustrated hands myself. The process of creating the pouring effect used both the freeform drawing tool and an oval to achieve the final effect.
With our mixture in the crust, it was now time to bake! Again, I utilized the hotspot and temperature dial to allow the user to interact with the instructions regarding adjusting the oven temperature. I also introduced an animated clock to make the scene more interesting. Think of it as a clock and a timer. Once the allotted time is up, you will hear a ding!
Once the pie had completed its initial baking period, it’s important to make sure it’s done. To do this, I simulated the process of inserting a knife into the pie and then checking to make sure it was clean (e.g., the sign the pie is ready to come out of the oven). To do this, I used the motion path animations available in Storyline 2 and a fade animation for the actual cut. I also used similar motion paths and fades to cut the pie at the end of the demo.
I hope you enjoy this one! It includes layers, triggers, conditions, state changes, motion paths, fades and even a little humor along the way. It also includes an attempt at modifying one of the original Storyline characters and giving her a new “chef” look. Click the image below to watch.