Long scroll content in e-learning

What content works well with long scroll?

When story boarding you maybe tempted to ‘chunk or slice (slide) up content’ but long scroll (by definition) is more linear than that. Here’s three different content types to consider when story boarding for say Adapt or Rise authoring tools.

1. Continuous and lengthy content:- maybe a long article or a step-by-step tutorial. Both these can be back referenced much easier using long scroll (rather than several back clicks)

2. Infographics:- When you want to display information without breaking it up this is where long scroll comes into its own. This is a much better UX also.

3. Minimal navigation:- When your content takes up a large proportion of the screen (and you feel you’re squeezing it in!) long scroll will suit the content better.

When story boarding how much consideration do you give to what content suits the long scroll display style?

The benefits to long-scroll

Less interaction: There’s no looking (learning the navigation) for the next/back buttons so there’s less stop/start with the content.

Mobile devices: Long scroll content translates well to mobile devices and the gesture controls are more intuitive leaving more user time focusing on the content.

A good example:

Image: https://dribbble.com/webdesigncrowd

Above is a design idea for a progress bar in long scroll I particularly like. The right hand side is static with a progress fill feature and the long scroll is on the left see it in action here.

The e-learning developer’s toolbox: Working with Characters

I keep seeing e-learning that, to me, is developed on auto-pilot;  text on one side, stock image on the other and yes a next button.  I think the average learner now knows the drill and the learner then goes into auto-pilot, glossing over the content. Learner’s deserve more than this and in the media rich world we love in they’re used to rich content.

Character’s

Because Captivate now comes with the awesome built in E-learning Brothers stock image catalog it’s never been easier to speed-up the authoring process (and saves countless time in searching). But you can take this a step further,  think about the scenario/ slide, for example, your character lives and how they should look.

Example: For this medical sample. I had two stock characters (full length, color) but just pasting them onto the slide wasn’t the look I wanted. To make the scenario more engaging and have a unique style

I put the nurse into a ‘ out of shot’ type box(this also saved valuable slide space.)

I stylized the patient to make her ‘pop off the slide’and have her reactions seem more exaggerated.

How I did it:

1. select image in PowerPoint
2. Click on Format tab
3. Click Picture effects
4. Choose one that fits your character style/ design

Here’s a link to the sample: chilp.it/1173db9

Captivate 2019 and cool clients!

 

This one goes out to..

When STIPE an R.E.M. covers band wanted a promo module creating I was cock-a-hoop. Mixing my two passions e-learning dev and music, I was on cloud nine! So a big shout out to STIPE (check them out at STIPE ) I’ve seen them live..they’re good!

Captivate 2019

