Everything You Need to Know About Drag & Drop Interactions

drag and drop interaction essentials

There are three main ways to interact with the course: click, mouseover, and drag. While click-based interactions are the most prominent, a good drag and drop interaction is usually more engaging. In fact, anytime I feature a drag-based interaction in a blog post, I’m always asked how it was created.

Drag and drops are engaging, they let the user “touch the screen” or lean into the course a bit, and they’re novel because they’re not used as often as the other types. With that said, here is everything you need to know about drag & drop interactions from previous posts:

essentials of drag and drop interaction

So there you have it, everything you need to know to get started building effective and engaging drag and drop interactions for e-learning. And if you want to learn to build them, check out these tutorials and take part in these drag and drop challenge activities: challenge #16 and challenge #21.

Is there anything you’d suggest when building drag and drop interactions?


Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

e-learning Articulate workshops

Upcoming E-Learning Events

  • Articulate Roadshows. Join us for one or two days of e-learning goodness. Day 1 focuses on more general e-learning topics and Day 2 is centered on learning to build some nice, reusable interactions. They're great activities to help you learn more about the tools. Sign up using the links below. Seats are limited for the events. If you're interested in presenting at one of the roadshows, let me know.
  • Toronto: August 9 & 10. Early bird rate expires July 21. Register here.
  • Seattle: August 21 & 22. Early bird rate expires August 7. Register here.
  • Austin: September 12 & 13. Early bird rate expires August 28. Register here.
  • San Francisco: October 10 & 11. Early bird rate expires September 15. Seats limited for this event. Register here.
  • London: November 13 & 14. Details coming soon.
  • Manchester: November 16 & 17. Seats will be limited. Details coming soon.
  • There are a couple of other events planned. Once we get all of the bookings confirmed, we'll add the registration page and info.

 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

Let Amazon S3 Do Your Text-to-Speech for Free

free text-to-speech narration

Previously we looked at how to create free text-to-speech narration using a free application. The audio quality is decent enough for those who need the text-to-speech audio. Today we’ll look at a free (or inexpensive) way to create your text-to-speech narration that’s just as easy and hardly costs anything, if at all.

Earlier I showed how to create an Amazon S3 account as a way to share your courses. The first 5 GB is free and after that, it’s very inexpensive. If you use a site like Wix for your e-learning portfolio, Amazon S3 is an easy way to add URL links to your courses since those sites don’t allow uploading course content.

Once you have an Amazon S3 account, you have access to Polly, a service where you can create free text-to-speech narration. And the voice quality is very good, much better than the default SAPI voices you get with your computer.

Here’s an example of a few narration files I downloaded from Polly.

text-to-speech Amazon S3 Polly demo

Click here to view the text-to-speech examples.

As you can hear, the audio quality is decent and makes the robot voices tolerable. And odds are you won’t go past the initial free allocation.

How to Create Free Text-to-Speech Narration in Amazon S3 Polly

Creating the narration is really simple. First, you’ll need an Amazon S3 account. Here’s a link that shows how to get one.

Don’t worry about the prices, they’re nominal. You get a cushion of free space and after that, you pay $4.00 per million characters. That’s about 23 hours of audio. To put it in perspective, if you narrated “A Christmas Carol” by Charles Dickens, it would cost about 66 cents.

demo os Amazon S3 Polly text-to-speech

Basic Steps

  • From the Amazon S3 console, select Polly.
  • Insert your narration script.
  • Select a language.
  • Select a voice.
  • Preview and download the audio file.

It’s all pretty simple. Once you have the audio file, you can do some post-production editing (if necessary) and then insert into your course. Easy as that.

So there you have it, one free application where you can create text-to-speech narration and this inexpensive (or free) solution via Amazon that should meet most of your free text-to-speech needs.

If you use Polly, feel free to share your feedback.


Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

