Here's a fun and simple 4-step process interaction using Storyline 2's slider feature. Just drag the tea pot to the right and watch as the process steps are highlighted with some sweet animation effects. (Hint: check out the button states.)
I created these tea-themed graphics in PowerPoint but you can swap out my graphics and theme for one of your own. This project also uses free versions of the fonts Patrick Hand and KG Tangled Up In You. These are both really nice if you're interested in replicating that hand-drawn chalkboard art effect.
Yes I agree. I assumed that clicking on the teapot would start an interaction. After closing it and reopening it a few times and reading Lee's comment, I realized that the teapot needed to be dragged.
Wow I love the design and the creativity. Just have one suggestion. If I come back to Step 2 after visiting Step 3. I think it should not show the steps after step 2 as it is highlighting step2 and it confuses the learner.
Hey Trina, Thanks for sharing this. This is awesome. However, I would like to learn how you changed the default circle or square slider thumb to this fun teapot image. I checked the link about "Learn more about customizing slider" - but that only shows how to use the slider for a moving bar graph. It doesn't talk about updating the slider thumb.
Hi Ruchika. So glad you like the project. Changing the default slider thumb is pretty easy. Here's how you do it: Highlight the slider and click the Format tab. Select the Thumb fill dropdown and then select the picture option. Just pick the image file you want to use for your slider and voilà! Hope that helps you out!
Thank you so much, Trina. This is very helpful. I never realized the picture option was available within the fill drop-down for thumb. Not very intuitive - It should have been out in the Format Ribbon under Thumb Styles. May be a suggestion for upgrades :)
I love the visuals. It reminds me of a menu in a little coffee/tea shop.
I suggest replacing the drag and drop interaction with clicking. Here's why:
Dragging the mouse is usually reserved for scrolling. There's usually a visual indicator, a scroll bar, to let me know that I must drag. If that visual cue isn't present, people are going to click. Clicking is so habitual that it's automatic. As a result, learners will be confused by this slider. (I think the only exception to the rule is in interfaces that remind users of video games.)
Even if you add textual instructions "Drag the teapot to start", learners may still be confused because this interaction is going against learned behaviours.
This is amazing! Thank you so much for sharing. I am terrible at working with sliders and this has really saved me a headache. Really appreciate this, thank you
19 Comments