Using Tabs Interactions in E-Learning (2023) #401

Creating Tabs Interactions in E-Learning #401: Challenge | Recap

Challenge of the Week

This week, your challenge is to create a tabs interaction that includes at least three tabs and uses hover, selected, and visited states.

Why do you post a tabs challenge every year? Are you running out of ideas?

No. I'm not running out of challenge ideas. I post a tabs challenge every year because they're the most common e-learning interaction. And they're also a fantastic way for course designers of all levels to practice and grow their e-learning skills.

Why are tabs interactions so common in e-learning?

Learners: Tabs offer several benefits, such as:

• Organization: Tabs help structure large blocks of content into smaller sections, so learners remain on the current slide without having to jump away to new slides or scenes.
• Interactivity: Tabs are a simple way to make static content more interactive by giving more control to learners.
• Reduced cognitive load: By chunking content into smaller, more manageable sections, tabs interactions can help users focus on one piece of information at a time rather than taking in a large amount of information all at once.

Course designers: Tabs offer ways to practice visual, interactive, and UX design skills, such as:

• Sketching, wireframing, or planning design ideas
• Graphic design (fonts, colors, layout, composition, hierarchy)
• Organizing and structuring content
• Usability and testing
• Interactive elements

Storyline designers: Tabs are a fantastic way to develop a working knowledge of essential features such as:

• Creating and saving projects
• Choosing a slide size
• Working in slide view
• Working with layers, triggers, states, and slide properties
• Previewing and publishing projects

How can beginners and experienced users benefit from this week's challenge?

Beginners: If you're getting started with Storyline, try focusing on the alignment and positioning of slide objects before adding the triggers and layers. Then, 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.

Experienced: For experienced Storyline designers, consider adding conditions to create more advanced tabs interactions such as:

• Making something happen after the learner clicks all tabs.
• Revealing a hidden or disabled button after all tabs are visited.
• Make something happen when a slide layer's timeline reaches a cue point or the end.
• Animating the tabs or content layers to create. 

Share Your E-Learning Work

• Comments: Use the comments section below to share a link to your published example and blog post.
• Forums: Start  your own thread and share a link to your published example..
• Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
• Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you get started on this week’s challenge, check out the creative ways course designers use TikTok-style videos in e-learning:

TikTok-Style Videos in E-Learning RECAP #400: Challenge | Recap

New to the E-Learning Challenges?

The weekly e-learning 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.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.