Upcoming E-Learning Events

  • June 20-21 (San Diego). FocusOn Learning conference.
  • Articulate Roadshows. Join us for one or two days of e-learning goodness. Day 1 focuses on more general type e-learning topics and Day 2 is centered on learning to build some nice, reusable interactions. Learn more and sign up using the links below. Seats are limited for the events. If you're interested in presenting at one of the roadshows, let me know.
  • There are a couple of other events planned. Once we get all of the bookings confirmed, we'll add the registration page and info.

 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

What Do You Need to Know to Gamify Your E-Learning

gamified e-learning gamification

I hear a lot of people ask about gamifying their e-learning courses. And the examples they show are usually simple games modeled after shows like Jeopardy or Wheel of Fortune. Those are fine and have their places in e-learning, especially for quick knowledge checks. But they’re not the same as gamification.

In today’s post, I’ll share a few simple things to help get your brain muscles going.

What Do You Need to Know?

When it comes to building the courses in an authoring tool, you basically need to know how to use variables. Variables allow you to track and evaluate the user to provide relevant feedback, scoring, tokens, and all the other things that make up gamified e-learning courses. And once you know how to work with variables, you can build all sorts of things.

gamified e-learning

Here are some resources to learn more about variables:

On April 19, I’m also hosting a workshop where we learn about variables in the context of building a few common gamified elements. It’s a great way to learn more.

Learn More About Gamification

You can do a search and read all sorts about gamification especially now that it’s also a buzzword. Essentially you are taking game concepts and applying them to a non-game context. As you play games, ask what about the game is compelling and what similar element could work in your next e-learning course.

I think the greater challenge in building gamified courses is less in constructing the mechanics and more in building a narrative that integrates gaming psychology. Building things in the authoring tools is relatively easy compared to understanding what to build.

Here are three good books on gamification.

gamification books

What Can You Build in Your E-Learning Course?

When it comes to authoring the courses outside of a management system where you can track multiple users and build things like leaderboards, you’re confined to simple game elements such as:

  • Timers
  • Personalization
  • Progress meters
  • Tokens
  • Rewards management
  • Scoring
  • Autonomous navigation

You can make some very compelling courses that instructive and engaging. However, there’s a lot more to gamification than these simple elements above. How do you motivate learners and create the right tension between boredom and failure? Make sure you invest the right resources and develop a good strategy. Otherwise, your gamified course will transform from game to gimmick.

If you’re not quite sure where to get started, check out some of the cool examples in the community. They’ll give an idea of some of what you can do with the authoring tools. Here are three nice examples:

gamification example 1

Click here to view gamified e-learning course.

gamification-example-2

Click here to view gamified e-learning course.

gamification example 3

Click here to view gamified e-learning course.

And there’s nothing wrong with starting simple. If all you need is a Jeopardy-style quiz, then download this free file. It’s a great way to work with a context you know. But make a commitment to learn more about variables and start to add some of those gaming elements above to your courses. And if you can, join us in the April 19 workshop to learn more about variables.

Have you built any gamified e-learning? If so, share a link in the comments.


Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

Upcoming E-Learning Events


 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

Three Ways to Use Hotspots in Your E-Learning Courses

hotspot

Hotspots are commonly used in e-learning course design. They’re invisible, yet functional. Today, we’ll explore some common use cases for the hotspot in your online training.

Invisible Button Hotspots

The most common use for the hotspot is the invisible button. Essentially it allows the developer to add an interactive choice on top of another object. This can really speed up production. For example, the image below starts with a single image of a world map. By adding separate hotspots over each continent there’s no need to create separate images with links. This really comes in handy when you start with a single image and don’t have the means to break it into smaller components.

hotspot interaction

Example Screen Space with Interactive Hotspots

The hotspot can also be used as a means to expand real estate via a mouseover interaction. A click interaction requires a click to activate and then an additional click to deactivate. Whereas a mouseover interaction is a bit smoother. Mouseover the hotspot to reveal content, mouse away to have it disappear.

mouseover hotspot

