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.

BrainJewel Screens

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.

Tagged with:
 

Online Games Vocabulary

On February 22, 2011, in Company, by Gregor
1

TribePlay is proud to be a ethnically diverse gaming company. As we mainly work for the European market, our companies working language is English, but of course often we also use Chinese in daily matters. This post collects some of the most important words for gaming and game development in China to help you for the start:

English – Chinese – Pinyin

Game 游戏 you2xi4

Gaming industry 游戏行业(游戏产业)you2xi4 hang2ye4 (you2xi4 chan3ye4)

Online Game 在线游戏 zai4xian4you2xi4

Casual Game 休闲(网页)游戏 xiu1xian2 (wang3ye4) you2xi4

Virtual World 虚拟世界 xu1ni3shi4jie4

Social Game 社交(网页)游戏she4jiao1 (wang3ye4) wang3luo4

Social Network  社交网络 she4jiao1 wang3luo4

Friends (in a Social Network) 网友 wang3you3

Apps 应用 ying4yong4

Avatar 头像 tou2xiang4

Character (in a Game) (游戏里的)角色  (you2xi4 li3 de) jiao3se4

Game Development 游戏发展 you2xi4 fa1zhan3

Game Concept 游戏概念 you2xi4 gai4nian4

Concept Art 原画设计师 yuan2hua4 she4ji4shi1

Animator 动画设计师 dong4hua4 she4ji4shi1

Designer 设计师 she4ji4shi1

Programmer 程序员 cheng2xu4yuan2

Back end 后台 hou4tai2

Front end 前台 qian2tai2

Server 服务器 fu2wu4qi4

We know better... Image (c) by Some Girl named Jen

Did I miss one? Thanks to Sophie, our Project Manager, for checking the vocabulary!

Tagged with: