New Slider Tab Interaction to Share with Community
Jan 14, 2015
While I missed out on the previous slider interaction challenge, I wanted to share a new slider tab interaction that I built in Storyline 2 with the Community. It includes a notebook with tabs in which motion paths raise and lower the tabs as a pencil slider is moved across the desk. The tabs include text boxes in groups that you can easily update to change out your text. All images are either free graphics or built by me, so you are welcome to re-use. In addition to the motion path and slider triggers, I also added some variables to allow smooth transition of the tabs when moving forward and backward through the interaction.
I've used this in a couple of courses and hope it will be of help to you. A working demo link and the Storyline file as an attachment are included.
Best,
Lu Post
9 Replies
Hi, I love the way you have used the slider - great example of functionality.
HOWEVER....(sorry - had to ask this.......), from a design/pedagogy perspective, does moving a pencil make any sense? Surely this design just begs for clicking directly on the tabs?
Thanks Lu, loved it :D
Bruce, thank you for your comments and I agree that clicking the tabs would make good sense. It would certainly be an easy modification to the template. I initially started working on this template for the Interactive Slider challenge (just couldn't get it done in time), so that's a big impetus for including a slider. I also ended up using this in a course where the user is building a Compliance Program (creating the tabs, adding the content, etc.), so the pencil is a big part of the overall design.
That's the great thing about Storyline. There are so many options.
Good job and thanks for sharing the template. I agree with Bruce on the pencil vs tabs. However, I think it's just a matter of changing it up a bit and giving a reason for the pencil. And that's something people can do when they download and modify the template. It makes for a good challenge activity. I like the dragging interaction. I find that it draws people into the course because it's a bit more novel than clicking. Of course the novelty of dragging wears out fast.
One thing I recommend for people who do use the template is to hide the instruction to drag when the person begins the dragging interaction. I had a similar issue in the safety tempalte. The instructions display initially, but it looked weird to have them persistent. So I added a trigger to hide once the user moved the slider.
Thanks Tom. Yes, I agree. The instructions are set up to hide with the first slider trigger, so that is already part of the template.
I like what you did with the sliders, Lu. If you'd like to share your example in our slider challenge, I'd be more than happy to include your demo and source file in the recap examples: https://community.articulate.com/articles/interactive-sliders-elearning-examples
Thank you David. That would be great. I'll try to be more timely next time.
Hi Lu - the challenges are always open so you should never feel rushed to join. The sliders are such a popular feature that I'm sure folks would like to see how you set up your custom slider thumb and tabs.
Some folks follow the discussion while others follow the challenges. I just wanted to let you know it's okay to cross-post examples around here... we're mellow on rules like that:-)
Love the design Lu. I'm digging the animations you've added!
This discussion is closed. You can start a new discussion or contact Articulate Support.