In the example above, I added access to additional content using a mouseover hotspot. This is content that doesn’t need to be persistent but does need to be available. The mouseover or hover interaction assigned to the hotspot is a great way to expand screen real estate with fluid precision.

Invisible Barrier Hotspot

The two examples above are pretty common and what you’d normally expect for hotspots since the hotspot is usually defined as an invisible button or interaction. However, the hotspot is also good as a barrier to avoid interactions. Think of it like plastic wrap over a piece of cake. You can see the cake, but you can’t touch it because the wrap is covering it.

Here’s a recent example where I used the hotspot as a barrier. In this anatomy interaction, each part of the digestive system is actually a slider connected to the main slider. It’s a great effect to move the pieces in and out of the body using a single slider. However, I only want the user to interact with the main slider, so I placed a hotspot over the body image and the other sliders. The hotspot serves as a barrier and prevents the user from interacting with what’s underneath.

Check out the two examples below to see the difference.

Example with No Hotspot Barrier

no hotspot barrier

Click here to view the demo of no hotspot barrier.

The first demo above has no hotspot barrier which means any of the other sliders are active. Grab one of the body parts and see what happens. It’s not as elegant.

Example with a Hotspot Barrier

hotspot barrier

Click here to view the demo of hotspot barrier.

The second interaction has a hotspot barrier over the body parts which prevents the user from interacting with anything other than the main slider. This makes for a much better user experience and a more elegant interaction.

So there you have it. You can use hotspots to trigger all sorts of interactions or you can use them as a persistent invisible barrier that prevents an interaction.


Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

Upcoming E-Learning Events


 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

How I Built that Free Microlearning Template

free microlearning template

Earlier I shared this free microlearning template. It is easy to use and edit. However, I did receive some questions on how it was created and how to add additional cards. So in today’s post I’ll share a few tips so you can make your own template and edit the one I shared.

Here’s a series of video tutorials that show how to create the simple, yet powerful microlearning template. Check out the last tutorial on how to quickly edit the text.

How to Create the Animated Card

We want the card to animate onto the screen and pause. And we want to click on the card to see the other side (of the card, not the spirit world).

Click here to view the tutorial.

  • The first step is to create a card.
  • Add an entrance and exit animation.
  • Add a selected state to the card to create the click and reveal feature.
  • Add a trigger to the card that pauses the timeline when the entrance animation completes.

When you preview, the card should animate in and pause. You can click on the card to select or deselect it.

How to Edit the Normal & Selected States

We want the selected state to have an animated object that comes on and off the screen when the card is selected and deselected.

Click here to view the tutorial.

  • Select the card and double click inside the state you want to edit.
  • Add placeholder text in the normal state.
  • Add a shape to the selected state and add placeholder text to the shape.
  • Add entrance and exit animations to the shape in the selected state.

When you preview and click on the card, it will trigger the entrance animation of the selected state. And when you click on it again, it should trigger the exit animation.

How to Bring a Card On & Off the Screen

When the card animates on the screen it will pause. This allows us to “flip the card” by clicking on the card. When we’re done looking at the card, we want it to exit the screen and trigger a new card.

Click here to view the tutorial.

  • Create a button with a trigger to resume the timeline.
  • Duplicate the card and position it on the timeline after the first card. Repeat as necessary.

When you preview the microlearning interaction, the card enters and pauses. Clicking the button causes the timeline to resume which triggers the exit animation of the first card and the entrance animation of the next card.

How to Edit the Content on the Cards

Clicking into the states of the various cards can be tedious. Here’s an easy way to edit the text for each card.

Click here to view the tutorial.

  • Go to File>Translate>Export to export the text from the course.
  • Edit the text in the document and save it.
  • Go to File>Translate>Import to import the text into the cards.
  • Preview the microlearning interaction to verify that the text alignment is correct.

Importing the text should work well and as long as you don’t add too many characters you shouldn’t have to do any editing.

Here’s another free microlearning template for you to deconstruct and see how it was built.


Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

Upcoming E-Learning Events

  • We'll be adding events for 2017 soon. If you'd like to see one of our workshops in your area just let me know.

 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

Free Microlearning Template

free microlearning template

Here’s a free microlearning template I created for a workshop on interactive e-learning. The template uses the popular overhead desktop theme. I’m using the interaction as a simple microlearning module. But it could also be a quick knowledge check like this one. It just depends on how you want to use it for your own course.

Example of Free Microlearning Template

Here’s an example of the template in action.

free microlearning template

Click here to see the microlearning example.

How to Edit the Free Microlearning Template

What makes this microlearning template work is that it’s really easy to use and modify. The construction is really simple.

  • Create a card with selected states.
  • Add an entrance and exit animation to the card.
  • Create a trigger to pause the timeline when the card’s entrance animation completes.
  • Create a button to resume the timeline.

Want more cards? Just duplicate them and the triggers are duplicated, as well. You can create as many cards as you like. All you need to do is stagger them on the timeline.

Bonus tip:

  • The template starts with a single card. Since I don’t know how many cards will be in the final module, I created a cue point on the timeline. Look at the free file to see what is triggered by the cue point. If you add a bunch of cards, just drag the cue point to the end and all if its triggers move with it.

Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

Upcoming E-Learning Events

  • We'll be adding events for 2017 soon. If you'd like to see one of our workshops in your area just let me know.

 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

My Favorite Microphones for Recording Audio Narration

best mics for audio narration

While I’ve covered audio recording tips and tricks in the past, one of the most frequent questions I’m still asked is about microphones. So today, I’ll show you the different mics I use and demo how they sound.

I’ll have to admit, I’m no audio pro and I’m also a bit less dogmatic about audio quality than some elearning developers. My main goal is to get decent sounding audio without a lot of post-production.

The reality is that most end users are hearing the audio through cheap headsets or small device speakers where everything sounds hollow. Also, if you record tutorial videos or do webinars, the audio compression mitigates some of the distinctions you hear in different qualities of audio.

With that said, here are a few thoughts and some recommendations based on the mics I use.

Simple Audio Recording Tips

Here are a few simple ground rules. You learn more by clicking on the links below.

  • You want to record the best audio quality you can initially. There are some things you can do to clean up the audio, but you can’t make bad audio good. If you can only do one thing, get crisp audio.
  • Try to eliminate background noise like air conditioners. Sometimes if I can’t get rid of the noise, I will play some music softly in the background–not Eminem, but something a little softer.
  • Don’t worry about being perfect. You can spend a lot of time finagling your audio only to have you end user listen to it through cheap headphones or speakers where everything sounds muffled and tinny.
  • You should learn a little about audio and some basic editing. You don’t need to be an audio engineer, but learning some recording techniques, how mics work, and how to do some post-editing will really come in handy.

Microphone Recommendations

There are a lot of good microphones out there and they’re not that expensive. I’d plan on spending from $100-$200 on a microphone. You should also invest in a pop screen, a stand, and perhaps some sort of barrier. Here are some of the microphones I use.

I created a quick demo in our new Rise application to show the different mics in use. You can view the link on your mobile devices and compare how they sound versus how they sound on a desktop. I noticed that my iPad which has one speaker masked the issues that I could hear on my desktop. I also noticed that with my iPhone, the ambient audio was more evident that elsewhere.

rise-course-microphones

Click here to view the microphone demo.

Desktop Microphones

  • Blue Yeti Pro. This is what I have in my home office. I like it because I can control the gain and the pickup pattern. This is a big plus. The pickup pattern helps eliminate unwanted sound entering the mic. The Pro costs about $230. But you can buy the Blue Yeti (which is also a good mic) for about $120 and it comes in a bunch of colors to placate the needs of easily distracted millennials.
  • Blue Raspberry. I’ll be doing a lot more recording on the road so I wanted to upgrade my microphone. I just purchased this microphone and will do an update after a few road trips.
  • Samson C03U and Samson C01U. I’ve used both of these mics and think they’re great a great value. Both mics are in the $80 range but for about $120, you get the microphone, a pop filter, and shock mount. Not a bad deal. I’d choose the C0U3 because it has better pick up patterns. I quit using the mics when I received the Blue Yeti Pro. If you’re on a budget the Samson mics are worth it.
  • Samson Go Mic. I love this little mic. At $40, it’s a great price and sounds good. The build quality is really solid and I’ve gotten lots of use out of it over the past few years.

Headset Microphones

I’m not a fan of headset microphones for recording narration because they tend to pick up a lot of breath sounds. However, they are relatively inexpensive and decent enough in output. But because they’re headset microphones you don’t get a lot of control over the pickup.

I do like to use headset microphones for recording tutorials and doing webinars because it allows me to operate hands free and not worry about moving around and away from the microphone. I also prefer wireless headsets over wired ones.

Here are the three headset microphones I currently use:

  • Plantronics Audio 995. It’s wireless which gives me some range of motion. I don’t like having a bunch of cables running over my desk when I record. Having the wireless mic is nice if I have to record some audio narration from my subject matter experts.
  • Plantronics 478. This is similar to the one above but it has a USB cord. Both of those microphones have noise canceling features. Usually that means there’s one mic that records your audio and another smaller one that records ambient sound and cancels it out.
  • Logitech H800. I just got this one. I like it because it’s wireless and has a built in charger. I also like it’s portability for traveling.

One question you may ask is why I have so many microphones, especially headset mics. I travel a lot so I want good portable options and I like the choice of desktop and headset microphones. I do recommend getting a few extra headset mics, one for you and the others to share if you do recording with subject matter experts.

Previous Posts on Using Audio for Narration

Again, I’m not an audio pro and recording in a controlled recording environment. Instead I’m a one-man recording studio, in a home office, with a limited budget. I want good quality audio at an affordable price. From my experience most rapid elearning course authors are in the same boat.

Which microphones do you use and why? Feel free to share in the comments.


Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

Upcoming E-Learning Events

  • No live events for the rest of 2016. We'll be adding events for 2017 soon.
  • Swing by the Articulate booth at Devlearn this week and check out all of the Articulate 360 goodness.


 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

Here Are Some Cool E-Learning Examples

e-learning example

Reviewing elearning examples is a great way to learn. You find inspiration to prompt your own ideas and by deconstructing the courses, you learn to use your elearning software to create something similar.

Here are some really nice elearning examples that I’ve seen in the community recently. Check them out and then try to figure out how they were built.

E-Learning Example: Hero Land

e-learning example heroland

Click to view the elearning example.

Here’s a great module built by Richard Lee Hill. This is one of the slickest demos I’ve seen in a while and an excellent example of what you can create with the authoring tools. He combines some great gaming mechanics with learning more about Storyline.

Deconstruction questions for you:

  • How to move the character freely about the screen?
  • How to collect items and rewards and use those throughout the module?
  • How to create just-in-time instructions?
  • How are animations used? Characters? Backgrounds?

There’s a lot to learn by deconstructing this module. What I really like is that as you collect the eBits you have links to video tutorials that explain parts of how this was created. There’s also a bonus high five because he was able to work Goudy Stout into the module.

E-Learning Example: How to Drink and NOT Drive

e-learning example drink and drive

Click to view the elearning example.

The folks are 42 Design Square always do nice work. I’ve featured them a few times in the past. This course integrates some nice animations and audio effects. I also like the way they used the variable panel to select drinks and see the impact when driving.

Deconstruction questions for you:

  • How did they create the animation effects?
  • How would you create a similar panel in your courses?
  • How to integrate the drink dashboard with the breath analyzer meter?

Lots of good things happening in this demo. See if you can prototype some of what they’ve done.

E-Learning Example: Workplace of the Future

e-learning example workplace future

