Inhis book Tapworthy: Designing GreatiPhone Apps, Josh Clark defines the three different mindsets of the mobileuser: “I am microtasking,” “I am local,” and “I am bored” (see References). Iagree entirely with these categories and their descriptions, and therefore,every time I design a mobile learning solution I try to cater to these threeframes of mind. One effective approach is to rely on the best practices ingame-based design and the key considerations for multi-device applications.
First things first
Bibliographicalresources and research evidence about the impact of video games in educationare abundant. Much has been said about their potential benefits on the learner´s engagementand cognitive-skills development. Many educators and L&D professionals havereported how the use of video games has resulted in higher levels ofparticipation and has improved performance. But, what are the key ingredientsof a successful game-based learning experience?
Iwill try to avoid broad terms like “engaging,” “interactive,” or “relevant” toanswer this question. While these characteristics somewhat describe the type ofexperience we seek to design, sometimes it is difficult to clearly grasp whatthey really mean or encompass. As stated by Ethan Edwards (see References), these words arenot enough to describe what makes a game a real learning experience.
Take forexample Jeopardy!-like educational games. They are engaging because theinterface is visually attractive. They are interactive because they involveactions from the user, such as identifying the most suitable answer. And they arerelevant because they base the questions on real information and facts. But, isthat the type of activity our learners will be doing as part of their daily tasks?
Don’tget me wrong, please. Question-based games can work well in some situations,and their effectiveness as an instructional strategy will depend heavily on howthe questions are structured. However, before jumping into software options toaddress a training need, we need to carefully think about two key questions:
- Isa game the right mediumfor the learning objective?
- Canyou elicit the relevant behaviors in a game? (see Hussain inReferences).
Thesequestions are the foundation for designing effective game-based experiencesthat:
- Aim at eliciting certain behaviors from the learnersor at developing specific skills. The game focuses on the actions the learners mustperform in order to acquire new abilities.
- Address learners´ attention to a single task thatresembles a real-world situation so they can make a successful transfer totheir work.
- Have concrete, achievable, and rewarding goals toclearly define the game rules.
- Allow the learners to do something with the content,for example, practicing strategic decision-making.
- Include different levels of difficulty thatconstitute a challenging path towards the final goal and the skill mastery.
- Provide feedback about the consequences of actionsand arouse learner’s emotions.
- Reinforce a real-world need through scoring (see Bollerin References).
- Allow for replay ability. “Games for learning are most effective when multiple sessions areinvolved. This means the ability to play again with another strategy or anotherapproach” (see Kapp in References).
There are, of course, more considerations to bear inmind when designing a game, such as the story, the aesthetics, and the gamemechanics and elements. But these are the core aspects to create educationalgames that live up to their goal.
Case study: Hazardous Time Killer
Somemonths ago, I designed a game-based experience that I named “Hazardous TimeKiller” for one of my clients. They needed to help the company´s staff managetime and work overload more effectively and they were curious about the applicationof game design principles to this specific training. I will share with you theinitial mockups to illustrate some of the key ingredients of a successfulgame-based learning experience.
Figure1 shows a set of questions with a timer; this was a possible first solution.But, were employees expected to answer a number of questions as quickly aspossible as part of their jobs or did they actually need to learn how toprioritize tasks and better manage their time?
Figure 1:This initial item and timer format wasn’t relevant to the task being taught
Theactual need, of course, was for the learners to be able to prioritize tasks andbetter manage their time. After revision, this became a timed drag-and-dropinteraction that asked learners to prioritize their activities, in order toautomate this behavior and reinforce decision-making skills (see Figure 2). Asthey advanced through the game, learners had to make decisions more quickly andfaced more difficult or controversial situations.
Figure 2: This timed drag-and-drop interaction helps learners understandhow to organize their daily tasks more effectively
Figure 3 shows the design mockup for an impactful andemotive feedback (red panel). It portrays a realistic consequence when thelearners are unable to organize their daily tasks effectively. In this way, learnerscould establish a connection between this activity and a real-life event. Thisis very different from the ineffective feedback style shown in the rejecteddesign mockup in Figure 4, which does not identify consequences of “spendingtoo much time on Facebook.”
Figure 3: Emotive feedback portraying a realisticsituation
Figure 4: This type of feedback doesn´t help learnersproperly evaluate the outcome of their choices
Figure 5 shows how scoring can motivate learners toimprove their game. As learners got better at organizing their daily tasks,they gained extra time. They could evaluate the positive result of theiractions and this had a direct influence on their daily routine. You can see howdifferent (and more motivating) this is, compared to the feedback in Figure 4.
Figure 5: Instead of simply scoring points, learners gotextra minutes every time they organized the tasks quickly and effectively
Learning anytime, anywhere
Now that we understand the key ingredients of asuccessful educational game, it is time to optimize it for mobile delivery. But,be aware that not every game will be suitable for smaller screens and differenttypes of user input. These considerations can guide you through the process ofcreating mobile-enabled games:
Consider the delivery method
Until recently, Adobe’s Flash was one of the mostreliable technologies used to create highly interactive experiences. However, Flashdoesn´t run in the iOS mobile browser so we need to break ourselves of theusual practice of publishing only Flash-based output. Even though there aresome workarounds to view Flash content by using iOS devices, we need to adopt evolvingtechnologies such as HTML5 to create seamless cross-platform experiences.
Some may argue that HTML5 and related technologieslike CSS and JavaScript cannot yet offer high-performing user experience asnative apps. But they can definitely assist us in the development of multi-deviceapplications.
Consider varied screens
We have to be prepared tosupport a surfeit of resolution sizes and pixel densities among mobile devices.This means that we need to adjust our canvas to fit different viewports and youcan accomplish this by creating fluid layouts with HMTL5 and CSS3. You can solvemany problems posed by multiple display resolutions by integrating the threecore ingredients of responsive design: 1) a flexible, grid-based layout, 2)flexible images and media, and 3) media queries (see Marcotte in References).
Consider user input
Aside from different screen resolutions, we alsoneed to consider how the users’ interactions with desktop applications differfrom the way they interact with touch-enabled screens. If you are accustomed toplaying online games on your PC, you know how useful some keys or keycombinations can be to earn more points faster, to be able to perform complextricks, or to reach higher levels. Likewise, many game players use the rightbutton of the mouse as a shortcut to menus, and they use alternative actions suchas hovering the mouse over an element to uncover additional information.
Jacob Seidelin (see References) affirms that:
When developing for mobile vs.desktop, the biggest loss in terms of user input is probably the keyboard. Manytypes of games simply don’t work as well without the detailed controls thatcome with the keyboard. Some mobile games opt for virtual buttons displayed onthe screen but in some cases the lack of real controls can make it hard tocontrol the game. This is especially true for fast-paced games where the playeroften relies on the physical feeling of the buttons to quickly switch betweenfunctions. Without looking directly to or at the buttons, it is hard to pick upthe right one to touch.
However, multi-touch actions can also help us create rich experiences ifwe learn how to apply them creatively throughout our game. Pinch-to-zoom actionsand simple swipes can add more dynamism and foster a unique perception of thegame because learners can experience more innovative ways to manipulate theevents.
Consider the built-in capabilities of mobile devices
A huge advantage of native apps over web apps is the ability to accessdevice capabilities to enhance the experience we seek to create. However, wecan use mobile development frameworks such as PhoneGap to wrap our HMTL5-based gamein a platform-specific shell and rely on standardized web APIs to access thetargeted device´s sensors and data. Some of the PhoneGap APIs include:accelerometer, camera, capture, compass, connection, contacts, device, events, geolocation,globalization, media, notification, and storage. Think about all the newopportunities that we have now for creating more immersive scenarios for thelearners.
Conclusion
Games are suitable for several types of instruction,ranging from new product launches to leadership and management training. It isimportant to answer some key questions and identify the most importantingredients when we set ourselves to design games for educational purposes.Remember that we are also designing experiences to reach mobile users and caterfor their different mindsets. Therefore, we need to be aware of how differentand innovative our mobile-enabled game-based experience can turn out to be.
References
Boller,Sharon. “Using Game Mechanics and Game Elements in Learning Games.” 2013. https://www.bottomlineperformance.com/new-learning-game-design-white-paper-sharon-boller/
Clark,Josh. Tapworthy: Designing Great iPhone Apps. Canada:O´Reilly Media, 2010.
Edward, Ethan. “Integrating Game Design Principles intoInstructional Design for e-Learning” [Webinar]. 14 May 2011. https://vimeo.com/32286121
Hussain, Talib. SeriousGame Design Tutorial [PowerPointslides]. 2012. https://www.gametechconference.com/sites/default/files/presentations/2012_Gametech__InteractiveTutorial_final.pdf
Kapp,Karl. “Top 10+1 Instructional Game Design Best Practices.” Kapp Notes. 5September 2013. https://karlkapp.com/top-10-1instructional-game-design-best-practices/
Marcotte,Ethan. Responsive Web Design. New York,New York: Jeffrey Zeldman, 2011.
Seidelin, Jacob. HTML5Games: Creating Fun with HTML5, CSS3 and WebGL. United Kingdom: JohnWiley and Sons, 2012.
