Using Tabs Interactions in E-Learning (2020) #272

Using Tabs Interactions in E-Learning (2020) #272

November 9, 2020 Off By JR

I have a back catalogue of small instructional design challenges and charrettes that I’ve been meaning to build into something bigger one day. That is obviously taking too long, so here’s a new idea. The Articulate E-Learning Heroes Community runs a weekly eLearning Challenge. I’ve mentioned before that often different IDs in different contexts will use different tools, and while I’ve used some of Articulate’s products, I’m primarily a Mac user. This means that a number of their products are not available to me. So instead, I thought, rather than being an Articulate eLearning Hero, that I could be an InArticulate eLearning Hero. So here it goes.

This week, your challenge is to share a fresh example that demonstrates how tabs interactions can group related content into meaningful sections in e-learning courses.

Basic Tabs

If you’re just getting started with Storyline, try to focus on the alignment and positioning of slide objects before adding the interactivity with triggers and layers. Work with the shape tools, formatting options, and alignment tools. Don’t worry about making your tabs  look good. Instead, focus on Storyline’s workflow of adding states, layers, and triggers.

Advanced Tabs

For those of you with Storyline experience, try working with conditions to make something happen after a specified number of tabs were clicked. Can you reveal a hidden or disabled button after all tabs are visited? Can you make something happen when the timeline of a slide layer reaches a cue point or the end? What can you do with the layer properties options to affect how the tabs interaction functions?

– David Anderson

This one brought me back to when I was learning how to create basic websites using Dreamweaver. Back at that time I thought an interesting type of interaction was a “disjointed roll over” where I could move my mouse over one part of the screen and something else on the screen would change. Tabs is kind of an extension to that type of interaction for me. If you look at different tab interactions you often click on one part of the screen and another part of the screen changes. Tabs are a default interactive in many elearning authoring tools, and even wordpress plugins:

[tabs style=”default” active=”1″ vertical=”no” mobile=”stack” anchor_in_url=”no”][tab title=”This is a tab” disabled=”no” anchor=”” url=”” target=”blank” class=””]And here you see content for tab one.[/tab] [tab title=”Another Tab” disabled=”no” anchor=”” url=”” target=”blank” class=””]You can see a new tab is highlighted and now this content appears.[/tab] [tab title=”Yet another tab” disabled=”no” anchor=”” url=”” target=”blank” class=””]You can see a new tab is highlighted and now this content appears.[/tab][/tabs]

Accordions are sort of like tabs in terms of interaction, but will be shown in a different post.

I was inspired a bit by Kyle Mackie who made a 3 tab template using the H5P presentation:


So here is my demo of a tabs like interaction in H5P Presentations.


Hand by Andrejs Kirma from the Noun Project
judo by iconixar from the Noun Project
foot by priyanka from the Noun Project
judo by ProSymbols from the Noun Project