Click here to view the elearning example.

This example looks at the workplace of the future and was done by Learnnovators in collaboration with Clark Quinn. This style of course is a bit closer to what you might build at work and includes some good scenario-like activities.

Deconstruction questions for you:

  • How did they create the custom player features?
  • How did they create the resource page?
  • Can I template this structure for easy re-use?

There you go, three good examples to whet your appetite. The trick is to explore the modules and consider how they were built. And then try to build quick prototypes to see if you can figure it out.

If you have any questions don’t hesitate to connect with the course creators or jump in the community and ask.


Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

Upcoming E-Learning Events

  • No live events for the rest of 2016. We'll be adding events for 2017 soon. However, you don't want to miss the big announcement from Articulate. Click here to learn more about how we're working to help you solve your common elearning challenges.

common e-learning challenges


 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

Free Flip Card Interaction

free flip card interaction

A great way to learn to use the elearning software you have is to create small interactions. As I’ve noted before, at work you may end up building one hundred courses, but the reality is you just build the same course one hundred times. That’s one of the reasons I like and promote the weekly elearning challenges. They provide a mechanism to quickly build prototypes to play around with ideas and learn new production techniques.

A recent challenge was to create a note card interaction. There are some pretty cool submissions so be sure to check them out in the comments. I happened to be working on a note card interaction for a workshop and submitted it to the challenge above. Here’s the interaction:

free flip card interaction

View the notecard interaction in action.

Here are a few things that I highlight in the workshop activity. I also created a quick tutorial that explains the file and how it’s constructed.

  • View tutorial to learn how to create and customize the free flip card interaction
  • Download file for the free flip card interaction

Create Content You Can Use More Than Once

One of my goals when creating any interaction is to design it so it’s easily re-purposed. Ideally, I want it to become a template. In the case of the note cards, I designed them so that I can quickly copy and paste to create additional cards. Then I just need to swap out the content in the card.

In addition, once the interaction is complete it can be saved as a template file where it will always be at your fingertips and available for use in other courses.

Learn to Leverage the Features

For this free flip card interaction I created the cards with a Selected State.  In essence, the Selected State of an object is like a light switch that can be turned on and off. This is perfect for a note card interaction. Click on it to get information. Click on it again to go back.

Using a Selected State also makes it easier to build a reusable template for copying and pasting. Often, we use layers to show or hide content. That means every time I want to duplicate a card, I also have to duplicate a corresponding layer. With a Selected State, I only need to duplicate the object because it automatically duplicates the state. That saves a lot of time creating the interaction and adding additional cards.

Find Inspiration from Others

Josh Stoner does really nice work. At a recent Articulate workshop he showed how to build this drag and drop interaction that gave the appearance of swiping cards left and right. It’s a slick interaction. I used his design to inspire my note cards.

free flip card interaction

What I like about this free flip card interaction is that it allows the user to interact with the screen and this is a key part of building interactive content. I also like that it’s a novel interaction when compared to how most elearning content looks. While the cards kind of serve as flashcards in these examples, they could just as easily be bullet point slides converted to cards. Even if all you have is linear content, you make it a bit more engaging because of the novelty and interactive component. Keep in mind: it doesn’t make it a better learning experience, but it does make it a more engaging interactive experience.

To sum it all up:

  • Develop the practice of building prototypes. If you need some structure or calendar, participate in the weekly challenges. You don’t need to do them every week, maybe once a month or every couple of months is fine.
  • Get more life out of the features. This comes with practice (see above) and connecting with more experienced users who have developed some good best practices and creative techniques.
  • Find a source of inspiration. Make it a habit to look for good multimedia examples and then try to recreate them in your software. It’s a great way to learn to use the tools in a new way and also to see your projects and the potential interactions they offer.
  • Free download. Here’s a link to the flip card interaction. I use it as a workshop activity file. I’ll leave it to you to download and deconstruct to learn more. And watch the tutorial if you need more details. above.

Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro
 

