Game HUD Mood Boards and Analysis

Our second assignment is related to game HUDs. A HUD is the “Heads Up Display” that is onscreen during gameplay, of which can be broken up into three different types. Permanent, Pull-Up and Actioned HUDs have different purposes and are integral to a good user experience. The Permanent HUD is always on and displays things like abilities, health bars and mini-maps etc.

The Pull-Up HUD however involves elements that are only shown when the user interacts with something in the game world or HUD; an example of this would be your equipment selection screen pop-up or looting options when mousing over a fallen foe.

Actioned HUDs are quite similar to Pull-Up HUDs with the difference being the user has no control over them appearing and are instead triggered by certain circumstances or events. An example of an Actioned HUD would be words appearing on the screen when your ultimate is ready, like Battlerite. Another Actioned HUD element would be blood splatters or condition effects appearing on your screen when inside combat such as in Borderlands 2.

 

Here is a mood board of various HUDs:

hud_moodboard_1

Here is a breakdown of a couple of the games featured above and their HUD types.

Battlefield 1: Battlefield 1’s HUD is usually Permanent, with elements including mini-map, ammunition, squad members and health. Recent kills fall under Actioned HUD and interactions with objects/vehicles where mousing over them causes a button prompt to appear and a single word explanation of what that action will do.

woc6xcs5ip5x.png

WoW: The Permanent HUD of WoW includes many elements. Abilities, health/mana bars, character portrait, bags and the HUD artwork/design itself. The equipment and character stat menu can be brought up via a button press, which qualifies this as part of the Pull-Up HUD, another example of part of the Pull-Up HUD would be clicking on an enemy’s corpse to loot it, which brings up a display showing what items were dropped. The Pull-Up HUD also includes interactions with NPCs where text and various options are displayed once clicked upon. The Actioned HUD in WoW includes de-buff icons that may appear during combat and telegraph icons that some enemies display before doing special attacks.

Borderlands 2: Borderland’s Permanent HUD is usually wrapped around the character’s view as if it is being displayed to the character as well. Health, shield and shield bars, ammo and mini-map are displayed within that Permanent HUD. The Pull-Up HUD includes interactions with NPCs, much like in WoW, where text or other options are displayed. The Actioned HUD in Borderlands 2 includes damage numbers, status effects/de-buffs and critical hit notifiers inside of combat, much like WoW. Borderlands shares many similarities with MMORPGs in regards to their looting, statistics/character developments and damage numbers/notifiers.

hud-1

Dark Souls 3: Dark Souls HUDs are usually quite minimalistic, allowing you to be immersed in the game world. Health, Magic and Stamina bars, your equipment and your souls collected are part of the Permanent HUD of Dark Souls 3; however there is an option to cause your Permanent HUD to fade out when outside of combat and can be bought back by swinging your weapon or using equipment. Status effects comprise a large part of the Actioned HUD, that and the notification of your death with the iconic YOU DIED screen.

ESO:

default-hud.jpg

Battlerite:

download

Overwatch:

screenshot_16-05-29_22-51-03-000-973x547

Images used for reference and mood boards were found online.

Dashboard Analysis and Research – HUD Assignment

Dashboard Analysis and Research:

 

Purpose of dashboards:

Dashboards are essentially an interface through which the driver interacts to control the vehicle, as well as a source of information. The User Interface of a car would encompass the pedals, steering wheel, gears, hand brake, indicators and dashboard etc.

Dashboard Elements:

The main elements of a dashboard include the steering wheel, speedometer, tachometer, fuel gauge, odometer, various symbols and warning lights, and a series of gauges, compartments and possibly interactive screens in some more modern vehicles.

 

Several Elements Explained:

Speedometer: This shows the current speed of a vehicle. (This is an important element of the HUD.)

Tachometer: The Tachometer measures the rpm (rotations per minutes) of a disk or shaft in the motor. (This is not needed for the HUD, especially since the concept cars will be running off electricity.)

