One user interface (UI) trend I’ve grown to appreciate is the use of slide-out panels. Slide-out panels are really handy for giving people easy access to navigation controls or a quick glimpse of their progress toward a goal—without taking up a lot of valuable screen real estate.
I’ve used slide-out panels as a custom menu before, but until recently I hadn’t played around with the idea of using them for progress tracking—that is, until I found myself inspired to create this slide-out panel project.
With a little bit of planning, I found this project to be fairly easy to construct using Articulate Storyline’s variables, states, layers, triggers, and one very special guest … slide masters!
Following are a few videos I created to walk you through how I built this project. To follow along, be sure to grab the download before you start watching.
Video #1: Introduction (1m 41s)
Video #2: Creating the Character Selection Screen (5m 39s)
Video #3: Creating the Progress Panel (7m 21s)
For more pointers on building custom navigation, working with slide masters, and animating objects, be sure to check out these related articles and downloads on E-Learning Heroes.
- Tips for Building Quick and Easy Custom Navigation in Storyline
- Using Slide Masters
- How I Created This Interactive Pie Chart in Storyline 2 (Note: This tutorial from Nicole Legault walks an animation technique very similar to the Progress Meter I used in this project).
- Storyline 1+ Progress Tracker Download
- Web-Inspired Material Design Template Download
Have you created your own cool or inspiring UI designs in Storyline? Share your designs with the community by posting them in our Building Better Courses hub. Have a question or a comment? Drop us a line, below.
And don’t forget to follow us on Twitter and come back to E-learning Heroes regularly for more helpful advice on everything related to e-learning.