A useful user interface, part 2: The GUI

I've been running the play test of SPUDZOOKA for several days now, and I've learned some really useful things. Special thanks to everybody who has given the game a run for its money. It's going to end up a lot better because of it. (If you haven't tried it out yet, you can play here.)

The feedback has been positive overall, but being my own harshest critic, I feel like the game still leaves quite a lot to be desired. I think the concept is a decent one -- a little light-hearted destruction goes a long way -- but there are some tweaks to the user interface that will make the player experience better. Thus begins the second part of my brief series on user interfaces.

The graphical user interface
There are two main elements to SPUDZOOKA's GUI, and probably most games with a play-level-then-upgrade structure (that's a technical term -- you like it?): the HUD (heads up display) and the upgrade interface.

I wanted SPUDZOOKA's HUD (the graphical interface elements that appear on the screen while you're playing a level) to be as simple as possible. In the top left corner of the screen, there's a score display and a timer. These elements simply let you know how you're doing. The timer is most important while playing, so I think it needs to be much more prominent, maybe even moved to the top-center and given a more graphical treatment.

In the lower left there are two elements, a squarish graphic with a number in it, and, next to that, a smaller squarish graphic with some potatoes in it. These are both really important, but I don't think they work very well.

• The button-looking graphic with the number is there to denote which cannon you are currently using. You only start the game with one cannon, and there's no indication what this number means until you edit your cannon for the first time. Even then, you need to build and save a second cannon before the number means anything. Right now there aren't enough levels for that to be necessary. I'm thinking about cutting out the ability to build multiple cannons -- we'll see.
• The small graphic showing the potatoes is there to denote your current ammunition. Again, you won't know what it means until you edit your cannon for the first time (I think that's ok), but a lot of people who played couldn't figure out how to change ammo. The trick is that you can't always change ammo -- it depends on which kind of barrel is attached to your cannon. I think the meaning of the ammo icons didn't translate well from the editor, and people didn't remember whether they had access to multiple ammo types or not. Probably I need to add an icon for each type of available ammo in the HUD and give some indication of the currently selected ammo.

That's it for the HUD. I wanted to include enough elements to keep players informed during, levels but I think I need to go a little further to explain things.

Now onto the cannon upgrade interface. The idea here is that players can mix and match cannon components to create up to three cannons that not only look cool, but have different strengths and weaknesses.

To make this mix-and-match feature work, I needed several elements:

• A way to select components of various types,
  
• A way to buy components that can later be mixed or matched,
• A place to display the current cannon configuration and its stats,
• Some indication of which cannon (of the three available slots) was currently being edited,
• A way to save a new configuration or return to the previously saved cannon in that slot.

The three component selection areas work pretty well and are fairly intuitive. The result of cycling between components is immediately apparent. The data display for the current configuration seems to make sense as well (except maybe the list of available ammo).

Things start to get tricky, though, when players try to figure out the function of the buy and save buttons. The problem is that upgrading your cannon is a two-step process. First you have to buy the new component, at which point it goes into storage, and then you have to save that component to your cannon, at which point it moves from "in storage" to "in use." The previously saved component on that cannon moves back into storage and becomes available for use at a later time.

It's the inventory concept that makes things too complicated. There are (small) text elements displaying the number of each component in storage and in use, and it's clear that buying a component adds one to storage. Nevertheless, the intuitive behavior, I think, is for the "buy" button to save that new component immediately to the cannon. This seems to be what most people expected.

My attempts to hint at the desired behavior probably weren't enough. The background on the component selectors turns red when you don't have enough in storage to use that component in a cannon (meaning you have to buy one). The background of the full cannon display on the right turns red when you haven't saved that configuration, and you can't save it until you have enough of each component in storage (which would cause the background color of the components to be blue). In other words, once everything is blue, you're good to continue on to the next level. If anything is red, you've got a problem.

If I'm going to keep this two-step system, I think I need to create some additional cues in the interface to let people know what to do. I could make the "buy" button flash when an additional component is required and/or make the "save" button flash when the cannon is ready to be saved. Those two things would probably help a lot.

You can probably tell I've put a lot of time into the cannon editor and the GUI for SPUDZOOKA. I think my first go was passable -- players could figure it out after a few tries -- but I need it to be obvious on the first try. And that will take some more work.