This page links to samples of interactive graphics, simulations, and other materials from many different sources. These are not examples of my work. Maybe they’ll give you ideas for your own projects.
More examples: See the elearning examples category on this site.
Simpler interactions
These don’t need lots of Flash wizadry. Most use photos and some illustrations. Many of these demonstrate how good visual design can make a simple animation more effective.
- Learn to kern. A learn-by-doing interaction to help web developers improve the display of text.
- Timeline of US history. Clever combination of clickable map and timeline.
- A Seat at the Table. You make decisions that affect your ability to get enough food. Done in Flash but could easily be created with simpler tools that support branching.
- The Wealthiest Americans Ever. Excellent graphic design makes a simple rollover impressive.
- AIDS at 25. Simple graphs and photos tell a compelling story.
- Turning a Corner?. Clear explanations make this animated graph about economic cycles easy to understand.
- Choose a Different Ending. Video that uses YouTube’s linking annotation feature to create a compelling first-person story (warning: uses some violent content to deliver an anti-violence message).
- Forest, Fields and the Falls: Connecting Minnesota. Lush illustration and real-life stories make this somewhat simple interactive compelling.
- Amazing Girls. Photos with audio interviews of high-achieving high school students. A similar format could be used to introduce a company’s culture to new employees.
- RSS in Plain English. Not interactive, but a clever and low-budget approach to a video demonstration that uses pieces of paper. They describe their equipment briefly here.
- Birth of a Tornado. Explanation is provided by text that’s placed near the graphic–the efficient and cost-effective alternative to audio.
- Laptop ports. Review the ports, then click on the port you would use for each task. Lets you explore the laptop and skip what you already know.
- Crimescene game. Simple branching scenario in which you interview a teller after a bank robbery. The page includes several versions of the game with different production levels.
- A. Pintura, Art Detective. You help determine the painter of a mystery picture. Good example of branching while not the strongest example of graphic design.
More advanced interactions
The samples below include panoramas, multiple layers of navigation, or more sophisticated animation.
- Join the Mouse Party to learn how drugs affect the brain.
- National Museum of Australia. Several Flash activities, including ones that have you explore mystery objects or create your own museum exhibit.
- National Geographic map games. Flash games that reinforce map-reading skills.
- The Wright Brothers: First in Flight. Interesting mix of interactive panoramas, still photos, and text.
- What Is a Print?. Make four types of prints in this fun interactive from the Museum of Modern Art.
- The Elegant Universe. A PBS site on string theory. Try “Multidimensional Math.”
- Explore the Concorde. Includes interactive panorama, narration, text. Much more interesting than a guided tour.
- Homestand. Behind the scenes at a baseball game. Includes real video animations of players; you choose an action for the player to demonstrate while captions explain the rules.
- The Making of a Brick. Shows how Legos are made. The text is hard to read, but the cartoon incorporates video in an interesting way.
- Is It Better to Buy or Rent? Interactive graphic that lets you input data to see when it’s better to buy a home. Much more efficient than pages of text-only explanation.
- Peter Packet. Help Peter Packet deliver information that will improve lives in developing countries, and learn about the Internet as you play.
- Crash Scene Investigation. Use trigonometry, physics, and geometry to figure out what happened at an auto crash scene.
- Skeleton game. Drag the bone to the right area of the body. Explore the site to try many other games.
- Blood typing game. Figure out each patient’s blood type and give them the right transfusion before it’s too late. Simple graphics but compelling situation.
Simulations and branching scenarios
- Connect with Haji Kamal. Can you help a young lieutenant make a good impression on a tribal leader in Afghanistan?
- CameraSim. Change the aperture and other settings and see how that affects your photo.
- Mi Vida Loca. Learn basic Spanish vocabulary in realistic settings while a mystery unfolds.
- Better Business Choices. Can you create a business that’s profitable, responsible, and sustainable?
- Design a Cell Phone. Use market research to design a popular phone that will fit a certain budget.
- The Great Flu. Choose a flu and try to prevent it from becoming a global pandemic.
- Industry Player. Two business simulations: download (Windows) and browser-based.
- Many simulations of health and disaster scenarios.
- Bricks or Clicks. You’re the CEO of a toy manufacturer about to launch an online sales channel. Mix of text and interactive graphics.
- Lead an army troop. You’re a junior-level officer in charge of a battalion in a country like Iraq or Afghanistan. Third-person, highly produced video simulation.
- The POD Game. Dispense drugs and medical advice to people during an emergency.
- Airport security. You’re an airport screener. Can you correctly identify risky items hidden in baggage? Uses actual X-ray images of dangerous devices.
- Trade Ruler Game. Simulates international trade. Simple graphics but complex topic.
- Aftermarket profit potential. Read a paper about the aftermarket profit potential for products and services, then experiment with several types of offerings.
- Nursing simulation. You’re a nurse and need to make decisions about two patients.
- Global warming simulation. You’re in charge of development decisions in Brazil. The decisions you make speed or slow global warming.
- Manage the budget of France. French-language simulation that requires you to balance the country’s budget and win parliamentary approval.
- Virtual Trader. Practice trading stocks under real market conditions.
Vendor demonstrations
- Clearly Trained. Custom Flash interactions.
- Allen Interactions. Several course demos (registration required).
- SuddenlySmart cruise sales training (demo of learner-centric design).
- Jellyvision interactive conversations. Answer questions from a lively, witty character. Intended for marketing but the same approach could be used in elearning.
- Fluent in Finance course by Enspire.
Artistic and political
- Folksongs for the Five Points. Drag five points around the streets of New York’s Lower East Side and hear sounds from all points simultaneously. Use the mixer at the bottom of the screen to change the mix or stop individual sounds.
- Suspended Life. Essentially a PowerPoint-like presentation based on a comic. Notice how much use the artist gets out of a small collection of images.
- Billy Collins Action Poetry. Animations interpret the poetry of former US poet laureate Billy Collins. Shows very evocative ways to visualize text.
- Their Circular Life. Drag a pointer around a circle to advance through photos and audio of an everyday scene in Italy.
- The Story of Stuff. Combines video of a human presenter with line art to show the impact of consumerism. Not interactive, but an interesting approach to persuasion.
More collections
- E-learning Examples compiles many interactive graphics, infographics, multimedia stories, and some corporate elearning courses. An inspiring resource.
- 40 Useful and Creative Infographics
- Instructional Design by Example posts contributors’ examples of elearning. Post one of your courses!
- The Blog of e-Learning Tyro has a collection of elearning demos.
- Communication Arts runs a yearly competition for interactive media; view the 2007 winners here.
- The Learning Circuits Blog has several links here.
- See the E-Learning Showcase at the Centre for Learning and Performance Technologies
