Site icon Mobile Free to Play

Touch Control Design: Ways of Playing on Mobile

Adam Telfer

Back in 2012, I was actually writing a book. I had a publisher lined up, but in the end the amount of time required became overwhelming and the publisher lost faith in the success of the book. Lucky for you, I can now give away this information for free!

While the content was written by myself, the photos and illustrations were done by Jackie Fong, Rocco Commisso, and Gabby DaRienzo. My old partners in crime at XMG. Many of the photos include games that are owned by XMG Studio.

Here is a first excerpt of my book which focuses on touch controls for games on mobile.

Ways of Playing on Mobile

The touch control, how the player uses the touch screen of the device, is always the hardest component to get right. The control mechanics will make or break your game on a mobile device.

If users are constantly fighting against the control mechanics or if users cannot understand what to do quickly or if users are required to do too many things with their fingers, it will kill your game. It is also impossible to make everyone happy with the control mechanics. Understanding your audience is key.

Using the common mechanics that your target audience is used to is extremely important. If your audience is core gamers, use common mechanics with which they are familiar. Don’t be afraid to borrow inspiration from your competitor’s games. That is what your core audience is used to! Always take risks and innovate; however, when it comes to controls, don’t fight what your users already know.

This chapter serves as reference for designing touch controls that work on mobile or small touch screen devices. Focus on designing touch controls that are as inclusive as possible. Allow the player to play your game whenever and wherever the player wishes. It is imperative to always user test.

The only way to see what is right for your game is to test with your target audience as often as possible right from the beginning. Take their feedback seriously. Prioritize fixing usability bugs over creating new features.

If you leave usability to the end of your production, you will never fix them. Adding more features on top of a poorly controlled game will not make the game any more successful. In fact, more often than not, it will cause your house of cards to come crashing down.

Control mechanics won’t figure themselves out. You have to fix the problem right from the beginning.

Know your Audience

The first step in designing a control mechanic is to determine where and how your audience will play your game. Head out into the real world. Find your target audience. Watch them play games. Watch gamers at play:

Notice :

Did they notice your awkward stare yet? Good.

Playing on an iPhone

There are many common ways that people hold their iOS devices when playing games. People are inclined to operate them in similar ways. The mantra of this chapter is : Always know your audience

Build your mechanics with that in mind. Here is a list of playing orientations that I have found most users follow on the iPhone :

Gamer Stance

In the “Gamer Stance”, players holds the gaming device with two hands using both thumbs as controllers.

Notice the placement of thumbs and where the player stabilizes the phone in the “Gamer Stance” as shown in Figure 2-2. This is how most hard core gamers hold their phone. They’ve grown up on GameBoys. They own a PSP. This is NOT the majority of players. Building a game specifically for this stance is not ideal for casual games. By designing for this orientation, you have made a choice that your game will be built for the niche of core gamers on the iPhone. This is entirely fine. Many great successful games have been built for this orientation. As the game developer, you just need to be aware that this orientation has its advantages and disadvantages.

As shown in Figure 2-3, there are relative tracking area where players can press with ease and where they can press to reach.

Thumbs at the side present some design inferences. Buttons placed along the sides of the screen are best to avoid the thumb covering up the screen. Notice in Figure 2-4 with Inspector Gadget, we kept most of the UI elements to the sides of the screen.

It is important to look at which area of the screen players cover up when they press down on the screen. Since the thumbs are at the sides, the farther the thumbs travel into the top center of the screen, the more they cover up the middle of the screen. Buttons, controls, etc. that require the player to press in the top center should have this consideration. The players’ thumbs are going to cover at least half of the screen. It will require them to reach with their thumbs, making it a very deliberate action. Players with smaller hands will have to let go of the phone to reach the top center. Interface control for this orientation should be kept to the outsides of the screen for this reason. Always keep in mind, when designing for this orientation, that this orientation is a niche market in the AppStore. It is not the core casual audience. Angry Birds, Fruit Ninja, Where’s my Water, Cut the Rope, etc. all use a one-finger mechanic that is better for the “Casual Prodder”. Even games that are geared towards a more core audience allow for control in this way to widen the potential audience.

Casual Prodder

For the casual gaming audience, the “Casual Prodder” is the most prominent way to hold and play games. The “Casual Prodder” player holds and stabilizes the phone with one hand while the other hand pokes the screen.

The gaming device can be held in both Portrait (vertical) and Landscape (horizontal) positions or orientations. This orientation is used in games like Cut the Rope, Angry Birds, Fruit Ninja, Jetpack Joyride, Flick Golf, Bejeweled, Plants vs Zombies, Flight Control, Where’s my Water , etc. As shown in Figure 2-5, notice the finger placement in this orientation. And, notice how it changes based on either the landscape or the portrait positions. Notice also that left-handed and right-handed players will come at the game from different sides, so the hand could cover the left-hand side of the screen, or the right-hand side.Notice that one of their hands is essentially incapacitated. One hand is used to steady the phone completely while the other is used for control. This means you cannot push the player EVER to use two control mechanics at once. But you can use a combination of :

