Common E-Learning Interactions: Process and Step Graphics #238
Step Graphics in E-Learning#238:Challenge|Recap Step graphics (also known as steppers)are interactive explanations that make it easy for learners to sequentially walk through a process, workflow, procedure, or related items. They can be used for all types of learning interactions, from procedural training to interactive storytelling. Navigating Step Graphics Using numeric pagination, step graphics are great for chunking complex information into step-by-step explanations that visually organize each step of a process. One of my favorite step graphic examples comes from the Washington Post. View the step graphic(Requires Flash) Challenge of the Week This week your challenge is to build a step graphic to tell a story or communicate a process. Choose any topic you like and see if you can find creative ways to present the step graphic navigation. Last Week’s Challenge: Before you step up to this week’s challenge, take some time to check out the interactive maps your fellow community members shared over the past week: Using Interactive Maps in E-Learning #237: Challenge | Recap Wishing you astep-tasticweek, 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.Storytelling with Animated Text, Images, Sound, and Video in E-Learning #158
Video Presentations and Storytelling #158: Challenge|Recap One of thethings I enjoy most about theweekly challenges is seeing the different ways course designers present content. Looking through the thousandsof examplesusers have shared over the past four years, I noticed that most of the public examples don't look like the typical examples I see behind the scenes when users share their source files with us. And that makes sense because the challenges and Guru contests are an opportunityfor course designers to build something different than what they build in their day jobs. But that doesn't mean there's anything wrong with the typical e-learning courses where text, bullets, and graphics are synced with audio narration. The trickisfinding new variations on that familiar model. And that's what this week's challenge is all about! Syncing Video with Animated Bullets, Text, and Graphics Here are some good examples of animated text and video synced with audio narration. Because the videos don’t include audio, they work as animated pictures that reinforce what the learner is hearing in the audio narration. Example 1 | Example 2 | Example 3 | Dan Sweigert Syncing Text, Graphics, and Images with Audio Narration Here’s an example slide from a series of courses I worked on 10+ years ago. I rebuilt the slide in Storyline 360 to ensure non-Flash users could view the example. The example features animated text, graphics, and photos synced with the audio narration. The on-screen text is minimal and relies on supporting visuals to complement the audio narration. Click image to view the example | David Anderson Challenge of the Week This week, your challenge is to share an example of syncing text, graphics, audio narration, and video in e-learning. You can share any combination of animated elements with audio narration. NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on. Resources Tutorials Storyline 360: Syncing Motion Path Animations Storyline 360: Syncing Animations with Audio Examples and challenges Audio Slideshow Storytelling for E-Learning #130 Screencast Challenge: Working with the Timeline and Cue Points Screencast Challenge Recap: How to Use the Timeline and Cue Points in Articulate Storyline 2 General articles Coherence Principle: Less Material For Better Learning Contiguity Principle: Keep Graphics & Related Text Together Redundancy Principle: Should You Duplicate Narrated Text On-Screen? Use Storyline’s Cue Points to Trigger Animations Last Week’s Challenge: Before you synchronize with this week’s challenge, check out the amazing video quiz examples your fellow community members shared over the past week: Interactive Video Quizzes in E-Learning #157: Challenge | Recap Wishing you an animated 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. NOTE: Please don’t use Google Drive or Dropbox to host your projects. Both companies have announced that they’re no longer going to support HTML projects. You can use our Dropbox file request link to send me your zipped output: https://www.dropbox.com/request/jrqHXAxWwbts234Y4xak. Please include your first and last name and challenge number in the file name: DavidAnderson_122.zipE-Learning Game Design: Development & Review #472
Game Design: Development & Review#472: Challenge | Recap Welcome to the third week of our e-learning game design challenge. Last week, you built a working prototype from your storyboard or design concept. This week, you’ll focus on bringing the core elements of the e-learning game together to create a detailed and functional model. Your game should be far enough along to submit for final QA and testing. 🏆 Challenge of the Week This week, your challenge is to share a fully developed version of the game that incorporates all designed elements, interactive features, animations, and multimedia components. Optional: Since this is our last week of development before submitting the final project, let a few friends or fellow challengers play your game and gather feedback in Review 360. It’s the best way to spot any problems and see what people like or don’t like. I know many of you have been gathering feedback all along, but I’d like to highlight the testing and review process this week. Week 1: Concept & Storyboarding Week 2: Design & Prototyping Week 3: Development & Review Goal: Develop a detailed and functional version of your game Deliverables: Apply and refine the visual design elements Integrate the interactive elements, animations, and multimedia components Refine the visual design and user interface to enhance the overall user experience Submit to Review 360 for user testing and feedback (optional but encouraged) Share a link to your project Week 4: Final Testing & Project Submission 🚨 NOTE: Even if you didn’t participate last week, you’re still welcome to join this week’s challenge. Ideally, you’ll complete all four weeks, but any participation is appreciated. Share what you can. 🙌 Last Week’s Challenge: Before you complete your game design, check out the interactive prototypes your fellow challengers shared over the past week: Interactive Prototypes in E-Learning RECAP #471: Challenge | Recap 👋 New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. 📆 Upcoming Challenges Challenge #473(08.09): Week 4: Final Testing & Project SubmissionWhat do E-Learning Designers Need to Know About Working with SMEs? #474
Working with E-Learning SMEs#474: Challenge | Recap When it comes to building courses, your Subject Matter Experts (SMEs) hold the keys to your success—you can’t do much without them. They’re the folks who not only bring their expertise to the table but also help you fine-tune those storyboards and quizzes and break down the intricate processes that make your training actually work. But here’s the catch: if they’re not fully on board or are dragging their feet, they can quickly become a major headache. The trick is figuring out how to turn those challenging SMEs into your biggest allies. And that's this week’s challenge is all about! 🏆 Challenge of the Week This week’s challenge is to share a short demo or interaction that helps e-learning designers collaborate more effectively with their SMEs. You can take it in any direction you like—whether it’s creating a slide with your favorite quote about working with SMEs, building a microlearning course, or even a whack-a-mole game (SME Edition). ✨ 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 sharing your favorite tips for working with SMEs, take a look at the final examples from the e-learning game show series: E-Learning Quiz GamesRECAP#473:Challenge|Recap 👋 New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article.Use Audio, Music, and Sound Effects in E-Learning #242
Using Audio and Sound Effects in E-Learning#242:Challenge|Recap E-learning audio is more than voice-over narration. Audio includes audio interviews, ambient sounds, natural sound effects, and background music. Used effectively, these can help draw in learners, focus their attention, and fuel their imaginations. And that's what this week's challenge is all about! Gamification Using Ambient Sounds Here's a gooduse of ambient sound effects to pull learners into a dark, mysterious cave. View the project| Learn more|Jonathan Hill Background Music This example usesbackground music combined with button effects and audience “oohs” and “aahs” help simulate a game show quiz. View the project|Montse Anderson Challenge of the Week This week, your challenge is to share an example that uses ambient sounds or background music in e-learning. Last Week’s Challenge: Before you turn up the volume on this week's challenge, check out the interactive soccer examples your fellow challengers shared over the past week: Soccer Interactive Graphics #241: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.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 excitingapproach 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 fordraggablenavigation. 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 2022Color 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 Accordion Interactions to Group Related Content in E-Learning #227
Accordion Interactions in E-Learning#227:Challenge|Recap Accordion interactions are a great way to group a large amount of related content into single slide. Similar to tabs interactions, accordions let users explore content using vertical or horizontal layouts. Accordions can be used to progressively reveal bullet points, quiz questions, module introductions, and summary slides. They're super flexible and they're what this week's challenge is all about! 6-Tab Animated Accordion Here's a free template to get you started this week. Using motion paths and a variable, this template animates the opening and closing of the tab buttons. View the project|Download the template Conditional Next Button Accordion interactions are similar to tabs, but they introduce a level of complexity with the duplicated buttons. If you need to lock or restrict navigation until the learner visits all tabs, you'll have to approach things a little differently. Here's one way to add conditional navigation to your interaction. View on YouTube Challenge of the Week This week, your challenge is to share an example that demonstrates how accordion interactions can be used in e-learning. NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on. New Entries Only! We hosted the first accordion challenge two years ago. To keep things fresh, we’re asking that you share only new examples this week. You’re more than welcome to re-work a previous example. Last Week’s Challenge: Before toggling over to this week’s challenge, take some time to check out the interactive timelines your fellow community members shared over the past week: Zooming and Magnifying Techniques #226: 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.Creating Roulette & Spinning Wheel Games in E-Learning #458
Roulette & Spinning Wheel Games#458: Challenge | Recap This week’s challenge was inspired by a recent community discussion by Troy Westphal. Troy created a roulette game using true/false variables to determine if the roulette’s spinning wheel selected red or black. Walt and Tom jumped in with ideas and tutorials to help troubleshoot Troy's source file. While Roulette games aren't a common interaction in e-learning, they present fantastic ways to flex our variables muscles. And that's what this week's challenge is all about. 🏆 Challenge of the Week This week, your challenge is to create a roulette-type game that involves spinning and randomization. You can create a literal roulette game or anything that captures the essence of the game. Ideas and Possible Projects Here are a few ideas to help you get started. Remember, you’re not limited to only roulette games. The objective this week is to combine spinning effects with randomization. Lottery Number Generator: Create an interaction to generate a set of random lottery numbers based on learner inputs or random numbers. Slot Machine Games: Create a slot-machine game where learners can spin the reels using sliders, dials, or simple buttons. Wheel of Fortune Games: Create a game based on the popular TV show. Examples of Spinning Interactions Here are a few examples of different approaches to this week’s challenge. ELC444: Example by Nichole Codrington ELC405: Example by Natalie Friedman ELC334: Example by Emmy Buxengard ELC311: Example by Owen Holt ELC278: Example & download by Samuel Apata ELC275: Example & download by Samuel Apata 🧰 Resources User Guides Storyline 360: Working with Variables Storyline 360: Adding Variable References Storyline 360: What "Object Loses Focus" Means Webinars Overview of Variables in Storyline 360 Using Text Variables in Storyline 360 Using Number Variables in Storyline 360 5 Ways to Personalize E-Learning Courses Using True/False Variables in Storyline 360 ✨ 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 spinning random ideas on this week’s challenge, check out the creative ways your fellow challengers combined three or more challenges: Mix-and-Match Challenge Examples RECAP #457: 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. 🚨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.New Employee Orientation and Onboarding in E-Learning #389
Onboarding and New Hire Training#389: Challenge | Recap Employee orientation training is one of the most popular types of e-learning. Onboarding is typically the first training employees encounter at their new company, so it’s essential to get it right. What should you include in onboarding training? What does onboarding training look like? Well, that’s what this week’s challenge is all about. Challenge of the Week This week, your challenge is to create an onboarding example for new employees. You don't need to build a comprehensive onboarding course. Instead, we want to see different approaches for onboarding new employees. For example, using placeholder content, you can create your demo for a fictional or real company. Or, develop your onboarding demo for your own e-learning company. Who knows? You may need to onboard some new course designers one day. Designing Onboarding Using Common E-Learning Interactions I always enjoyed building onboarding training because of the mix of instructional and interaction design. The course design begins with the content topics and lessons. But when you're ready to dive into development, common e-learning interactions can help you with the presentation design. Employee Orientation vs. Onboarding (See challenge #385 for ideas) Onboarding Checklist (See challenge #291 for ideas) Onboarding Journey Map (See challenge #255 for ideas) Meet the Team & Interactive Org Charts (See challenge #244 for ideas) Onboarding Scenarios (See challenge #365 for ideas) Orientation Tour of the Corporate Campus (See challenge #379, challenge #371, and challenge #337 for ideas) Safety Orientation & Procedures (See challenge #309 for ideas) Resources Here are some articles, examples, and webinars to help you with this week’s onboarding challenge. Webinar: How to Build Onboarding Training in Rise 360 Article: 5 Creative Ideas for Revamping New Hire Onboarding Examples: 5 Fresh Onboarding Examples & Templates 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 launch this week's onboarding challenge, check out the personality games and quizzes your fellow challengers shared over the past week: Personality Games and Quizzes in E-Learning#388: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.Audio Interviews with E-Learning Challenge Heroes #461
Interviews with E-Learning Challengers#461: Challenge | Recap 🏆 Challenge of the Week This week, your challenge is to create an audio podcast or interview on the value of working out loud and showing your work in the E-Learning Challenges. You can share your examples using any app or platform. In the past, designers have used Rise 360, Storyline 360, SoundCloud, and Vimeo to host their examples. OPTIONAL: After sharing your example, summarize your answers on your blog, LinkedIn, orcommunity forums. Podcast Interview Questions The following list of questions should be enough to help you get started. You can choose any number of questions to use in your demo. If you only have time for one question, great! If you want to do more, great! Advice for Others Community Aspect What advice would you give to someone just starting the challenges? How can new designers make the most of the experience? What are some best practices for giving constructive feedback? How can designers balance challenges and client work? Why would you recommend participating to other designers? What has the community support and interaction meant to you? Have you collaborated with other designers or made connections? How has being part of the community impacted your design work? What types of examples or topics would you like to see in the future? How could the challenge experience be improved or evolved? Favorite Challenge Example Design Process Which challenge example are you most proud of and why? What example did you find the most creative or innovative? Which example required the most effort or was the biggest challenge? Is there an example you wish you could redo or improve? What feedback on your favorite example helped you grow as a designer? How do you come up with ideas for the weekly challenges? What is your typical process for creating a challenge example? How do you decide which authoring tools or interactions to use? How much time do you usually spend on creating an example? Do you have a dedicated workspace or tools for e-learning design? Inspiration Learning Experience Which other designers' examples inspire you the most? Are there any examples that made you think, "I wish I had done that!"? How have the challenges exposed you to new techniques or authoring tools? Have you incorporated ideas from the challenges into real client projects? What tips would you give for overcoming creative blocks when working on challenges? What have been the biggest lessons or takeaways from participating? How have the challenges helped you improve as a designer? What skills have you developed further through the challenge process? How has feedback from the community benefited you? What keeps you motivated to participate week after week? Benefits of Showing Your Work Time Spent on Examples Why is it important for designers to share examples publicly? How has sharing your work benefited you professionally? What lessons have you learned from getting feedback on your examples? How do you decide what examples to share publicly or keep private? Have you ever collaborated after connecting over shared work? Which platforms or channels have been most effective for showcasing your work examples? How do you balance sharing enough work to benefit your career while protecting intellectual property? What is the breakdown of time (ideation, building, testing, etc.)? How do you estimate time required for different example types? What strategies do you use to work efficiently with limited time? How have regular challenges helped you get faster at development? Do you set aside dedicated time or fit it in around client work? What has been your most time-consuming example and why? How do you balance depth/quality vs. time invested for portfolio pieces? 🧰 Resources Check out the previous audio challenges to get an idea of ways to present your audio interview: Audio Interviews with E-Learning Designers #364: Challenge | Recap Podcast Interviews with E-Learning Designers #266: Challenge | Recap Instructional Design Podcasts #67: 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 click record on this week’s challenge, check out the creative toggle button examples your fellow challengers shared over the past week: Toggle Buttons in E-Learning RECAP #460: 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 #462(05.17): Click. Hover. Drag. SeeELC144for a general idea of what we're doing. 🚨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.
