© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2022
M. KillickThe Way We Playhttps://doi.org/10.1007/978-1-4842-8789-7_9

9. HUD and UI. What Does It Mean?

Michael Killick1  
(1)
Cambridge, UK
 

We’ve all seen it and it works like muscle memory. When playing games, our eyes dart around the screen to look for the health or stamina bar to show us how our character is coping with combat or exploring. But as simple as it might be, the heads-up display, or known as the HUD, is the most effective way to communicate this information to the player. The key when it comes to designing elements of the HUD is to ensure that it is not cluttered, and everything is legible. But before we can investigate this, let’s look at some of the most common elements that we see on our screens during playtime:

  • Health bar

  • Ammunition indicator

  • Mini map or radar

  • Stamina

  • Reticule

  • Levelling-up indicator

  • Inventory

Reticule

Again, you may not even notice till you engage in combat, but the reticule appears in the very center of our screens when we play first-person shooter (FPS) games . Something so simple such as a dot or a target can help the player indicate their direction of movement or aim toward targets. But that is how it should be: simple. This element should not take over the screen nor should it be the focus for the player. While they are most common within FPS games to appear on the screen for the duration of gameplay, they will also appear in third-person games while the player is aiming. When coloring the reticule, ensure that it can be always seen. If your game is set in a snowy landscape, then avoid making the reticule white so it blends in with the player’s surroundings. Regarding coloring, make it clear who are friends or foe when aiming. FPS games tend to turn the reticule blue or green for friendlies or civilians, and enemies red. Danger will always be red! Some FPS games give the player the option to use aim assist and help the player lock onto targets quicker in a firefight. Some games even design the reticule to move toward a target to help the player aim toward their enemy. Players tend to be given the option if they would like aim assist depending on their preferred playstyle. In Marvel’s Avengers, when the player is Captain America, they are given the chance to throw their shield at enemies or to help solve puzzles. When aiming, the player can use the reticule to aim toward multiple enemies to inflict damage. Who knew that a simple circle or dot on your screen could be so useful!

Ammo Indicator

There are typically two types of indicators for ammo : number or ammunition. One might suit the game better, but this will be down to the style of game you intend to make. As this is something that is going to be watched the most on a screen, this needs to be simple and easy to read. The Halo series uses a mixture of these elements depending on the weapon the player is using. However, the designers use percentages for energy-based weapons as if they were powered by batteries. Some fully automatic weapons will have the ammo indicator on the gun and almost at the center of the screen so the player can keep track of their ammo. If you are going for a typical FPS ammo indicator, then Call of Duty displays their ammo at the bottom right of the screen. However, the designers will use both number and bullet image for that added bit of flair.

Same as weapon ammo, any grenades or special items that can be used need to be displayed clearly and near the weapon ammo indicator. If the player can use multiple items in battle, give them a way to open the items and select which would be suitable for them. Halo: Infinite gives the player the option to switch grenades and which ability they can use, such as the grapple or deployable shield.

Health Bar

The literal lifeblood of a character, the health bar helps keep track of the player’s health or lives. That’s it! To put it in a more serious manner , the health bar indicates how close the character is to their death.

The health bar can also be the most creative element of the HUD as this can range from hearts, a bar, or percentages or can change colors depending on the amount of health the player has. But this can also work in the opposite direction. Rather than a health bar, the player could have a damage bar, where if it fills, the player will die. One focuses on not reaching zero, and the other focuses on not reaching the maximum number.

There are other games where health is represented in other ways, such as a shield bar which can regenerate. For example, in the Halo series, the Master Chief has a shield that acts as his health bar, but if depleted, he is vulnerable to attacks which could end up killing him. But this shield will regenerate once the player has taken cover and has not taken any damage for a short period of time. This method of health is becoming quite common in games such as the Uncharted series , Ghost of Tsushima, and the Call of Duty games. Some games will use a health bar to represent the player’s health, and others will use a coloring method. This coloring method will see the screen becoming black and white if the player is close to death. Corners of the screen might also turn red in the process to indicate damage has been taken, but similarly to Halo, the player will regain health if no damage is taken for a short period of time.

Mini Map/Radar

Something I’m finding more useful with the more games I play, but the mini map is a staple point to watching your corners from enemies and assisting you with finding those hidden treasures. Some games use the mini map to help guide the player to a waypoint they have marked on the map. It might also give the distance, so the player knows how close they are to their destination. But make sure that anything on the map is clear for the player to see. The hint with this is “mini.” While the player can open the pause menu to visit the world map, having locations and items highlighted on the mini map needs to be clear to see. Red Dead Redemption 2 gave the player the option to change the size of the map for the assist if the player needed a wider view of the mini map. But what you want the player to see on your mini map will be down to you.

