The #362 challenge for the e-learning heroes community was to show an example that demonstrates how a tabs interaction can group related content into meaningful sections in elearning courses.

Why should you use tabs interactions?

Tabs interactions are typical elearning interactions. 

Tabs interactions are very useful because they make it easy to break down and group related content into smaller, more meaningful sections. Using tabs to reveal each section helps learners remain focused in the moment without jumping out to new slides or scenes. 

Tabs can limit the cognitive overload the user may face whenever a slide contains lots of information.

My submission demo contains two different types of tabs. The first type of tab, follows a vertical orientation, while the second type, seen on the next slide follows a horizontal one. 

Vertical tabs interaction

ELC362 vertical tabs interaction

Below, you can see that this interaction contains three essential layers on top of the main slide. To visit each layer, I’ve added three hotspots on the slide. The user cannot move on unless they click on both three hotspots.

To make this happen, I have set the initial state of the Next button, located at the top-right corner, to “inactive“. To make the Next button active, I am using three red rectangles as a variable. These are called Checker1, Checker2, and Checker 3, each of them has two states. A normal and a complete state. 

This happens because the following trigger activates on every layer:

Change state of CheckerX to complete, When the timeline starts on this layer

Therefore, whenever each layer is visited, the state of each individual’s rectangle changes, and this way, the authoring tool knows that the user has indeed viewed the layer. 

Besides, to make the user aware that they have first to visit each respective tab, and therefore each layer, a new Help layer appears as soon as the user clicks the NEXT button. Of course, this happens only if the state of any of the three red variable-like rectangles is normal and not visited. 

ELC362 vertical tabs interaction

Note the original version included voice-over. Having a voice-over means that each tab is shown, not only when the user clicks on them, but also while the narration goes on.

I could have done this using regular variables, but I wanted to try something more creative, and possibly less smart. 🙂 

Horizontal tabs interaction

ELC362 horizontal tabs interaction

This slide contains four tabs. Again, I have used a layer for each tab. The user visits a layer as soon as they click on the respective hotspot. 

ELC362 horizontal tabs interaction explanation

For this interaction, the user can’t move on unless they’ve seen each tab. Unless they do so, the help layer reveals itself, pointing out that you have to visit all tabs first before moving.

To achieve this, I followed a different approach than the vertical-tabs slide. Instead of using “invisible rectangles” with states, I have added a True/False variable, called “tabs_2_checker”. The variable starts False and becomes True whenever the state of ALL pictures, nested below each hotspot, becomes visited. 

So, in each layer, I added a trigger that follows the following:

“Change State of Next button to activated, When the timeline starts on this layer, if tabs_2_checker=True” 


 

I really hope that you enjoyed this week’s participation of mine. If you have any questions, feel free to post on the community’s forum. I’ll try my best to address it.

Peace!