Using Interactive Markers to Build Labeled Graphics in E-Learning #118

Labeled Graphic Interactions #118: Challenge | Recap

What’s the Swiss Army Knife of E-Learning Interactions?

Most experts claim the tabs interaction is the most common type of e-learning interaction. Fair enough. Tabs use a familiar navigation layout that makes it really easy to chunk information.

What’s the Swiss Army Knife of E-Learning Interactions?

But tabs require a structured layout. You can’t drop tabs on a slide willy-nilly and expect the content to fall into place. Their size and position should fill the height or width of a slide while leaving proper space for their associated content.

The Most Versatile E-Learning Interaction

If there’s one e-learning interaction that’s even more common than tabs, it’s the labeled graphic. Similar to tabs, labeled graphics are click-and-reveal interactions that let learners pull information when they need it.

Unlike tabs interactions, labeled graphics don’t require a structured layout. Labeled graphics use small buttons (called markers) that can be placed anywhere over an existing, static slide to transform it into something more explorable.

The Most Versatile E-Learning Interaction

Click the image to view the example

Anatomy of an Interactive Marker

The Healthy Habits example was built with Articulate Storyline’s built-in markers. The same interaction could be created using the labeled graphic interaction in Articulate Engage ‘13.

If you want to step away from using the default markers, you can build your own using basic shapes. Here’s what you’ll need:

Anatomy of an Interactive Marker

The only thing left is a place to put your interactive markers. And that’s what this week’s challenge is all about!

Challenge of the Week

This week, your challenge is to design a labeled graphic interaction for e-learning. You can use the built-in markers or create something from scratch using shapes and graphics.

Ideas for Labeled Graphics Interactions

Here are some topic ideas and links to previous challenges.

Note: I’m not including interactive maps in this challenge since maps are a specific type of labeled graphic. Map markers and labels are a great source of inspiration, but I’d like to focus this week’s challenge on things other than maps.

Resources

Here are some great articles on different ways course designers are using labeled graphics:

Last Week’s Challenge:

Before you lay down the marker for this week’s challenge, take a look at the visual design ideas your fellow community members shared in last week’s cover slide challenge:

50+ Creative Ideas for E-Learning Cover Slides

Graphic Design Tips for Cover Slides RECAP #117: Challenge | Recap

 

Wishing you a mark-tastic week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

386 Comments
Anne Seller

Hi Elizabeth, Welcome to the challenges! I really like the clean design of the template you designed. This would also fit nicely in one of the past challenges, if you would like to enter it there too (here's the complete list of all of the challenges so far: https://community.articulate.com/series/e-learning-challenges) I just have a couple of suggestions: - you might also want to add a link to the arrow button on your intro slide - I kept clicking on it until I realized I have to click on the text "Click to continue" instead. - after publishing your files, double check when you rename the "story.html" to "index.html". I noticed that your file is called "story.index.html" (this may or may not be an issue, but I'm always careful when naming files). Otherwise, it looks great! We... Expand

Anne Seller
Ramesh Muthukumarana
Lauren Franza
Lauren Franza
Rachel Craig
Daniela Slater