Progress bars in Storyline 3
Quick bit of background explanation for anyone who's here for the first time:
I've recently started working as an e-learning designer and the main software we use is Articulate Storyline. I got started with it back in December and have had to pick it up quite quickly, in order to get rolling with my new job.
I'm pretty confident with most aspects of Storyline now but want to extend my skill set and learn how to do things that aren't necessarily related to my main work. One really good way of doing this is by participating in the weekly Articulate community e-learning challenges. This week was a good one for learning something new - progress bars.
The Challenge
#224 - How are designers using progress bars in e-learning?
The challenges are usually posted on a Saturday afternoon and I picked this one up early enough to spend some time on it yesterday evening. The idea is to create/adapt something and post a link to it.
I decided to adapt one of my old blog posts - Wheelchair Etiquette - as it was a linear piece that would lend well to a progress bar. I have used sliders before, mainly for step-by-step processes, but I have never created a progress bar, and was interested to see if I could use my existing skills to achieve it.
What was easy?
I started off by creating a slider with 10 steps, one for each of the 10 tips for good wheelchair etiquette. I sorted out the settings and formatted the slider, including changing the button for an image of a wheelchair. Then I copied and pasted it across all my slides.
I setup a variable called Slider 1, so that I would be able to change the variable and therefore where the slider was for each slide. It was easy to set triggers for this on each slide, so that the button moved as you progress through the learning.
What were the minor problems?
Having copied the slider onto each slide, I then realised that I'd only set up 10 positions and had forgotten to take account of introduction slides, etc. So then I had to go through and change it to 12 on every slide.
What was more difficult to solve?
On initial testing of the piece, I liked it but then decided the progress bar wasn't clear enough and I wanted green and red strips to show what had been done and what was left to do. I couldn't work out how to do this and faffed around in the formatting of the slider for ages, trying to find something useful.
Then I had a look at some other examples on the Articulate community. As I was looking at them, I noticed that many used varieties of rectangular shapes and it suddenly twigged that they were states with coloured rectangular overlays. So I set up a blank slide to play with a new slider and created 12 states. By positioning the slider at different initial numbers, I could work quite accurately to make the rectangles fit exactly over the slider. I used the height and width settings for size and position to get it spot on. This did require a bit of fiddling but was relatively easy to do.
Did it work?
You can decide whether it worked. Click here to have a look at the end result.
What would I change/do differently?
Next time I make a progress bar, I'll plan it more carefully and make sure I know, before I start, how many steps I need. I'll also create all the states up front.
On a different note, I think this piece is way too text heavy. I would like to represent it better with photos, video, etc. At the moment, time isn't going to let me do that but maybe one day, I'll come back to it.
I've recently started working as an e-learning designer and the main software we use is Articulate Storyline. I got started with it back in December and have had to pick it up quite quickly, in order to get rolling with my new job.
I'm pretty confident with most aspects of Storyline now but want to extend my skill set and learn how to do things that aren't necessarily related to my main work. One really good way of doing this is by participating in the weekly Articulate community e-learning challenges. This week was a good one for learning something new - progress bars.
The Challenge
#224 - How are designers using progress bars in e-learning?
The challenges are usually posted on a Saturday afternoon and I picked this one up early enough to spend some time on it yesterday evening. The idea is to create/adapt something and post a link to it.
I decided to adapt one of my old blog posts - Wheelchair Etiquette - as it was a linear piece that would lend well to a progress bar. I have used sliders before, mainly for step-by-step processes, but I have never created a progress bar, and was interested to see if I could use my existing skills to achieve it.
What was easy?
I started off by creating a slider with 10 steps, one for each of the 10 tips for good wheelchair etiquette. I sorted out the settings and formatted the slider, including changing the button for an image of a wheelchair. Then I copied and pasted it across all my slides.
I setup a variable called Slider 1, so that I would be able to change the variable and therefore where the slider was for each slide. It was easy to set triggers for this on each slide, so that the button moved as you progress through the learning.
What were the minor problems?
Having copied the slider onto each slide, I then realised that I'd only set up 10 positions and had forgotten to take account of introduction slides, etc. So then I had to go through and change it to 12 on every slide.
What was more difficult to solve?
On initial testing of the piece, I liked it but then decided the progress bar wasn't clear enough and I wanted green and red strips to show what had been done and what was left to do. I couldn't work out how to do this and faffed around in the formatting of the slider for ages, trying to find something useful.
Then I had a look at some other examples on the Articulate community. As I was looking at them, I noticed that many used varieties of rectangular shapes and it suddenly twigged that they were states with coloured rectangular overlays. So I set up a blank slide to play with a new slider and created 12 states. By positioning the slider at different initial numbers, I could work quite accurately to make the rectangles fit exactly over the slider. I used the height and width settings for size and position to get it spot on. This did require a bit of fiddling but was relatively easy to do.
Did it work?
You can decide whether it worked. Click here to have a look at the end result.
What would I change/do differently?
Next time I make a progress bar, I'll plan it more carefully and make sure I know, before I start, how many steps I need. I'll also create all the states up front.
On a different note, I think this piece is way too text heavy. I would like to represent it better with photos, video, etc. At the moment, time isn't going to let me do that but maybe one day, I'll come back to it.
Comments
Post a Comment