Alternately, using a radar system will simplify what appears on them, but also encourages exploration from the player. The Halo series uses a radar system where only enemies will appear on the map as red dots. This will be within a 25-meter radius of the player. In some cases, enemies will only appear on the map if they are making noise or have discharged their weapon, which provides their location for the player.

Regardless of which method you choose, you need to ensure that the player can still enjoy the gameplay without the mini map or radar being in the way. These work best if they appear in the bottom corners of the screen, tucked away but still easy enough for the player to refer to during their game time. If you decide to have different locations on your game map, ensure that there is a legend for the player to refer to. The worst thing to happen is give the player lots of different locations and them not understanding where they are going or who they might be seeing. This also goes for marking extra locations on the map. There might be some cool locations on a map the player might need to return to in the future, so why not give them the option to mark them on the map for their own reference?

The mini map can also provide lots of other help notions during gameplay, including an altitude indicator that is perfect for those that are flying low to the ground or water. Grand Theft Auto 5 incorporates the indicator as soon as the player enters a flying vehicle. But it also acts as a depth indicator if the player enters a submarine. If the player dives too deep underwater, the submarine will start to take damage before the player is crushed to death. Morbid I know! But using these tricks for a mini map or radar is an excellent way for your game to be immersive and to expand your gameplay.

Stamina

Similar to the health bar, the stamina bar indicates how much stamina the player might have to carry out certain moves. In The Elder Scrolls series, the player is given three bars at the bottom of the screen: health, magic, and stamina. The player’s stamina bar will reduce if the player runs, fights, or swims. Stamina, however, can be upgraded and provide the player with some extra energy if they need it in combat or exploration.

If the player has run out of stamina while playing, make it clear that this has happened. If the player loses stamina during combat , the character could slow or look tired while the player waits to regain stamina. The character could also use deep breathing to indicate they are tired. Be clever about how you tell the player that they need to rest.

If your game uses potions or times for the player to rest, these could be quick ways for stamina or even health regain. But try to give the player these options at suitable times. You wouldn’t want your player to camp on the battlefield to regain health!

Levelling-Up Indicator

A bar that tends to be seen within menus or under player customization, but the levelling-up indicator shows the player’s progress to achieving the next level of their character. Experience points (XP) might be awarded for missions, combat, collectibles, and more which will assist the player with unlocking more content and extras for their character. This indicator might appear on the screen but only when XP has been collected. Destiny shows a simple white bar at the bottom of the screen if the player has collected XP but will change color if the player has made it to the next level. These are great to design and can be tailored to the design of the character. For example, a levelling-up indicator might be red for a character who mainly wears red and blue for someone who mainly wears blue. But your game doesn’t need to use XP. Grand Theft Auto uses RP (respect points) to level up the player while playing online. Their indicator appears at the top of the screen but at one end shows the level the player is on, and the other shows the level they will reach next. This helps give the player a target while they can also see how much RP they need to make it to the next level.

Inventory

A hallmark feature used within RPG and open-world games, the inventory is used to keep track of items and collectibles needed on the player’s adventures. Players should be able to have quick access to items they have found to use in combat, missions, puzzles, etc. The inventory can typically be toggled by a button on your controller or keyboard to show the full list of collected items. An assigned item list might also appear on the screen to assist players with items they regularly use. Minecraft offers the player up to nine items to quickly select during their adventures, but these can be changed through the main inventory selection.

RPG games such as Pokémon Legends: Arceus and The Elder Scrolls series allow the player to carry a limited number of items and require them to store the rest of their treasures in an in-game house or chest. If this is something you decide to use, make sure that the player can carry their main items, but give them the choice to view everything they have collected on their adventures. However, The Elder Scrolls series incorporates a weight system, where certain items require more strength to carry and will limit the player to how much they can carry and how much will need to be stored elsewhere. Limiting your inventory will be up to you and the style of game you wish to use. If limiting it is something you wish to consider, make sure you give your player the chance to upgrade the size of their inventory to add some progression and goals they can achieve. Keeping it linear will make the gameplay tough, but giving flexibility will always swing in your favor!

Similarly, to an inventory , some first-person games give the player an item selection using the control pad on a controller (or assigned keys on a keyboard) that is specific to the level. These items or tools can be used for puzzles or key elements within missions.

Achievements (Honorable Mention)

Introduced with the Xbox 360 and PlayStation 3, trophies and achievements gave new goals for players to max out their game time. Microsoft took it a step further and awarded players with points or better known as Gamerscore. This is used as a social element to compete against friends to see who can collect the most Gamerscore each month. It can also be used to flex who has the highest and who has played the most games. The more difficult the achievement, the greater the Gamerscore. While Xbox had developed this, PlayStation has almost stayed the same with their trophy system from the PlayStation 3 through to the PlayStation 5. Trophies are graded on Bronze, Silver, and Gold, while each game will have a Platinum trophy for those that manage to collect all other trophies for a game. This can also be seen as a social element and comparable with friends.