Odometer: Distance is measured by the odometer. (Not needed, as distance travelled is irrelevant information when racing on a track.)

Fuel Gauge: This instrument shows the driver how much fuel they have left. (This will be converted into a battery display of some kind for the electric concept car HUD.)

Digital Displays: These may show anything from your GPS system to your playlist of songs, possibly even your speedometer in some cases.

The needle used to point at the various parts of the speedometer and similar gauges is raised, the needle sits on or in a rotating node that is being operated by a bit of machinery inside the dashboard. If using a digital display, the needle will animate, usually emulating its real-life counterpart.

Mood Boards and Reference:

dashboard-moodboard-2dashboard-moodboard

dashboard-icon-and-symbol-moodboard

Why we need mood boards and references:

Mood boards and references allow us to ground our designs in reality, making them more believable, functional and visually pleasing. Having references allows us to make informed decisions and create designs that have a good balance of both form and function.

 

References

Dashboard. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/Dashboard [Accessed 16 Feb. 2017].

Fuel gauge. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/Fuel_gauge [Accessed 16 Feb. 2017].

Harris, W. (2017). How Speedometers Work. [online] HowStuffWorks. Available at: http://auto.howstuffworks.com/car-driving-safety/safety-regulatory-devices/speedometer.htm [Accessed 16 Feb. 2017].

Head-up display. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/Head-up_display [Accessed 16 Feb. 2017].

How a speedometer works. (2017). [online] How a Car Works. Available at: https://www.howacarworks.com/accessories/how-a-speedometer-works [Accessed 16 Feb. 2017].

Howard, B. (2012). Digital dashboard: Why your car’s next instrument panel will be one big LCD – ExtremeTech. [online] ExtremeTech. Available at: http://www.extremetech.com/extreme/131485-digital-dashboard-why-your-cars-next-instrument-panel-will-be-one-big-lcd [Accessed 16 Feb. 2017].

List of vehicle instruments. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/List_of_vehicle_instruments [Accessed 16 Feb. 2017].

Speedometer. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/Speedometer [Accessed 16 Feb. 2017].

Super Car Dashboard Design, User Interface | UICloud. (2017). [online] Ui-cloud.com. Available at: http://ui-cloud.com/super-car-dashboard-designs/ [Accessed 16 Feb. 2017].

Tachometer. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/Tachometer [Accessed 16 Feb. 2017].

Woodford, C. (2016). How do speedometers work?. [online] Explain that Stuff. Available at: http://www.explainthatstuff.com/how-speedometer-works.html [Accessed 16 Feb. 2017].

Images used for reference and mood boards were found online.

Driving Game Analysis and Research – HUD Assignment

Driving Game Analysis and Research with a focus on HUD Design:

 

What are the elements of the HUD?

-SNES_F-Zero – 1990:

This HUD is rather basic, featuring a low pixel count and a slightly confusing layout. The bottom left clearly displays a map of the track, with a blue square depicting the position of the player. However, this map lacks icons for the other cars and therefore a view of the location of the other racers who are not within your field of view.

At the top right there is a power bar, most likely for weaponry, pickups or boosts. Below that is your current speed in km/h and just below that is the timer. On the bottom right of the screen there is an image showing either a weapon/pickup or lives. In the top right, there are several elements. Your rank (most likely your position in the race), a series of numbers probably relating to score and an element indicating a safe zone of sorts.

The odd yellow colour of the timer is distracting, detracting from the actual gameplay. In regards to elements, there are too many cluttered together, meaning that at a quick glance the information displayed may be confusing and difficult to decipher. This would especially be the case when playing the game, engaged in a race around the track.

snes_f-zero

 

-SNES_Super Mario Kart – 1992:

This HUD, especially in the top view, strives for simplicity and clarity. The top right depicts the time, while the bottom right shows lives, coins and position. These elements are kept off at the side, although the large image of a coin at the top does distract from the gameplay due to its contrasting nature. The text, for the most part, is clear and concise. However, the 3 next to your lives may confuse some during gameplay, the different elements of the letter merging into itself.

