Archive for the ‘Designing for the User’ Category

Ok so this is the menu system that has been created for the Rabbit Heart game project that we have been working on. It’s a simple menu with some of the concept artwork used from the Rabbit Heart project website of the character Ululu and the Rabbit Suit wandering in a field. I felt that this was a good image to use for the menu as it is a lighthearted piece of work that reflects the game rather nicely. In the first image, the menu system is the usual set up of a list of buttons, each one taking the player to a different part of the game. If they click on “New Game” they will be taken to a new game, as is obvious through the button labeling. There are also “Load/Save” “Options” and “Extras” If the player clicks on the Load/Save button, they shall be taken to previous saves so that they can continue their current games. Then if they click on the Options button, they shall be taken to the Options screen, as can be seen in the second image of the menu system. The player will be able to go into the Audio, Graphics and Video settings and alter them to their own preference. There is also a screenshot of the extras menu, if the player clicks on it, they shall be taken to the two options presented within the screenshot, either to go to the artwork gallery, which will display the concept artwork for the game, or they can watch the credits of the game. I feel like this final option to view the credits is not needed, but most games offer the option to watch them, so I have included it in this design.

GUI HUD Extras Menu

GUI and HUD Design Options GUI and HUD


Ok so this is the GUI/HUD design for the Rabbit Suit. First person, with the control sticks in sight, which of course when Ululu is sat in it will also have her hands shown to be holding them. There are three screens across the top of the display, these display the weapons that the Rabbit has, which at the moment as can be seen in the screenshot are missiles, with an ammo count of 20 and the Rabbits own Katana. The ammo will deplete as the missiles are fired at enemies and the Katana has no life span. In the middle screen is what I called the Ululu Cam, this gives the player a camera view of Ululus face, once animated, she would respond with a grimace, look of shock or fright whenever the Rabbit is hit for a large amount of damage or a part of it is damaged to the extent that it cannot be used, as the suit becomes more and more damaged, the more desperate her facial expression will become, till the suit is damaged to the extent where she needs to escape it, wherein she will press the eject button on the joystick and she will eject to safety from the suit before it explodes from the extent of its damage. On the final screen is a rough representation of the Rabbit suits health. Ideally the screen would display a face on image of the suit, with each part highlighted in green, as each part takes a hit, the colour will change from green to yellow, to orange and finally, red when it is damaged and no longer working. Once over 50% of the suit is damaged beyond use, Ululu would be forcibly ejected from the suit. Of course there is also a cross-hair in the middle of the screen so that the player can target their enemies in front of them, otherwise they would be aiming blind and there would be a really good chance that they could miss the intended opponent.

Rabbit Heart Rabbit Suit GUI







This is of course only a rough idea as to how the HUD would be designed, but I feel that it does its job well as it offers a solid design that doesn’t clutter up the screen with icons and screens, and yet at the same time manages to give the feeling that the character is inside the Rabbit suit.

Ok so this was my first design for the Ululu GUI. This is really, really basic, with next to nothing on it, spread out and rushed. This needed a major overhaul and thanks to the feed back I gathered from others in the group, I was able to take a look at this and change pretty much everything about it.

Main Game GUI







So after much reworking and design changes to pretty much every aspect of this GUI, here is the almost finished result.

Rabbit Heart Ululu GUI Inventory Closed






This is the reworked model, with a proper map and compass system in place in the bottom right hand corner. The backpack has been cleaned up and the white box around it removed, it is also no longer blurry. The health bar and energy have also been changed, the energy bar is now in the shape of a battery with a full charge, to show that the energy based weapon that Ululu carries is at full charge. This energy bar will deplete as Ululu fires her weapon, eventually needing to replace the depleted battery with a new one from her pack. The health bar shows Ululu with 5 frogs for her health, this is going on the frog plasters that were shown on the Rabbit Heart blog. Each time Ululu takes a hit, she will lose half a frog and she will need to use plasters to eventually regain her life. I have also installed a left and right hand icon set at the bottom of the screen, indicating which items are equipped in each hand, at the moment in this image there is the blaster, which is present in Ululu’s left hand. Her right hand is empty. There is also a small crosshair in front of Ululu so that the player can aim with their weapon and can also see what Ululu is looking directly at, this also offers help when it comes to picking up items, instead of just walking over them and them magically appearing in the empty storage slots in the back pack, Ululu could have to walk right up to them and pick them up individually with a button press or mouse click.