While these can be fun to collect and share with friends, they offer the player a way to expand their gameplay and collect all trophies/achievements . This could be from delivering a special attack, finding a certain item, completing the game on a particular difficulty, or down to completing the main storyline. Achievements are an excellent way for the player to get the most out of their money and maximize their game time. If you decide to use achievements, make sure that they have flashy sounds and animations to make it clear that the player has achieved something. Xbox now have Diamond achievements which have a unique sound to tell the player they have achieved a special target. Both PlayStation and Xbox have percentages to give the player an idea on how many players achieve that trophy while playing the game.

Whatever UI elements you decide to use, there are three fundamental factors you need to consider when designing them:
  • Size

  • Placement

  • Color

These pillars of all HUD design will ensure that your player can see what they have on their screen, will not interfere with their gameplay, and will be accessible for all.

Size

We have touched upon this briefly with the mini map, but what is the point of creating a UI element that is too small to see? There is nothing worse than a player having to sit nearer the screen to see a weapon selection or a mini map. Most games should be played in comfort (unless they require the player to get up and move!) and can be enjoyed without having to adjust where the player is sitting to see the game.

A game I recently played (for the purpose of the book, I shall not name which game it was) was a third-person action-shooter which required me to collect a range of weapons to shoot oncoming aliens. While the gameplay was fast paced and required lots of guns for different enemies, being able to use the weapon wheel to change guns required me to sit nearer the screen to see what I was doing. At times, I found myself squinting at the screen to see what I was choosing. If you are going to make a weapon selection, make sure the player can easily see it. If the player is in combat and requires them to change weapons for certain enemies, you could add a slow-time feature to give them a chance to change to what they need. Alternatively, make the player open a menu which pauses the game to select a weapon. This will give them time to take a breath and work on tactics if they are caught in a boss fight.

Placement

If the HUD element is in the way of the gameplay, then you know it is not in the correct place! Making sure that your screen isn’t cluttered with these elements is key for the player to focus on what they are doing in-game. Whatever elements you decide to use for your game, ensure that they are strategically placed on the screen . For example, health bars tend to appear in the top left of the screen and ammunition indicator in the bottom right. If mini maps are used, they might be in the bottom left of the screen, or a horizontal compass style map could be seen in the top middle. Do your research and play games of a similar genre to which you would like to make. See what other designers have created and methods they have used. Play some games and see what works for you!

Color

I briefly mentioned the word accessibility when it comes to the coloring of your HUD elements. Like the size of your HUD, you need to choose a color that can be seen against the gameplay. Any colours you choose for your game need to be seen by everyone with impairments such as dyslexia or sight. The Last of Us Part 2 was hailed as one of the most accessible games created due to the extensive accessible settings developed for the players. This included the size and color of subtitles, menus, HUD elements, as well as sound and visual cues to help when the player engaged in combat.

In the game I recently played in which I struggled with the size of the HUD, I also struggled with the chosen color for the HUD. It was a deep blue, and while it was a nice shade of blue, it was almost impossible to see when I was walking across fields or in brightly lit temples. A white- or gray-colored HUD would have worked more effectively for this game and would have made it easier to see the health and the ammo indicator.

Also, carry out your research when thinking about colors and the HUD . Knowing what works best with other colors and the theme of your game is crucial to designing an accessible game and a clear and concise HUD.

Static and Dynamic HUD

Some games don’t use a HUD, or they use something called a dynamic or a static HUD. A dynamic HUD is where the HUD will disappear if the player isn’t interacting with what they have on the screen, such as reloading or healing. A static HUD stays on the screen for the duration of the gameplay, except for cutscenes and main menus. This is normally the easiest of the two HUD styles to design as you need to decide what will be shown on the screen, such as health, ammo, stamina, etc. Once they decide, they will be with the player forever!

Dynamic HUDs are typically used if you are trying to convey an immersive experience and for the player to engross themselves within the gameplay. Most third-person exploration games will use a dynamic HUD to maximize the screen space so the player can see more of the game world. But there are a few key notes to consider if this is the option you wish to go with:
  • Some games have started to include optional dialogue for the player to learn more about the characters and develop upon the story further. While these are optional, you will need to give the player a prompt to show that these conversations can take place. An icon of a controller button might appear above the character’s head in a speech bubble to indicate they have something to say.

  • This can also be used if the player needs to carry out an activity such as moving an object with a side character to progress further in the level. This could also be another speech bubble or a sound prompt, so the player knows what to do next.

  • Some levers, switches, doors, or key items within the world might glow to inform the player that they need to approach and interact with them. Halo: Infinite uses an IR scanner (infrared) to scan the field for key items and a waypoint to the next area to go. This will light up the screen bright yellow and leaves a marker to show the direction and distance from the next area.

