User Interface Research

Tom & Jerry Game

As my aim is to create a 2.5D platformer game which includes famous cartoon IP-tie-ins I decided to research a game I used to play all the time with my cousin as a child. The game was great for 2 players as the aim was to beat the other player by chasing them or placing traps around the environment. As an example if Jerry turned the television on and Tom walked past it, Tom’s attention would be on the television for a few seconds giving Jerry the opportunity to attack Tom. I’m looking at a game where the player can only progress forward and many mini-game options will also be available as well as the main campaign.

The H.U.D for this game is nice and simple, however, I’m not really sure if I like the position in which the icons are placed. My favourite H.U.D aspect in this would have to be the health bar; the more damage the player takes equals the more damage to the character icon and health bar (a nice interactive feature). Also the power-up selection is nicely displayed as most games have power-ups in the main menu and it is usually awkward to work whereas this uses controller commands. If I was to improve this I would maybe put everything in the middle where the screen splits. From left to right Jerry’s Power-ups, Jerry’s Health Bar, Timer, Tom’s Health Bar, Tom’s Power-ups. I would do this so that the player doesn’t have as much confusion of where to look and it doesn’t take them as long to take in all of the information, therefore giving them more time to play.

User Interface Research 001.jpg

Image Source:

The Warriors

User Interface Research 002

Image Source:

This game may not be aimed at children, however, I decided to discuss this game because of the unique health bar system. At first glance you may think that the health bar is the red bar underneath the players name, it is not though. The health bar is represented by the coloured circles under the players feet. I like this mechanic as you don’t have to look to the top of the screen to examine your health, you can still look at your player and continue to play the game as normal; also the bar changes colour to what we know as the three colours of health that we automatically know (green=healthy, orange=damaged, red=nearly dead). So with the health bar being so uniquely placed under their feet, you must be wondering what the red bar is. Well the red bar under the character name is a special power meter; when the player has earned enough points the character gets some sort of adrenaline rush and can fight faster and stronger, as well as taking less damage.

Flappy Bird

A very popular game that was released for mobile devices has a simple user interface that I think would have a chance to be good for my game. It is simple and easy to use although with my game being slightly more complex I would have to consider applying more aspects. The reason I like this H.U.D is because it shows a tutorial really simple and quick at the beginning and the points system is large and bold at the top of the screen.User Interface Research 003


Image Source:

The Original Super Mario Bros.

User Interface Research 004.jpg

Image Source:

User Interface Research 005.jpg

Image Source:

Going back to a great classic that is still popular to this day. This game has a nice user interface that is easy to read and very simplistic. Although there are a few numbers involved everything is easy to read and even if you can’t pay attention to the time limit you still have little gestures from the music warning you how long you have. The original had all of your stats in a line across the top of the screen whereas the classic decided to put health/lives and number of coins at one side and the point system and time limit at the other. Having to look from left to right constantly can be annoying, however, in my opinion I believe that they did this in knowing most people look more at the health and coins rather than the time limit and points. Sometimes you’re too busy playing the game to even notice.

Gex: Enter the Gecko

This is just one of the many of my favourite PlayStation one games as it was so random yet so fun. Thinking back to most of the old games I used to play I realised that some only have H.U.D designs that only appear when necessary. For example this Gex game has no H.U.D whilst playing, but if you get hurt by an enemy your health bar will appear and take away what is needed. Also if you collect an item the number you have collected will show up on screen for a few seconds. A great feature that I haven’t seen since PlayStation One game is the camera icon. This game allows the player to change the type of camera they want to play with (Automatic/Manual). When the player presses the camera buttons to adjust the angles of which they play in the camera icon will appear at the bottom right of the screen so they know what camera they are using.

User Interface Research 006.jpg

Image Source:

Medievil PlayStation One

User Interface Research 007.jpg

Image Source:

This game was very spooky at the time, however now we see it as fun and quirky. The H.U.D on the other hand was easy to read as it showed pictures as well as numbers/words. From left to right you have your weapon that is currently selected (and how much ammo you have left), your shield strength, your health bar, level percentage/progress and the amount of coins you have collected. This game introduced a quick weapon select option in which you press a shortcut key to switch weapons quickly.

The Tomb Raider Game Series

In the first original Tomb Raider Games there wasn’t much of a H.U.D. Again stats would only appear when needed. Most people used the pistols in Tomb Raider which are usually unlimited ammo so there was no need for an ammo count (unless using shotgun or desert eagle etc.) and the health would appear when damaged. I do like the way that some of the original Tomb raider games had a sprint/slash stamina bar as now in most RPG games made currently in 2016 we have a stamina bar. In the new Tomb Raider games (‘Tomb Raider’ and ‘Rise of the Tomb Raider’) there is not a health bar as when Lara is in pain the screen goes red around the edges and is covered in blood as these games are known to be more graphic also you can unlock unlimited sprint in the skills menu. The weapon select is now different as there is a larger variety of weapons and we now have to limit ourselves with ammo and no weapon is unlimited. Using the d-pad the player can choose what weapon to use and what else to use along with it; for example you can use a bow but you have many choices such as lighting the bow on fire, using a poisonous bomb or attaching an explosive to it.

User Interface Research 008.jpg

Image Source:

User Interface Research 009.jpg

Below are my designs for user interface within my game:

Quick Start-up Screen Mock-ups
For a game interface you have to take into consideration the Start-up screen as well as the H.U.D. Here are some quick sketches to where I want each aspect of the start-up screen to be positioned.

Font and Game Cover Research <—— Here is a word document that features more of my research about other games start-up screens and what type of font I want to use for my final game.

User Interface – Head-Up Display Designs
I played around with where I wanted the aspects of the H.U.D placing around the screen. When doing this I considered where the player prefers to look, how other games show their H.U.D and why also I looked at where is best for the player to look when they are needing to focus a lot on their game rather than the H.U.D.

Getting closer to a final design

Here is my first final design. I wanted to create something that was easy for the player to understand for the target audience and also very decorative. I started with a quick design an developed the design further in Illustrator. The design feature (from top to bottom) a time limit/score, power-ups, special abilities gauge, character icon and a health bar. I really like the design, however, to improve it I would rather have the H.U.D across the top or on the right as the players attention is on the left trying to control the character and avoid objects and collect collectibles. On the other hand the designs are quite consistant and very colour coordinated.

Tom &amp; Jerry HUD
Tom & Jerry H.U.D Mock-up
Scooby Doo HUD
Scooby Doo H.U.D Mock-up
Garfield HUD
Garfield H.U.D Mock-up

The H.U.D Mock-ups above are going be used as my final. I like the way that each H.U.D is colour coordinated as it gives a slightly new touch to the players experience throughout the change in levels. I really like these H.U.D designs as they all have a black outline so they will stand out from the background, they are easy to read and feature no reading (just images). I feel like it could be improved, some could argue that the H.U.D is too big and too much of a distraction whereas you could understand that it is no distraction, however it is just easier to understand.

Overall I feel that I have done a really good job and I am looking at progressing further with all of my designs.