I’ve been testing the latest version at Adobe’s invitation and this is a great leap forward, lot’s of new features that are easy to use (going against the ‘steep learning curve’ reputation some unfairly give Captivate.

Stipe

I showed STIPE a module I’d done for a Elearning heroes challenge (a blind music challenge where a You Tube is hidden behind a record vinyl image and the listener selects if it’s Adele or a cover check it out here

They liked it and wanted one!! So far so good..when

Browser updates!

First I.D. obstacle: The above sample uses Captivate’s widget auto-play feature since then all the major browsers don’t allow this. Doh!

This required a redesign thankfully Captivates plethora of features makes this easy. Here’s the quick and easy process I used

1.  I downloaded the audio only from You Tube
2. Trimmed the audio in Captivate and inserted into a text box
3. Created two answer buttons and aligned them horizontally with a little padding
4. Embedded an image in the intro screen.

Check out the module here (Designed for Iphone 6/7/8)

 

Food Safety..Murder Mystery (e-learning sample)

Reward in e-learning

Lots has been said about gamification etc in learning. I’ll leave that here, but I’d like to add that ‘carrot and stick’ is as old as the hills and that is what I’ve done in this module so far. You answer a question correctly you get a Michelin-type star; if not you lose a star.

The setting

A murder mystery seemed to fit well with a food handling module and puts the learner in a ‘prove your innocence’ to the detective situation.

Multi – States

With this sample I wanted to use Captivate’s handy multi- state feature (which I first encountered using Articulate). I’ve used this feature to change to change the numbers of ‘Michelin’ stars the user earns by correctly answering or lose by answering incorrectly.

I created  three images (one star, two stars, three stars)

Check out the sample here

Note: only the top right room (kitchen) has one working question  in this sample. I wanted just to give readers a ‘feel’ for what I attempted here.

Murder Mystery

Improve your workflow on Software Simulations

In Adobe Captivate you get 4 options when creating software simulations

Demo / Assessment / Training / Custom

Scenario: You want to create a demo and training simulation. All good so far, but, the conventional Adobe workflow is to create separate files, and this is where you can improve your and your users workflow.

Click of Death

We’ve all been there click after click after..RSI

Is what you’ll most likely end up with if you have to edit and publish two captivate files and then onced published the user has to open close the demo AND open close the training. Why!!

Create one file

Here’s my solution:

1. Create the training simulation and edit to your hearts content
2. Then create a video demo slide inside the training file (Insert button/ Video Demo)
3. Less publishing, less clicking, all in one place.

Take a look at my example:

demo and training

 

Adobe Captivate’s Delay next action

I’m always on the looking to improve my developing skills and the ‘delay next action’ seemed a good one to learn. I’m currently developing a Food Safety course and I wanted to add audio to a warehouse roller shutter door for the food delivery module.

Converting You Tube to Audio

There’s a handy site that converts You Tubes to MP4 and I found just the sound I needed.

I added the sound to a button (that jumped to the next slide), so far so good. But soon realised that the button’s action superceded playing the sound of the shutter.

I had a problem to solve

So this was my chance to use the ‘delay next action’ command. All I had to do was place the command in between the play audio and jump to slide commands (see image)

and Voila! the audio is played on clicking the button but plays the sound first before jumping to the next slide.

Adapt e-learning Authoring Tool sample

The British and Tea

I’ve set myself a challenge to update my portfolio and this is a fully responsive sample

(i.e. can be viewed on desktop/ tablet or any phone)

which has a lot going on in the background with theming and coding.

View the sample here: Responsive Tea sample

Adapt Authoring tool

I’ve always been a champion of Open Source software (Libre Office and Gimp) so using Adapt to create e-learning is a perfect fit, for me. I’ve learned to code in HTML and less to create this sample.

Sample Features

This sample has quite a bit going on ‘behind the scenes’, there’s

• Colour- coded sections (alternate to create a theme look)
• Hyper-link to take you to the quiz page
• color coded text – coded in the custom section using LESS
• Menu-header image-  This may seem straight-forward in some authoring tools, but in Adapt it requires a certain amount of code (see below)

Custom Less coding

Adapt’s authoring tool has a handy Custom LESS/ CSS section, this allows you to change code from within. This is handy for creating themes changing background colours and fonts.

Below are screenshots of the coding I did for this sample.

Fully reponsive

Adapt is a great way to create content quickly and is fully responsive.

I’ve had to learn quite a bit to get this far. (Adapt has a steep learning curve) But it’s worth it when you see the fully-responsive output

Portfolio addition ‘Cyber Bullying’

Time for an update.

I’ve recently renewed my subscription to Adobe Captivate 2017, which led my to thinking about updating my e-learning portfolio. So in the coming months I’m going to post  a heap of new modules showcasing what I can do with Captivate (along with other tools needed for developing effective e-learning.).

Timing is of the essence (no cognitive overload here.)

I was looking for a short but interesting topic I could start with and Cyber bullying fitted the bill. Rather than bombard the learner with information and overload them, I wanted a nice steady flow of content with an appropriate visual element to back it up and make it appealing.

Voice over and embedding audio

Just to add a little media element to the module I decided to have a voice over and have audio attached to some of the images (a handy feature in Captivate.)

It’s short and sweet but hopefully you can take something away from it.

Intro module

 

Captivate 2017 Fluid Boxes

First thoughts

Having recently had to change hard drives and re-load all my software I had my first chance to upgrade to Adobe Captivate 2017. With all the talk in e-learning about fluid boxes that had to be my first stop. I have to say it was quite easy to get my head around designing with these  boxes and handy when duplicating slides to stick with layouts and themes etc The break points bar was an improved feature too.

First go

I wanted to keep this example short and sweet (think micro learning) a quick google and wikipedia and voila! A photography 101 on the rule of thirds

Quick turn around

I set myself another challenge to see if the fluid boxes speed up the design to delivery stage. In short yes they do

Time taken from concept to finish

Approx 1 hour

View it here: https://goo.gl/mVAqZp

 

 

 

Gimp meets a team of Orthodontists

Open Source Software training

A while ago I created and delivered a photo editing course for a team of orthodontists. Strange you may ask why they would want to learn the fine arts of photo manipulation. And so did I until they filled (excuse the intended pun!) me in.

It turns out that they had the clever idea of showing their clients what their teeth would look like after any treatment was done, before it was done! And moreover they didn’t want to pay Adobe’s rather large costs for Photoshop licenses for several of their team.

Open Source (Gimp) to the rescue!

They also had done their homework and realised that Gimp would do all and more of what they wanted. They just needed some expertise to show them how. Every time I use Gimp I get a little buzz from knowing this marvellous piece of Open Source is available to all. Getting to know how to use it is the fun part.

The finished product

Have a look  below of how I designed the course and how easy and fun it is to use Gimp