Four Quadrants of Design Intersect in Top Learning Games

Written By

Pamela Hogle

August 10, 2017

Expertise in game design is not enough to create a stimulating learning game. A successful learning game demands the intersection of four quadrants or areas of design: game design, instructional design, user interface design, and user experience design.

Sharon Boller, the founder and president of Bottom-Line Performance, delivered this message as part of her presentation on designing learning games for mobile phones at The eLearning Guild’s FocusOn Learning 2017 Conference & Expo in June. But her message is bigger than mobile; it is a takeaway that all learning game designers—as well as instructional designers who are creating learning games—should take to heart.

The four quadrants

Each of the design areas addresses a different, but equally vital, aspect of the learning game:

  • Game design—For a learning game to be engaging, it needs game elements (story, a challenge, rules) that enable players to achieve a goal.
  • Instructional design—A learning game must meet a specific learning need in a way that is appropriate and relevant to the target audience.
  • User interface (UI) design—The user interface is the appearance of any object or software product; it contributes to branding and implements the layout and hierarchy of information decreed by the UX design. The UI provides visual cues to players as they navigate the game.
  • User experience (UX) design—Often confused with or lumped together with user interface, the user experience refers to the way players interact with the game or software. It includes designing navigation and flow—the logistics of how people play and get from one part of the game to the next—which the UI designer implements. "(Editor's Note: You must be a member of The eLearning Guild to access the Conference Archive, but membership is FREE!)"

Principles and goals: Game design

Game designers can choose from a vast array of game elements and dynamics; successful designers select appropriately and use moderation. Adding more bells and whistles does not improve the design.

The essential elements of a game, according to Boller and Karl Kapp in their book, Play to Learn, are: a goal or challenge; rules; interactivity with the game environment, with other players, or with both; and feedback mechanisms. The game results in a quantifiable outcome: winning, losing, reaching a target, etc.

A clear challenge or goal is essential to creating a game that learners will want to play; a learning game needs a goal that ties in with a learning objective that is relevant to the players. This might entail learning a skill or mastering specific knowledge. A game designed around multiple dynamics or goals can easily become too complex. To keep players engaged, a game should incrementally present more difficult goals and challenges. It should start off easy and gain complexity as players improve.

Keep the rules relatively easy to learn. Requiring players to invest enormous effort in learning how to play, or remembering intricate rules that have nothing to do with the goal, is likely to frustrate them and drive them away. The rules must be clear and provide structure; they must be fair and assure all players that they have an equal chance of succeeding, according to Kapp and Boller. Many games provide constant feedback. Players can easily tell where they stand relative to other players or to achieving their goals.

Many multiplayer games pit players against one another in a competition, but this is not an essential element. Collaborative or cooperative games are also engaging, and they might be more in line with corporate learning goals that emphasize team efforts.

Principles and goals: Instructional design

Good instructional design (ID) does not fall by the wayside simply because the instruction is occurring inside of a game. Learning goals should be clear, and the gameplay must not only present the needed information but also enable learners to master skills or understand and retain information that is germane to those goals.

Principles of instructional design that facilitate learning and retention work in games: Use stories, trigger learners’ emotions, figure out how to motivate them to engage. Balance the cognitive load, and provide opportunities for learners to practice new skills or test their recall of information. Provide feedback; this can be done using game elements, like leveling up and earning points. It can also be done with knowledge checks or quizzes, or by having learners complete specific knowledge- or skill-based challenges within the game framework.

Principles and goals: UI design

A key to successful user interface (UI) design is to use common conventions. For example, don’t stray too far from conventional icons, particularly when designing for mobile, since players are unlikely to have text menus available.

 

This icon, or something very similar, is the “hamburger” icon used for menus. Don’t try to be clever and use a different image for a menu or, worse, use the hamburger to mean something other than a menu.

A left-pointing arrow takes users to the previous screen; the arrow can be more square or angular, but the idea of a left-pointing arrow should be familiar to players.

 

What does the gear icon represent? Using it for something other than “settings” or “options” is likely to confuse—and frustrate—users.

 

Assume that learners will make mistakes, and provide a clear, obvious way to back up and correct those errors. Be aware of the impact of different visual styles; choose colors, fonts, and design elements that that suit the game and work with the company’s branding and image.

Principles and goals: UX design

When designing the user experience (UX), it’s vital to put yourself in the shoes of your learner or player. If the game will be played on a variety of devices, Boller advises designing for the smallest screen. This will ensure that “touch targets,” things like buttons or fields, are not so small or close together that players will frequently hit the wrong target. Some aspects of UX, such as appearance and placement of buttons, overlap with UI; there is no clear boundary between these design areas, and the same person often does both.

In the same vein, UX design should consider how people will use both the game and the device, and be intuitive and clear: Don’t include a lot of details and clutter; don’t ask smartphone users to type large amounts of text; understand that people generally hold their phones in a vertical position, and ensure that the design works that way—as well as horizontally for laptop users.

If you add visual or audio effects, make sure that they will work on a variety of devices. The best way to do this is to test on several devices—large and small smartphones, various models of tablets and laptops.

A final tip

In her FocusOn Learning talk, Boller told her audience that getting the design right often requires several iterations. That means that besides testing out how it looks and works on different devices, designers need to recruit testers—users who are part of or who resemble the target learner group. It’s best to test on actual learners who will play the finished game. The earliest iterations can be on paper; wireframing is a great way to conceptualize a design. Sketching the layout for a tablet and phone can help identify flaws like too much text or too many buttons to fit on the smallest smartphone screen. 

"(Editor's Note: You must be a member of The eLearning Guild to access the Conference Archive, but membership is FREE!)"

More Design

You May Also Like