10 Types of Learners

Click on the image to view the demo

The Challenge

This interactive graphic was inspired by the e-Learning Heroes weekly challenge #12 Transform Infographics Into Interactive Graphics.

The introduction for this challenge talked about how valuable it can be to de-construct and rebuild existing e-Learning projects – and then extended this to propose that an equally valuable way to practice your skills is by rebuilding static Infographics as interactive graphics.

The challenge was to take a static Infographic and rebuild it as an interactive graphic.

The Design

I chose this Infographic on “10 Types of Learners You Can Run Into When Imparting Online Training” that I came across on the SHIFT eLearning Blog here.  I have a bit of a fascination with Infographics – and pin the ones that catch my eye to a Pinterest board here.

types of learners

The Process

I used Adobe Color CC to generate a colour style card to work from – this is really easy to do, although I don’t save the generated colour scheme, I just take a screenshot of it and use the eyedropper in Articulate Storyline 2 to match the colours as I’m developing the colour scheme for the template.

2016-01-12_14-23-36

I created the graphics for the ribbon and medallion in PowerPoint using shapes and grouping – then saved the groups of shapes as images, although you can also just copy the group and paste this into Articulate Storyline 2 as a complete image that you can then resize.

10types

I created the curved headings in PowerPoint using WordArt Styles (arch up) and again, saved these out as images.

Picture1

For each of the icons representing the 10 types of learners, I recreated these by taking a screen shot of the image, then using “Crop to Shape” in PowerPoint to crop a circle the exact dimensions of the original circular image.

2016-01-20_22-11-31

The final production was built on one slide, with a layer for each of the 10 types of learner.  I wanted to add an animation to reverse the “fly-in” animation on the content for each of these layers, so I duplicated each of the 10 layers to create “close” layers, then changed the “fly-in” to a “fly-0ut” animation, with the content ending at .25 secs and the layer timeline ending at .75 secs.  Then I added a trigger to “hide the layer when the timeline ends” on the content object.  I set the trigger on the original layer to show the “close” layer when the learner clicks on the word “close” – so technically, the “close” layers only appear for less than 1 second and the learner does not interact with this layer at all.

2016-01-20_22-41-02

One other option I changed in each of the slide layer properties was to tick “Prevent the user from clicking on the base layer” – I wanted the base layer to be visible behind the content on each of the other layers, but also wanted the only possible interaction with the image on these layers to be to “close” them.

2016-01-20_22-51-38

The Result

In recreating the information from the original Infographic, I addressed one of the design consideration for the challenge by adapting the size of the Infographic into a shorter interactive graphic.  I decided against adding any instructions or tips on how to interact with the information as I felt it was self-explanatory, but did add in the hover states for the 10 icons, and then the “close” word to navigate away from the layers.

By displaying the content for each type of learner separately, this design also addressed the design consideration of reducing clutter and enabling learners to pull information.  As there was no need for the learner to view the 10 types of learners information in any particular order, I didn’t add any states or conditions, but left the navigation open to allow the learner to choose their own order of viewing.

3 thoughts on “10 Types of Learners

    1. Thanks for taking the time to comment Carolina. I believe it took me longer to write this post than it did to design and create the completed interactive graphic – but it’s all good experience and learning and I’m glad that you liked it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s