The bottom of the screen, showing the map and positioning of the racers, is cluttered. This is especially true once multiple racers are near each other, causing an overlap of avatars.

super_mario_kart_screen_shot

-Sega Saturn_Sega Rally Championship – 1994-1995:

The HUD of Sega Rally Championship is cluttered as too many elements compete for your attention. The bar at the top, depicting the start and goal, features a distracting lime green against the darkness of the rest of said bar. This distracts from the gameplay, especially since the game world is made up of mostly naturalistic colours.

There are too many timers taking up space in this HUD, with the total time, lap time and best time being display at the top portion of the screen. This overcrowding of elements, paired with the position and speedometer, forces the player to mostly use a small section of the screen for gameplay. The large numbers displayed in the middle of the screen, nearer to the top, are extremely distracting. This further detracts from the immersion, creating a distracting element that blocks out part of the surrounding environment.

The speedometer, like most of the elements in the HUD, crowds towards the centre of the screen, boxing the players field of vision in due to the ‘borders’/’margins’ they create on the screen. Some of the text, due to the fonts used, are confusing when momentarily glanced at. The smaller font in this HUD experiences similar problems to that of the SNES Super Mario Kart from 1992, some of the letters and numbers merge together and are not clear.

sega  rally championship.jpg

-N64_ Mario Kart 64 – 1996:

Here, avatars for the positioning of racers are introduced and are faded into the background, so as not to distract from the gameplay. The font here is larger, more clear, than the previous Mario Kart game I analysed. With the increased graphical fidelity, more has been done to the text to further the theme of Mario. Mario-themed fonts have been used with coloured gradients dividing up the sections of text and numbers.

The positioning of the player is unobtrusive, hidden away in the left-hand side corner. Although that is the case, the flat colour and clean-cut font seems out of place and breaks the coherence built up through the other elements and font used in the HUD. The mini map, on the bottom right, is much clearer than before. It clearly shows the track with the positioning of the player on it. Even though it does not depict the positions of the other racers, the list on the left-hand side shows the four that are in the lead.

mario-kart-64

-Playstation_Gran Turismo – 1997:

Similar to Sega Rally Championship, too much information is displayed at once on the screen. The recurring theme being timers. All the information displayed in the HUD at the top of the screen uses one font with one colour. Not only does the colour confuse the player, but the sizing and grouping as well. The player, at a glance, might not know what information is important to them at the present moment. Once gain the elements crowd the screen, breaking immersion by providing too much information at once. The track map, like the one from Mario Kart 64, is comprised of a clear white line although with a black border this time. It also shows the positioning of the player, in this game it uses a red circle.

The speedometer, like Sega Rally Championships, aims to emulate its real-life counterpart. It shows the needle, speed and gauge floating above the game world, the colours and values contrasting. The colour of the speed in km/h is similar to that of the text at the top of the screen, creating coherence.

gran-turismo-1997

-Playstation 2_ Gran Turismo 3 A Spec – 2001:

This HUD is, once again, cluttered. Various dials and speedometers are included, taking up a large portion of the bottom half of the screen. With the dark, although faded backgrounds, they delegate that screen space to themselves. At the top right, a series of timers and positioning elements crowd the area. Even though the rest of the screen is cluttered by HUD elements, the left-hand side is more open. The map of the track is faded, with the positioning of the racers clearer and bolder. The number indicating the positioning of the player is large and bold, sitting in the top left corner.

Even though that area of the HUD is clearer and less cluttered, the busy and visually heavy elements on the right-hand side create an unbalanced feeling, once again forcing the players to use a smaller portion of the screen as playable area.

-Xbox_Forza Motorsport – 2005:

The HUD here is clearer than most of the others that I have analysed. The speedometer is given the bottom right corner, faded into the background with your current speed bright and bold above it. The speedometer itself aims for realism, emulating its real-life counterpart in regards to detail and element positioning.