If the player either clicks on their back pack or opens it through the inventory hot key, then they shall have the inventory open up for them so that they can place items in Ululu’s hands or into the back pack for storage reasons. As can be seen in the screenshot below, the inventory has been opened and stored within the back pack are a spare battery for the weapon and Ululu’s Helmet. I have only placed four item slots within the bag because the game comes with a limit on what Ululu can carry, meaning that the player will have to choose which items to carry with them, so I decided that instead of five or six slots, there would only be four as this is much more limiting and gives the player more choices to make with their items, instead of being able to just carry lots of items with them. Some more pieces still need to be added, such as the arrow that will be going into the map to show where the character is on the map and which direction they are facing and travelling in.

Rabbit Heart Ululu GUI


The user interface for Skyrim is quite simple, the player uses a control pad to interact with the game, if they want to move the character and look around, they will use the corresponding analog stick on the control pad and the character on screen will move in the direction that the player presses. There are two views within Skyrim, First Person and Third Person; the player can change between the two simply by pressing down on the left analog stick of their control pad to change the view to their preferred one. The player can interact with NPC’s (Non-Playable Characters) by walking up to them and then pressing the button that has been assigned to them for interaction, normally the A button on the Xbox 360 pad and the X button on the PS3 pad. This opens up an interaction with the NPC, the player can then trade or gain information from the character that may be important to the game, or they may learn something useful for later on, some characters will even seek the player characters help and send them on a quest to retrieve an item or find someone that can then help them out at a later stage in the game.

The player can bring up the characters hands for combat by pressing either of the trigger buttons on the pad, and then use the triggers again to attack animals and enemies when they are in combat, they can use the triggers to either swing swords, fire arrows from bows or they can cast spells. The player can also combine weapons, so they can have a one handed sword and a spell so that they can change up their fighting style.

When the player encounters an animal in the game, they can either attack it or leave it alone, if they encounter a hostile then they are attacked automatically in a real time battle system where the player has to react to the hostiles movements and attacks instead of entering a separate battle sequence. Parts of homes and the wild are interactive as well, the player can enter homes and steal items and they can travel and pick up plants that they can then use to make potions or sell to traders.


The HUD within the game is quite simplistic, so the player isn’t sat looking at a lot of bars and inventory boxes. There is a health bar, which is represented by the red bar at the bottom of the screen in the centre, mana which is represented by the blue bar on the bottom right of the screen and stamina bar which is the green bar on the bottom left of the screen. There is a compass bar at the top of the screen that shows the direction that the player character is travelling in, along with any markers that have been placed, so that the player knows which direction they need to travel in order to reach the marker. The game will also bring up a bar that shows an enemy’s health when they appear in the cross hairs of the player character, letting the player know how much health the enemy has.

When it comes to inventory, the character presses the back button on the control pad, which will pause any action that is taking place on the screen and bring up the map, inventory, magic and level up options, the player can then go into these options to either change their inventory, check where they are in the land on the map, switch out their spells or level up their character and improve their abilities with skill points if they have any that can be spent.

Warcraft 3 is a real time strategy game. The interface is pretty simple, the player just needs to use the mouse to control the actions of their units and select their buildings. When it comes to selecting an individual unit, the player clicks on it with a single left click on the mouse and then right clicks the mouse to move them or make them go to mine something like a tree or to enter the gold mine that is shown in the image above. The player can also make their units build structures by clicking on the little chest icon in the bottom right and choose the building that they want the unit to build, then they have to place the stencil of the structure onto the map and place it near their base and left click so that the unit will go and start to build the structure.

When it comes to using the structures, the player left clicks on the structure that they need to use. Each structure has a use, there is a structure for research that allows the units created in the barracks and specialist structures to be upgraded so that they are harder to kill and stronger so they can beat enemy units easier. The player can click on the mini map to fast travel the camera to that location, most of the map is blacked out with the “fog of war” but if it is revealed then the player is capable of seeing what is happening in that location.

When the player clicks on a unit, the unit responds with a short phrase that indicates that the player has clicked on the correct unit, and the character image shows up in the character image place on the HUD.


The HUD for Warcraft 3 is almost the same as that within League of Legends. There is a small screen section across the bottom of the screen that offers the mini map, the character picture and stats and a health and mana bar if the character is a special character.

The main things that set the Warcraft 3 HUD apart is that instead of having abilities as options within the HUD for the character, they will have one skill and several command actions that can be chosen for them. The skill can be clicked on to activate it and the command actions can be chosen to set characters to do something in a certain place. If the character is a builder unit, then they can be selected to bring up the option to go into the building options. Once the option for the building list has been clicked, the player can then look at the building list on the HUD and click on the building that they want to build, this will give the template that the builder will then go too once it has been placed and begin to build the building.

In the top right of the screen, there is a little window, this has three little icons in it, two of these show how much of a certain resource the player has, the third will show their bases population limit and current occupation size within that limit. In the top left corner will be a button that says “Options” this can be clicked on so that the game pauses and the options tab opens up, allowing the player to change the game and audio settings, save the game or close the game completely.

