Touch Input Woes

by Kwasi Mensah

March 3rd, 2013

Touch Input Woes

So for this go around, we’ve made sure our game is a universal iOS app. That means it’s iPad app proper (no more x2!). It also made it a lot easier to demo the game. But it introduced a whole set of new worries. It turns out tapping works very differently when the screen get’s bigger.

Anatomy of Tap

In the words on another Boston game developer Trevor Stricker of Disco Pixel, “reading touch input is like penmanship. Everyone has a different style”. For example when I tap on screen it’s a simple touch down, touch up in the same spot.

From the Nokia Lumia 710 User Guide

Touching up and down in the same position. Image from the Nokia Lumia 710 User Guide

That’s pretty  much all you see on a phone where the tap of your finger takes up a fair amount of your screen. And even on bigger screens like iPads a lot of people still tap as a simple touch down, touch up. But when we moved to the bigger screens we found a new pattern that we weren’t dealing with properly. Some people would flick as part of their tap. This changed our simple tap to touch down, tiny amount of drag, touch up.

From the Nokia Lumia 710 User Guide

Touch down, some dragging, then a touch up. Image From the Nokia Lumia 710 User Guide

Which normally isn’t a big deal since most people instinctively try to tap in the center of what they see on screen. But in the new game  we support both tapping and swiping for selecting letters and the tiny amount of drag messed with our input logic. We want to make selecting letters by swiping as easy as possible, but to submit words we want you to have to consciously tap on the last letter of the word.

Not so fat fingers

Tapping wan’t the only problem we faced moving to the iPad. We found out pretty early on that in order to support swiping effectively we have to add a little wiggle room. For example, when you try to swipe diagonally to the bottom-right we have to make sure not to count that as you swiping the letter below or the right.

Image if letters L U C K where L and U and diagnal from each other

In this example we’re going from L to U to spell LUCK

So we came up with a “sweet spot” for each letter. When you drag we don’t actually count it as touching the letter until you hit the letter’s sweet spot.

On iPhone most taps will hit the sweet spot

Sweet spots are yellow. Finger taps are in blue.

This works great on an iPhone, where we can be pretty sure you’re not trying to touch the letter unless you’re hitting the sweet spot. But on iPad, the sweet spot leaves a fair amount of space compared to the size of your finger.

Spots showing that the size of taps is small enough that they won't necessarily hit the sweet spot

The blue spots are the size of taps when you’re on an iPad

People trying the game on the iPad weren’t dragging the finger deep enough into a cell to hit the sweet spot. Or if they were trying to unselect all tiles by tapping an empty space, they would tap a cell but not hit the sweet spot. These two problems combined made the game feel very unresponsive. We fixed it by making our sweet spot take the actual size of the screen into account.

Conclusion

Once we figured out what was wrong we were able to fix it pretty quickly. But this was after we demoed in front of a fair amount of people with a game that seemed weirdly unresponsive compared to our iPhone version. Demoing on the iPad was still better for us than using an iPhone, but we should have properly dealt with fingers taking up a lot less of the screen. In the words of a game designer I used to work with, the infamous Evan Nikolich, “Test your sh*t”.

Post a Comment

You must be logged in to post a comment.