Upcoming E-Learning Events

  • November 1 & 2 (London). Two-day Articulate Roadshow. Learn all sorts of tips & tricks in this fun community-based workshop. SOLD OUT. Register here.
  • November 4 (Dublin). Articulate E-Learning Workshop. Learn all sorts of tips & tricks in this fun community-based workshop. Limited seats for this event, so don't delay. Register here.

 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.

Free Flip Card Interaction

free flip card interaction

A great way to learn to use the elearning software you have is to create small interactions. As I’ve noted before, at work you may end up building one hundred courses, but the reality is you just build the same course one hundred times. That’s one of the reasons I like and promote the weekly elearning challenges. They provide a mechanism to quickly build prototypes to play around with ideas and learn new production techniques.

A recent challenge was to create a note card interaction. There are some pretty cool submissions so be sure to check them out in the comments. I happened to be working on a note card interaction for a workshop and submitted it to the challenge above. Here’s the interaction:

free flip card interaction

View the notecard interaction in action.

Here are a few things that I highlight in the workshop activity. I also created a quick tutorial that explains the file and how it’s constructed.

  • View tutorial to learn how to create and customize the free flip card interaction
  • Download file for the free flip card interaction

Create Content You Can Use More Than Once

One of my goals when creating any interaction is to design it so it’s easily re-purposed. Ideally, I want it to become a template. In the case of the note cards, I designed them so that I can quickly copy and paste to create additional cards. Then I just need to swap out the content in the card.

In addition, once the interaction is complete it can be saved as a template file where it will always be at your fingertips and available for use in other courses.

Learn to Leverage the Features

For this free flip card interaction I created the cards with a Selected State.  In essence, the Selected State of an object is like a light switch that can be turned on and off. This is perfect for a note card interaction. Click on it to get information. Click on it again to go back.

Using a Selected State also makes it easier to build a reusable template for copying and pasting. Often, we use layers to show or hide content. That means every time I want to duplicate a card, I also have to duplicate a corresponding layer. With a Selected State, I only need to duplicate the object because it automatically duplicates the state. That saves a lot of time creating the interaction and adding additional cards.

Find Inspiration from Others

Josh Stoner does really nice work. At a recent Articulate workshop he showed how to build this drag and drop interaction that gave the appearance of swiping cards left and right. It’s a slick interaction. I used his design to inspire my note cards.

free flip card interaction

What I like about this free flip card interaction is that it allows the user to interact with the screen and this is a key part of building interactive content. I also like that it’s a novel interaction when compared to how most elearning content looks. While the cards kind of serve as flashcards in these examples, they could just as easily be bullet point slides converted to cards. Even if all you have is linear content, you make it a bit more engaging because of the novelty and interactive component. Keep in mind: it doesn’t make it a better learning experience, but it does make it a more engaging interactive experience.

To sum it all up:

  • Develop the practice of building prototypes. If you need some structure or calendar, participate in the weekly challenges. You don’t need to do them every week, maybe once a month or every couple of months is fine.
  • Get more life out of the features. This comes with practice (see above) and connecting with more experienced users who have developed some good best practices and creative techniques.
  • Find a source of inspiration. Make it a habit to look for good multimedia examples and then try to recreate them in your software. It’s a great way to learn to use the tools in a new way and also to see your projects and the potential interactions they offer.
  • Free download. Here’s a link to the flip card interaction. I use it as a workshop activity file. I’ll leave it to you to download and deconstruct to learn more. And watch the tutorial if you need more details. above.

Download the fully revised, free 63-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro
 

Upcoming E-Learning Events

  • November 1 & 2 (London). Two-day Articulate Roadshow. Learn all sorts of tips & tricks in this fun community-based workshop. SOLD OUT. Register here.
  • November 4 (Dublin). Articulate E-Learning Workshop. Learn all sorts of tips & tricks in this fun community-based workshop. Limited seats for this event, so don't delay. Register here.

 

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.