UI Design

The UI has really changed a lot over the course of the project as we've experimented with new ideas, listened to player feedback, evolved and adjusted. I thought it might be fun to look at some of the changes and explain the thinking behind the decisions.

The earliest (functional) GUI had a minimap, a build (or create) menu, actions and management. We called this the CAM layout, on account of the first letters for each menu and it looked something like this:

On a large monitor in single player mode this gave access to almost everything. Too much everything maybe and it took too long for players to find things and navigate the menus. There are some simulation games where you do need all this information but we support 2 player modes and controllers as input. The feedback we got was that it was too much information, we needed something simpler.

To simplify the menus, we opted for the CBM layout - this replaced 'management' with 'magic', moved 'create' to 'build' and introduced 'chat' as a means to interact with the other players. Moving a cursor with the controller and selecting players to interact with them was just cumbersome. Consideration for your controller-using players is something many game developers neglect. Mouse & keyboard control allows you access to much more information and far more complex menus involving precision clicks. Simplify and de-clutter wherever possible; be consistent too - the CBM hotkeys at the bottom of the screen map neatly to the bottom of the keyboard layout and can be mapped to buttons on the controller (although 2 options would have been neater still).

This was significantly easier to use and didn't obstruct the game screen as much, although the build menu was still quite hard work for controller users.

At this point I briefly flirted with the idea of having no permanent UI at all. Bring up minimal information as and when it was needed and then hide it to maximize screen space. The problem was that in 2 player mode the screen real estate is quite small and too much UI clutter can make it easy for sneak attacks since you lack situational awareness. Our audiovisual director convinced me this was too revolutionary of an idea tho. Since we were considering rings around the player to allow the quick selection of chat and magic options (to replace the more conventional rectangular menus for 'chat' and 'magik'), he suggested something more like these sketches:

That's for 'chat', 'build' and 'magic' respectively. These are good designs and reflect good UI layout and principles but raise an age-old question as to how much to display at once. Some people like to see everything, like the cockpit of a Boeing 747, in order to make a decision. Others feel overwhelmed by that and want to see only a single choice at a time. Because casting magic happens in the thick of battle, it's important to make fast decisions - seeing all choices at once is an advantage here but needs to be balanced with not overloading the player with any unnecessary clutter. Building takes place at a more relaxed pace, as does conversation - hiding options behind menus is viable here.

Consistency is also important. If performing an action requires a certain sequence of operations, performing a similar, but new, action should follow some logically similar sequence of operations. Not doing so feels jarring. 'Build' and 'Magic' are similar in look & feel but 'Chat' feels like the odd one out. In terms of how they should react, 'Chat' and 'Build' are more similar, whilst 'Magic' requires quick operation.

We're still working on the UI and evolving it to meet the needs of the players whilst retaining maximum functionality for controller-users but I'll leave you with a quick screenshot of the inventory, shown on a small monitor in 2-player mode!

Leave a comment

Log in with itch.io to leave a comment.