This week’s E-Learning Heroes Challenge is Using Accordion Interactions.
Like tabs, accordions are a navigation element used in web design to break up large amounts of content into smaller chunks. Unlike tabs, accordions can change shape, size and position to display the new information. This can make accordions trickier to build than tabs but engaging and effective when you get it right. The last time we worked with accordions breitling premier replica for an E-Learning Heroes Challenge, I took it a bit literally…
For this challenge I wanted to combine the motion and action of an accordion with a game mechanic. Read on to discover how this demo – more than any other before it – almost broke Storyline – and me – in the process! Yee haw! This week's @ELHChallenge is 𝗨𝘀𝗶𝗻𝗴 𝗔𝗰𝗰𝗼𝗿𝗱𝗶𝗼𝗻 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻𝘀!
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) February 3, 2023
This 'gamified' example includes a knowledge check, so you can't just rob and cheat your way to the next slide. pic.twitter.com/9NLvqsY2ut
Curate and create
Over the years I have collected a wide variety of CC0 game assets and sound effects from sites such as Opengameart, Itch.io and YouTube Audio Library and Freesound.
CC0 assets are public domain and can be used freely without payment or attribution.
CC0 assets used in this demo
Everything else you see in this demo is either adapted from CC0 assets or built from scratch using PowerPoint, including the additional scenery and buildings, the locomotive, coaches and each of the animated windows.
I built a Wild West themed demo simply because I had these assets to hand. There’s no instructional reason for this and it’s fair to say that workplace applications for this theme are limited. Yet I believe there is a space for storytelling, humour and metaphor in workplace learning, in the right circumstances. For more on this topic check out my recent DevLearn presentation and my recent appearance on The Visual Lounge.
The Parallax View
Parallax scrolling is a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene. The technique grew out of the multiplane camera technique used in traditional animation since the 1930s.
As shown in the video above, the effect becomes obvious when you can see what happens when each image leaves the screen. They simply reset and start again! But because the images are symmetrical and measure twice the width of the visible area, this motion appears seamless to the viewer.
Want to get started with parallax backgrounds? Download this free Storyline template
A word of warning
Parallax backgrounds create a sense of motion and depth and can add excitement to your design. But because each of the images moves at a different speed, the effect doesn’t work well across slides. Even if you trigger the jump to take place after one of the images has completed it’s journey, the other images will still appear to ‘skip’ between slides.
For this reason I built this interaction upwards, in layers, to preserve the parallax effect – and that’s where the fun started…
Layers upon layers
There are lots of benefits to building your interaction ‘vertically’ through layers, rather than ‘horizontally’ across slides, including:
- A continuous, uninterrupted soundtrack
- Repeating animations, such as parallax backgrounds
- The ability to show/hide videos instantly
- Using the same buttons throughout an interaction; good for focus order and accessibility
- ‘Front loading’ the interaction, so that once the slide is loaded, it runs smoothly without lag or interruption
In the video below – taken from my DevLearn 2022 presentation – I explain the advantages of buidling ‘vertically’ in relation to videos and soundtracks. The same logic applies to this demo and the parallax background.
You can watch my full tutorial – Get Kimiko – here.
The game engine
Accordion to Legend contains 11 layers, as follows:
- PLAY
- Coach A
- Coach B
- Coach C
- Toot!
- Move On
- Titles Fade
- Question 1
- Question 2
- Question 3
- END
When you work this many layers, you need to pay close attention to the settings on each layer to avoid logic errors and bugs. I had to rollback from v5 to v2 of this demo after I added too many layers and caused it to crash!
PRO TIP: Make a back-up each time you add new features to a demo. You never know when you might need to rebuild it.
In the video below, I have added notes to show how each layer is configured and the variables used to track the learner’s progress and control the outcome of the game:
I suspect I can still improve this game engine, so I haven’t shared my master file this week. However, if I get to DevLearn again this year I hope to share a remastered version there. In the meantime, check out the master file for my other side-scrolling SL360 quiz, State of Play.
Acting accordionally
Layers are also integral to the operation of the accordion. I duplicated the coaches over three layers and used motion paths and triggers to move the coaches out of the way and then return them as required.
Against the parallax background, this creates the illusion that some parts of the train are slowing down while others are speeding up. In reality, all parts are moving at the same speed.
If you’re wondering why I didn’t replicate the locomotive on every layer too, I’ll explain why in the next section.
Compress to impress
With 60% of Internet usage now on a mobile device, I always test my demos on my phone. I noticed the locomotive was taking longer to load each time a layer was activated.
This is because GIFs do not compress and this particular GIF, at 1.29MB, was a bit on the chunky side.
This is why I did not replicate the locomotive in the layers of the accordion. But I still had to optimise the GIF on the base layer to make it load more quickly.
By resizing the GIF and removing any redundant frames I reduced its size by 95%, to just 67.2KB.
If you’re using GIFs in Storyline I recommend optimising them with a tool like EZGif to avoid any ‘load lag’.
For comparison, here is a diagram showing the size of each GIF used in this demo:
Loading please wait
With so many animated elements and sound effects, it was important that everything in this demo worked as it should, when it should. Waiting for an animation to load or complete can be frustrating for the learner.
In my experience, learners are prepared to wait for a moment or two, as long as it’s clear why they are waiting and the wait won’t be long. A ‘load screen’ before any animation-heavy slides is one way of doing this.
Place a ‘loading wheel’ GIF on this slide and a trigger to ‘Jump to next slide when timeline starts on this slide’. On a fast connection or a desktop computer, the learner will only glimpse this screen. But on a slower connection or mobile device, the jump to the next slide won’t take place until the next slide has fully downloaded. While they wait, the ‘loading wheel’ GIF will continue to play.
In this way you can manage the learner’s expectations and reassure them the course isn’t broken – and build anticipation for what’s coming next.
Final thoughts
One of the biggest challenges we face when creating learning content for the workplace is not only making it appealing to use but also quick and easy to access. Let’s be real: often a simple PDF will do the trick!
By adding elements of ‘old school’ computer game design, your content can stand out in an otherwise staid corporate environment.
This approach can provide a much-needed break from standard multiple-choice quizzes. For younger audiences, the experience will be ‘kitsch’ or ‘retro’; for older audiences, it will evoke a sense of nostalgia.
Done well and used at the right time, it can provide a fun and memorable alternative to standard formative assessments and mid-course recaps.
It’s not always appropriate – and its complexity can increase your development time – but it can be a powerful way of engaging learners and reinforcing learning outcomes.
Yee haw!
Pingback: A fresh perspective – Engage Brain and Train!