This week’s E-Learning Heroes Challenge is Presenting Opposing Lists.
Lists of Dos and Don’ts can be used to support behavioural change, by highlighting what a learner should and shouldn’t do in a given situation. For this reason they are particularly useful for compliance training.
Summarising a lot of information in the form of a list is also handy when you are working on smaller screens, such as mobile devices.
Since I first developed a ‘Tinder’ style interaction for Challenge No. 247, I’ve figured out how to place several swipe left / swipe right interactions into one slide. This eliminates the slight ‘load lag’ between slides in my earlier demo.
With its focus on opposing lists, this week’s challenge was the ideal opportunity to try out my streamlined design.
Looking for your perfect study partner? Check out my 'dating app', built using @Articulate #Storyline360 for @ELHChallenge No. 247. pic.twitter.com/OsBE8gVC4m
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) August 30, 2019
Back in August 2019 I wrote this article explaining how to use Storyline’s standard slider feature to create a swipe interaction in an ‘app’ style course.
Online Dating Dos and Don’ts uses the same ‘swipe’ interaction, but by adding a series of state changes to the slider I can now alter its appearance each time it moves.
Eleven sliders becomes just one slider!
This week's @ELHChallenge is 𝗣𝗿𝗲𝘀𝗲𝗻𝘁𝗶𝗻𝗴 𝗢𝗽𝗽𝗼𝘀𝗶𝗻𝗴 𝗟𝗶𝘀𝘁𝘀 𝗶𝗻 𝗘-𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴. Swipe left / swipe right for some advice on Love In The Time of Covid. pic.twitter.com/HNGK0hRWuI
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) October 25, 2020
Check out this behind-the-scenes video, which shows how the slider changes appearance and position each time the user swipes left or swipes right.
Building ‘apps’ in Storyline 360 is a rewarding experience that can provide new ways to design your courses and deliver your content to your learners.
Whilst not truly ‘responsive’, if you create a 9:16 slide, lock it in portrait mode and publish it using the Classic player with a transparent frame, you can create a convincing ‘app’ style experience on most smartphones.
To date, my demo for E-Learning Heroes Challenge No. 257 has been downloaded from the Articulate website over 775 times! It also formed the basis of Nanette Sullivan and Reashonda Breckenridge’s presentation at this year’s DevLearn, Designing Micro Mobile Learning.
I’m certainly no expert in this area, but it has been fun to experiment with mobile design using Storyline 360. Here are my Top Tips if you want to try this out for yourself:
- Design your sliding background in a separate program, such as PowerPoint or Photoshop, especially if you want to combine images and text.
- Render it in high resolution so that it remains sharp when used as the ‘thumb’ of your slider. You may need to experiment to find the optimum size and balance appearance against ‘load lag’.
- Use the Responsive Playback feature to lock your project in Portrait Only mode when viewed on a mobile device, to create the appearance of an ‘app’.
- Although screen sizes can differ, a slide measuring 405 x 720 seems to fit pretty well across most smartphones.
- Publish your course ‘for Web’ using a transparent ‘chromeless’ player. Here’s how.
- Host your course on a public-facing server, as Review 360 will prevent your design from filling the screen when viewed on a mobile device, lessening the ‘app’ effect.
- Use layers and state changes to keep as much of the action on one slide, reducing ‘load lag’.
Check out another example of how I repurposed an older design for a new project here
This week I updated this ‘mobile app’ template again for E-Learning Heroes Challenge #319.
Check it out!