A game’s UI (User Interface) and HUD (Heads up Display) are essential to creating a good game experience, it provides the player with vital information and provides feedback for their actions.
HUD (Heads up Display)
The HUD is the piece of UI that the player is able to see during gameplay, things such as:
- Health
- Mana
- Items
- Mission Objectives
- etc.
As the the player will be able to see the HUD throughout most of their time played, the HUD must provide valuable information all while not cluttering the main gameplay – which should be the players focus. The following images are taken from research and statistic from existing games of how much of the screen does the HUD take up in different videogames.
Depending on the genre of the game, the HUD may take up less or more space than most others games, however, for an action-adventure it should take up no more than 10% of the screen. Other than small things like mission objective pointers, item pick-up prompts; the main focus area (the centre of the screen) should be kept relatively clear of HUD items. Information provided by the HUD should be kept on the outskirts of the screen, however, putting them too close to the edge makes them harder to notice.
Case Study – The Witcher 3: Wild Hunt
As my game will be similar to The Witcher 3, I decided to download and take screenshots of the game’s UI for inspiration.
Case Study – Dark Souls 3
Key take-aways:
- HUDs must be concise, get information across to the player without cluttering the screen
- Help the player utilize the information given to them, Key-binds, Directions etc.
- Large and attention-grabbing HUD items are fine as long as they aren’t on the screen to long or too regularly – as it can distract the player from the key focus
Skill Trees
As my game will have skills, my game must have a skill tree that the player will use in order to unlock these skills. Therefore, I must know what makes a well-designed skill tree.
After analysing skill trees in already existing games, there are some key take-aways I have come up with in order for me to create my own skill tree:
- Make it apparent what skills are linked/ work with one-another
- Colour-coding
- Sectioning
- Make sure the player knows what they are unlocking
- In-depth descriptions
- Player statistics
- Allow for mistakes, players may unlocked things by accident
- Hold to unlock mechanic
- Un-do unlock, as long as the player hasn’t used the skill or exited the skill tree
- ‘Are you sure?’ after the player has finished using the skill tree
How will this effect my game?
Firstly, the UI of my game will be as compact as possible, taking up a small percentage of the screen at any given moment. Only allowing for key information to be portrayed to the player during gameplay, freeing up as much space on screen in order for the player to see the game world itself.
Choices that the player is able to make within certain UI screens – skill trees, item shops, etc. – should be obvious to the player how they are spending their resources. Furthermore, they should be forgiving to the player, allowing them to undo certain choices they make for the sake of ease-of-use. Without being able to abuse this mechanic.