This edition of our developer diary is brought to you by Coleman Charlton, lead designer for Catan Online. Read about the evolution of the main user interface in Catan Online, from initial mockups to the finished product.
The creation of the Catan Online user interface (UI) was an iterative process that involved as much development as design. The evolution of the UI features and functions was driven by detailed input from a number of interested parties. At various points in the project, suggestions and specific UI requirements came from:
· The Microsoft development team.
· The German design house that acts as licensor (Catan GmbH).
· The English-language board game company (Mayfair Games).
· Our own development team (Castle Hill Studios).
In the end, the efforts of these diverse and varied people have resulted in what we feel is a user interface that is not only functionally accessible, but is also aesthetically satisfying.
From the beginning of the project, we wanted to keep the visual tone and feel of the original board game, while still meeting the state-of-the-art requirements for a computer game. To this end, it was decided to use much of the art and graphics from the board game—the tiles, the card images, etc.
After we outlined the basic information and functions that needed to be handled by the UI, our producer, Karl Roelofs, mocked up a UI for the base game window:
As you can see, most of the basic elements that ended up in the final UI are present in the mockup—albeit in a raw form.
After some feedback, the second mockup incorporated a number of key changes:
· The board is larger
· To accommodate a larger board, the four player information areas were combined into one status area. Each individual player’s information could be accessed by clicking the appropriate button in that status area.
· A chart was added with the production probability information from the board game.
· A Hints button and a Settings button were added.
· Various elements were resized and moved to coordinate with the other changes.
Following more rounds of feedback, even more changes and tweaks were made. Many were cosmetic: moving buttons, adding a timer, adding a turn indicator, etc.
However, a number of changes were very significant:
· Six action buttons were added—one button for each of the different types of activities a player can take during his/her turn: producing resources, playing development cards, building, trading, undoing an action, and ending the turn.
· The cards held elements were moved to the bottom-right, and the other cards held (soldiers, VP cards, longest road, and largest army) were displayed next to them. This grouped all of the cards held by the player in the lower-right section of the base window.
· The prompt area moved to the top-right and became a scrollable section that displayed game-play messages and effectively kept a history of activity in the game.
· The element allowing you to look at and play development cards moved to a pop-up window that was accessed by clicking a development card icon or the Dev Card action button.
· The player information section became a game information “Summary” section, with a Details button that would bring up a pop-up window with the more specific player information.
· The small magnifying glass icon was added as a button that toggled on and off total production values for buildable intersections.
During the mockup and early feedback phase of the UI development, the programmers were busy implementing the UI elements agreed to early in the process: the representation of the game board and the playing pieces. So, when the final UI mockup was finished, it didn’t take long to get to the first prototype.
Most of the changes between the final mockup and the prototype were graphical, but a few minor elements were modified. The production probability key was eliminated, and we added a Settings button to the base window (instead of accessing it through the details screen).
Note that the Undo button is not yet implemented or in place. In addition, the timer is missing—this screen shot is from the downloadable version and only the online version has a timer.
With the basic UI in place, changes were made incrementally as the programmers implemented the guts of the game. The next two screen shots show the following iterations made as play-testing feedback (especially from Arnd Beenen) came in:
· We tried radio buttons and later check boxes for Probability (instead of the magnifying glass) and Show Help.
· We added a button that allowed port trades to be enabled from the base window.
· We added a text window that provided help and hints whenever Show Help was functioning.
· The Build button was eliminated and the Undo button was implemented. Feedback had indicated that the specific, individual build buttons were sufficient (i.e., road, settlement, etc.).
· Since the player colors and their turn order was shown in the Game Summary, the list of players was removed from the upper-left.
After some more play-testing and feedback, a few more functional changes were made:
· We moved the controls for Probability and Show Help from the base window to the Settings window.
· We moved the dice and put in a Pieces Left section—duplicating some of the information from the Details window. If you take another look at the very first mockup, you will see this element.
As the final step in the evolution of the Catan Online user interface, we put in the final graphical skins, changed some fonts, and modified some base colors.
In addition, the details button was renamed “Stats” and it was moved to the lower-left corner of the base window—grouping it with the only other non-action buttons: Port Trade and Settings.
There are other windows that pop-up in 
Catan Online, such as the Settings window, the Stats window, the Discard window, the Dev Cards window, etc. These components required some development, but most used standard UI elements: control buttons, pull-down menus, check boxes, etc. The only other significant user interface was the Trade window, but that topic is part of our next developer diary topic: “Trading in Catan Online.”