But What If I Want It All?

What if your game needs a static HUD that is tracking health, power of weapons, mini map, stamina of an animal you are riding, inventory, number of throwable items, armor health, distance to next mission, player progress, and so much more? You would typically find this style of HUD in MMORPGs (massively multiplayer online role-playing games) such as League of Legends or World of Warcraft. When it comes to tracking all these aspects, simplicity is key. There are a lot of things for the player to look at as well as concentrate on the gameplay itself. So, what is the best method for it? I have narrowed it down to the main points to consider if you ever see yourself designing a HUD for an MMORPG game in your future, or if your game ends up with a busy HUD where the player will need to concentrate on various elements of your world:
  • Make your most important buttons easy to see and reach. If your player is in combat and needs to heal, make the button easy to see and placed somewhere the player can reach for those extra health points. Don’t make them search through a main menu or inventory to find those potions!

  • If you are working with artists, let them work on the designing of icons or buttons; they will have more experience in this area than dedicated programmers! Sometimes, it is better to leave some aspects to the professionals!

  • If you are going to use icons, choose the right image to represent the following action. If you are going to heal the player, the icon could be a heart. If you are going to reload your weapon, the icon might be three bullets with arrows circling it. If the player clicks an icon, make sure that there is a sound or cue to tell them they were successful or not with their actions, which leads us into the next item.

  • Interactive adaptive audio (IAA) – If the player interacts with something on the menu, world, or HUD, make it known that they have done so. Giving feedback to the player will tell them if they are doing right or wrong with their actions. When playing the original Pokémon games, the game gives the player a “thud” noise when they walk into something. This tells them that they cannot move any further.

  • Coloring your icons to match their intentions or abilities helps give the player an indication of what they will do. Various moves in the Pokémon series are colored to match their type. Fire moves are colored red/orange, dark types are black, water are blue, ice types are light blue, and so on. If you want to go the extra mile to help your player, you could show stats of what the moves or items are resistant to when combating others.

  • As mentioned, keeping it simple is crucial; no one wants to read paragraphs of text during intense moments in your game to heal their character. But if you want to guide your player further and maybe even remind them of what each button does, have a small text above an icon if the player places their cursor over it. A reminder is always helpful.

Where Do These Things Go Anyway?

It’s one thing to learn about the different elements within a HUD, but it’s another to think about their placement on a screen. While we have mentioned this earlier in the chapter, we will now think about the effectiveness of placement and what will work best when it comes to the decision making.

If you think about a third-person game and your character is standing in the middle of the screen, this area will now be off limits for any icons or HUD elements to appear here, except for any reticules or small text to identify game objects. You want to ensure that nothing will obscure the action, so keep the middle free! Some menus will pause the gameplay but also have a translucent menu so the player can still see the player. This can be handy if you are called for dinner and want to pick up where you left off!

When thinking about typical game screens, health, armor, and any stats will typically appear in the top left or bottom left of the screen. It could also appear in the top middle! This is normally where the most important information during gameplay will be. God of War PS4 has its health in the bottom left which also shows any runes and abilities the player can use, and Ratchet & Clank has its health and player progression in the top middle. A good reason for this is that some parts of the world will read from left to right. So, moving your eyes from health to action can feel normal for some.

Sometimes, the bottom of the screen will also be home to some icons or HUD elements. While a world compass might feature on the outside edge of a mini map, games such as The Elder Scrolls series use a rectangular compass to show waypoints. This could be placed at the top middle or bottom middle of the screen. However, placing elements in these places can be a tricky move. You need to ensure that they will always appear on the screen and avoid any clipping. Some older televisions or monitors may not be to the same aspect ratio your game was created in, which could lead to some of your HUD appearing off screen. Work out a place on the screen that works best for your game but also avoids any possibility of being cut off. More recent games give the player the option to adjust their game’s settings so menus and HUDs will always fit with their monitor’s resolution. If this isn’t a feature you are going to add, it’s worth testing your HUD with different monitors just to be sure that everything works smoothly!

