Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
September 28, 2020
arrowPress Releases

If you enjoy reading this site, you might also want to check out these UBM Tech sites:


A Look At UI Design Part 1: A Quick Examination.

by Josh Bycer on 07/14/11 12:15:00 am   Expert Blogs   Featured Blogs

4 comments Share on Twitter    RSS

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.


As I worked on my analysis of The Witcher 2, my inner designer was screaming out loud over all the UI issues I had with the game. Since you can't call three pages of rants at game design a review, consider this my form of venting.

No matter how great your game is or how good looking, if it has a horrible UI, it could be enough to ruin your game. One difficulty of talking about UIs is that every genre has its own style and information to convey. For this entry, I'm going to talk about some general dos and don'ts and talk about two genres that I'm the most familiar with when it comes to UI design: RPGs and strategy/city builder.

The first thing as a designer that you have to think about when coming up with the UI is, what is the most important information to the player? The reason is that you want this information to be as easily found by the player as possible.

With RPGs and strategy games, they make use of having multiple screens of information. You want to avoid having your information strewn across multiple screens of information. There are 4X strategy games out there that have the player going through at least three screens to see how their economy is and if they are losing money. Burying your information like this makes your game harder to learn and can make your UI convoluted.

You want to try to keep relevant information together and it is fine to repeat information in several areas if it will be used there. For instance, in The Witcher 2, the player can only see how many ingredients they have for alchemy in the inventory, not when they are on the alchemy screen. As a designer, when you are testing your game, if you find that you have to switch between multiple screens to accomplish a single task that should raise a red flag. With older RPGs, the game may not show the attributes of new equipment from the equip screen, forcing the player to go back and forth between their inventory to make sure that their new gear will actually improve their characters.

Strategy titles are known for having numerous pieces of information for the player to understand. This is where the concepts of a good UI can clash. It is not possible in most strategy games to have all the information present on one screen without overloading the player with information. Instead you need to find a happy medium between keeping things clean, while presenting information to the player. Series like Total War and Civilization have been working on this.

Both games have the main screen, where the player will see the most important information such as: happiness, total gold, unit position and so on. By keeping their mouse pointer or single clicking on a city, they can get a little more information about what's going on. Finally, they can double click on the city to get all the data there is. The main advantage to this style is that it allows them to keep the main screen from being cluttered by information.

One negative to this open design, is the use of small icons that are either commands or links to other screens. While it keeps the screen clean, it also makes it a pain to find what you're looking for. The first time I tried Civilization 4: Colonization I was greeted by a bunch of little icons with no idea what they were for. If you are going to go this route, tool tips can help players understand what is going on.

Also it is important to realize that there is such a thing as a "too open" UI. If the first thing the player sees is a main screen that shows nothing, with all information hidden behind mouse clicks and multiple windows, that can raise the learning curve dramatically. As evident by my time spent trying to play the Dominions series.

Another concept I saw recently in The Settlers 7 was the use of dynamic information windows. How this worked was at the top of the screen, there was a resource display window. When the player does not have anything selected, it shows the most important resources to your kingdom: population, tools, food and gold. Whenever the player clicks on a building or is about to build something, the panel displays relevant information to that building. For instance, a bakery requires water and flour to produce bread, when you select a bakery, you'll see exactly how much of each resource you have available. If the player wants to view all their resources, they can click on the resource window at the bottom of the screen.

Creating a good UI is a very difficult task, what the designer may find easy to understand, could be completely esoteric to the player. This is by no means a complete look, as mentioned at the start; every genre can have its UI analyzed. That does it for part 1, in part 2 I'm going to pay tribute to the Nintendo DS and what dual screens did for UI handheld design , in part 3 I'm going to tackle why one of the best games of all time, has one of the worse UIs of all time.


Related Jobs

Remedy Entertainment
Remedy Entertainment — Espoo, Finland

Senior Cinematic Scripter
Deep Silver Volition
Deep Silver Volition — Champaign, Illinois, United States

Senior Technical Designer
Insomniac Games
Insomniac Games — Burbank, California, United States

Lead Level Designer
Airship Syndicate
Airship Syndicate — Austin, Texas, United States

Mid to Senior Worldbuilder - Unreal Engine

Loading Comments

loader image