SlideShare a Scribd company logo
Navigating HUD Design 
Basic principles to consider while 
creating a HUD for games
Qualitative Study 
http://www.gamasutra.com/view/feature/134715/the_user_interface_c 
ontinuum_a_.php?print=1
Other Considerations 
• Player Agency – The ability for a player to 
make meaningful decisions that can affect the 
game world. 
• Games as a Medium – Taking the artistic 
approach, are we?
Some Tools 
• Theming 
• Signifiers 
• Layering info 
• Spatial UI 
• Integration 
• No HUD
Theming
Signifiers
Layering Information
Layering Information
Spatial UI
HUD Integration
HUD Integration
No HUD
Know Your Genre
Thank You

More Related Content

Viewers also liked

Heads Up Display : A smart navigation system
Heads Up Display : A smart navigation systemHeads Up Display : A smart navigation system
Heads Up Display : A smart navigation system
Mphasis
 
Avionics sai
Avionics saiAvionics sai
Avionics sai
Sai Shubhankar
 
6 computing gunsight, hud and hms
6 computing gunsight, hud and hms6 computing gunsight, hud and hms
6 computing gunsight, hud and hms
Solo Hermelin
 
Design and development of MIL-STD-1553 based engineering model
Design and development of MIL-STD-1553 based engineering modelDesign and development of MIL-STD-1553 based engineering model
Design and development of MIL-STD-1553 based engineering model
Raul Cafini
 
Avionics buses
Avionics busesAvionics buses
Avionics buses
yasir2761
 
MET 304 Bearing selection
MET 304 Bearing selectionMET 304 Bearing selection
MET 304 Bearing selection
hotman1991
 
Bearing DESIGN
Bearing DESIGNBearing DESIGN
Avionics Digital data buses
Avionics Digital data busesAvionics Digital data buses
Avionics Digital data buses
ostroumov
 
The F-35 Cockpit
The F-35 CockpitThe F-35 Cockpit
The F-35 Cockpit
ICSA, LLC
 
Teleportation
TeleportationTeleportation
Teleportation
nayakslideshare
 
Easy Explained Shafts & Its Types by Hashim Hasnain
Easy Explained Shafts & Its Types by Hashim HasnainEasy Explained Shafts & Its Types by Hashim Hasnain
Easy Explained Shafts & Its Types by Hashim Hasnain
Hashim Hasnain Hadi
 
Design of shafts couplings ppt
Design of shafts couplings  pptDesign of shafts couplings  ppt
Design of shafts couplings pptnsvnhanu
 
Implementation of MIL-STD-1553 Data Bus
Implementation of MIL-STD-1553 Data BusImplementation of MIL-STD-1553 Data Bus
Implementation of MIL-STD-1553 Data Bus
IJMER
 
Bearing Description about basic, types, failure causes
Bearing Description about basic, types, failure causesBearing Description about basic, types, failure causes
Bearing Description about basic, types, failure causes
Pankaj
 
Vehicle management system
Vehicle management systemVehicle management system
Vehicle management systemMohd Saddam
 
Mechanical drives & power transmission
Mechanical drives & power transmissionMechanical drives & power transmission
Mechanical drives & power transmissionJames Shearer
 

Viewers also liked (18)

Heads Up Display : A smart navigation system
Heads Up Display : A smart navigation systemHeads Up Display : A smart navigation system
Heads Up Display : A smart navigation system
 
Avionics sai
Avionics saiAvionics sai
Avionics sai
 
6 computing gunsight, hud and hms
6 computing gunsight, hud and hms6 computing gunsight, hud and hms
6 computing gunsight, hud and hms
 
Design and development of MIL-STD-1553 based engineering model
Design and development of MIL-STD-1553 based engineering modelDesign and development of MIL-STD-1553 based engineering model
Design and development of MIL-STD-1553 based engineering model
 
Avionics buses
Avionics busesAvionics buses
Avionics buses
 
MET 304 Bearing selection
MET 304 Bearing selectionMET 304 Bearing selection
MET 304 Bearing selection
 
Bearing DESIGN
Bearing DESIGNBearing DESIGN
Bearing DESIGN
 
Avionics Digital data buses
Avionics Digital data busesAvionics Digital data buses
Avionics Digital data buses
 
Avionics
AvionicsAvionics
Avionics
 
The F-35 Cockpit
The F-35 CockpitThe F-35 Cockpit
The F-35 Cockpit
 
Teleportation
TeleportationTeleportation
Teleportation
 
Easy Explained Shafts & Its Types by Hashim Hasnain
Easy Explained Shafts & Its Types by Hashim HasnainEasy Explained Shafts & Its Types by Hashim Hasnain
Easy Explained Shafts & Its Types by Hashim Hasnain
 
Design of shafts couplings ppt
Design of shafts couplings  pptDesign of shafts couplings  ppt
Design of shafts couplings ppt
 
Bearing
BearingBearing
Bearing
 
Implementation of MIL-STD-1553 Data Bus
Implementation of MIL-STD-1553 Data BusImplementation of MIL-STD-1553 Data Bus
Implementation of MIL-STD-1553 Data Bus
 
Bearing Description about basic, types, failure causes
Bearing Description about basic, types, failure causesBearing Description about basic, types, failure causes
Bearing Description about basic, types, failure causes
 
Vehicle management system
Vehicle management systemVehicle management system
Vehicle management system
 
Mechanical drives & power transmission
Mechanical drives & power transmissionMechanical drives & power transmission
Mechanical drives & power transmission
 

Recently uploaded

一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
Hess9
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
PrabhjeetSingh219035
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 

Recently uploaded (20)

一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 

Navigating HUD Design