Sometimes, less is more! Try to convey as much information to the player as possible in as little HUD elements as you can. If you end up having health in the top left; the mini map in the bottom left; ammo, abilities, and weapons in the bottom right; and any supporting character’s health and stats in the top right, then the screen will feel really crowded. There are a couple of ways to avoid this. Either give the player the option to customize their HUD to whatever suits their playstyle (giving players freedom is something they always love to have!) or double up on some elements rather than having them as multiple. For example, health and stamina are bars that sit under each other but given different colors to identify which is which. Whatever you do, make sure that the player doesn’t feel overwhelmed the moment they start playing and trying to understand everything on the screen. The HUD should be treated like a language. Teach the player what each element means until they can decipher what it means and how they can best use it for their game over time. The more they use the HUD, the better the understanding will be of it. God of War PS4 doesn’t give the player the compass element until two hours into gameplay, so you can take your time introducing elements to the player!

As I mentioned earlier in this section, you can give the player a chance to upgrade armor or weapons during action so they can have the upper hand in combat. But the choice on whether you want the player to think about their upgrades before they go into action is up to you. You can do this by not letting the game pause during combat if the player needs to change their weapons or craft a certain item in their inventory while combat is taking place. This means the player will need to act fast to avoid being killed. This will also encourage them to always be prepared. The Last of Us series do not offer this function as they want their audience to feel suspense during a firefight. So, if the player is injured, they need to take cover while they heal themselves or craft an item.

If the player needs to find an item in their inventory, open a menu, or change a gameplay option, this should always be easy! There is nothing worse than having to navigate their way through four menus, to find something that will help them with their game. Something should always be within reach. You wouldn’t want to walk into another room on a different floor of your house to change the TV channel, so why make your play go on a scavenger hunt for something that could help them or improve their experience? If the player needs to open a map, it should be as easy as a single button press. The quicker the player can find something, the happier they will be!

A Note on Menus

Other than HUD, we now need to consider looking at the UI (user interface) within a game. I could spend hours and chapters talking to you about all the games I have played that have used great menus which were clear, bright, and simple, and those that just really weren’t great to use or see. But I want to walk you through each section of a menu so you can see some of the effective ways to design them (I have tried to put them in order that you would see them when loading a game):
  • Splash screens

  • Legal information

  • Title screen

  • Options

  • Save/load game file

  • Loading screen

  • Pause menu

  • Controls

  • Credits

Splash Screens

Remember when you load up a game and you see lots of fancy animations and sounds for company logos. These are splash screens that show the player the companies behind the game. For legal reasons, all parties need to be shown and given credit for their work and involvement within the project

Legal Information

There might be a few legal screens to show important information about the game and the company, but players commonly skip these screens. This is for companies and manufacturers to share legal information about the game you are about to play. While this isn’t a legal feature, some games will have a side note that encourages the player to take regular breaks and avoid playing games for a lengthy amount of time. Whether you listen to this advice is up to you, but it is always beneficial to take a break rather than sitting down for hours on end – whether you are designing or playing games!

Title Screen

Once all the legal stuff has been shown and all the disclaimers , the title screen will be the first thing the player sees before they jump straight into the game. First impressions are hard to erase, so getting this right is crucial! You want to create something that will capture the player before they make it to the main menu. Whether you achieve this through intense music or an introductory cinematic scene which sets the story, this will set the tone for your game and get the player excited. While the player will see the box art when purchasing the game, the title screen will set the tone. But the way you design it will be up to you:
  • You can be minimalistic with your approach. Uncharted 4 keeps the menu simple and short. The menu is at the bottom left of the screen so the player can see a dead pirate swinging in a cage from a tree. The player knows immediately that this is going to focus on pirates and will be in a jungle.

  • You can go for a classic menu approach with the main game logo in the middle and the menu options below as a list. Games such as Super Mario Bros , God of War, the Lego series, and Minecraft all use this approach.

  • Sometimes, gameplay or animations are shown while navigating through the menu. While gameplay isn’t shown during this menu, Marvel's Avengers shows the roster of characters in the game once the player reaches the menu. The cool thing with this is when the player changes an outfit for a character, the player can see it immediately on the character in the menu. The problem with having gameplay or animations in a menu is that it can get too busy. If someone who is new to games and wants to navigate through the menu to set up audio, visual, or controls, seeing animations in the background can be off-putting. Keep it simple and don’t distract the player too much from navigating through your well-designed menu!

A hidden feature within a title screen which used to feature in older generation games is if the game was in an idle state for too long, the official game trailer would play. Once shown, the game would return to the menu. But this will become a cycle if the player leaves the game in an idle state until they pick up their controller. Lego Star Wars : The Complete Saga was famous for this and would show its trailer to those that would leave the menu running until the player interacts with it!

Options

