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.


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.

Sara Healy
Sarah  Frick

I started learning Storyline 2 this week. This is my first project! I used the tutorials, which were great for the basics. It really helps me that they have exercise files available. I am already working on a few projects with an Anthropology professor, Dr. Alan Boraas here at my college, involving Alaska Dena’ina language and some local anthropological sites here in the Kenai region. I have access to a lot of media that could enhance this project, including audio, video and language translations, but for now just wanted to get my feet wet in Storyline 2 and publishing to WordPress while the challenge was active. This is a rough prototype of the intersection of a Dena’ina “fish pit”, circa 1000 A.D. I ... Expand

David Anderson
ieva swanson

David, I have made an edit to my slide, and in doing so I wound up resetting my hpyerlink. I corrected the url in my original post, but I broke the link you set up for me in your recap. Perhaps you could help me out--when I tried to preserve the original link, I treated my published online file like I would a Word document that I had edited-- I just oversaved the original material. But when I tested, I got the original slide I built, not my edit. I tried this method twice before I removed my original file and uploaded my edited file. How could I have been sneakier, and simply corrected it without having to fess up online? My need to edit will make my nearest and dearest laugh--they know I am directionally challenged. I wrote my captions as if the map was oriented with Nort... Expand

David Anderson

Hi Ieva! I just updated the recap to point to your new link. Some days I'm faster than others:-) Articulate Online should let you overwrite your projects as long as you use the same file name. Is there any chance you renamed your updated project? Your file name can be the same, but the title of your project is what Articulate Online uses to determine if the project is new or should be overwritten. Here's how it should work: So you should have at least 2 versions in your Articulate Online dashboard. If you don't see 2 versions, then something strange happened and we should get support involved. But you were right that you should be able to "sneak" in an update without having to generate... Expand

Amanda Bauguess
Sean Herriott
Yael Monereau
David Tait
David Anderson