Your Source for Learning
Technology, Strategy, and News
ARTICLES       RSS feed RSS feed

Designing Mobile-enabled Game-based Experiences

by Mayra Villar

December 16, 2013

Feature

by Mayra Villar

December 16, 2013

“It is important to answer some key questions and identify the most important ingredients when we set ourselves to design games for educational purposes. Remember that we are also designing experiences to reach mobile users and cater for their different mindsets. We need to be aware of how different and innovative our mobile-enabled game-based experience can turn out to be.”

In his book Tapworthy: Designing Great iPhone Apps, Josh Clark defines the three different mindsets of the mobile user: “I am microtasking,” “I am local,” and “I am bored” (see References). I agree entirely with these categories and their descriptions, and therefore, every time I design a mobile learning solution I try to cater to these three frames of mind. One effective approach is to rely on the best practices in game-based design and the key considerations for multi-device applications.

First things first

Bibliographical resources and research evidence about the impact of video games in education are abundant. Much has been said about their potential benefits on the learner´s engagement and cognitive-skills development. Many educators and L&D professionals have reported how the use of video games has resulted in higher levels of participation and has improved performance. But, what are the key ingredients of a successful game-based learning experience?

I will try to avoid broad terms like “engaging,” “interactive,” or “relevant” to answer this question. While these characteristics somewhat describe the type of experience we seek to design, sometimes it is difficult to clearly grasp what they really mean or encompass. As stated by Ethan Edwards (see References), these words are not enough to describe what makes a game a real learning experience.

Take for example Jeopardy!-like educational games. They are engaging because the interface is visually attractive. They are interactive because they involve actions from the user, such as identifying the most suitable answer. And they are relevant because they base the questions on real information and facts. But, is that the type of activity our learners will be doing as part of their daily tasks?

Don’t get me wrong, please. Question-based games can work well in some situations, and their effectiveness as an instructional strategy will depend heavily on how the questions are structured. However, before jumping into software options to address a training need, we need to carefully think about two key questions:

  • Is a game the right medium for the learning objective?
  • Can you elicit the relevant behaviors in a game? (see Hussain in References).

These questions are the foundation for designing effective game-based experiences that:

  • Aim at eliciting certain behaviors from the learners or at developing specific skills. The game focuses on the actions the learners must perform in order to acquire new abilities.
  • Address learners´ attention to a single task that resembles a real-world situation so they can make a successful transfer to their work.
  • Have concrete, achievable, and rewarding goals to clearly define the game rules.
  • Allow the learners to do something with the content, for example, practicing strategic decision-making.
  • Include different levels of difficulty that constitute a challenging path towards the final goal and the skill mastery.
  • Provide feedback about the consequences of actions and arouse learner’s emotions.
  • Reinforce a real-world need through scoring (see Boller in References).
  • Allow for replay ability. “Games for learning are most effective when multiple sessions are involved. This means the ability to play again with another strategy or another approach” (see Kapp in References).

There are, of course, more considerations to bear in mind when designing a game, such as the story, the aesthetics, and the game mechanics and elements. But these are the core aspects to create educational games that live up to their goal.

Case study: Hazardous Time Killer

Some months ago, I designed a game-based experience that I named “Hazardous Time Killer” for one of my clients. They needed to help the company´s staff manage time and work overload more effectively and they were curious about the application of game design principles to this specific training. I will share with you the initial mockups to illustrate some of the key ingredients of a successful game-based learning experience.

Figure 1 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 as possible as part of their jobs or did they actually need to learn how to prioritize tasks and better manage their time?


Figure 1:
This initial item and timer format wasn’t relevant to the task being taught

The actual need, of course, was for the learners to be able to prioritize tasks and better manage their time. After revision, this became a timed drag-and-drop interaction that asked learners to prioritize their activities, in order to automate this behavior and reinforce decision-making skills (see Figure 2). As they advanced through the game, learners had to make decisions more quickly and faced more difficult or controversial situations.


Figure 2:
This timed drag-and-drop interaction helps learners understand how to organize their daily tasks more effectively

