All About Lightboxes in Storyline 360
Whether you’ve designed a website or simply done your fair share of web surfing, you’ve probably run across lightboxes. They’re often used to display content (particularly images or video on photography websites) while dimming out the web page background. The lightbox feature in Storyline 360 works similarly. Triggering content to be displayed in a lightbox allows the slide of your choice to appear in a pop-up window over the current slide, which is dimmed. Here’s an example: Click here to explore the interactive version and here to download the template. A lightbox allows you to show learners additional content without navigating away from the current slide, which could cause them to lose their spot in the course. This can be especially helpful for stuff like bibliographical references or links to external resources. It’s also great for navigation instructions, a table of contents, or any other supporting assets that need to be available throughout the course. Let’s walk through how to add lightboxes to your Storyline 360 course so your learners can start reaping the benefits of this powerful feature. How Do Lightboxes Work in Storyline 360? In Storyline 360, you can trigger any slide (or series of consecutive slides) to open in a lightbox. The size, placement, and appearance of the lightbox is prebuilt for you, to make it super simple. This includes a red X button that closes the lightbox window automatically when learners click. These features make it quick and easy for you to create a consistent user experience. However, the trade-off is that you can’t customize these lightbox settings. If you’re looking for more control over the size, placement, or appearance of your lightbox content, you can always create your own pseudo lightbox effect using slide layers. To read more about how to do this as well as the pros and cons of this approach, check out this forum discussion: Lightbox Change Size? Pro Tip: When designing content for use in a lightbox, keep scale in mind. The scale of objects on your content screens (e.g., text, buttons, images) will be about 75% of the original slide size. Triggering the Lightbox Once you’ve created content slides for your lightbox, what’s next? To get your content into a lightbox, you’ll need to add a trigger. You’ll find the Lightbox Slide option under the action menu in the Trigger Wizard. Once you’ve selected Lightbox Slide, you’ll need to tell Storyline 360 which slide(s) to open. From the Slide drop-down menu, select the slide you want to appear inside your lightbox. If you’d like a series of slides to be lightboxed (e.g., for a media gallery), you’ll find it’s easier to place those slides into their own scene. That way you can simply select the first slide in that scene from the Slide drop-down and check the Navigation Controls box to allow learners to move forward and backward within that scene of lightboxed slides. You can also use your own navigation buttons, but your learners may find the size of Storyline’s default navigation controls a little easier to see and use. Pro Tip: To keep learners from getting confused, be sure to remove any custom on-slide Forward/Backward navigation buttons or arrows from your lightboxed slides if you’ll be using the default player navigation controls. Once you’ve selected the slides you want to appear in the lightbox, it’s time to tell Storyline 360 when to trigger this effect. From the When drop-down menu, simply select the option that fits your needs. For example, when the user clicks. Next, select the associated object. For example, in the screenshot below, the action to open the lightbox should happen on Slide 1.3 when the user clicks on the Previous button. If you’re using the built-in navigation buttons in Storyline 360, you can also trigger the lightbox to open when the user clicks on buttons built into the player, like Next, Previous, or Submit. Lightboxes can also be triggered to open from a slide or slide layer. Finally, you need to decide whether there are any specific conditions or criteria for launching the lightbox. For instance, what if you only want the learner to be able to access the lightbox after they’ve clicked on all the buttons on a slide, like in the example below: You can specify any conditions to be met by adding conditions to the trigger in the Trigger Wizard, as shown above. For more details on trigger conditions, check out this tutorial: Adding Conditions. Adding a Lightbox to the Course Player It’s one thing to make a lightbox available on a single slide, but what if you want lightboxed content to be accessible throughout your course? No problem! Storyline also gives you the ability to add a lightbox to the course player as an additional tab. Here’s how. From the player properties, select the Features tab. Under the Player Tabs section, click Add New (the blank paper icon): In the Trigger Wizard panel, enter a name for your new tab in the name field—for example, “Contact” for a slide with contact information. This name is what learners will see in the player, so be sure to choose something that makes it obvious what kind of information learners will find there. In the action field of the Trigger Wizard panel, select the lightbox trigger and then choose the content slide(s) you’d like to open up. Just like adding a lightbox to a slide, you can specify conditions for triggering this lightbox effect from the course player. When you’ve finished entering the information for your new tab, click OK. In the adjacent Storyline player preview, you should see your newly added tab. To make sure that your lightbox is functioning properly, simply preview your project and click the newly added tab on the course player. Resources Hopefully this comprehensive look at lightboxes has given you some new ideas for using them in your courses. For even more lightbox design inspiration, check out these helpful resources: How Are You Using Lightbox Slides in E-Learning? 3 Subtle Ways to Integrate Navigation Instructions Storyline Template: Lightbox Tabs Storyline Template: Integrated Navigation Instructions What creative uses have you discovered for lightboxes? Leave your ideas in the comments below or share them with the E-Learning Heroes community. Want to try lightboxes out for yourself, but don’t have Storyline 360? Start a free 30-day trial of Articulate 360, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.Using Circle Menu Navigation in E-Learning #406
Using Circle Menus in E-Learning #406: Challenge | Recap Circular menus are a great option when you want to provide users with an intuitive and stylish way to present navigation options in a compact format or when screen space is limited. By using a circular layout, designers can present a large number of options in a compact space without cluttering the screen. This makes circle menus an ideal choice for apps (or e-learning courses) with a lot of features or options that need to be easily accessible to users. Let’s explore a few examples. Circle Menu Navigation In this example from Dave LeFevre, learners click the menu button to reveal the circular arrangement of menu options. View the example | Download the source Circle Menu with Masking Effect In this example from Montse, a folder graphic is used as the starting point for the menu options. I like how the folder graphic was layered to mask the animated menu items. View the example | Download the source file Circle Menu In this example, Jackie’s circle menu features menu items nested under the starting button. In addition, I like how the menu features a selected state that remains persistent even after the menu is closed. That’s a nice touch. View the example | Learn more about this project Challenge of the Week This week, your challenge is to create a circle menu example to show how they can be used in e-learning courses. Your example can be static or animated. In most cases, animated menus will require variables. If you need help or get stuck this week, jump into the forums and let us know. Related Challenge For more ideas of what's possible, check out challenge #189 and the recap post. Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new 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 to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. Last Week’s Challenge: While you’re looking over this week’s challenge menu, take a few moments to check out the interactive audio examples your fellow community members shared over the past week: Interactive Audio in E-Learning RECAP #405: 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. Next Week’s Challenge Next week's challenge (3/4/23): New Feature Challenge: Microlearning in Rise 360. With the new microlearning feature in Rise 360, you can create bite-sized, single-objective training easier than ever. See this user guide article for more on this new feature. Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.Create a Custom Table of Contents Menu for E-Learning Courses #358
Creating Custom Menus in E-Learning #358: Challenge | Recap Create a Custom Table of Contents to Help Learners Navigate Through the Course Today’s authoring tools make it easier than ever to customize how the menu looks and where it’s placed in the course player. But there will be times when designers want to move beyond the default menu options and design their own course menu. While DIY menus take longer to design and implement, they’re worth the time if they help learners get more from their training. And that’s what this week’s challenge is all about. Moving Beyond the Default Player Menu Storyline’s menu options on the Player Properties window allow you to control how the player menu appears in your published course. This is a classic table of contents–style menu that provides all the functionality most courses need. Using a Table of Contents Style Menu When you want even more control over your menu design’s fonts, colors, graphics, bookmarking, and types of menu information, you’ll need to create everything yourself. The good news is: tools like Storyline make this really easy! Challenge of the Week This week, your challenge is to share an example of a custom table of contents menu. You don’t need to build out a real project this week. Use placeholder slides and content to allow more time for your custom table of contents menu. 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. 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. Last Week’s Challenge: Before you visualize custom menu ideas, check out the creative ways course designers use interactive graphs and charts from last week's e-learning challenge: Interactive Chart and Graph Examples RECAP #357: Challenge | Recap50+ Custom Menu Navigation Examples in E-Learning #358
Custom Menus & Navigation Examples RECAP #358: Challenge | Recap Learn how course designers go beyond the built-in navigation options by creating custom menus and tables of contents in e-learning. Menu layouts include animated tabs, flip cards, timelines, drop-downs, and more! Melissa Mendez Example | Melissa Mendez Ingrid Cuthbert Example | Ingrid Cuthbert Yvonne Urra-Bazain Example | Yvonne Urra-Bazain | Website Farah Azadeh Example | Farah Azadeh Alicia de Billy Example | Alicia de Billy Jonathan Hill Example | Jonathan Hill | Website | @DevByPowerPoint Katelin Jordan Example | Katelin Jordan Deirdre O'Reilly Example | Deirdre O'Reilly Jodi Sansone Example | Download (.story) | Download (.ai) | Jodi Sansone | Website | @jodimsansone Danny Benton Example | Danny Benton | Website Chris Hodgson Example | Learn more | Chris Hodgson | Website | @skriss Jordan Peel Example | Jordan Peel Haley Northrup Example | Haley Northrup Benjamin Bouvier Example | Benjamin Bouvier | Website Charlotte Bouvier Example | Charlotte Bouvier | Website Samara Reyneke Example | Download | Samara Reyneke Ron Katz Example | Ron Katz | Website Karole Dawson Example | Karole Dawson Danny Benton Example | Danny Benton | Website E S Example | E S Samantha Bricknell Example | Samantha Bricknell Anuradha Gopu Example | Anuradha Gopu | Website | @AnuradhaGopu Jonatan Ben-Ami Example | Jonatan Ben-Ami Steve Morey Example | Steve Morey Ang CM Example | Download | Ang CM Ose Ndebbio Example | Ose Ndebbio | Website Heather Barlow Example | Heather Barlow Doris Chwist Example | Doris Chwist Isabel Radaelli Example | Isabel Radaelli Karin Lorbeck Example | Karin Lorbeck Neala Spear Example | Neala Spear | Website Elly Henriksen Example | Elly Henriksen Morten Holdt Example | Morten Holdt Sharon Plunk Example | Sharon Plunk Frederic Brewer Example | Frederic Brewer Danny Benton Example | Danny Benton | Website Scott Wilson Example | Scott Wilson Yekaterina Martynova Example | Yekaterina Martynova Andrei Rakitin Example | Andrei Rakitin Laura Gutiérrez Example | Laura Gutiérrez Nick Russell Example | Nick Russell | Website Chris Digital Example | Chris Digital Nathanial Hilliard Example | Download | Nathanial Hilliard Dennis Gifford Example | Dennis Gifford Dwight Daly jr. Example | Dwight Daly jr. Heidi Rocha Example | Heidi Rocha Preethi Ravisankar Example | Download | Preethi Ravisankar Pete Rix Example | Pete Rix | Website Veronica Nalley Example | Veronica Nalley Paul Alders Example | Download | Paul Alders | Website | @paulalders Norma Johnson Example | Norma Johnson Daniel Cañaveral Example | Daniel Cañaveral Erin Carmola Example | Erin Carmola New to the E-Learning Challenges? The weekly 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. 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. If you share your demos on Twitter, please include #ELHChallenge so your tweeps can track your e-learning coolness. Share Your Custom Menu Examples! The table of contents challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.Moving Beyond E-Learning's Next Button #462
Beyond the E-Learning Next Button #462: Challenge | Recap The “Next” button often gets a bad rap in e-learning. It’s commonly associated with linear, information-heavy courses that promote passive learning, leading learners to click through screens without truly engaging with the content. To be fair, the blame doesn’t lie with the Next button itself. Blaming the Next button for boring e-learning is like blaming the Play button for a boring video. For course designers, a good design exercise is to reimagine course navigation without relying on the ubiquitous next button. How would your learners navigate forward and backward? Can you integrate the course content into the navigation? Can interactive objects like sliders, dials, or text-entry fields be used in place of next and back buttons? 🏆 Challenge of the Week This week, your challenge is to show alternatives to using the next button. You can create something new or rework an existing project. Please include the original with your entry if you modify an existing project. Seeing both examples will help users connect the dots between where you started and where you finished. And if you have time, create multiple variations to show how clicks, slides, hovers, drags, and typing can advance learners through the course. 🧰 Resources Check out e-learning challenge #144’s examples to get an idea of what designers came up with in a related challenge. Slide, Drag, and Hover Past the Next Button #144: Challenge | Recap Using Circle Menus in E-Learning #406: Challenge | Recap Interactive Documents with Sliders #300: Challenge | Recap ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new 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 to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: Before you slide into this week’s challenge, check out the audio interviews your fellow challengers recorded in last week’s challenge: Interviews with E-Learning Challengers RECAP #461: 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 weekly e-learning challenges in this Q&A post. 📆 Upcoming Challenges Challenge #463 (05.24): Using progressive disclosure in e-learning. Challenge #464 (05.31): Labeled graphics and interactive markers 🚨 2024 Articulate User Conference Call for Proposals We’re now accepting proposals for this year’s in-person user day conference co-hosted at DevLearn in Las Vegas. Learn more about the proposal process.Show Us Your Custom Navigation Menus for E-Learning #79
E-Learning Menus and Navigation #79: Challenge | Recap Intuitive navigation is an important element in e-learning design. Course designers who stick with default player menus usually don’t have to worry about user interface (UI) design since player manages the navigation. One reason rapid e-learning became so popular with instructional designers is because the tools generated the course menu, freeing IDs to design content rather than program course menus. If there’s a downside to prebuilt menus, it’s that they encourage linear, click-and-read courses. Custom navigation menus, like those often used in nonlinear courses, can permit learners to jump around the course as they choose. But moving beyond traditional menu navigation means course designers need to think more like UI designers. To jumpstart this week's challenge, I’ve rounded up some creative navigation examples your fellow community members have shared. Game Navigation Video game consoles, traditional board games, and tablet-inspired menus are excellent ways to seek inspiration. Game Center Template by Tom Washam Tabs Navigation Tabs are the most popular type of menu navigation we see in courses. They’re highly customizable and can be created using a variety of shapes and styles. If you go with a tabs menu, please cross-post in the tabs challenge. View the interaction | Download (SL2) | Download (SL360) More tabs interactions: Web Style Tabbed Interaction by Phil Mayor Storyline 2: Power Teal E-Learning Template by Tom Kuhlmann Web Inspired Tabbed Interaction by Trina Rimmer Tabz by Przemysław Hubisz Simple, Clean Design: Tabs Template by Nicole Legault 4-Step Tabs Interaction by Anand Timothy Interactive Steps Tabs by Matthew Guyan Menu Template by Nancy Woinoski 5-Step Action Interaction by Kevin Thorn Folder Tabs Interaction by David Anderson Six Tabs Interaction Layouts by Montse Anderson Icon Navigation Icons and graphics are another popular approach to course menus. When used consistently, visual buttons can remove the need for on-screen button labels. If you’re looking for tips on building your own icons, check out last week’s icon e-learning challenge. Flat Design Portfolio by Paul Alders More icon-based examples: Icon-Based Navigation by Tom Kuhlmann iPhone Tabs Timeline Interaction by Montse Anderson Tabs Interaction: Meet the Team by Montse Anderson Animated Menus This mobile-inspired menu includes bookmarking features to indicate completed lessons and a collapsible menu to free up slide space. Storyline 2: Animated Menu by Jeff Kortenbosch More examples of mobile-inspired menus: Inviting Navigation Design by Jackie Van Nice Appetizing Digital Magazine by Kristin Anthony Map Navigation Similar to the icon-based navigation, map themes are a creative alternative to text-based menus. Nicola shared a branching example based on a village illustration. Learning Village Branching Navigation More examples of map navigation: Create Your Own Quest by Jackie Van Nice Challenge of the Week This week, your challenge is to: create a custom menu example for an e-learning course share your favorite UI design tip for building custom navigation menus You can design any kind of menu navigation you like. The focus this week is more on navigation ideas and concepts. Don’t worry about putting together a highly polished menu or interaction. Resources Here are some tutorials and articles that will help you create your challenge demo. The Ultimate Guide to Buttons in Storyline 2 6 Creative Navigation Examples More Than a Dozen Ways to Navigate an E-Learning Course Last Week’s Challenge: E-Learning Challenge Recap #78: Challenge | Recap Wishing you an easy-to-navigate week, E-Learning Heroes! New to E-Learning Challenges? The weekly 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.Using Timeline Interactions in E-Learning #408
Interactive Timelines in E-Learning #408: Challenge | Recap Timeline interactions are a great way to condense a large amount of information into a simple slide while providing our learners a visual way to experience the content. Timeline interactions, like tabs, are similar in that they provide course designers with a visual way to organize and present information. However, there are some differences in how each interaction is designed. While tabs interactions present related content in a non-linear way, timeline interactions present a sequence of content chronologically. Learners can still pull content non-linearly, but the content should follow a chronological order of events or milestones. Challenge of the Week This week, your challenge is to share an example that shows how interactive timelines can be used in e-learning. Related Challenges Interactive Timelines in E-Learning #315: Challenge | Recap Interactive Timelines in E-Learning #246: Challenge | Recap Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new 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 to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. Last Week’s Challenge: Before you make time for this week’s challenge, check out the microlearning examples your fellow community members shared over the past week: Microlearning in Rise 360 RECAP #407: 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. Next Week’s Challenge & Supporting Webinar Next week's challenge #409 (Mar 17, 2023): Showing Progress in E-Learning #409. Supporting webinar (Mar 14, 2023): How To Build a Progress Bar in Storyline 360. Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.Using Interactive Dials as Draggable Menus in E-Learning #355
Using Interactive Dials for Navigation #355: Challenge | Recap Interactive knobs and dials are a great way to simulate real-world objects and tasks in your e-learning courses. To see how course designers use interactive dials, check out the examples in this challenge recap. But what happens when the dial uses a custom graphic or image and is scaled well beyond the slide size? Let’s take a look at a couple of examples. Dials as Draggable Menus In this example, the dial is filled with a custom image and scaled well beyond the slide size. This creates an exciting approach to menu navigation. View the project | Joanna Kurpiewska Dials as Draggable Timeline Interactions Here’s another example using similar techniques. In this case, the custom dial is a circular timeline interaction that lets learners drag through a series of dates. View the example | Eric Chamberlin Challenge of the Week This week, your challenge is to share an example that shows how custom dials can be used for draggable navigation. Resources You can learn more about working with Storyline’s dials in the following articles and webinars. Storyline 360: Working with Dials How I Designed This Interactive Dial Matrix Using Dials to Design Interactive Infographics #261 Webinar: Using Dials in Storyline 360 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 dial into this week’s challenge, check out the colorful ways designers are using Pantone’s 2022 color of the year in e-learning: Pantone's 2022 Color of the Year RECAP #354: 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.Using Interactive Screenshots to Magnify Important Details in E-Learning #267
Interactive Screenshots in E-Learning #267: Challenge | Recap If you’re trying to teach your learners about software, products, or applications, a common way to highlight features and functionality is to use screencasts and software simulations. But sometimes a screencast or simulation is overkill for orienting your learners with an application’s UI or features. That’s where interactive screenshots come in. Interactive screenshots are a great way to orient learners with a big-picture view of an application’s interface, then let them drill down into the details for a particular menu or panel. They’re easy to build, super versatile, and a solid alternative to screencasts or simulations. And they're what this week’s challenge is all about. View example | Download Challenge of the Week This week, your challenge is to create an interactive screenshot for an application’s UI or specific features. Here are a few things to consider when planning your projects: How much of the application will you show? How much do you need to show? How will learners pull the information? Hover? Click? Drag? How can you work additional resources, videos, or practice opportunities into the detailed views? How will learners return to the original screenshot? Last Week’s Challenge: Before you zoom into this week’s challenge, take some time to meet your fellow e-learning challengers in last week’s podcast interviews: Audio Interviews with E-Learning Designers #266: Challenge | Recap Wishing you a great week, E-Learning Heroes! 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.
