E-Learning Design

Clowning Around With Adaptive Learning

April 13, 2018 By Jackie Van Nice Leave a Comment

Select Image to Launch Demo

This week’s Articulate ELH Challenge is to design an example of an adaptive learning path. A random search for subject matter led me down the path to clowning.

An ATD Adaptive Learning Screen

The Idea

I’ve seen ATD’s use of adaptive e-learning in their Learning Portal courses, and beyond asking assessment questions to customize course content, they also ask the learner how confident they are in each response.

This makes the learner stop to think a bit more, and it gives you as the designer more information to help refine the learner’s path through the course. So an adaptive path that uses confidence levels is what I thought I’d try building.

The Design

The Adaptive Path

To keep this simple, I started with 3 assessment questions. If the learner gets them all correct (with full confidence) they’re essentially allowed to test out of the first course module, but have the option to review that content if they’d like. If the learner doesn’t get them all correct (with full confidence) they are only allowed to go to the first module.

For incorrect answers, feedback indicates the correct one.

After selecting your answer, you then indicate how confident you are in your answer.

After selecting an answer, you then indicate how confident you are in your answer.

The Assessments

As part of his introduction to this challenge, David Anderson shared a demo of how to build a branching path in Storyline that takes advantage of scoring answers by choice, rather than by question, and using the built-in results slide variables.

I couldn’t figure out a simple way to make that work with the added confidence levels, but without them I’d have used that approach.

As it is, I based the score for each question on both the answer to the question and the learner’s self-reported confidence using number variables. In the end, the total score determines the path.

Quick Visuals

Articulate 360 Content Library Clown

To keep this as time-efficient as possible, I again used as many resources available in Storyline 360 as possible. I used a couple of template screens as a starting point and customized from there. The photos, icons, and video are also from the Content Library; though I had to procure the banana image elsewhere.

The Result

As with all of life, in the end we attend the clown college we’re most ready for. That’s pretty much what happens here, too. Feel free to check out my adaptive clown demo!

E-Learning Avatars and Super Powers

March 18, 2018 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This week’s Articulate ELH Challenge is to show ways learners can select avatars to personalize a course, plus show how an avatar is carried over from a selection screen to a content screen.

Storyline 360 Eggplant

The Idea

I wanted to do something quick and easy by only using readily-available assets in Storyline 360. That led to playing with Storyline’s built-in characters (and an eggplant with character), then adding some customer service super powers for a bit more interest.

The Design

Visual Design

After playing with different characters and background images, I eventually arrived at a combo that gave me a color scheme I liked (purple, green, and orange), which I then used to create the rest of the screen elements. Oh – and the idea of mixing up character styles and species seemed way more interesting than pulling from one style.

Creating an Avatar Button Set

Avatar Selection Design

First, I placed the avatars in the visual context they’ll be seen in for the rest of the course. Being able to see their environment (a restaurant), and knowing the topic (customer service) helps inform the learner’s selection.

Then I used Storyline’s button set feature to make my avatars act like buttons. To create a button set, highlight the images you want to make into buttons, then right click and choose Button Set. When the learner clicks on an avatar after it’s been buttonized, it’ll automatically display a selected state, and only one can be selected at a time.

A Gentle Reminder

To give the learner a chance to play with their selections I added a Done button that lets them move forward when they’re ready. If they select Done before making a selection, a prompt pops up (built on a layer) as a reminder.

Carried-Over Avatar States

Avatar Carry-Over Design

To carry the avatar selection to the next screen I:

Created a true/false variable for each avatar. The initial value is false.
Added a trigger to the selection screen’s Done button to adjust the avatar’s variable to true if the state of the avatar is selected.
Created one image with a state for each avatar on the following screen. A trigger on this image changes its state to display the image of whichever avatar’s variable is true.

I designed the super power selection and carry-over in the same way.

Ready to Personalize Your Avatar and Super Power?

You can check it out right here.

Select Image to Launch Demo

Making Text Work with Images

December 16, 2016 By Jackie Van Nice 6 Comments

Select Image to Launch Demo

This week’s ELH challenge is to create an example of using text with images. Woo-hoo!

The Idea

My plan was to finally go through some of my Death to Stock photos, select one I like, and add some text so it looks appealingly cool. I felt good about this.

The Original Image

The Colorful Title

The Design

I put it together in Storyline.

The Image

It didn’t take long to choose one. This photo of colorful spools of thread on carefully hand-labeled shelves was too good to pass up.

Title Text

The image made me think of artisans, craftspeople, and the maker movement. So “Makers” became my title.

Using the eyedropper tool I started pulling those vibrant colors out of the threads and applying them to the title letters so that each one sort of echoed the look and feel of the individual spools. I looooooved the result, and that the title could sit right on the middle shelf in the picture.

Body Text

I found a quote from Mark Hatch, a maker movement guy, and placed it on the shelf just below the title. To make it a bit easier to read I added a semi-transparent dark shadow just behind the text. Because the edges of the shadow follow visual breaks in the image, it’s nearly invisible.

I expanded both title and body text to make it more visually pleasing and a bit easier to read. After that I added some entrance animations and called it good!

Make it Work!

Ready to see how it turned out? You can view it right here.

Select Image to Launch Demo

Dialing Up a Delicious Color of the Year

December 16, 2016 By Jackie Van Nice 13 Comments

Click Image to Launch Demo

This week’s Articulate ELH Challenge is to create an interaction using Pantone’s color of the year, and since I already wanted to do a catch-up challenge about working with dials I made it a two-fer.

The Idea

Green Anole

Chameleon

Greenery makes me think of the green anoles here in South Carolina. They change color to match their surroundings, but it turns out the chameleon has a larger color spectrum than the anole.

