We’d decided we wanted at least 3 buttons on screen all the time, commit, undo and menu, so the interface wasn’t planned to be fully dynamic .. invisible until required. But how should the buttons look? Obviously they need to look functional, either following iOS/web standards or looking like physical buttons. You need to know they’re pressable.

The iOS look wouldn’t fit the feel of the game so that was dismissed. I wanted something to match the semi realistic look of the map. To not stand out like the units and icons but to blend in so you’re not fully aware of it as you’re playing. I looked at integrating it into a kind of WW2 German map case, all leather, metal studs and plastic but buttons, switches and panels didn’t work in that context. Buttons felt awkward and the kind of light up touch button just didn’t work.

Then I found some photos of WW2 German radios that had the most amazing colours and textures. All black and maroon bakelite. While it’s not exactly an original approach by any stretch I thought it would allow me to have buttons and dials with some sort of context so they wouldn’t stand out too much as deliberate graphical elements. They’re functional but not the centre of attention.

Taken and used with permission from http://www.battlefrequencies.com/ Thanks Yuri.

I love the tactile feel, the textures, the intense but cool colours, their raw functionality ( I did some freelance work for the MOD many years back so appreciate why these end up looking the way they do). I mocked up some ideas but they were just too much. At that time the map was still relatively flat looking and the chunkiness of the buttons and panelling was too much. I did like that solid feel of the buttons though. They really look like they need to be pressed and you know exactly what kind of sound they’ll make.

Yes. I know. But it wasn’t entirely a lost cause. What I did take from it was the colour scheme and worked up a much flatter, less realistic version. There seems to be a point were going too far towards realism can make a buttons use actually more confusing which I didn’t expect. The round buttons were just the right size for a finger but their height was wasted as when you pressed them they were covered by your fingertip, hiding the all important visual feedback. By making the buttons wider we could use text instead of the horrible icons ensuring the player could see the edge of the button as they press, getting that all important visual feedback of the action, and reduce the vertical space taken up.

The cool grey colour helps to push the panels back, to hide them in the map. They didn’t scream out WE’RE BUTTONS! PRESS US! But when you look for them they’re there. The neutral scheme, while fitting with the map gives me room to emphasise national colours without them having to fight for attention. I think I’ve avoided the cheap and cheesy military look I’ve seen on many games and kept it fresh and functional without being imposing. The text is clear and readable and the buttons wide enough to accommodate German (which on average requires 30-50% more space).

The iPad has thrown up a few surprises. We’ve explored a range of options that we would normally think unworkable simply because it is such a unique medium. The touch interface and clarity and colour response of the screen make some decisions or assumptions less black and white. After release I’ll see if I can post some more concept art. I hesitate to just throw it up now as without context it’s easy for viewers to jump to too many incorrect conclusions.

Anyway, it’s not there yet and will likely change so any thoughts, comments, opinions or insults are most welcome, so long as the insults are directed at someone else.

(Note: Originally Published on the Shenandoah Studio Blog)