Interface Inspirations for Web-Based Training Development from Games

When designing interfaces for WBT (web based training), practical controls exist in almost every module: Play, Stop, Pause, Next, etc.  Although quite functional, these controls are passive options that help us drudge through the material.  What many designers are missing is the opportunity to use an accepted part of web based training and elearning to add interactivity.

As we look for inspiration in interface design for web based training (from vehicle gauges to smart phones), an excellent source that creates interactive interfacing as its lifeblood is the video game industry.  Video games live and die on interfaces – they’re one of the most essential functions because it’s how the player interacts with the environment.

Consider FarmVille, a wildly successful Facebook game that probably pops up far too many updates from your friends than you care to see.  It has a simple interface that informs you of your farm’s status.  Click the button with an image of a hoe, and you start to plant.  Easy, huh?

One of the simplest interfaces in the world is one that doesn’t appear at all!  The ever-popular Angry Birds displays a slingshot with a bird waiting patiently in the band – and an environment of breakable-looking objects.  It doesn’t take more than a moment to start slinging birds across the screen with the touch of your finger, watching your score get ever-higher.

In more advanced games, facial expression technology is a relatively new feature.  With Elder Scrolls IV: Oblivion, you can interact with your world by using ‘Persuasion.’  When speaking with characters, they will react to what you say by appearing happy, upset, neutral, or possibly confused.  You can use those cues to make the right choices (to get items for cheap, or to avoid a fight, for example).

How can we draw inspiration from these games?  Let’s think about sales training.

• One goal is to say the right thing to make a customer satisfied.  What happens when the wrong thing is said?  You might get an unhappy customer.  Consider branching scenarios where, depending on the learner’s input, a customer becomes happy or upset in real time.

• Or, create icons of products to show to a customer, rather than having the learner choose a line of text out of a multiple-choice option.  Perhaps each part of the product is clickable, allowing the learner to describe features to the customer (some relevant, some not).

• What about the interface in elearning that doesn’t appear?  A video or image of a customer browsing products appears with several clickable objects – the products, a disorganized shelf, a mess on the floor, and the customer.  The learner must do something, and likely clicking the customer first to interact with her is a good option.

Next time you’re sitting down to a game of Call of Duty, or watching your aunt play Bejeweled, watch how interactions unfold.  You might be surprised at how games mirror instructional design principles.

Learn more about our web based training.