How I Designed This Interactive Dial Matrix

How often are you presented with content and given complete decision-making authority to create whatever your heart desires? Maybe not as often as you’d like! But I got this golden opportunity when my coworkers and I decided to tackle this project with the ultimate goal of proving there’s always more ways than one to present the same course content. 

We all started with this Eisenhower Decision Matrix:

I’ll walk you through my decision-making process to show you how I went from the static content you see above to this interactive dial matrix: 

View full project in action | Download 

Project Background 

As exciting as it sounds to have complete liberty to create whatever I want, I did give myself guiding parameters to help me create content that would ultimately meet my learners’ needs—even if, in this case, both the learners and the needs are fictional. Here’s what I came up with for my project background: 

• Audience: Employees struggling to manage their task lists effectively 
• Objective: Help employees understand the difference between importance and urgency when it comes to task prioritization 
• Additional Information: 
• Create something that can be incorporated into a larger Rise 360 course on time management 
• Create something with custom interactivity to engage learners

This project background guided my decision-making process and helped me focus on my learners’ needs. 

Let’s dive into my approach. 

My Approach

Project Focus: Knowing that my audience is already struggling to accomplish all the individual tasks on their to-do lists, I wanted to focus on explaining the difference between task urgency and task importance. Breaking down the Eisenhower Decision Matrix into chunks would be key. First my learners need to understand each component of the matrix individually. Then I could show them how it all comes together to help with task prioritization.

Authoring App: Because my project needed custom interactivity, from the start I knew I’d be using Storyline 360! 

Project Features: I wanted to put my learners in the driver’s seat and let them explore the matrix content progressively. Straight away I thought to incorporate interactive dials into my project. Dials offer plenty of functional versatility and they’re a snap to customize, which is why I used a prebuilt dial for this project. The dial also allows me to make a complete circle, which means the learner can explore each quadrant of the decision matrix. 

Building Out My Matrix in Storyline 360 

Building the Matrix Grid: First, I needed to design my matrix grid in full, showing both the urgency columns and importance rows. Using simple shapes, lines, and a dial, it was a breeze to create a matrix that I’d be able to duplicate throughout my project. 

 

Introducing Task Urgency: With my matrix designed, I wanted to introduce learners to task urgency by focusing only on the “urgent” and “not urgent” columns of the matrix. Learners rotate the dial to explore different types of tasks that fall under each category. You can see that at this stage of the interaction, I don’t show the matrix fully built out. I’ve hidden the horizontal dividing line and the Important / Not Important labels to ensure my learners are focused only on one component of the matrix at a time.

Need help figuring out how to hide objects on your timeline? Check out this user guide: Using the Timeline in Storyline 360. 

Introducing Task Importance: Once learners have a grasp on task urgency, they can move on to task importance. Nothing changed with my matrix grid design; I simply duplicated my slide. Except this time, I hid all of the urgency components so the learners focus only on the Important / Not Important rows of the matrix.

 

Introducing Task Prioritization: Finally, learners get to see how each component of the matrix comes together so they can determine what to do with tasks that fall into each quadrant.

While my dials work similarly from slide to slide, I had to adjust the initial value so the pointer faces the right direction when the slide starts. I set it up so that when learners arrive on the slide, the pointer is in a neutral position and the learner has to move it to reveal the content. 

Luckily, you can quickly customize your dial’s start, end, initial, and step values in Storyline 360 so it works seamlessly with any custom design you create. 

 

Building On-Slide Navigation: My final design decision? Because my intention for this project was to incorporate it into a Rise 360 course, I wanted to use on-slide navigation buttons instead of the built-in player navigation. Adding simple yet intuitive arrow buttons at the bottom corners of each slide—along with a question mark button for learners to review the instructions—allows my learners to navigate through the interaction without needing any external player controls. If you’re looking for tips on how to create your own custom buttons, check out this article. 

And just like that, with a few easy steps, I created a simple yet effective interactive dial matrix that meets my project’s learning objectives. By using Storyline 360’s prebuilt dials, you too can effortlessly add custom interactivity to your e-learning projects. 

More Resources

Even if you took the approach I used in this project, your final design might look completely different. Maybe you converted a Content Library 360 icon into a custom dial pointer. Or maybe you wanted to take it a step further and assess learners’ understanding by creating a custom drag-and-drop interaction where learners sort various tasks by urgency and importance. 

All this is to say, there’s always more than one way to present course content. As long as you’re keeping your learners’ needs in mind, there’s no “right” or “wrong” way to go about it. 

Need more convincing? Check out this article to see the projects my colleagues Allison LaMotte and Sarah Hodge created using the same course content. They’re pretty impressive!

And if you’re looking for more inspiration or help when it comes to working with dials and Storyline blocks, check out these resources below: 

• 25 Ways to Use Interactive Dials and Knobs in E-Learning
• Storyline 360: Working with Dials 
• When to Use the Storyline Block in Rise 360 

Want to create your own interactive dials, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.