So I decided to make an interaction where your challenge is to match a chameleon’s color to his background (in this case Greenery) using dials to adjust the RGB levels.

The Design

Creating a 3-dial RGB interaction took some work, but figuring out how to build it in Storyline 360 was a piece of cake.

Visual Layout

Visual Design

Simplicity was the goal, with the word “Greenery” and the color itself always prominent. I didn’t want there to be anything you’d have to click on or find. The instructions are simple and on-screen, and the only action you have to take is to adjust the dials, which are the functional focus.

I also wanted the chameleon to have a little personality. It’s more fun changing a guy’s color if he’s cute and staring right at you. I purchased a vector line drawing of a chameleon and used Fireworks to change his colors.

Just Some of My 125 Chameleons

My Life-Saving Chameleon Spreadsheet

Functional Design

If I’d realized there were over 16 million possible RGB combinations I’d have started working on this awhile back. Fortunately I didn’t need that many combinations to convey the sense of exploration I was after. I settled on five dial stops for each color, all starting at 0 and ending at 255 with three uniform stops in between. That meant I only had to create 125 chameleons for all possible dial combinations. (Gulp.)

The only way to keep the color combinations straight as I created chameleons and dial triggers was to organize them in a spreadsheet. Nothing but love for a good spreadsheet.

Audio Design

I added some background birds to set the scene, but what brings the interaction to life is the actual goal: Having fly for dinner. To emphasize that, you see and hear him buzz in as the chameleon’s motivation is revealed at the beginning, and again when it’s dinnertime. Dan Sweigert graciously volunteered to impersonate the dining chameleon delivering the coup de gras. (Sorry, little fly.)

Ready for Some Greenery?

See if you can find Greenery’s RGB values (and feed the chameleon) right here.

See More Pantone Challenges!

This is actually the fourth Pantone color of the year interaction I’ve done for the challenges. Here are the others:

2016’s Rose Quartz and Serenity Challenge
2015’s Marsala Challenge (Still one of my favorite entries.)
2014’s Radiant Orchid Challenge

2016: Rose Quartz and Serenity

2015: Marsala

2014: Radiant Orchid

From Articulate Storyline to Rise: It’s A Makeover!

December 11, 2016 By Jackie Van Nice Leave a Comment

Select Image to Launch Rise Demo

This week’s Articulate ELH Challenge is to create a responsive course in Rise, Articulate 360’s browser-based tool that lets you quickly create learning that looks great on any device.

The Idea

Since quick reference (QR) guides are usually better when they’re mobile-ready – and since I wanted to compare creating a course in Storyline versus creating one in Rise – I decided to make over an earlier ELH challenge where I used Storyline to make a guide for treating bee stings.

Here’s what I learned about the differences in designing, developing, managing output, and the user experience after comparing Storyline 2* and Rise.

(*Storyline 360 is a more current version of Storyline – and it has phenomenal mobile output – but since I created the original in SL2, I’m using that as my point of comparison.)

Designing

Rise’s Pre-Built Lessons

Rise’s Block Lesson Options

Old Versus New Menus

Unlike Storyline, where you’re working with a do-whatever-you-want blank stage, designing a presentation in Rise relies on understanding exactly what your built-in options are.

There are currently 7 “pre-built” lessons (video, labeled graphic, process, timeline, sorting activity, URL/embed, and quiz) – and customizable lessons you can build with 9 types of “blocks” (text, statement, quote, list, image, gallery, multimedia, interactive, and divider).

For me, working with the available options meant making changes from screen one. In Storyline I had a context-setting intro animation followed by a colorful animated menu, but those would need to be adapted.

For the cover images, I reworked mine to adapt to Rise’s cover image field. My result is OK – but if I were starting from scratch I’d simply use one of Rise’s built-in cover images. There are scads to choose from, they’re beautiful, and they look great on every device.

My menu was automatically replaced with Rise’s economical built-in lesson menu, which is hard to beat for efficiency and responsiveness.

If I wanted a more immersive intro I could have added an introductory lesson with additional images and blah-blah, but restricted myself to making over the same content and keeping it to just 2 lessons to make it the most concise I-just-got-stung-by-a-bee QR guide possible.

That decision – to only have 2 lessons – drove the rest of the design.

Developing

Rise lesson 1 timeline in phone view: Progress bar at top, swipe or scroll, tap to zoom images.

Rise lesson 2 tabs interaction in phone view: Progress bar at top, swipe or scroll, tap to zoom images.

Lesson 1: I used the pre-built timeline lesson because it allows the user to scroll through the 4 immediate steps for a bee sting. I think it works well and it was suuuuuuuuuuuper quick to build once I got through my design dilemmas above and played with a few lesson options.

By the way, you can easily preview your course on any device as you make development decisions, which is a huge help.

Lesson 2: I used customizable blocks to build one lesson with 11 bee sting remedies along with their steps.

The blocks I used for each remedy were a text headline and a tab interaction. Being able to copy and reuse those blocks made development seriously speedy.

Output

Currently your output options are to share a (password protect-able) Web link to your course in Rise or download LMS or Web-ready files to host on your own server. All options are easy as pie.

User Experience

Of course the Rise experience is exactly what you’d want a mobile experience to be: Responsive, simple, and beautiful. My original Storyline 2 version works well in mobile – but you have to tap on the hot spots (no swiping), there’s no progress bar, and it’s not going to be ingeniously responsive when changing screen orientation.

Ready to Rise?

I actually loved working in Rise and I’m reeeeeeally looking forward to creating a Rise course that lets me take full advantage of its high-res image handling and some of its more creative options than this self-imposed makeover challenge allowed.

You can see my super-simple QR guide in Rise right here – and if you need to quickly and easily create straightforward, responsive learning for desktop or mobile – Rise could be a great option!