Articulate StorylineE-Learning Heroes ChallengePortfolio

Situational Leadership II Model: 5 Tab Interaction

By May 17, 2015 One Comment
Screenshot of main screen

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.

Mike Jones

Mike Jones

Hi, I'm Mike. I design and develop high-quality learning solutions that focus on outcomes—meeting the needs of the client, their organization, and their learners. As an Instructional Designer and L&D Professional, I have had extensive experience creating eLearning, blended, and traditional Instructor-led Training (ILT) in corporate, medical, and non-profit settings. My passion for lifelong learning and cutting edge technology is only furthered through collaborating with others that are just as passionate about helping people.

One Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.