Elearning samples

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

Interactive documentary example

Storyplanet: Big River Rising

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.
  • The Scale of the Universe. Zoom in and out to see the relative sizes of things in our world.
  • A Workout at Work. Simple animations demonstrate workouts you can do at your desk, with ratings by viewers.
  • Kowloon Walled City. Explore the former walled city through video, text, and clickable images. (On a Mac? Use Safari.)
  • The Wealthiest Americans Ever. Excellent graphic design makes a simple rollover impressive.
  • The Surveillance Economy. Simple clickable graphics and a standardized format for information make it easy to explore and understand a complex topic.
  • The Serve: Creating Racket Speed. Illustrations and narration show tennis players’ body movements combine to create a high-speed serve.
  • 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.
  • 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.
  • Six Famous Thought Experiments. Also not interactive, but shows how animation and humor can be used to explain abstract concepts.
  • 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.

More advanced interactions

Example of elearning activity

Blood Typing Game from Nobelprize.org

The samples below include more complex navigation or sophisticated animation.

  • Join the Mouse Party to learn how drugs affect the brain.
  • 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.”
  • 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.
  • 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.

video branching scenario example

Choose a Different Ending from droptheweapons.org

Simulations and branching scenarios
For scenario design tips and more examples, see the scenarios category of this site.

  • Connect with Haji Kamal. Can you help a young lieutenant make a good impression on a tribal leader in Afghanistan?
  • 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).
  • Spent. You’ve lost your job and are running out of money. Can you get a new job and stay afloat?
  • Inner Vision. Keep fictional characters from killing themselves. Basic images but intelligent script; some language not safe for work. This was done in Flash but could easily have been produced in a more basic tool like Twine.
  • 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.
  • Design a Cell Phone. Use market research to design a popular phone that will fit a certain budget.
  • Leadership and Team Simulation: Everest. Make decisions as you lead a team climbing Mt. Everest.
  • 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.
  • 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.
  • 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.
  • Manage the budget of France. French-language simulation that requires you to balance the country’s budget and win parliamentary approval.

Vendor demonstrations

Artistic and political
Screen shot from Their Circular Life

  • 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.
  • Dangers of Fracking. Unique approach to scrolling reveals details about how hydraulic fracking works.
  • Turning a Page, the Joseph Herscher Way. Labelled photo explains a complicated chain of reactions used to turn a page of a newspaper.
  • 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.

More collections

x
Scenario design workshops

This September and October! Click here to learn more.