Psychological
Safety microlearning
Recently I have been developing a number of ‘fluid’ continuous microlearning courses in Articulate Rise. Not all content is suitable for Rise and Storyline offers a higher level of functionality, so I set myself the challenge, could I create microlearning in Storyline, with a seamless, continuous feel?
During a previous mini project, I played around with creating a seamless transition between 3 slides. To achieve this I used a range of shapes and motion paths to move from one slide to the next, without the learner being aware they are jumping between slides. This mini project was really successful, so I wanted to apply this functionality to my microlearning.
It was crucial to me that the animations and transitions created did not use any outside software, for example video. This is because I wanted the build of the microlearning to be time efficient and cost effective, so that I could apply the functionality to live client projects. It also needed to be accessible and the transitions were not to impact the level of interactivity which could be used.
PROJECT DETAILS
Role: ELearning Developer and Instructional Designer
Brief: creation of a microlearning which uses seamless transitions
Date: May 2024.
Duration: 1 week.
TOOLS
Articulate Storyline.
Affinity Designer.
Microsoft PowerPoint.
SKILLS
ELearning development.
Graphic design.
Instructional design.
My response to the brief
To begin this project it was crucial that I planned out the content and transitions carefully. Due to the course being a microlearning, content had to be concise and I opted to keep it to three main topics:
What is psychological safety?
Why is psychological safety important?
How to build psychological safety
Once I had written the content and adjoining interactions, it was time to plan out the transitions. For this I jumped into PowerPoint. I chose to use PowerPoint as I could use the morph transition to help visualise the transitions and how I could move slide elements around the screen. I usually do not plan slide design out fully during the storyboard stage, as this often happens organically when in Storyline. However for this project it was key to decide where exactly each slide element would sit before jumping into Storyline.
Why plan in PowerPoint beforehand?
I could easily use the morph transition to play with the slide layout and animate elements between slides, without any complex programming or motion paths. If something didn’t work I just moved it around and then previewed the transition again.
The finished PowerPoint mock-up acted as my blueprint, when I got into Storyline I then just copied the design and layout of the slides meaning the build time was halved. I could then put all my focus and energy into making sure the animations were smooth.
Challenges
I had to keep the limitations of Storyline in mind at all times. Whilst in PowerPoint I could select the morph transition and it would do all the moving of slide elements for me, in Storyline this isn’t possible and the movements would need to be created by myself. Therefore, although taking reference from PowerPoint, I often had to simplify things for Storyline. Simplicity was especially important as I wanted the build of this microlearning to be time efficient and for the development of these custom transitions to not take away from the interactivity and accessibility of the design.
Over animating! Using the morph transition animates everything on screen, which when it is as smooth as PowerPoint makes it, isn’t a problem. However, in Storyline I quickly found animating everything in and out for each slide felt really busy and took away from the content. To combat this I decided to use a flagship slide element which would be the main focus for the transition animations. This ended up as a blob shape, which animated in and out of the slide to guide the learner through.
Building the transitions
Once I had jumped into Storyline and began to piece together my slides, it was time to add in the transitions. I used a range of built in Storyline animations and motion paths to move my slide elements in and out of the screen. In order to make this function well I had to utilise the timeline and cue points. As the slide elements animate in, the timeline then pauses at the first cue point. The learner can then interact with the slide as they wish, for example selecting markers, answering a question etc. There then had to be a button or trigger to allow the timeline to resume and the exit animations to play. This was often in the form of a submit or next button.
It was crucial the timeline stopped just after these buttons animated in, as otherwise it could cause the slide to carry on playing the exit animations before the learner has had a chance to complete any necessary tasks.
Once selected the timeline resumes and upon the timeline ending on the slide, it automatically then jumps over to the next one. At the end of each slide it was important to set the design up for the next slide. For example, if my subsequent slide had my blob shape on the left, but it is currently on the right, I would have it animate to the left at the end of my slide. Then my subsequent slide would have the blob on the left already in exactly the same position. This is a bit fiddly as I had to line up shapes over the two slides, but allows for that seamless jump between slides.
Responding to feedback
During the build process of this microlearning, I shared my progress on LinkedIn and received some really useful feedback. This was particularly around the type and number of animations used on each slide. It was found some of the slides were feeling a bit chaotic with the number of animations and it could be frustrating to learners to have to wait for each thing to animate in.
Upon reflection, I agreed with this feedback and went through and replaced a lot of the ‘fly-in’ animations, with fades. I also had things animate in together instead of staggered, to reduce the time the learner had to wait for all slide elements to be available.
Interactivity and accessibility
As stated in my brief, it was key that the slide transitions did not impact the accessibility or interactivity of the microlearning. I wanted the microlearning to still utilise Storyline’s functionality to the best of its ability, incorporating a range of questions, reflective exercises and select to reveal interactions.
As I had planned the design and content of the microlearning beforehand, this proved to be a fairly straightforward process. When using the multiple choice graded question, I programmed the slide to animate in and then animate out once the learner had chosen their answer and selected submit. I used triggers to make sure the learner could not progress without having answered the question.
Because the transitions were built in Storyline using simple shapes and animations, I was able to turn their visibility off to avoid impacting screen reader users. As I didn’t use any extra video or media to create the transitions, I was able to create the slides as I normally would and use layers, images and media to create my desired effect.
I did not include a previous button in this course as I felt it would not be time effective to add in a ‘backwards’ animation. This would have been time consuming and potentially quite complex. Instead, the learner has access to the build in Storyline menu, meaning they can freely jump back to a slide if they wish. Each slide is set to reset to initial state, meaning they won’t miss any crucial information either.
Challenges and final thoughts
The main challenge with this build was not getting too carried away. As with the first iteration of this project where I added too many animations, it was easy to fall into the trap of wanting to move everything.
However, what I found with writing and developing microlearnings is that less is often more. You have to be much more prescriptive when writing the content and interactions had to be chosen carefully to best use the time.
With this being only 10 minutes, there was the danger the transitions could take up too much of the learner’s time, but after stripping them back and simplifying this, each transition become no longer than 2 seconds. In total the transitions then accounted for around 45 seconds of the whole microlearning.
I am so pleased with the final microlearning and feel I could apply the functionality to my live client projects.
