Dragonsdoom's roots started as a hardcore gamer; playing hundreds of hours of Counter-strike, Baulder's Gate and Sim-style games for years. Even as he played such games, he was fascinated with the concept of 'Level Editors', creating many small levels for such games as Sim City, Age of Empires and Stronghold. He eventually experimented with further design concepts such as GUI style mods in Age of Empires. After a time, he decided to become a developer himself, to be more than a consumer amongst the horde and give back to the community. He learned true 3d level design by starting on the Source engine, and is currently learning how to do do every aspect of game development in the hopes of starting his own indie company with some college pals.

Report article RSS Feed 'Main Menu' GUI & you.

Posted by Dragonsdoom on Feb 20th, 2009

This is a draft of a upcoming article Dragon is currently working on.

I have played a great number of games, and a good quantity of them have been nice quality, and a fair number of them have been terrible. Today I am going to talk about one major element of what can really help or hinder a strong game experience.

The Graphical User Interface(GUI) is the system you use to navigate to the correct parts of your game. There are many ways to design a GUI, and many of them better or worse for the end user. Some are extremely complex, some are far too simple, some are extremely bland, while others are very distracting. The quality of the GUI can really change a game experience.

First, let us take a look at a example of a good GUI:
User Posted Image
Crysis
I would consider this to be a fairly good GUI. Easy to navigate 'quicktabs' on the left, the bulk of the information to the right, a little bit of it's own twist on opening windows by animating the motions, clearly labeled buttons tell you exactly what is there and where the end user needs to go to jump in the multiplayer after setting his Anti-Aliasing(AA) level. Also of note; the background graphics don't bleed through the important stuff, drawing attention away from important configurations.

Second, a example of a AI that has become too complex.
User Posted Image
Neverwinter Nights 2
I don't claim to be a expert at this, but from the viewpoint of a end user, this is really a complicated layout. Upon opening the game options, you are immediately presented with the exploration camera mode options, even if you are searching for your AA level.
Looking at this, I can see why some people can be easily turned off from Role Playing Game(RPG) interfaces: if I was a Counter-strike newbie, and I started trying to configure my options for this, I don't even know how half of these options make sense or have anything to do with the game. I would just want to tweak my shadows down and my AA up.
A great deal of these options could easily be consolidated into a 'Advanced options' Tab, and the presentation could be much more streamlined and better arranged. If you had correctly managed subtabs, you probably could set this up with a main options panel subdivided into graphics, audio, interface and keymapping, segregating the system into a much more manageable size.

Here is a example of a GUI that is too simplified.
User Posted Image
Robin Hood: The legend of Sherwood
I am not entirely certain when the big trend towards AA and Antirscopic Filtering came in to the video game design world, but I think it was around or before 2001.
This game was released in 2002, and although at the time we did have three primary styles of screen resolution, I think we would have had more potential options than those there. The big thing you want to learn from this is to give the end users power to adjust their own options. If you are worried about people breaking things in the options panel, set aside a 'advanced options' section for the people who are constantly tweaking their options. Who knows, in a few years someone may have a computer that processes shadows or lighting in such a way that he can only crank up those settings to maximum, and can't rely on your low-medium-high scale of computer designation.
I noticed this particularly with Far Cry, my current computer at the time of this typing has a very strong graphics card, which can quite effectively render more modern games such as Team Fortress 2 and Fallout 3 with ease, but the system still chugs a bit with Far Cry because at the time, when Far Cry was at the cutting edge of the technology, we were using the system processors to compute the graphics instead of the fancy separate 'Graphics Cards' that were still new to the field, and I have a single core processor. So the moral of that story is like I said above, give the end users power to adjust their own options.

Here is a example of a small issue I wanted to bring up:
User Posted Image
Age of Chivalry
In this menu screen, part of the flavor of the game is added to the GUI, in the form of phrasing the menu tabs according to the style of the game period.
I personally would try to avoid doing this. It may help add to the suspension of reality, but I just find it makes things bloody difficult to find. I host servers on occasion, and when this game came out there were a few settings that sometimes messed up on certain people's systems. So I would tell them; "Go into your options panel and set this setting this way." and they would have no idea what panel in the menu I was talking about, because it was called 'Blacksmith's workshop.' Now, I am not saying you can't or should not incorporate suspension of reality helpers into your GUI, but you might consider making sure everyone can understand what it means. In the game Lords of the Realms two, you had a option to leave battles that you had started by clicking on the 'leave battle' button, and the narrator would ask you "retreat, my lord?" as the standard 'Are you sure?' dialog box came up. And that is or would be all well and good. A vocal suspension of reality, combined with a nicely designed dialog box, but with plain and modern text really made that nicely well done.
Basically you do this for the same reason the Germans in war movies about WW2 speak English in German accents, or have English subtitles.