A gray area within menu design is the options menu . While I’ve advised you to keep your menus simple, creating an options menu is going to contradict everything I have said about them so far! When games started out, there were no such things as an options menu. Just play, high score, and quit. As time passed, games became more complex and offered players a plethora of options to customize their playstyle. Typical options were adjusting the audio and visual aspect of the game to work with powerful monitors or home speaker systems, but now players can change buttons on keyboards and controllers to match peripherals they use, such as a gaming mouse or Pro Controllers (a controller that has extra buttons and can be customized for those that play competitively). But something that has become increasingly common is the incorporation of accessible settings (something that will be covered later in this chapter). As a roundup, make sure that your menu can be easily navigated and broken down into subsections your player can navigate:
  • Audio

  • Visual

  • Gameplay

  • Controls

  • Game extras (for those that can purchase cheats or game enhancers such as infinite ammo or health)

Save/Load Game

Something that should be straightforward and simple is being able to load and save your game files. Some games have limits to the amount of save files there can be, and some have an unlimited amount. The best advice I can give when it comes to this is give the player the chance to create their first game save file once they have selected their difficulty (if you have this in the game). If you don’t give them the option to create their save file before they begin the game, the unthinkable could happen and they forget to manually save their game after an hour in before they switch off. It happens, but you can be the one to stop this from happening!

When you load up a save file, it might show the location where the player last saved , their playtime, date they last played, and sometimes their overall game completion percentage. Having this can be a nice touch for the player to remind themselves on how well they are getting on with the game. Sometimes, it can be a pat on the back if they see a save file with 100% completion written on it!

Give the player the option to delete their save files if they would like to. But give them some disclaimers before they confirm they want to delete their progress. There is nothing worse than to press delete by mistake and lose everything they have been working on! It is also worth considering the amount of save file slots that a game can have. If a family is wanting to play the same game, family members might want their own save file to have their own adventure. Typically, there might be three to six save slots on a game. But others might only have one. The main Pokémon series only offers the player one save file, which means they will need to delete their data if they wish to play the story again!

New Game+ is a feature where the player can play the game again from the start but play it on the next level of difficulty . Collectibles and upgrades will be carried over to help them with the next difficulty level. If this is something you choose to add, make sure that the player doesn’t override their original save, but saves it into a free space. The great thing about a New Game+ is that there are things in the first playthrough that the player is unable to unlock, unless they play through the game again. This encourages replayability which is always a bonus to have!

Loading Screen

Something the player will always fail to skip out of impatience is the loading screen . We have all seen one, whether it be in applications, software, or games; it’s these that we hate to see and would remove if given the chance.

However, as we now move into more powerful technology, the loading screen is something that is becoming a thing of the past. But it is always beneficial to include them if the player needs to see something while the game loads. Typical loading screens will feature artwork and maybe some tips on how to use abilities and reminders of the story. How you decide to fill this gap is up to you:
  • The Elder Scrolls: Skyrim shows player models and some trivia from the game story while the game loads. The player can read about the models while also learning about the lore of the game. Lego Star Wars : The Skywalker Saga shows miniature ships from the game and stats about them while the game is loading.

  • Pokémon Shining Pearl and Brilliant Diamond show the started Pokémon in the bottom right of the screen jumping while the player waits, while Pokémon Legends: Arceus shows a player running animation in the same place.

  • The Last of Us series uses butterflies and fireflies while the game loads . While this isn’t obvious from the start, these are subtle nods to the game story the player will learn about.

  • Showing concept art is always a good option as there are some players out there who play games based on the artwork. You never know, you might inspire someone to create artwork based on the style you have used!

  • Google Chrome uses this while the user waits for their Internet to connect, but they have added in a 2D side scrolling game. Having a minigame to play while you wait is a good idea instead of your player staring at a screen while their game loads. But be mindful of how long it takes to play the minigame. If the player is still playing it when the game has loaded, make a button appear on the screen so they have the option to leave the minigame and continue with the main game.

Top Tip

Have something animated on the screen while the game is loading. If your screen is static, then the player will struggle to know if the game has crashed during loading!

Pause Menu

The chance to give the player a break from the game; the pause menu needs to be clear but also offers the option to save progress, access the game map, change any options, or access the inventory. As mentioned earlier, you can give the option here during the design phase if you would like gameplay to continue while the pause menu is active or typically pause everything for the player. Like the options menu, there are various menus the player can access from a pause menu :
  • Options

  • Bonus material

  • Cheat codes

  • Credits

  • Difficulty settings

  • Save/load game

  • Exit game

In God of War PS4, when in the pause menu, it brings the player to the customization tab where changes to appearance, weapons, and abilities can be made. The player can use L1 or R1 to cycle through the different tabs such as settings, world map, perks, armor, skills, goals, codex, and resources. All expand the gameplay in their own way, and everything can change the experience the player has with the game.

Controls