(More on these later!) Each of these methods has good tracking ability, so players can use their finger to tap anywhere on the screen without much issue.

Subway Thumb

The “Subway Thumb” is the most casual of all of the orientations. Building a game with this orientation in mind will allow for the game to be played in the broadest areas. With the “Subway Thumb” mechanic, players hold the phone in one hand, and use only the thumb of that same hand to control the game. This allows players to hold onto something with their other hand to steady themselves. So when players are in transit, walking down the street, holding a coffee, etc., they can still play the game.   However, as shown in Figure 2-6, since the player is using only one had to both stabilize the gaming device and play the game, this orientation is extremely limiting in game control.The “Subway Thumb” orientation is much less stable and much less attractive with the landscape orientation than with the portrait orientation. Small-handed people will not be able to stabilize the phone, and are less likely to feel safe without switching to the “Casual Prodder”. So,the portrait position is usually the way to go.

iBooks (the app) is a great example of the “Subway Thumb”. iBooks (and most book readers) are built on the phone so that reader can hold the device in one hand and turn the page with just a simple tap or swipe. This allows the player to progress through the book with just one thumb and one hand holding the phone, making it much more attractive when the player is doing something with the other hand such as using public transportation. When designing a game, keep in mind the placement of the thumb (for left- and right-handed-ness) and where the players can reach. The bottom half of the portrait screen is the most reachable area for the player to press. For this reason, you should design your interfaces so that buttons and controls are placed along the bottom of the screen.And, remember that this orientation is built for players who can only use one hand to operate the phone (while taking the subway or bus, while walking a dog, etc.) So, keep the following points in mind :

Just food for thought.

Playing on an iPad

The iPad is a different beast altogether. It is built large and, despite updates being thin and lightweight, it is still a bundle to manage with just one hand. It basically REQUIRES two hands to operate or to be placed on a surface. Immediately “Subway Thumb” becomes obsolete. The player cannot operate the iPad with one hand. The iPad requires two hands to operate or a stable surface (such as a kitchen counter, some knees on a couch, etc.) to stabilize. If players are at the coffee shop, they are going to have to find a table to use their iPad. However, the fundamental differences between the iPad and the iPhone are the reasons why players play on it. The iPad actually pushes players to play longer and more dedicated game sessions. When a user picks up and decides to play on an iPad, it is a much more conscious and deliberate decision. Players cannot play the on the iPad on the go nearly as easily as they can play on the iPhone. The iPad device itself is better suited to the couch, the coffee table or a desk. The iPhone is built around a much more casual sense. It is with the user all the time. The user takes it out as often as possible. Players are more likely to play on their iPhones when they are on the subway, at a coffee shop, while they’re out doing errands, then they will be to play on an iPad. Keep this in mind when designing games specifically for the iPad.

Hardcore iPadder

There is nothing casual about playing a game on an iPad. Just as the “Gamer Stance” orientation on an iPhone, a “Hardcore iPadder” holds the device in both hands and uses thumbs to control the game (as shown in Figure 2-8).

The iPad works well in both the Landscape and Portrait orientation. However, because of the size of the iPad, notice that players now cannot reach all parts of the screen without taking one hand off of the device. If players are required to reach any further areas (e.g., the top of the screen), they are more likely to take their hands off the iPad, place the device down on a table or their lap, and then prod the screen with their two index fingers. This is exactly what you DON’T want to have happen during your game. This means that your game cannot be played with just two hands! It can only be played with a “third hand”, that is a stabilizing base such as on the knees, on the kitchen counter, or somewhere else where the players feel comfortable putting the device down. As shown in Figure 2-9, note the change that Apple made with their iPad keyboard.

 

As shown in Figure 2-9, this update has made it so that iPadders can type without moving their fingers across the screen. Users can now type without putting the iPad down. Think like this when designing your game controls on the iPad. Placing buttons in difficult areas will force players to put the device down. Even though the device is weightless, most people don’t feel comfortable holding it with just one hand for extended periods of time. Keep this in mind. If your game requires two controls at once then keep buttons to the lower outside corners.

No-Hands iPadder

The other iPad orientation is the “no-hands” orientation. This orientation will limit how and when your players can play your game. They can really only play in circumstances where they can lean their iPad on something they deem stable and safe. Any other time (on the subway, in a small chair, in the car, etc.) they may not have that ability.  

Players will play your game until it starts to physically exhaust them. This will limit game time. Or, they will just choose NOT to play your game. You, as a game designer, have made the choice simply by your control scheme. This scheme allows great two-handed “prodding” control, now that the screen is big enough and players don’t need to support the device with a hand. They can now have two fingers with which to prod the interface. For example, as shown in Figure 2-10, Cows vs Aliens on the iPad cannot be controlled in any other way. The iPad must be placed on a stable surface freeing up both hands to play the game. This can be seen as a hindrance or it can be seen as part of the innovative mechanic. As a casual game, Cows vs Aliens should attempt to bring as many users in as possible (like a board game). If the control mechanic prevents players from playing whenever and however they wish, then it restricts when and how the players will play….. and we want them to play.

Exit mobile version