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_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.
-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.
-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.
-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.
-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.
-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.
-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.
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.
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:
Images used for reference and mood boards were found online.