My iPad 2 was the first touch screen device I’d had. My son has an iPod Touch but that always felt too small to me and I didn’t bother with it so sitting down with the iPad was the first time I got to consider how it’s used. Actually, truth be told, I didn’t. I didn’t really think about it properly until starting to lay out the interface. I remember watching an interview with an iPad developer who discussed how they’d spent 3 months working on the position of two buttons on the bottom of their app. I thought that was ridiculous. Now I’m not so sure.

Having to position buttons in a usable manner does require you to take a closer look at what your hands are doing and, more importantly, what other people’s hands are doing. As obvious (or deviant) as that sounds what I saw took me by surprise. I noticed I held my iPad in a couple of different ways depending on how and where I was sitting (I very rarely if ever stand to play games). I’m right-handed so usually I have the pad propped up on my leg by my left hand and my right does what ever it does. My left hand wasn’t fixed but it didn’t have the freedom of movement of my right. And while your right hand is free to move it spends a lot of time obscuring most of the bottom right of the screen. You don’t really want buttons there as you’ll have to move your hand away from the screen so you can see them to press.

it feels like you’re wearing supper thick gloves and are moving through glue

I mentioned before about how many developers are trying to shoehorn other console genres onto the pad. While its possible I don’t believe it’s the best approach. I think it was Bungie (feel free to correct me) who many years ago looked at syncing Halo players on the Xbox with those on the PC only to find that even the best console players were being pwned by low ranking PC players because the combination of mouse and keyboard is a far superior control method than a joy pad. Personally I can’t play FPS’s on consoles as it feels like you’re wearing super thick gloves and are moving through glue. But likewise many console games don’t successfully port to iPad because of the lack of tactile buttons. Having a flat, smooth surface rather than raised, textured buttons and joysticks you often find yourself having to look at the controls instead of looking at the action. In many games that’s a deal breaker.

Anyway I thought it might be useful to see how someone with smaller hands, namely my son, held the iPad and I was in for a shock. Not only did he hold it differently but his history with the iPod meant he used it differently too. While I used the index and middle fingers of my right hand to do almost everything, he used his two thumbs and when pinch zooming, despite being right-handed, he used his left hand.

(A quick snippet of info .. do you know why the iPhones screen was exactly the size it was and never bigger like some of the Android phones? Simply because its big enough to allow you to access the whole screen, corner to corner, with just the thumb of the hand you use to hold it.)

So this was a revelation. Did we have to design an interface that worked for both types of operation or should we pick a side and run with it? Should we assume our audience is likely to be older with larger hands? will they come from a generation of iPhone and iPod users?

So a bunch of possible layouts were proposed by the team and I did some quick mockups to be able to check them out on the iPad. As you can see I also wanted to consider the possibility of playing in portrait, so you’re looking from the Axis or Allied view rather than the traditional West-East. I had serious misgivings about all but one of them.

The map has to hold a lot of information. This meant we had to lose anything that wasn’t necessary for directly playing the game. Anything that isn’t used at least once per impulse was discarded, though we still required a way to access them quickly. There was some reluctance at first to the more pared down version (bottom left) but I firmly believed that less is more and that the most important thing was to have the map filling the screen. Any additional information could be shown in pop ups or drop down panels as and when needed.

So the two most used buttons are Commit and Undo, which I put in the top corners. Commit is a positive/affirming action and is only used when you’ve finished everything else with your right hand so that is on the right side. The dominant side for right handers. I found myself moving things on screen and once I was happy hitting Commit quickly with my right middle finger without looking at it. It was enough that I was aware of it in my peripheral vision and could effortlessly and with barely a thought press it. Undo is a negative/dismissing action so I associated that with the left hand, specifically the thumb. It’s the one action my son and I had in common, we used our left thumb for occasional navigation. So settling on assuming players will have their left thumb near the top of the screen I put Undo there with the menu button below it. Not directly below as I find I have less control over my left thumb so moved the button down enough for it to require a reasonable flex of the top thumb joint.

Moving lower down the screen required more of a pivot with the whole wrist and third thumb joint

Since most action happens on the right and centre of the map I wanted the menus to open on the left so they had least impact on gameplay. Now the position of the menu button is, for me at least at almost the maximum extent of my thumbs movement. I don’t need to have a huge amount of fine control but anything lower down the screen required more of a pivot with the whole wrist and third thumb joint. A much more deliberate action than the instinctive hit of Undo or Commit. I moved the menu buttons closer to the centre of the screen. Easier to press with both the left thumb and the fingers of the right hand.

I found it important to have buttons you could still see when you had your finger over them. Not huge, but big enough to be able to see the button press animation. People don’t always play with sound and still need visual confirmation. And when the interface touched more than one side I was aware that it made the map feel cramped or crowded. By simply moving the button areas inward, allowing the map to be seen at the sides, the panels seemed to float above the map instead of imposing on it. It felt lighter. More spacious.

(Yes a picture has gone missing from here … )

So this is the positional layout I eventually went with. Based on a huge generalisation that between us my son and I used the pad like a reasonable selection of the public. Try to please everyone and you end up pleasing no one. We will be doing something to support men who are colour blind since they make up a significant proportion of our target audience but what about the left-handed? I don’t know. At the moment the layout favours right-handed players but it’s also influenced by the nature of the game play. Its something I’ll give serious consideration to. My dad’s a south paw.

As for the style of the artwork, I’ll discuss that next time but if you’ve got any thoughts on interface design, button positions, iPad usage etc. then I’d love to hear. I’d not considered any of these things before this game so I’ve still a lot to learn.

(Note: Originally Published on the Shenandoah Studio Blog)