The User interface design is generally acknowledged as an important part of the development of a game. Good designed UI will help the user to easily access the game. UI is especially in Facebook essential, as game developers face a highly saturated market in combination with a low detention rate among users. If you develop a game for Facebook and publish it, the game should be understandable within the shortest possible time. Casual gamers usually do not take the effort to try to understand complex game structures.
Generally the goal of good user interface design is to make the user’s interaction as simple and efficient as possible. This is of course not only true for Facebook games, but for all applications.
While working on the development of our latest Facebook game, BrainJewel , I have learned some basics on good User Interface Design together with the designers involved in this project. We started out with a quite unclear concept of usability. In the beginning I think we made the mistakes by wanting too many things at once and putting design before usability. After internal evaluation and user feedback, we lately improved the general usability according to the following principles:
1. Clear, neat, big button & text design in general
2. Less is more – make the menu and usability as simple and quick as possible
3. Display only the most necessary information in the screen
4. Use the same font type and same sizes & colors for similar information
5. Create smooth UI transmissions
Not being an expert of UI design I had go through an trail and error process, when working with my Chinese designer colleagues, who have in some points also a different understanding of the arrangements of objects. For future games I have learned an important lesson. UI design should be taken in consideration from the beginning on – starting with creating the concept of the game. When creating the game flow the game designer should already think about it.

The Tutorial Screen and the Game Screen of BrainJewel
Above you can see two screenshots of BrainJewel in the development phase. Left is the tutorial screen and on the right side the game screen. The tutorial displays many information, starting from the actual tutorial to a comparison with your friends and the upper menu with basic game information. During the game play we are only displaying the time, score and a pause button. All other information is removed. The general game information is always placed on the top of the flash container and separated from each other to be easily identified. The background of scene is faded out to not distract the user too much etc. I am confident that these small measures already improved the overall experience. For the future I definitely want to learn more about UI Design. I heard that you can even study it…sounds like an interesting plan
During the next week BrainJewel will hopefully be launched. If you are interested in becoming a beta tester, please contact me directly in Facebook.