Figure 3 shows the design mockup for an impactful and emotive feedback (red panel). It portrays a realistic consequence when the learners are unable to organize their daily tasks effectively. In this way, learners could establish a connection between this activity and a real-life event. This is very different from the ineffective feedback style shown in the rejected design mockup in Figure 4, which does not identify consequences of “spending too much time on Facebook.”


Figure 3:
Emotive feedback portraying a realistic situation


Figure 4:
This type of feedback doesn´t help learners properly evaluate the outcome of their choices

Figure 5 shows how scoring can motivate learners to improve their game. As learners got better at organizing their daily tasks, they gained extra time. They could evaluate the positive result of their actions and this had a direct influence on their daily routine. You can see how different (and more motivating) this is, compared to the feedback in Figure 4.


Figure 5:
Instead of simply scoring points, learners got extra minutes every time they organized the tasks quickly and effectively

Learning anytime, anywhere

Now that we understand the key ingredients of a successful 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 different types of user input. These considerations can guide you through the process of creating mobile-enabled games:

Consider the delivery method

Until recently, Adobe’s Flash was one of the most reliable technologies used to create highly interactive experiences. However, Flash doesn´t run in the iOS mobile browser so we need to break ourselves of the usual practice of publishing only Flash-based output. Even though there are some workarounds to view Flash content by using iOS devices, we need to adopt evolving technologies such as HTML5 to create seamless cross-platform experiences.

Some may argue that HTML5 and related technologies like CSS and JavaScript cannot yet offer high-performing user experience as native apps. But they can definitely assist us in the development of multi-device applications.

Consider varied screens

We have to be prepared to support 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 you can accomplish this by creating fluid layouts with HMTL5 and CSS3. You can solve many problems posed by multiple display resolutions by integrating the three core 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 also need to consider how the users’ interactions with desktop applications differ from the way they interact with touch-enabled screens. If you are accustomed to playing online games on your PC, you know how useful some keys or key combinations can be to earn more points faster, to be able to perform complex tricks, or to reach higher levels. Likewise, many game players use the right button of the mouse as a shortcut to menus, and they use alternative actions such as 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. Many types of games simply don’t work as well without the detailed controls that come with the keyboard. Some mobile games opt for virtual buttons displayed on the screen but in some cases the lack of real controls can make it hard to control the game. This is especially true for fast-paced games where the player often relies on the physical feeling of the buttons to quickly switch between functions. Without looking directly to or at the buttons, it is hard to pick up the right one to touch.

However, multi-touch actions can also help us create rich experiences if we learn how to apply them creatively throughout our game. Pinch-to-zoom actions and simple swipes can add more dynamism and foster a unique perception of the game because learners can experience more innovative ways to manipulate the events.

Consider the built-in capabilities of mobile devices

A huge advantage of native apps over web apps is the ability to access device capabilities to enhance the experience we seek to create. However, we can use mobile development frameworks such as PhoneGap to wrap our HMTL5-based game in a platform-specific shell and rely on standardized web APIs to access the targeted 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 new opportunities that we have now for creating more immersive scenarios for the learners.

Conclusion

Games are suitable for several types of instruction, ranging from new product launches to leadership and management training. It is important to answer some key questions and identify the most important ingredients when we set ourselves to design games for educational purposes. Remember that we are also designing experiences to reach mobile users and cater for their different mindsets. Therefore, we need to be aware of how different and 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. http://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 into Instructional Design for e-Learning” [Webinar]. 14 May 2011. http://vimeo.com/32286121

Hussain, Talib. Serious Game Design Tutorial [PowerPoint slides]. 2012. http://www.gametechconference.com/sites/default/files/presentations/2012_Gametech__InteractiveTutorial_final.pdf

Kapp, Karl. “Top 10+1 Instructional Game Design Best Practices.” Kapp Notes. 5 September 2013. http://karlkapp.com/top-10-1instructional-game-design-best-practices/

Marcotte, Ethan. Responsive Web Design. New York, New York: Jeffrey Zeldman, 2011.

Seidelin, Jacob. HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL. United Kingdom: John Wiley and Sons, 2012.


Topics Covered

(16)
Appreciate this!
Google Plusone Twitter LinkedIn Facebook Email Print
Comments

Login or subscribe to comment

Be the first to comment.

Related Articles