As mobile devices are becoming more and more prevalent in corporate training, and companies are adopting bring your own device (B.Y.O.D.) policies, design and development considerations for mobile applications are evolving. While some software products claim to allow you to design and develop training that can be exported to all devices, this strategy does not always work for all online training.
Certainly, designing linear eLearning that adapts to mobile devices typically does work. With eLearning, you can make interfaces responsive and change formatting to fit screen size, but with mobile serious games, there is more to consider. Different considerations and development strategies come into play for a serious game or training simulation on mobile devices. In this article, I’ll identify some of these differences.
(Editor’s Note: Serious games are those that are not intended primarily to entertain, but to teach, to solve problems, to persuade, or to improve some aspect of health or safety. Serious games may be entertaining, and the best of them are enjoyable, but this is secondary to their purpose. See Kate Pasterfield’s January 25, 2015 article in Learning Solutions Magazine, “Time to Get Serious: A Rough Guide to Serious Games,” for a discussion of the concept of serious games as a workplace learning tool.)
Develop for mobile first!
When designing a serious game for mobile devices, it is imperative to begin at the end: what devices are learners going to use? When your project is complete, how will your learners access the serious game? The point here is, develop for mobile devices first!
You cannot simply develop your serious game as you would for a desktop-based game, then expect it to look as good and function as it should on mobile. Mobile devices cannot be an afterthought, or 11th-hour decision, you need to think about mobile delivery from inception.
With that said, here are a few key considerations to take into account when developing mobile serious games:
- Processing power
- Screen size and resolution
- User experience
- Testing
Mobile processing power vs. desktop processing power
It is likely quite obvious that mobile phones have less processing power than desktop computers and laptops—however, this does not mean you cannot create an equally exhilarating experience for a mobile device.
Most computer games take considerable CPU power to run the high-end graphics and detailed worlds in which gamers roam. With mobile serious games, however, processing power is much scarcer. Keep this in mind when thinking about design elements for your mobile serious game. For instance, computer games have super-detailed graphics and intimate attention to accurate simulation because the hardware can handle it. However, with a mobile serious game, you may need to tone down graphics and modeling to match the capabilities of the devices for gameplay. Also, the screen resolutions of mobile devices are different from the resolution of your laptop. Together, processing power and screen resolution play a vital role in how a user experiences your serious game.
To mitigate potential issues, build your characters, environments, and design elements with an understanding of the limitations of mobile devices. The more detail and graphically technical elements you incorporate into your serious game, the more likely users are to experience slow and uncomfortable gameplay.
Screen resolution: Bigger assets for smaller screens?
Screen resolution dictates much of the overall user interface design. How you arrange your interface, and the placement and size of elements on it, will change from desktop to mobile device. Making elements large enough for users to see and tap easily, while not overwhelming the limited space available, may mean you can only fit the essentials on-screen. However, that does not mean you cannot get creative with your interface and navigation to make better use of space and flow.
When developing mobile serious games, remember your learners are going to view your serious game on screens ranging from four inches (1136 by 640 resolution for an iPhone 5) to almost 10 inches (2048 by 1536 for an iPad Air 2). To ensure your learners are going to be able to easily view your buttons and interactive elements, make sure they are 50 percent larger than they would be for a desktop application. Why? When the build is condensed for mobile it decreases the size of those features, which makes it more challenging for your learners to view and interact with your serious game. It may seem strange to make buttons and interactive elements bigger, but think about how frustrating it is to try to tap tiny buttons and checkboxes when you access a non-adaptive or non-responsive web site on your smartphone.
You also need to make text larger and edit on-screen prompts so your learners can easily read them and interact with your serious game. In addition, you need to eliminate rollover states. The desktop browser-based version of your serious game may let learners hover over an element to see a description and larger image of that element; the mobile version cannot support that ability.
Creating a brilliant user experience
Think about the differences between your smartphone and your laptop. Besides the obvious visual and technical differences, think about how you use each device. Typically, you use your laptop sitting at a desk or table; perhaps on your lap as you lounge. Compare that to a smartphone. Your smartphone is with you everywhere and you have likely used it in countless different scenarios and environments. How we use and interact with each device is different, and this plays into the overall user experience.
A mobile serious game is just that, mobile. So, what are the implications of using something on-the-go? You may start, stop, start again; you get the picture. Also, you may be engaged in the serious game while there are many other things going on in the background—you are sitting on the subway, in the waiting room at the doctor, out and about, waiting on lunch, and so on. Because of the way we use and interact with our mobile devices, you want to ensure your mobile serious game is easy to pick up where you left off and can easily re-engage learners. Additionally, due to all the distractions surrounding your learners as they are engaged in your mobile serious game, it is imperative to create a user experience that is not only educational, but engaging and entertaining to your learners. How many times have you tried to talk to someone playing Candy Crush or Two Dots, only to get no response from the top of their head? When someone is immersed in a truly engaging experience, outside stimulus has less of an effect.
Testing, testing. Check one, two.
It is well known that testing is vital to any sort of development success. However, with mobile development, testing becomes extra crucial. For example, you develop a serious game for desktops or laptops only. You do your standard bug squashing, functionality testing, glitch eliminating, and test across multiple browsers. Everything works and looks good? OK, great! With mobile serious games, there are a few more considerations.
Multiple devices means multiple operating systems and screen sizes that can vary from 4” to 10”. Because of this, it is imperative to test the responsive design of your mobile serious game and the functionality of all your features throughout the development process. How does your interface scale from an iPad or Galaxy screen to an older iPhone 4? Does the Android device “play nice” with all your interactions and functionality? Can I view the serious game in landscape only and are all my graphics showing up as they should?
By testing during the course of development, and not leaving testing as a “final” step, you are far more likely to accomplish the following, than you will be if you wait to test:
- Catch bugs and glitches in time to fix the issue and re-test
- Iron out functionality and formatting issues
- Get valuable user feedback via focus groups
- Ensure all devices “play nice” with your serious game
Another important component of testing during development is the ability to use the feedback gained from testing, and to incorporate that information into development. For example, after completing the user interface, John has his team test usability and check for any glitches or issues across multiple mobile devices. In doing so, one of his testers finds the navigation gets a bit wonky when viewed on an iPhone, but seems to be fine on larger tablet screens. Because of this, John redesigns and tweaks the interface to appear much more attractive on all mobile screens. Had John waited to test this after implementing more features, his team may not have had the opportunity, or time, to find a better solution.
Ready to mobilize!
With mobile devices showing an increasing presence in online corporate training, it is vital to develop for these mobile devices first, not as an afterthought. Keep in mind that your mobile serious game is fighting for processing power, so its design elements and interactions must be easy to digest for these devices. Also, you don’t have the luxury of a 13-inch+ laptop screen, so your design elements, interface, and text need to be easily visible on smaller screens. In addition to the smaller screen size and varying resolutions, how people interact with mobile devices is different, so you must consider that as well. Finally; test, test, and test some more!
Keep these considerations in mind when approaching a mobile serious game project and you are off to a good start!