Here is a set of examples of bad GUI ideas.
User Posted Image
The main screen of Burnout Paradise
The first thing that happens when you load up Burnout Paradise is at least Four mouse clicks before actually getting to the Main Menu, because it will tell you every time about how the loading icon means it is saving to the hard drive, which you have to notify it that you understand by hitting enter or clicking the button. After that happens, you will either need to log in to their site with a EA account, or it will automatically bring up a in game web page that requires closing, and hitting yes in a 'Are you sure?' dialog box. Once you get past all that, it will show a splash page with no actual options on it, until you verify you are there waiting for it by hitting a button, at which point it will go into the third or fourth loading screen, (because you totally need to sit here watching the loading screen instead of getting a soda from the kitchen or going to the bathroom, which most people do in the loading screens of games instead of at the main menu when it is waiting for your input.) and finally lets you in the real main menu(Picture above). The only problem you will have is if you want to change any options at all,  they are not available here.
To get to the options, you will have to go through the starting cutscenes, select your car(with a painfully long wait while it renders individual different cars one at a time), select your paintjob(with another nearly as painful long wait while it renders your car's paint schemes one at a time), and finally be deposited in the game. Still with no options in sight, you are dumped right into the game. After experimentally hitting the esc key, you will be presented with game stats:
User Posted Image
The esc key stats page of Burnout Paradise
If you are sharp eyed and lucky, on the first time you view this page you might notice the F1 and F2 symbols hidden in the top left of the 2d artwork. Consider yourself lucky.
These lead to progressively more menus, and each menu apparently has to be shunted from the bottom reaches of your hard drive, because shifting between them creates a very significant pause that lasts at least a second.
Finally if you manage to do that several times, you will come across the lost temple of golden savegames, alabaster audio options and river of chocolate:
User Posted Image
The hidden valley of the rare and elusive option buttons. (Oompa-Loompas not captured in image.) Burnout Paradise
This is not the way you want your GUI portrayed.

Another side note:
There is no reason to make your GUI screens ugly, get the 2d art guys on your team to work with you to create a good visual both in and out of the game. You don't want to end up like this:
User Posted Image
Sim Tower

User Posted Image
Neverwinter Nights 2
Make sure you also keep the context easily visible as well, at first sight this may look like NWN2's main menu, but in actuality, it is the multiplayer portion of the game. The buttons for New and Load game here are actually two different server hosting routes. This could be easily solved by discreetly putting the word "multiplayer" somewhere right under the main splash graphic, completely solving the context question.

Eventually you will need to place the 'ingame' portion of your GUI, and this can often make or break your game, Especially in RPGS, MMOs, and other complex games where a large amount of information is required. One of the most important things you want to be careful with is the size of your Heads Up Display(HUD) elements, as it can make your game feel much more cramped if you use elements that are too big, and very difficult to read if they are too small.
User Posted Image
Neverwinter Nights 2
In this game I have a number of very large HUD elements I need to work with, and as such I sometimes feel quite cramped in what little screen I have left for my graphics to display. It really gets worse as I get more party members onscreen that I need to manage, it sometimes feels very tight.

One of the most important major factors in MMOs, especially MMORPGs is how customizable the hud is. Often high level player characters have several bars filled with powers, and if there is a magic system involved it gets even more complex.
User Posted Image
Dungeons & Dragons Online: Stormreach
In this shot we have a very high level character,(16th by D&D standards, 80th by most MMORPG reckoning.) who also is a magic user, with many powers of spells. She has five entire quickbars devoted to various powers she has accumulated, not to mention the various other HUD elements common to most games of this styling. Thankfully, instead of one bar she has to cycle through, or five bars right in the middle there stacked, the developers have decided to allow the players to rotate the quickbars and drag them around. This allows her to customize her own setup. You really want to allow this, especially in the case of MMOs, as I had said before.

I hope to get this article out and around the developing communities of modders, and perhaps out to full scale developers, as I think everyone has something to learn from this article.(I certainly did.) Thanks for letting me explain a consumer's point of view, and I hope that someone comes away from this with a better understanding of consumer concerns on this matter, and perhaps puts it to good use. Any comments or criticism on various points made would be most welcome.

Thanks,
-Frank 'Dragonsdoom' V
Dragonsdoom @ gmail dot com

Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Level
Avatar
Avatar
Offline Since
Dec 27, 2011
Country
United States United States
Gender
Male
Member Watch
Track this member
Blog
Browse
Blogs
Views
68 (1 today)
Report Abuse
Report article