One of the most popular trends in user experience design right now is grid style navigation. You’ve probably seen different variations of this if you have visited Pinterest or seen the new Windows 8 UI. In this post I’ll provide some examples of how you can use grid navigation in your Articulate Storyline projects.

Think Outside of the Box
When creating navigation for Storyline projects, most of us tend to think of using the built in navigation menu, or creating a screen with a series of standard buttons on it. Sometimes it’s a good idea to think outside of the box (or in this case tiles or squares) and implement an alternative type of navigation. Believe it or not, something as simple as changing the way your learner navigates a course can increase their engagement. In addition, grid style navigation is easier for your learners to use if you are publishing your content for a tablet. The larger tiles are much better suited for touching and tapping than a smaller navigation link or button.

Storyline Grid Navigation Examples
Below are a few very simple examples of how you can use grid navigation. In this first example, I use a simple grid navigation to walk a user through the steps of a process. There isn’t any content in these slides, but it will give you an idea of what you can do:

Click HERE to see a published example:

Below is a style similar to Windows 8. Rather than steps, each tile in the grid can lead to a new topic, section or scene of the course. Please note that in these examples, each section is just one slide, but you can easily make each section multiple slides:

Click HERE to see a published example:

In the final example, I use grid navigation to present the steps required to make a peanut butter and jelly sandwich. In this demo I used images for each of the tiles in the grid:

Click HERE to see a published example:

How Is It Done?
Grid navigation is actually very easy to implement using the general steps below:

1. Start a new project , in my example, I used a slide size of 1024 X 576
2. Using the shapes tool, insert a square on the slide, in my example, each square is 288 X 341
3. With the square still selected, click on the States tab
4. On the Hover state, add a text box and enter the text that you would like to appear, in my examples I used, “Step 1”, etc.
5. Add an animation to the text box, in my example, I used: Fly In, Fast, From the Bottom
6. Duplicate the button as many times as needed to evenly cover the slide, in my example this was 6 squares
7. Assign a Jump to Slide or Jump to Scene trigger to each square as needed

You will also notice that in some of my examples, I added a check mark or changed the colors of the text on the visited states of each tile/square. This is a good way to give the learner a visual cue that they have viewed that particular step/section.

Give It a Try
As you can see, grid navigation is a good alternative to use in your courses, and is easy to build. I hope this inspires you to try different types of navigation in your next project and I encourage you to experiment and improve upon what I have presented. Be sure to download my sample files below (I am not able to provide the “How to Make a Peanut Butter and Jelly Sandwich” source file due to copyrights related to the images I used). If you decide to use these files in one of your projects, post a link to your course in the comments below, I’d love to see how you use grid navigation!

Grid Navigation Sample Files 915.72 KB

Download Sample Files