Forum Discussion
A couple of ways to use progress meters
Hi all.
I wanted to share something I've been playing around with.
Here's a proof of concept I've been working on for two ways to use progress meters:
1. Progress meter doubling as a menu
2. Progress meter being used to deliver 'extra info'.
I don't have a way to share published output at the moment - so here's the .story file. The mechanics of the progress bar are in the slide masters. Also it doesn't play nice with IE as it uses wipe animatons.
Hope it's of use to someone.
This is super-cool, Shaun! Thanks for sharing. :)
- DavidJones-7bf1Community Member
Love the design of this, really simple but quite edgy at the same time
- ShaunMartinCommunity Member
Hi David - thanks for that feedback! Visual design is something I find really challenging and always doubt myself on - so hearing that has made my day :)
- DavidJones-7bf1Community Member
I particularly like the polymorphic shapes you've used as the chapter and did you know pop ups.
- FazalKhan-aee6fCommunity Member
Love the wipe affect of the progress bar!
- MichaelDiFonzoCommunity Member
This is really great! I'm not quite at the progress bar level yet but this is a great reference tool. Only suggestion might be to make the current node a different color to make it stand out.
Wipe animation is an issue in IE? I'm using Wipe and our system-wide default browser is IE (I prefer Chrome).
- ShaunMartinCommunity Member
Hi Michael - thanks for the feedback. I can see the value in having the curent node standing out a bit more.
And yes wipe animations (along with a couple of others) don't work in IE or Edge. They'll look fine when you're previewing in Storyline, but when you publish they don't. For example if you had a line wiping in from the left with a duration off two seconds, what you'll see in the published output is the line will just appear after two seconds (at the end of the animation).
More info here: https://articulate.com/support/article/Storyline-360-Some-HTML5-Animations-and-Transitions-Don-t-Work-in-Internet-Explorer-or-Microsoft-Edge
- MichaelDiFonzoCommunity Member
Thanks for the link. I recall seeing that but totally forgot about it. Now I have to go back and remove those animations. Wish there was an easy way to see an animation list without going to each one.
I'm hoping to be able to incorporate a progress bar sometime in the future. Thanks for sharing.
- MelanieSobie-14Community Member
Thanks for sharing this. I like the creative ways you used progress meters. And I chuckled about the wombat poop factoid. I'm in the US and I just recently learned about that online.
- ShaunMartinCommunity Member
Thanks for the feedback Melanie. And yes - wombats are interesting creatures... hard to see the evolutionary benefit of that particular trait!
- JuliaMorenoPerrCommunity Member
A really nice simple, clean and effective visual for the progress meter/menu! I will definitely keep this in mind for future use!
- ShaunMartinCommunity Member
Thanks Julia - glad you liked it!
- NaweedNayibCommunity Member
Hi, Just one question. Why you used the slide master to put the progress meter content?
- ShaunMartinCommunity Member
Hi Naweed,
I put the progress meter content on the slide master so that I only had to set up the graphics, animations and triggers once. Because I wanted the progress meter to be a bit dynamic (e.g., animating the progress the first time you move forward to a slide, but visually keep track of how far someone had progressed if they went back to a previous slide), I needed quite a few triggers - 33.
If I was doing a static progress bar (that didn't animate, didn't remember progress if going backward etc.) then I would probably just do it on the slides, rather than the master.
Hope this makes sense!
- KayHunt-49362a8Community Member
This is such a great idea. You did an excellent job making the design clean and intuitive. Good work!