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.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.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.16 Navigation Examples That Skip the Next Button #462
Beyond the Next Button RECAP #462: Challenge | Recap This week's challenge asked course designers to show alternatives to using the next button. Jonathan Hill Example | Jonathan Hill | Website | @DevByPowerPoint Thaddaeus Smith Example | Thaddaeus Smith | Website Jeffrey Riley Example | Jeffrey Riley | Website Jodi M. Sansone Example | Download | Jodi M. Sansone | Website | @jodimsansone Thierry EMMANUEL Example | Thierry EMMANUEL | Website Lee Rhyne Example | Lee Rhyne Ron Katz Example | Download | Learn more | Ron Katz | Website Samuel Apata Example | Samuel Apata | Website | @afrostem Chris Hodgson Example | Learn more | Chris Hodgson | Website | @skriss Laura Hansen Example | Laura Hansen Anna Piasecka Example | Anna Piasecka eLearn Dev Example | Learn more | eLearn Dev Andreas Paul Example | Andreas Paul Sean Wright Example | Sean Wright Rebecca Horne Example | Rebecca Horne Jayashree Ravi Example | Jayashree Ravi | LinkedIn 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 write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include #ELHChallenge so your network (and Articulate!) can track your e-learning coolness. Share Your Next Button Alternatives Examples! The next button 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.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 | Recap