Each special character within the game will also have the inventory on them so that they can carry up to 6 items that offer them different buffs, kind of like the system that is in place within the game League of Legends. As can be seen in the image above, each unit has its own health bar. There are several icons next to the map as well, these are command actions that can be used on either the mini map or on the location where the player is at the time, alerting their allies to a position, letting them move their units and generally being able to issue other commands on the mini map.

The player interacts with the game through the use of point and click, placing the cursor in the area that they want the character to move too and then right clicking the mouse to make the character move to that location or attacking a minion or enemy champion. They can also use the mouse cursor on the mini map by moving the mouse over the map and right clicking on it to send their character long distances without having to click their button all the time.

When it comes to combat, the player can use pre-assigned keyboard shortcuts to use their characters abilities and items for boosts and additional attacks and they can use the left and right mouse buttons to use these abilities and attacks on enemy characters. When it comes to tracking the character, the camera can be fixed so that it instantly follows the character, or if the player prefers, they can have the camera changed so that they control it themselves, giving them the chance to look ahead in a lane for danger before locking the cam again to their character.


The HUD is positioned around the edges of the screen, with the exception of the player names which are hovering above the player’s character. The display across the bottom of the screen shows the character information.

On the left is an image of the character along with their current statistics, next to that is a little box area that is broken down into six individual boxes, each one holding an item that the player has purchased for their character. When the player hovers over an item, a box will appear that shows the item buffs that are given to the character for having that item in their inventory.

Moving onto the middle of the display there is a green bar and a blue bar. The green bar is the characters life and the blue bar is the characters mana, as they use mana or take damage their bars will be depleted, once their bars are empty, they are either depleted completely of mana or they have died because their life has been depleted. Above the health bar are a set of images with cool down timers on them. Each of these images is an ability that the player can use to have their character deal bonus damage or heal themselves or their allies depending on the type of ability that it is. Whenever an ability is used there will be a small cool down time before they can use the ability again. To the right of the bars and abilities are four little boxes that are leads the player to the settings and other things that they can view, like the stats board within the game that shows the characters with their items, kills and deaths and the gold they have gained in the game. Then in the bottom right corner there is the mini map, this is used by the players so that they can see where their team mates are and whether they need help. On top of the mini map are a red and yellow button, these are called ping buttons. The player can use these buttons to alert their team mates as to whether they need help or whether they need to be careful of a certain area because there could be a high concentration of enemies there. In the top right corner is a little marker area that shows how long the game has been going on for along with the kills, deaths and assists that the player has accumulated along with the number of minions that they have killed. Underneath the timer and counters there is an FPS indicator, this shows the frames per second along with the strength of the lag that is taking place within the game. The higher the ping and the lower the frame rate, the slower the game reactions and the worse the player experience.

On the left hand side of the screen there are images in boxes. These are the indicators that your team mates are alive along with how much health and mana they have, if they are dead then their image will be blacked out and a timer will be shown to indicate how long they will be out of the game for. The player can click on one of their team mate’s images to bring up a window that shows their items, stats and their life and mana bars. If the player hovers the ping buttons over an image and then clicks, they can tell the team whether to help the player or tell the player to fall back from their current position in response to a looming threat.

Basic Colours: The basic colours on the colour chart are Blue, Red and Yellow. By mixing these colours together in various quantities, you can create secondary colours.

Secondary Colours: The secondary colours are created by mixing the Primary Colours together, as can be seen in the image above, Red and Blue mixed together make Magenta, Red and Yellow make Orange, Blue and Yellow make Green. These are the secondary colours.

Tertiary Colours: The Tertiary Colours are the colours that are made by mixing a secondary and a primary colour together in varying quantities. Some examples are shown in the image below.

Colours and their meanings:

Colours can be associated with several things, examples are listed below.


Red can be used to symbolize danger if it is on a sign, it can be shown to be a high priority action or task on a check list, in emotions Red is often associated with anger and aggression. An example of the emotion used can be seen in this video from the comedy series Friends, with Ross Geller trying to convince people that he can lose his temper by going “Red Ross”

By going “Red Ross” Ross is able to use his anger to play Rugby a lot better. However, anger is usually represented in Red as a negative emotion.


Blue is a neutral colour, often associated with calm, the sea and the sky. Signs often use blue, as can be seen in the examples below

As can be seen, blue is used in a neutral way in these shop signs. It stands out so that people notice them and then shows them where they can go, without using an aggressive colour like Red.


Yellow is used within signs to offer a warning, such as with the Danger sign that is often seen in work places, along with other signs that offer some kind of warning. Because of the brightness of Yellow, these signs stand out and people take notice of them. These signs are often found in places where there is a high risk of injury, such as construction sites.