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.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 | RecapUsing 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 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.How Do E-Learning Designers Show Learner Progress? #409
Showing Progress in E-Learning #409: Challenge | Recap Progress bars are a great way to help learners stay on course by highlighting what they've completed and how far they have left to go. As course designers, you have many ways to display learner progress. There are bars, gauges, badges, page numbers, and more. Progress designs can be playful, functional, or visually aligned with the course content. No matter which design approach you use, keeping learners on track is what this week's challenge is all about! Challenge of the Week This week, your challenge is to show how progress indicators can be used in e-learning. Related Challenges Using Progress Indicators in E-Learning #368: Challenge | Recap\ Badges and Awards in E-Learning Courses #280: Challenge | Recap Using Progress Bars in E-Learning #224: 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 progress through this week's challenge, check out the interactive timelines your fellow community members shared over the past week: Interactive Timeline Examples RECAP #408: 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 #410 (Mar 24, 2023): Webcam Video Presentations. That's only a working title. We're looking for webcam video presentations to highlight a project or technique you used in a course. See this example from Kate to get an idea of what the challenge will be about. 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.Custom Bookmarking and Conditional Navigation in E-Learning #390
Conditional Navigation in E-Learning #390: Challenge | Recap “How do I restrict navigation until one or more modules are viewed?” How do you lock navigation until the learner views all content in Storyline 360? This is a question that crops up time and again in the community. And for good reason. When you’re getting started in Storyline, you learn to use visited states to evaluate when all items on a slide have been clicked. This is easy and doesn’t require advanced triggers or variables because everything is happening on the same slide. But when you’re working across multiple slides and need to restrict navigation, you’re going to need variables. There are many ways to tackle this challenge. You can use text, number, or true/false variables. Whichever approach you take, this is a common task every Storyline designer should know how to do. And that’s what this week’s challenge is all about. Challenge of the Week This week, your challenge is to share a conditional navigation or bookmarking example to show how variables can be used to track learner progress. If you’re new to Storyline or haven’t worked with variables, you can still participate. Post your question in the community and let us know where you’re stuck, and we’ll help you out. Resources Article with tutorials: The Answer to the Community’s Number 1 E-Learning Question Webinar: Using True/False Variables in Storyline 360 Download: Custom Bookmark Menu Using Progress-Tracking Variables User Guide Storyline 360: Adding Variable References Storyline 360: Working with Variables Storyline 360: Adding Conditions to Triggers 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 navigate this week’s challenge, check out the new hire orientation and onboarding examples your fellow challengers shared over the past week: New Hire Training Examples RECAP #389: 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.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 Button UI Kits to Jumpstart E-Learning Course Development #360
Button Starter Kits for E-Learning #360: Challenge | Recap Stop Designing from a Blank Canvas! Get a Jump Start on Your Next E-Learning Project with Button Starter Kits Fantastic starting point for many e-learning projects Mock up projects with button kits to give clients a general idea of how the course will look Customize the buttons after you’ve decided on the general design and layout Save development time by using existing buttons Today’s authoring tools make developing e-learning easier than ever. However, that doesn’t mean course designers always have extra time to play with new design ideas, much less start every project from scratch. The goal for most designers should be to find ways to reuse common course elements like content slides, quizzes, interactions, and, of course, UI elements. We have already looked at course starter templates and how they can help designers create a general structure for their projects. This week, we’re going to look at a smaller component of course starters: button kits. Button Starter Kit Example Here's an excellent example of a button starter kit that contains prebuilt buttons for navigation, quizzing, and content slides. Example | Download | David Lindenberg | Website | @dvdlindenberg Maija Perfiljeva Maija's button starter kit comes in two colors and features a rich collection of core button styles, including radio buttons, checkboxes, and toggle buttons. Red: View project | Download | Blue: View project | Download | Maija Perfiljeva | Website | @GamayunTraining Challenge of the Week This week, your challenge is to share a button starter kit using common button styles. Include as many different button types and styles as you’d expect to use in a typical course. Resources The Ultimate Guide to Buttons in Storyline 360 Tips for Designing Buttons That Scream “Click Me!” Everything You Need to Know About States 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 get started clicking this week's challenge, check out the Valentine's-themed examples your fellow challengers shared over the past week: Love-Themed E-Learning Examples RECAP #359: 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 Virtual Tours and Field Trips in E-Learning #379
Virtual Tours in E-Learning #379: Challenge | Recap Virtual tours are a fantastic way to enable learners to discover and explore remote spaces—just like they would if they were on a real-world field trip. Virtual tours can be self-guided, so learners can choose the areas of interest to explore and dig into the details to learn more. Virtual tours can also be structured through conditional navigation or a compelling host who guides learners through each location. No matter which design approach you take, virtual tours are an essential activity to include in your e-learning toolkit. Before jumping into this week’s challenge, let’s look at some interaction types to help you design your virtual tours. Interactive Map Tours Interactive maps are a popular explore-type activity to guide learners from one point to another while sharing information about each location. Maps designs are super flexible and include everything from simple graphics and illustrations to rich media, including photos and video. Interactive Maps in E-Learning #314: Challenge | Recap 360° Virtual Tours Storyline’s 360° image feature enables course designers to create even more immersive tours and explore-type activities. Check out the examples featured in the recap to get an idea of what’s possible with this new feature. 360° Images in E-Learning #337: Challenge | Recap Challenge of the Week This week, your challenge is to share an example to demonstrate how virtual tours can be used in e-learning. 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 take your learners on a tour, check out the creative examples from last week’s challenge: Choose Your E-Learning Challenge #378: 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.
