Designing a game user interface feature

If you ask any programmer what is the thing they least like to work on, its likely the one thing they really don't like is user interface code. Luckily, there are tools that can help.

The problem is that when you are a programmer, you are taught to seek function as your primary concern. If you ever look at most programmer's efforts at designing user interfaces it generally ends up as huge banks of similar looking buttons all set in regular grids, columns or lists.

While working on Damzel, I'm aware that with this game every single part of the experience matters. Working out the design aspects of most of the gameplay I can do (I have enough analytical approaches to attack any given problem and if I'm unsure of myself I can always turn to friends for feedback) but user interface work is still something that eludes me. Luckily, Damzel's user interface is based on LibRocket which is a great user interface middleware built using the same core techniques as HTML/CSS. So as I was searching for information on those, I noticed Ryan Burrell posting on twitter that he was looking to help some indie developers out, that he had HTML/CSS experience and UI design skills.

Our first port of call after I'd explained the game's design to Ryan, was to get a few mockup's sorted out. Normally, I'd approach this thing by creating something on paper, or by trying to mock it up in photoshop. Ryan used a firefox plugin called Pencil to design what the web-world knows as "wireframes". That is, user interface mockups with rough positions and data in controls.

Here's the wireframe for the agent setup screen as an example:

[Agent/Squad selection screen wireframe]

As you can probably see, the intention isn't to create a fully working prototype, or to have any sort of detail. The idea is to quickly iterate over the rough positions, the data being displayed and to study the flow through the interface. Does it do what the player expects? Does the player know where they are in the menu and where the options take them? Does the most important part of the functionality show itself clearly, with options being clearly less important but still be obvious?

It is really hard for us as game developers to deliver what we think is a perfect design only to see users completely hate what we have produced. Either because they don't understand it, or they can't get it to function as they expect. That's something that web UI developers seem to have a great handle on and something I'm hoping we can apply to the UI design of Damzel.

[Chapter information wireframe]

I've been pretty impressed with this way of working. Pencil seems like a great tool to help prototype UI's in that it can allow menu flow, give overall structure and layout hints without getting bogged down in specific details. Plus it can help with outputting data for when it comes time to code up the interface for real.

[In game HUD mockup for Damzel]

The great thing about this approach, is that we can iterate really quickly. Damzel is a pretty information heavy game by modern game standards, being based on older games like Syndicate really means that we have the issue of taking the information and updating the interface to match modern UI design standards. Having the ability to experiment with different flows and layouts is a very valuable method to help us deliver on the experience. Of course the next part of this, is to get an implementation working once we are happy with the design and then do something that web developers do a lot of (yet isn't really done a lot in game development for some reason) and that is to do a usability evaluation of the interface we've designed!

Until next time!