Inspiration

Before any project can begin, there has to be some sort of inspiration for it. Nothing ever comes from nowhere.

Like Pablo Picasso always said:

[box icon=”https://www.nickleffler.com/wp-content/uploads/quote.png” border=”rounded”]Good artists copy, great artists steal.[/box]

My inspiration came from a combination of a template redesign panel at work and the org chart I created for a recent eLearning Heroes Challenge. I wanted to create something that I could touch and feel. I needed to play around with what it might look like.

The animation for the menu needed to be fluid and animations needed to go both ways, nothing jarring.

With that, I had a good basis for creating something that had sections defined by colors and fluid animation.

Logistics

I wanted the template to be unique, and lack all hints of Storyline. While I love Storyline and all that it can do, it is just a tool. I don’t believe a tool should dictate the design, nor should anybody be able to tell what tool a design was created in.

I also wanted to give the user the largest viewable space for content within the project. This means a great deal of white space, and full screen views for content that fit the full screen need.

This meant a menu that was not persistent, it vanished when not needed but was accessible within one click. It also meant text boxes limited in width therefor also limiting the amount of text possible on the screen.

Text box width limitations are important, it’s been proven that people read quicker and comprehend better when words across are limited. Another benefit these narrow text boxes allowed for was plenty of space for visuals that lent themselves to a project.

In section three of the project, I felt it would be a great opportunity to display how full screen content could fit into the template. It also gave me the opportunity to get creative and show how a story told with visuals and limited words could be more effective than just words.

Problems

Before I get into the details of how the template is set up, how I did it, and how to change it, it’s always wise to discuss the problems experienced and how they were overcome.

Menu On Top Layer

One problem I experienced was with the menu button and drop down. The problem didn’t arise until I began working on the full window contend and needed the menu button on top of everything.

Storyline has this odd little thing were master slide items are below the content of the slide by default. This meant that I couldn’t just put the menu button on the master slide and expect it to be on top at all times. It was below the full screen images which wouldn’t work at all, what if the user wanted to leave that section?

After a bit of searching, I found out that it was necessary to have the menu button in a layer, then called with a trigger. This trigger forced the menu layer to appear on top of everything, including my full screen images.

It took me a while to figure out how to do all this so it worked from all slides of the project. I ended up with the menu in it’s own layer and a trigger on the master slide showing that layer when the timeline started.

No Menu

The second problem was the intro slides into each section. The menu button didn’t need to show up on those slides.

To solve this problem, I had to create a second master slide with a blank sub master slide below that. This layer doesn’t contain any content at all, or any triggers, it’s just blank.

The four intro slides to each section use this special master slide, so if you want a slide without the menu button, you need to use this layout. I didn’t create any other layouts though. I assumed if you had content on a slide, the menu needs to be there.

Now that all these problems are resolved, down to the dirty stuff on how I did it, and why you should stick to the simplicity of the template (although you’re in no way required to).

Keeping it Simple

Menu

The most common piece you will want to edit first is the menu. It was designed to fit four sections, if you have more than this, you may want to re-design your content.

Each section is color coded within the colored number circle.

To edit the menu, you’ll need to head over to the slide masters. In the first slide master, you’ll find three layers, the menu button, menu, and menu out (this is to provide that seamless menu slide-out animation).

Open the menu layer and change the names as you please, after you’ve modified them be sure to also make the same modification in the menu-out layer. If you fail to make the same modification, the animation of the menu out once and item is clicked will be jarring and odd looking. Not even one single pixel can be off.

If you’d like to simplify the naming of menu items, you could set up four variable for each section and replace the text for each in the menu and menu-out layers to those variables. This way you’d just have to change the variable and the rest would be taken care of for you.

You’ll also notice that each menu item dims as they’re visited. I’ve created states for each menu item, that state is used if the complete variable for each section is true, meaning the user has completed that section.

Modification to when each section is complete should be done in each respective section.

That’s it for the menu! You’re ready to change the content!

Sections

Each section has a trigger that sets the section variable equal to the number section you’re on. If you add a slide, be sure to copy that trigger over. This way the menu knows where the user is, and where to send that user once the menu-out animation has played out.

There are various elements you can use on each slide, it’s up to you if you use them.

One element is the next and previous arrows. They are traditional navigation methods and don’t lend themselves to bouncing around and exploring the course, this is where the navigation dots come in.

Navigation dots (don’t know the actual UX term for those) are a great way to allow the user to go wherever they want in a section. It also tells them exactly how many slides they have in the section and how long they have to the end.

It’s not necessary to use both the arrows AND the dots, but it can’t hurt.

Once a user reaches the end of a section, an arrow is necessary even if you chose not use them as your main navigation method. With the last arrow, make it the color of the next section. this signifies to the user that they’re done here and moving onto a new section. The color theme will then change to the new color.

At the end of each section, make sure to add (or copy) the trigger to set the section complete, this will ensure the menu item is dimmed so the user knows they’ve been there, done that.

Full Screen Content

This is the most important piece to this template, and one that should be used much more than the text slides and other navigation buttons.

The menu will still be there for easy navigation between sections, but the user will be engrossed in a full screen story or scenario.

I created a sample of this in section three on the second page. Once the user entered the story, navigation outside of section navigation fails to exist until the end. 

I set it so the user is marked as completing this section from the start, as there’s nothing worse than being forced to go through every detail. Only the user can determine if that content is required by them.

Again the colors are pulled into the story, but they make a difference (sweat the small stuff). Towards the end, the color changes to the next section color, signifying the end, and movement into the next section. This is cemented by the arrow that exists at the end providing easy navigation onwards.

Completion

That does it for setting up the template. I didn’t go into creating a whole bunch of quiz sections or anything as I’m not a big fan of quizzing, but I’m sure those could be put in if necessary.

I had fun making this template, and am glad people have been receptive to its simplicity and possible excessive white space (if that’s possible!). I’ll be making more templates and will use the eLearning Heroes Challenge as a jumping off point for creating them.

[ilink url=”https://www.nickleffler.com/project/colors-storyline-template/” style=”download”]Download the template and see it in action on my portfolio.[/ilink]