This Articulate E-Learning Heroes Challenge is to design a 5-tab interaction, with the tabs remaining persistent over slides or layers. Using tabs is a good way to cover a large amount of related content without splitting it into multiple slides – making content more manageable for learners by chunking of the information into smaller pieces.

The Idea

I wanted to use the interaction to introduce the topic via a slide base layer and four tabs to present the various components—for a total of five screens.

The Design

I visualized a clean presentation area with the tabs emerging from behind. As I looked around for a topic, I found my pocket reference card for Ken Blanchard’s Situational Leadership Model. It covers four leadership styles which correlate with four developmental levels, which are presented as a four quadrant chart. Using a tab interaction would be an easy way to introduce the model in a less abstract way than the original chart.

The Tab Interaction

When the learner starts, they first see a brief overview of the history and principle of the Situational Leadership Model. The four tabs fly in from the right, behind the main content area and the learner can select any of the four styles, denoted S1 through S4, in any order and at any time.

Each tab button has a custom hover and selected/visited state that coordinates with the four colors on the original reference card. When a style is selected, the tab appears to move to the front of the content stage as a slide layer.

The name of the style and corresponding development level (found in the “Best Used With” section) are highlighted with the same color as the tab to promote association and retention. Each layer has a reset button in the lower right hand corner that returns the learner to the main screen.

Final Product

I like the simple function paired with the clean design – the use of neutral background colors and color coding for the tabs easily guides the learners eye. The simple fly in entrance animation for the tabs also helps to guide the learner to the interactive part of the slide. This interaction could easily be adapted for any number of applications with only a few adjustments. Interested in seeing the demo or seeing how I built it? Check out the links below.