Editor's Notes

  1. This is going to be a short talk about some basic concepts to consider while you are developing a HUD for your game. For time’s sake we will not go too in depth, but the topic does have potential to turn into a rabbit hole with the endless amounts of genres in the video game world. HUDs come in all shapes and sizes, just like the games that they accompany.
  2. There’s maximalist HUD: mostly strategy games and certain types of simulations games fall in this category but others can too. (farmville, C&C, some TD game)
  3. There are minimal HUDs, which have a very low impact on screen space.
  4. Integrated HUDs, which could be categorized with minimal, but they use it in a different way and I’ll get to that soon.
  5. Some games even go as far as to not have any HUD at all. While these games I just showed you came in all shapes, sizes and colors, so do the people playing them. And each of them has preferences. Now, I will go as far to say that, games are a bit different from a UX perspective in the fact that they are not trying to be a utility in your life or sell you something (most of the time), but are trying to entertain. Because of this, players have different expectations before getting into a game of their choice.
  6. There have been some studies done on the subject of how players perceive a HUD in relation to their gaming experience, and they are rather new. So, new termanology has been created as well. When you are creating your game, and other UI / HUD to go along with it, you should keep different player types in mind, and which best fits what you are creating. Fictionalists – players that focus on the game as a medium or art, they give little room for distractions from the experience they are engaging in. These players enjoy the story and world. A HUD to them, is something that disturbs that. Systemists – On the other end of the spectrum are players that believe a game is a system and they are there to master it. These people generally do not find any sort of HUD intrusive to their experience, but rather welcome it in any form. Wanting to use all the information granted to them to is maximum potential. The fiction in a game is something that is just there to help reinforce the fun, but they don’t take it too seriously. Relativeists – As with any polar argument there is always a middle ground. Relativeists tend to accept HUD as a tool within the gaming experience. That is not to say you can get away with anything as a designer regarding this group of people. Information presented should be a necessity and if it fails to have context, it can risk becoming annoying for the player.
  7. From a design perspective, there are also other considerations you must visit when creating a HUD. Both of these can effect immersion, which for the most part, everyone can agree is a good thing for someone to experience when playing your game. Player Agency – Defined as the ability for a player to make meaningful decisions that can affect the game world. This is something that is unique to games in that players are constantly making decisions as they play a game, and agency is something that can help enhance a player’s experience. A HUD conveys the information to players to aid in their decision making, so it is an integral piece. Whether you agree with it or not, every game has a certain level of artistic value to it. The ones that are taking a thematically artistic approach will want to make some careful decisions regarding their use of HUD. This can be a sensitive area for the aforementioned fictionalists.
  8. Simultaniously amplifying immersion and agency is always a plus with any game experience, as it will keep your player engaged longer and they will enjoy the game more. Some HUD techniques you can focus on to improve this are: -Signifiers -Layering info -UI spacial qualities -themeing -integration
  9. This is often the most basic and quickly recognized approach. Not many games miss out on theming their HUD to fit the game’s fiction. From Starcraft’s perspective, you are a commander looking over the battlefield, seemingly in a command ship, utilizing its instruments to communicate with your army.
  10. These generally have qualitative value for the player, but still convey important information. Often in a thematic way.
  11. This here is a bad example. Farmville one had a lot of information to guide the player through the game and depending on your experience as a gamer, you might find a lot of it useless, especially after you know where to find quests, for example. Those could have been hidden or minimized on the left there.
  12. In the second iteration of Farmville, a lot of this was cleaned up and the information was only presented to the player when needed. E.g. Maximum tasks are displayed, minimized tools in the menu and even in the bottom left you can see a panel that only comes up when the information is actively changing.
  13. Having other elements that are not part of the fixed HUD on the screen can assist in decision making. Here in Left4Dead, a bright silhouette surrounds teammates when they are behind obtrusive structures or walls so you can keep an eye on them. Very important for survival in this game.
  14. HUD integration is when the display becomes a part of the game world and is generally part of the game’s lore. Now, this technique is stronger in sci-fi games, simply for the fact that it is more believable as a part of the story. In this case, your HUD is part of your helmet in Metroid Prime. It can also be common in simulation games to have all the needed info directly in the game space and not an added layer (see Flight Simulator).
  15. This is probably the prime example for HUD integration and theme. There are 4 elements of UI/HUD in this picture, Aiming, ammo, stasis (for slowing time) and the players life meter.
  16. Utilizing no HUD in a game can also work to your advantage. This generally follows more artistic games that are driven by narrative. The pacing in such games can also be much slower and decision making is not a state of do-or-die. Dear Esther is a purely narrative driven experience, and some argue it is not even a game at that point.
  17. With that understanding of how players perceive HUD and player agency, one should also take into consideration the genre of game they are creating. Each one has a certain level of information it must convey during play. More info will always result in more clutter for the player. Depending on the genre, this could be a problem. For example: RTS games – high amount of information the player needs to track to have a successful outcome. Here, most players can accept a cluttered screen with valuable information. FPS – As the genre titles suggests, the main idea in these is shooting, some get away with more HUD than others depending on the scope. Puzzle – most puzzle games have explicit information the player needs and HUD is always welcome here. If you can think of clever ways to use spatial elements, it is always a plus. That is, if it is universally understood. Simulation – again it depends on the type of simulation and it’s scope, but some even try to have none at all as their HUD would be intergrated on their bus, plane, tractor or whatever they are playing with.
  18. Unfortunately, I cant stand here and tell you which will be the best for your game, because every game and situation is going to be different, along with the most essential info you have to convey to the player. These were some basic tools and ideas to get started in the game space, but the topic could go on forever, especially because there is still quite a bit of study going on. Thank you.