The timing and positioning elements are sparse, delegated to a corner in the top right. Only the gate number and time is displayed, with the time displayed against a dark bar, making it stand out more.

Even though this hard is less cluttered, the speedometer overlaps the car due to the close proximity of the camera to the rear of said car. The majority of the left side of the HUD is empty, again this creates a disturbance in the visual balance of the HUD. This may work in favour of the HUD design, causing the eyes to look more at the elements on the right-hand side of the HUD. However, this may cause the player to look at the HUD too often, distracting from the gameplay.

forza-motorsport

-Playstation 3_Gran Turismo 5 – 2010:

The HUD in Gran Turismo 5 is an improvement, moving away from the confusing layout of the third game’s HUD, it has a cleaner look. This HUD makes use of a few spots of colour, surrounded by whites, grey and blacks, to communicate important information to the player. Red is used to indicate information that has negative connotations, the blue however shows ‘passive’ information; which is nothing that requires the player’s immediate attention.

The text showing information such as time, position and speed are shown in white, with black headings bordered by white, and white text partially bordered by black. This ensures a hierarchal structure of the text throughout the HUD, with the bordering of the headings allowing them to be read on most backgrounds.

The track, on the left-hand side under Position and Tour, moves back into space and fades in and out. This helps create a dynamic and immersive feeling, especially when combined with the position of the racers, of which removes the static feeling that most of the older game’s track maps possessed.Various meters, indicators and gauges are shown on the bottom of the screen, moved to the side of the centre of the screen, allowing one to see the vehicle they are driving. The elements seen below are placed on a faded dark background, allowing them to be picked out from the background. This prevents them from getting lost, reinforcing them as a piece of interface rather than text possibly floating in the background.

The current timer rests on the upper middle part of the screen, not too low as to interfere with your view of the track and not too high that it requires you to look too far away from your vehicle and the road. A good balance of positioning of elements, visual hierarchy, and value and colour is highly important to make sure your HUD reads well, and allows the player to be immersed in the gaming experience.

gran-turismo-5-playstation-3-ps3-502.jpg

-Xbox One_Forza Motorsport 6 – 2015:

This HUD strives for minimalism and simplicity, the text is universally white, the headings bordered by darker backgrounds. The most important information, such as the speedometer, mini-map and timer, are larger than the other elements. Your current place, the laps and your speed are smaller elements, allowing you to concentrate more on driving than reading numbers and text.

The font used is clean, thin and allows the text and numbers to be read clearly even on a small scale. The font used, especially on the elements not being held by a dark border, are slightly bordered by black. This allows these elements to not be lost in higher value areas of the game world.

The mini-map is a faded circle, with a clearer line indicating the track. Orange circles bordered by white indicate opposing racers, while the white triangle represent the player and their direction on the track. A yellow rectangle further along the track most likely represents the end and start point of the track, that once passed completes a lap.

The positioning of elements helps further the minimalist approach, with groups of connected information being given separate corners of the screen. Laps accompanies the map on the bottom left-hand side, your current place/position is displayed on its own at the top left, connected to, as well as balancing out, the information on the bottom left. Your speed is shown on the bottom, with blues and reds indicating both good and bad information. The red on the tachometer indicates the threshold where the revolutions could damage the engine, so the player may have to balance the pros and cons of their speed choices. However, in games such as these, details like this are most likely purely aesthetic and aim to emulate their real world counterparts.

forza-apex-honda-abu-dhabi

Recurring elements:

-Laps

-Speedometers/Speed

-Timers

-Mini-maps/Tracks

-Position/Positioning

