Before going on. I should point out that this is not your typical tutorial, or a tutorial in the traditional sense. It's not going to show you how to draw your UI, or how it should look or teach you anything like that. So if you're looking for artistic pointers your looking in the wrong place. This is about the theory of UI's, the thought behind them. The things you need to take into account long before you even run your favorite art package.
So yeah, it's more, things to think about and bare in mind rather than a step by step guide that holds your hand.
What is a UI?
A UI (User Interface), UI (Graphical User Interface), HUD (Heads up Display), is the players window into your world. It's their feedback and their input. It's their backpack, their map, their compass, score and menu options. A game UI is and can be any or all of these things and many more, each one as individual as the game itself. Everything we use has a UI so to speak. The remote control, the controls in your car. Designers always striving to come up with better ways of allowing people to interact with other things, making them easier and more logical and ergonomic. Millions each year are spent on even the most mundane of UI's, even the trusty pen has a fortune spent on creating the perfect feel.
So why do so many developers not really put much thought in their game UI's?
It's all very pretty but..
This is the problem, everyone who can draw a bit, thinks they can create the perfect UI. Unfortunately 9/10 times all they're thinking of is how it's going to look and fit on the screen. Which I admit, is important in itself, but you can have the worlds most amazing looking UI, that does nothing but infuriates your players and ultimately puts them off the game entirely. The UI is often more important than the game itself. We can forgive less than perfect graphics, or the odd hiccup here and there. But give your users RSI trying to control your game and you'll find they're not so forgiving.
The perfect UI is like the Holy Grail, unobtainable and probably doesn't exist, but that shouldn't stop you from trying to reach such a goal. The better your UI, the happier your players will be, rather than a jarring experience they'd much rather forget.
The layout
Ignoring HOW your UI looks aesthetically, it needs to be functional, logical and simple. This seems like standard stuff, but you'd be surprised (or perhaps you wouldn't be?) at just how many games seem to end up with the most god awful UI's possible.
Think about your game, the style of playing. Do you have icons on the screen used to move the player around? Try keep them together. It's a known fact that a player will try on average to move the mouse (or controller) the least distance to do what they want. Don't put often used icons far apart from each other. Group them together where they are in easy reach of the player.
As with controllers below, the easiest (semi)cure to bad UI's, is allowing the player to customize them. But unlike customizable controls, a custom UI is much harder to setup, and it can and will break any specific layout idea's you want to use. Just how much customization should you allow? Will you provide an option to save custom layouts? (A very good idea!). How will you create your UI so that it fits your game no matter what the player does with it. Can they move parts around, resize them, remove them completely or even replace the visuals of them?
Remember, each game will need it's own unique UI, something specific to that. As mentioned earlier, what works for one game, won't in all likelihood, work for another. A shoot-em-up's UI would be terrible for an RPG, and a beat-em-up's UI would be pointless for a puzzle game. Taylor your UI to fit the genre and your game, not just in appearance but also in function. For example, a standard shoot-em-up will generally not focus or worry about displaying the power-ups you have. The game will be fast, no time to be looking around your screen for detailed info, especially when you can see by your actions that you have this or that power-up. Instead just have a nice clear display, showing lives left and score, if required. Make it very simple to read at a glance, because often that's all the player will have time for.
An RPG on the other hand, while still wise to keep them simple and easy to use. Can allow for more information, RPG's are deeper and you want to draw your player into the game as much as possible. So give them plenty of useful feedback, but at the same time, don't overdo it. There's been many RPG's that have gone completely overboard with stats and information, and that annoys the player just as much as too little. Try and find a balance. Take your target audience into account. If your game is going to be more strategic and have great depth, the user just might want lots of information available to them all at once. An RPG player will want lots of information, but wont require it all the time. Consider just sticking to the basics like health, magic etc. and weapon stats. Does your game require you to always have their level displayed? Is it that important or can it be placed on another UI screen? Try limit your main UI to just the things your player will need to see often...
Which brings us onto separate UI screens. The more basic your game, the less likely you'll need them. But in the case of RPG's and other complex games, they're just as important as your main UI, but will often be used only for displaying information rather than control, and unlike the main UI, you can relax the rules somewhat. There are exceptions though... Using RPG's or games with inventories, for example Fallout 3 or Oblivion. Your character wanders along, finds something they want. It's just a key press to pick up the object (or steal it). Nice and simple and no messing about. But in either of those games, have you ever tried finding a specific item quickly, once you've got a full inventory? It's not so easy is it. Sure, you can display certain categories, to help shorten the list. But lets face it, in those two otherwise well made games. The inventories leave something to be desired. Often left to modders to attempt to improve and fix. What your player will want, is the most often done activities have to be the easiest to perform. In the case of inventories, sorting, and spring cleaning should be in the list of "things that should be simple and quick". Changing stats should be simple to use, to the point, but isn't going to be something that's done often, so can take a back burner.
Be consistent! If one part of your UI behaves in a particular way, then every other part of it should follow the same behavior. There's nothing more frustrating than finding different parts acting differently, it's confusing and should be avoided at all costs. For example, a + icon for increasing a value by 1, should do the same wherever a matching + icon is used. Don't mix + icons on one page, with > icons on another if both do the same thing (such as increasing a value), it doesn't look quite right.
Consider shortcuts as replacements for less important actions. For example, you increase a value using the + icon. If you press shift while clicking the icon, it increases by 10 instead. Use a little tooltip to explain this. It's simple to follow, easy to use and you save space by not having to use a different icon for both.
Another option to consider, is do you even NEED a UI sat over your game? Be creative! Just because games often use three quarters of the screen for the game, the rest for the UI doesn't mean you have to.
An old game on the Amiga had a familiar icon menu on the right, yet most of it's controls and options were done via the right mouse click and a brain like thing with bubbles in it for the options. Unique and.. interesting. Another, more recent game, had the players health not displayed on screen in the conventional sense, but instead appearing on the spine of the character themselves. So just because you've made a shoot-em-up. Doesn't mean you HAVE to follow the norm. But don't go crazy. Unique and interesting is all well and good, but you can go too far and simply confuse the hell out of the player.
A good example of a standard UI used in an interesting way would be the PIP in Fallout 3. While not exactly original (many games before have used the wrist device type UI), it looks good, and works well, without filling up the entire screen or screens with lots of information when it's not required. Leaving the more important parts (health, radiation, weapon quality/ammo) displayed on screen always, where the player needs them most. The storyline also places this UI into the game, helping to bring an acceptable reason for their existence within the game.
Press Z + V + H + up then move stick hub-wards while dancing on the spot and drinking a glass of water to continue
Something just as important as your UI, perhaps more-so. Is your control method. There is one VERY important rule you should always follow when it comes to controls, and that is.
Allow your players to CUSTOMIZE them!
This is by far the most important yet most often ignored rule. Never, ever assume a key configuration or controller layout that fits your style of gaming, will be right for the next person. The most obvious example of this is the often used WASD layout vs the arrow keys. Ever tried using the WASD configuration, with a mouse, when you're a left handed person? The same goes for the arrow keys and right handed users. While it's true, a small minority don't notice, or have conditioned themselves to work with either or both. The majority will find it very uncomfortable, and in some cases quite painful too.
Now think back to when you first used a computer, played your first game using the keyboard. Chances are you will have immediately tried the arrow keys, because, well, they're arrow keys, directions. It makes logical sense. But as the majority are right handed, it's not comfortable, therefore the WASD layout became popular. These are things you need to bare in mind. A gamer will more often than not, try the WASD layout first, while someone else will try the arrows first. Same with right vs left, though many left handers will usually expect an "awkward" layout and navigate to the customization screen before doing anything else (we're used to being forgotten, lol).
By allowing the user to customize ALL the important controls (and all the other not so important ones as a bonus) will practically resolve this issue entirely. It'll also save you from having to spend ages deciding on the perfect layout for your game. But even though you're letting the player configure their own controls to fit their playing style and comfort. You have to still consider usability. Get friends and family to play your game. Don't give them too many clues on the controls, see how easily they figure them out for themselves. Provide basic in game help, to show what does what. Ask them to explain what they felt should have happened when they pressed this button or moved that stick. Find out if performing that action has them twisting their fingers about, or getting lost and hammering random keys to find the right one quickly. Try different configurations, test, test, test. A good control layout should be easy to use, so easy that in no time the player doesn't even have to think about it, they just do it.
The above applies to game controllers too, however in those cases it's recommended you try and stick to the popular configurations as your default config. Take the XBox 360 controller, lots of buttons and things to use. Don't go against the grain. Consoles are, for now, taking the lead in how a controller should behave, and with so many people familiar with them, the player will automatically use the most familiar setup. Which in the 360's case, is the left stick to control, the right to look around, the triggers to fire. Make use of the start and back buttons too. That looks more professional, and it's more likely someone will want to press start to start, than left trigger, isn't it.
But the 360 controller isn't the only one in the world, players have for a very long time used all kinds of controllers, though it wasn't until the popularity of the Playstation that they really came into their own, with many companies designing variations on a theme, trying to improve on each others design. Before that there were fewer choices and far simpler controllers (though mostly just joysticks back then). Some have lots of buttons, some will not. So what do you do about that? It might be very tempting to create your game to take full advantage of the 360 controller and all it's buttons. But what happens if (and there will be many) a player has a different controller? If you're developing for the XBox (which you wont be with construct), then you can make full use of it's controller and to hell with the rest. But you're working on the PC, which means you have to consider any possible configuration a player may have (within reason of course. If some player is using a McGyvered Colecovision controller on their brand new super fast PC and wondering why they can't do much, then that's not going to be your problem, lol).
In time, construct will likely have plugins like the 360 one, for the most popular controllers. In that cases, be sure to include those plugins and treat each one as equally as the next. For the rest, you need to decide on a generic configuration, and always bare in mind usability across all your controls, be it mouse, keyboard or controller.
Naturally there are more specific control devices available (such as the Nintendo Wii fixed up to the PC) which you wont be expected to support, unless your game is meant for use with it. You can't, after all, cover every single base. Just try and look after the majority while providing something for the minority, and it should take care of itself.
A final, yet obvious mention. Allow the player to save the controls, do it automatically so they don't have to. Construct allows the use of .ini files. Store your controls in an ini file.
Brandy Eggnog made writing this post incredibly difficult!