Because I had worked out the controls before putting pencil to paper, the gameplay UI has not changed much throughout production.

Tap left, up or right to thrust left, up or right

Sketch vs. final

The center circular button has been replaced with a thumb-shaped button because the controls need to bleed off the bottom of the screen to accommodate lots of different screen sizes. Also, there is no space between or around the buttons that allow you to see the background. Although the sketch suggests this, I felt it would be distracting. The control panel must feel like it is separated from the game completely. In fact, the top of the control panel acts like the bottom of the game screen. Other than that, the final is nearly identical to the sketch.

80s arcade control panels = good touchscreen design

Like a classic coin-op arcade game, the control panel was to be at the bottom with the viewscreen above them. Vision-obscuring on-screen controls for touch interface games is a pet peeve of mine and this layout would ensure that no thumbs or fingers ever get in the way of the action.

Don’t look down

The touch area for the three buttons extend all the way to the top of the screen and they are as wide as possible. The width and position of the buttons mean that you can control the game without looking at the buttons, removing the no-tactile-button problem which is a common stumbling block when making traditional games for touchscreen interfaces. The center button is skinnier than the others because you use the left and right buttons more frequently than the up thrust.

That’s all for the gameplay UI. Next time we’ll probably discuss the actual gameplay control experience.

Thanks for reading and be sure to like and follow Tappy Lander on Facebook and Twitter for daily updates.