If the player needs to change their control or even see them as a recap, then make sure they can see a visual to help. Showing a controller or keyboard which indicates the controls to the player will give a visual reference. It’s worth considering giving the player the option to customize their controls if they would like to make any changes.

In some third-person games, when a player has unlocked a new skill, a short animation will play to show what will happen and the controls needed to make it work. New skills and abilities will need to be shown so the player has reference to them for the future.

Credits

While some see these as boring and want to skip them, this should be a celebration of the hard work from everyone who has had an input into the game. Everyone who has had an involvement from production, art, animating, marketing, and even down to testing should have their names in the spotlight. Make sure that everyone has their name in the game credits. Even if there have been disputes or disagreements or someone has provided an input into the game, then their name should be featured. Names deserve to be seen, and this should be entertaining to watch . Whether it is down to incredible music, extra cutscenes, or more gameplay, players should be encouraged to stick around through the credits. The Halo series does it perfectly by allowing players who have completed the game on the highest difficulty to have a special credit cutscene as a reward for players. Guardians of the Galaxy also does it brilliantly by including the game’s final boss fight during the credits. Just to make sure the player is giving their attention!

Scoring/Stats (Honorable Mention)

Telltale Games perfected this with their story-based games. Players would be given crucial choices through their stories which would impact how their story unfolds. Once a chapter is completed, the player would see the stats made based on other player’s choices. This might show the percentage of those that chose to go down a secret path, or kept a character alive, but this was a great way to reflect upon what has happened so far. Just make sure that this isn’t boring. Anyone can read percentages or scores, but make it interesting to read. Why not have images from your choices so the player can reflect on what happened when they made it, or make it appear like a storyboard and tell the chapter again?

If a story game isn’t something you are going to make, but would like to have a score screen , here are a few things you could show your player:
  • Score

  • Enemies defeated

  • Time taken for completion

  • Items found

  • Times killed

  • Hints used

  • Number of lives

  • Objectives completed

  • Secrets found

This can also be used as bragging rights; make sure your player can show off their progress to their mates if they see it!

Accessibility in Games

It’s been mentioned a few times now within this chapter, but it’s time to explore it further. Accessibility within game design is something which is becoming more common as technology is changing and evolving. This is the understanding of making games accessible and inclusive, so everyone of all backgrounds and impairments can enjoy games and experience them as fully as the next person.

It is vital that we aim to understand and support as many players as possible in accessing games. Games were designed to enjoy, so why should others face barriers when wanting to have fun?

Case Study: The Last of Us Part 2

2020 saw the release of one of the most anticipated game sequels, a follow-up to 2013's multiaward-winning The Last of Us . In addition to excellent gameplay, a heartfelt story, and great design, developer Naughty Dog also implemented the largest suite of accessibility tools seen in any game so far. To get an idea on what I am referring to, I have provided a list of some of the settings that have been used to review as follows:
  • HUD rescaling

  • Screen magnifier

  • Camera distance from the character

  • Navigation assistance

  • Infinite abilities (such as holding breath underwater and ammunition)

  • Text to speech

  • Audio combat cues

  • Change in difficulty for a range of aspects, such as enemies, resources, stealth, and overall game difficulty

  • Traversal audio cues

As mentioned, this was just a small list of the settings they developed for the game. Now as you have reviewed the list, have a think about how the features support gamers. Think about the barriers that are currently present in games, if and how these features will help them access gameplay, and any other thoughts you have about the solution. It will also be worth doing your research to learn more about the settings that were used within the game to help you with this task.

When designing video games, on the surface, it might appear that you need to draw the art, program the game, design the menus, record the music and sounds, and animate the characters. But there are different areas within accessibility that need to be considered to ensure that all can access your game. Here are the main groups :
  • Motor

  • Cognitive

  • Vision

  • Hearing

All come with their own barriers, but also solutions on how players from all backgrounds can still enjoy the game you have designed. There are also some tips on what you can do to support players when designing your game.

Motor

How we typically play games is by using a controller, mouse, keyboard, steering wheel, pedals, and more. But there are those that have reduced mobility and require diverse needs to support them with playing games . When developing and designing games, options should be there to ensure that those with mobility impairments can still enjoy your game.
  • Games that use one touch on a phone, keyboard, or controller can be a great way to play games, as some players may not be able to hold a controller or reach the full length of a keyboard to press buttons in combinations.

  • Some games require players to hold down a key to destroy an item or turn levers to open a door. Try to avoid this and change it to a tap action. Restricted mobility can make it difficult to hold down buttons for long periods of time.

  • Reduced gameplay difficulty should be adjustable for those that cannot play for long periods. Players might have low stamina and cannot focus to carry out repetitive movements such as combat. Being able to reduce or change difficulty can still offer the same gameplay experience for players.

  • Make functions of a game accessible, such as photo mode (the function of being able to take photos in-game). Players should be able to enjoy playing without the need for support when they are having fun. There is nothing more frustrating than to ask for help while stuck on a screen or not being able to use a function in the game.