Some do have either less or more information and elements than most. However, the majority of the visually successful HUDs share common themes. The themes being simplicity, readability, clarity and hierarchy. The player needs to know what information is important overall, and what is important at certain points of the game. The elements need to be thematically appropriate, with clear, readable fonts that reflect the setting and style of the game, especially visually. Related elements should be grouped in different corners of the screen, depending on the information that needs to be represented and the game world that needs to be viewed. The positioning of the element should be taken into account when designing the game world as well, as the value of the HUD elements need to be readable when placed over their corresponding screen spaces with the environment.

A coherent theme and visual style is important, clutter should be avoided and enough screen space should be left for the player to freely interact with and view the game world through. The aim is to present information to the player without causing them to feel claustrophobic or boxed in by the elements. Proper visual hierarchy helps ensure readability and clarity. The use of positioning, colour, value, font, size/scale and visual balance is essential to a HUD that works, allowing the player to focus on the game and look around freely without being distracted by the HUD. However, the player should also be able to quickly glance at parts of the HUD and be aware of various information.

Most of the HUD is usually comprised of permanent elements that are dynamically changing as the game progresses, such as time, laps and your position on the track.  There are elements of an Actioned HUD to a certain degree, such as changes to the speed of the car affects the numerical value displayed, usually, by the speedometer. This might also effect a needle, which is usually animated and reacts accordingly to the changes in speed.

Something that is rare in most of these games are real-life dashboard icons, or anything similar, indicating issues with the car. A few of the more recent games have incorporated this, especially ones striving for realism. Problems relating to the tires, engine and batteries may be displayed by icons that are either persistent, and then change to indicate an issue, or appear when triggered.

 

How have HUDs evolved over time?

HUDs have moved away from extremely cluttered and busy layouts to a more simplified and sophisticated series of designs that match the games they accompany. They have become more tailored to the specific games that they inhabit, matching them thematically and presenting data and information more efficiently through the use of good composition, hierarchy and design.

 

Do the HUDs emulate the dashboards of the cars, going for realism, or are they more stylised and simplified and aim to supply information easily and efficiently?

Most HUDs, especially the older ones, aimed to represent large amounts of information in a very direct way, overloading the viewer with numbers and text of differing sizes, fonts and colours. As time progressed, more games tried to emulate real car dashboards, with the speedometer becoming the recurring dashboard-emulating theme throughout most games that aimed for some kind of realism. Eventually, different games adopted different directions. Some went towards more stylised looks, some went into semi-realistic HUDs (adopting real-life elements and altering/stylising them ensure that they work for their specific direction) and realism where HUDs attempt to emulate real life dashboards, sometimes even making use of in-game elements as the dashboard that the player receives their information from. Those kind of realistic driving games are trying to create an intense feeling of immersion, usually accompanied by the sound design, gameplay mechanics and visuals.

 

Where are the elements usually situated?

-Laps, as well as Position/Positioning, are usually in the top portion of the screen, sometimes separated on either side.

-Speedometers/Speed indicators are frequently found at the bottom of the screen, usually in the bottom right-hand side.

-Timers are commonly placed at the top right of the screen, sometimes on the left-hand side or middle as well.

– Mini-maps/Tracks are usually located on the left of the screen, frequently in the bottom left corner.

 

Information Set:

The Information Set encompasses the HUD, the Strategy and the Payoff. The HUD being the Heads Up Display (the information displayed on your screen regarding your health, ammo and map etc.), the Strategy being how the player plans to complete the level and play the game, and the Payoff being the rewards or goals that the player is aiming to achieve.

There are three main types of HUDs, Permanent, Pull-Up and Actioned, more detail on these can be found in a previous blog post.

Two other important elements in a game, which are linked to the HUD, are the UI and UX. These being the ‘User Interface’ and ‘User Experience’ respectively. The UI pertains to the interface that the player can interact with and manipulate. The UX is the overall experience that the player feels when playing the game, in regards to the level of immersion and enjoyment that the player receives when all of the elements in the game are working in unison to deliver an entertaining experience.

Driving Game HUD Moodboards:

driving-game-hud-moodboard

 

Images used for reference and mood boards were found online.