This week’s E-Learning Heroes Challenge is Creating Interactive Documents with Sliders.
I love a scrolling panel as much as the next e-learning designer, but let’s face it – sometimes they can be a bit finicky and you can’t easily imitation rolex sea dweller customise the scroll bar to complement your theme. So if you want to create more space on your slide and encourage your learner to explore your content – such as, I dunno, reading a letter to find a vital clue in a murder mystery – a slider-based interaction www.e-juice.ca may be the answer.The slider is one of the most versatile inputs in Articulate Storyline 360. Its intuitive combination of form and function makes it ideal for process and sequence interactions and much more besides.
When you create a slider in Storyline 360 it automatically generates an accompanying variable. Moving the slider instantly adjusts this variable.
This very same variable can then be used to trigger simple state changes that appear to ‘move’ an object.
By amending the Y position of an object over several states, you can move it up and down. Similarly, by amending the X position you can move it left or right.
The result is a tactile interaction that can be fully customised in terms of its size, colour and position in your layout.
Remember, to move a slider, the user must ‘grab’ the button and, while it is still selected, ‘drag’ it along the track. This is a doddle with a mouse at a desktop computer, but it can be trickier on devices that use touchpads and touchscreens, as users may struggle to ‘grab’ and ‘drag’ at the same time. On a mobile device this action can also be mistaken for swipe left or swipe right.
To make your slider more reliable across a range of devices, you can use the relationship between the slider and its built-in variable to give your user the option to click as well as drag.
Drag or Click
Placing oversized hotspots underneath the slider at each step can provide a simpler means of moving the button along the track, while retaining the form and function of the slider bar.
Those using a mouse will still be able to ‘grab’ and ‘drag’ the button, as the slider bar is sitting on top of the hotspots. But those using a trackpad or touchscreen can now simply click or tap each step of the slider.
Hints and Tips
- This method relies on giving the user some indication of how many steps there are in a slider and where to click or press. Any additional shapes or icons that you add should also sit beneath the hotspots. This is especially important if you want to use this method to navigate a document.
- Narrower slider tracks allow greater interaction with the hotspots beneath.
- If your document, process or sequence needs to be viewed in a particular order, this method will allow users to view it in a different order. Consider whether this harms or helps the delivery of your content.
- The fewer steps the better. Sliders with tightly spaced steps can become hard to use on smaller screens. For mobile devices you should use hotspots between 50-80px to be easily manipulated by hand.
- The distribute horizontally tool in the Arrange and Align menu is a quick way of ensuring your hotspots are evenly spaced along the length of your slider track.
This is an updated version of an article that first appeared on LinkedIn on 20 August 2019.
I was looking to create a text chat simulation where the latest messages appear on the bottom, but the user can scroll back up to see the history.
The slider and states was just what I needed! Thank you!
Pleased to have helped Simon! Hope you’re well.
Thank you very much for your sharing. I was exploring an alternative for the scroll panel and I found your post. Your explaination is very clear! Thanks again for sharing!
Glad you found my blog helpful, Sharon. Thanks for reading.