Cognitive

This covers a wide range of experiences for players, such as dyslexia , memory loss, and sometimes motion sickness (this can happen frequently when playing virtual reality games). So relaying information about the game’s story, mechanics, and anything that is useful for the player to know is crucial so they can get the full experience of your game.
  • Avoid anything that flashes with intensity. Those that have photosensitivity might suffer from strobe lighting or flickering images. This should be something that can be adjusted or switch off depending on the needs of the player.

  • Having a clean HUD and UI helps managing and reading icons on a screen much easier. If you have followed everything in this chapter so far, then this one should be easy for you!

  • If designing a text-based game, make sure that the player has enough time to read and take in all the information that is needed, but also ensure that it is legible. It should be that the fonts can be changed for those with dyslexia ; this should be adjustable within the options menu.

  • If a player suffers from memory loss, then being able to review controller maps or revisiting tutorials to learn the controls will make things much easier. While practicing of mechanics and mastering them is vital during gameplay, having the option to review controls in their own time will be helpful.

  • Any motion blur or any other motion effects can be adjusted or switched off. Having the option to reduce it can still provide the original experience, but giving the player an option is beneficial to them.

Vision

While all impairments that we have covered so far are a challenge to live with, designing a game for those who have limited vision or blind shouldn’t be a challenge.
  • Being able to adjust the contrast is excellent. Some players with eyestrain may need these settings adjusted for a better experience. Being able to invert colors or having the option to change the lighting is also a great idea.

  • Most horror games will use lighting to create atmosphere and set the tone of the game. But those with limited sight may not be able to distinguish objects in the world. Lighting should always be an option that can be adjusted.

  • Audio description is a commonly used feature for television, but it is now becoming more common within video games. Using this for cutscenes is still a great way for your player to experience what is happening through the story outside of the gameplay. This can also be used when navigating menus to identify buttons or icons on the screen.

  • When thinking about level design and designing the gameplay, you will need to consider what will make the game easier to complete. The player could start with more health, reduced health on enemies, the paths through levels are colour coded to show the main path through the environment and aim assist when engaging in combat. The Last of Us 2 used a method of visual and nonvisual cues to tell the player when there is an enemy getting closer. Vibrations could be felt in the controllers which would intensify as enemies drew near. The speaker in the DualShock controller would also play sound effects to inform the player of what is happening in the world around them or when an action has been carried out.

Hearing

Creating immersion is through the designing of sound and visual . But if you take one away, players still deserve to experience your game to its fullest.
  • Another common feature that would be seen on television is subtitles. Games typically have subtitles switched on at the start of a game and are normally kept on for a player’s preference. I know I like to use them to make sure that I don’t miss anything that has been said in the story, and I don’t require any support for my hearing. But these subtitles should be adjusted to support visual-based players too. This can be from a range of sized fonts, colored text backgrounds, and colored fonts.

  • If your game incorporates enemies patrolling the world, have an indicator to tell the player they are getting close to an enemy or an enemy is sneaking up on the player. Also, show if the player is making any noise in the world which could alert enemies. This is used in most exploration or stealth games and will be shown with an indicator that would change color if the player has been noticed or has aroused suspicion with an enemy.

  • Vibrations can also be used to indicate distance of enemies, weapons being fired, explosions, or vehicles driving past.

While the preceding list is simply informing you of these areas, it is always important to do your research and learn about what can be done to support gamers out there. If there are ever times when you are unsure of what you can do to make your game accessible, speak to those that know best. There are plenty of charities that support those that wish to play games or even speak to those that struggle with barriers. Getting firsthand advice and suggestions is invaluable.

Never be afraid to reach out to someone who supports accessibility within games or those that have a field in designing accessible games. Being inclusive is the moral and right thing to do and should be considered by all designers.

Conclusion

So far within this chapter, we have covered the following:
  1. 1.

    What does the HUD and UI mean in terms of game design?

     
  2. 2.

    What elements are there of the HUD and how can we design them?

     
  3. 3.

    What is accessibility in games, and how can we consider it?

     
  4. 4.

    How to make an effective menu?

     
  5. 5.

    Games that have created effective menus

     

As we now move to the final chapter of the book, we will now consider some of the best things to avoid during game design. While this book has provided the best tips and tricks to start you out on your journey, or even help you during your journey, we now need to think about common mistakes and pitfalls of the process. There is never a right way to do something, but this next chapter will help you avoid issues and may even save you some time in the long run!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset