HUD Design Ideas
internetexplorer
Join Date: 2011-10-13 Member: 127255Members
Join Date: 2011-10-13 Member: 127255Members
<div class="IPBDescription">Some things to consider, with examples from other games</div>I'll start off by saying this game is amazing and it's getting really better all the time. With that in mind, I should say that I think the HUD for both sides needs a bit of a change in layout.
I'll give some examples from other games, and then show the NS2 HUD to illustrate what I mean. Here we go!
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->What makes a HUD good for competitive/serious/tolerable FPS playing?<!--sizec--></span><!--/sizec-->
This is an important question, and it's one that few players of new games are familiar with because it is largely ignored. When you play an FPS game, you use information from the HUD all the time. You want it to be accessible, but not intrusive.
Accessibility means what, though? I mean, it's on your screen all the time, right? Yes, but you want to be able to see important details without moving your eyes too much. This is because it ruins immersion (the idea that you're "seeing" the character's view, and turning the mouse means turning the head to look at things), and takes focus away from the action going on (the skulk biting you is hopefully near the centre of your screen, where your crosshair is...not in the bottom left corner of it where you can't do anything but start turning and die). You want all numbers/letters to be large enough that you can recognize them quickly, but not so large that they start using up useful space on the screen.
Intrusiveness, on the other hand, means that the HUD <i>gets in your way</i>. Common intrusive aspects are opaque backgrounds on text (taking more 'viewable map area' from the game than they need to), 'extra' graphics that don't give any new information (for instance, the TF2 HUD by default shows a picture of the class you're playing), weapon models that are too large and obscure too much of your view (like the machinegun used to in NS2) and more.
The HUD in most commercially released FPS games fails to satisfy these needs for competitive players, so it is often modified to suit their needs. Let's look at some examples!
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Quake Live HUD<!--sizec--></span><!--/sizec-->
The default HUD for QL looks like <a href="http://www.youtube.com/watch?v=XdkDjsBiO58#t=7m25s" target="_blank">this</a>. It has a lot of problems!
If you want to see the team's scores, you have to shift your attention all the way to the bottom-right corner. If you want to see your guns/ammo you need to look all the way to the far left side. Your ammo/health/armor are arranged in a non-standard way (most games would have health and armor on opposite sides or together in a frame, because you want to look at both at once). The game clock is at the very top edge of the screen, which is less bad than being in one of the bottom corners.
Now let's look at a <a href="http://www.youtube.com/watch?v=9ofHjF2jyV0#t=8s" target="_blank">custom HUD</a> that I use. The weapon bar is in the middle of the screen, raised from the bottom, so it's easier to see quickly. The clock is in about the same place but it has a tiny frame around it to make it easier to focus on quickly. The health/armour values are written in white with a thin black border, giving them high contrast with the environment for easy quick viewing. There is no wasted space for a cross/shield logo because I know which number is health and which is armour. The enemy player's name is simply drawn in the middle of the screen when you look at them, with no added frills (this is default for Q3/QL also). There are still some imperfections but it's overall much easier to get information from this HUD quickly.
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Team Fortress 2 HUD<!--sizec--></span><!--/sizec-->
The default TF2 HUD is <a href="http://asiafortress.com/v3/wp-content/uploads/2011/08/default-hud.jpg" target="_blank">this</a>. When you look at teammates or enemies, their name obscures the middle of the screen in an opaque box. Your ammo is in the far bottom-right corner, where it's difficult to glance at. Your health is in the far bottom-left corner, where it's difficult to glance at. Like I mentioned above, it shows a picture of the pyro (which is useless, because you know what class you're playing). Worse still, the health meter covers that picture over when you are overhealed (the extra-large cross means he has more than his base health because of a medic). There are a lot of other UI design crimes committed in TF2, so most serious players end up using a custom HUD.
<a href="http://img694.imageshack.us/img694/9827/65286506.jpg" target="_blank">This</a> one, for instance, is one of the most minimal/Quake-like HUDs around. It shows you the numbers you want (health, ammo, building name/health, medic name/ubercharge%) without any added backgrounds or symbols. Things are arranged closer to the middle of the screen, but without covering the middle over (since it's where you will be aiming). The capture point status is small and easy to read at a glance. <a href="http://www.youtube.com/watch?v=UCZqaFJf3ng" target="_blank">Here </a>is a video of me using this HUD playing Medic in a 6v6 match. The information on screen is used but it does not get in my way while I am healing people and watching for enemies.
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Current NS2 HUD<!--sizec--></span><!--/sizec-->
Here are some shots of the current NS2 HUD in action (from the b189 NS2HD video).
<a href="http://www.youtube.com/watch?v=30Ly_aEQ2Zs#t=26s" target="_blank">1) Aliens</a>
Health is in the very bottom-left corner, and is small. Adrenaline/weapon choices are in the bottom-right corner and are, again, small. The "alien-style" borders/backgrounds obscure the screen but they also add to the flavour and immersiveness of NS2, so it's debatable whether they're a problem. Having the armour level 'encircle' the health value as a border is cool, but ultimately I just look at the number to read how much armour I have.
All the space in the "middle-bottom" area of the screen is unused. This is the sweet spot for important HUD elements, as I showcased in the other examples. It would be nice to see some things moved there, if only for a test build.
<a href="http://www.youtube.com/watch?v=30Ly_aEQ2Zs#t=2m" target="_blank">2) Marines</a>
Health and armour are in the very bottom-right corner. This is not consistent with the Aliens' HUD.
Ammo is shown on the gun. In any other game, I would call this a horrible cliche. In NS, it aids the immersiveness (for instance, when you run, the gun is shifted so you can't see your ammo and it creates tension as aliens start to fight you).
Again, the 'sweet spot' goes to waste.
And <a href="http://www.youtube.com/watch?v=NxmvZwieLMU#t=2m50s" target="_blank">here </a>is a huge success of the NS/NS2 HUD designs. The minimap is normally shown in a corner of the HUD as a small detail (where it belongs, since it's not used as regularly as the other information). When you push 'c', though, the map is drawn in large scale on the middle of the screen. You can choose when to see it and when not to, and when you DO see it, the information is easy to very quickly assess before it is hidden again.
Of course, this same idea cannot be applied to more common HUD elements. Or can it? When you are at full health as an alien, the HUD currently does not show your health/armour (which is cool, because you don't need to know the exact value until it changes). I see this as another success of UI design - when it changes, it cues the player to recognize that they have taken damage (and in what amount), and when it is not drawn it's less useless information taking up precious screen space.
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Future HUD Ideas<!--sizec--></span><!--/sizec-->
So, the reason I posted this thread is that I want to see some thought given to HUD design in NS2. Here are some things that might be good to look at:
<ul><li>Allow for custom HUD/skinning/whatever (this may be possible already - correct me if it is!)</li><li>Better default HUD - move things around, change how they appear. Make things more accessible and less intrusive. Ask players what they want to see, what they like and so on. No 'tiny information in the corners' please!</li><li>More HUD features that are geared toward immersiveness. The gun model ammo works in this game, and so does the hidden/reappearing alien health. I'm sure some other HUD elements could be made more immersive.</li><li>Consistency - even though the aliens and marines are two very different sides, their HUD elements should be arranged in a similar way (not on opposite sides of the screen). Ideally you want people playing both sides as they see fit, and any small jarring transitions will make them less likely to do that.</li></ul>
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->What do you guys think?<!--sizec--></span><!--/sizec-->
I'll give some examples from other games, and then show the NS2 HUD to illustrate what I mean. Here we go!
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->What makes a HUD good for competitive/serious/tolerable FPS playing?<!--sizec--></span><!--/sizec-->
This is an important question, and it's one that few players of new games are familiar with because it is largely ignored. When you play an FPS game, you use information from the HUD all the time. You want it to be accessible, but not intrusive.
Accessibility means what, though? I mean, it's on your screen all the time, right? Yes, but you want to be able to see important details without moving your eyes too much. This is because it ruins immersion (the idea that you're "seeing" the character's view, and turning the mouse means turning the head to look at things), and takes focus away from the action going on (the skulk biting you is hopefully near the centre of your screen, where your crosshair is...not in the bottom left corner of it where you can't do anything but start turning and die). You want all numbers/letters to be large enough that you can recognize them quickly, but not so large that they start using up useful space on the screen.
Intrusiveness, on the other hand, means that the HUD <i>gets in your way</i>. Common intrusive aspects are opaque backgrounds on text (taking more 'viewable map area' from the game than they need to), 'extra' graphics that don't give any new information (for instance, the TF2 HUD by default shows a picture of the class you're playing), weapon models that are too large and obscure too much of your view (like the machinegun used to in NS2) and more.
The HUD in most commercially released FPS games fails to satisfy these needs for competitive players, so it is often modified to suit their needs. Let's look at some examples!
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Quake Live HUD<!--sizec--></span><!--/sizec-->
The default HUD for QL looks like <a href="http://www.youtube.com/watch?v=XdkDjsBiO58#t=7m25s" target="_blank">this</a>. It has a lot of problems!
If you want to see the team's scores, you have to shift your attention all the way to the bottom-right corner. If you want to see your guns/ammo you need to look all the way to the far left side. Your ammo/health/armor are arranged in a non-standard way (most games would have health and armor on opposite sides or together in a frame, because you want to look at both at once). The game clock is at the very top edge of the screen, which is less bad than being in one of the bottom corners.
Now let's look at a <a href="http://www.youtube.com/watch?v=9ofHjF2jyV0#t=8s" target="_blank">custom HUD</a> that I use. The weapon bar is in the middle of the screen, raised from the bottom, so it's easier to see quickly. The clock is in about the same place but it has a tiny frame around it to make it easier to focus on quickly. The health/armour values are written in white with a thin black border, giving them high contrast with the environment for easy quick viewing. There is no wasted space for a cross/shield logo because I know which number is health and which is armour. The enemy player's name is simply drawn in the middle of the screen when you look at them, with no added frills (this is default for Q3/QL also). There are still some imperfections but it's overall much easier to get information from this HUD quickly.
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Team Fortress 2 HUD<!--sizec--></span><!--/sizec-->
The default TF2 HUD is <a href="http://asiafortress.com/v3/wp-content/uploads/2011/08/default-hud.jpg" target="_blank">this</a>. When you look at teammates or enemies, their name obscures the middle of the screen in an opaque box. Your ammo is in the far bottom-right corner, where it's difficult to glance at. Your health is in the far bottom-left corner, where it's difficult to glance at. Like I mentioned above, it shows a picture of the pyro (which is useless, because you know what class you're playing). Worse still, the health meter covers that picture over when you are overhealed (the extra-large cross means he has more than his base health because of a medic). There are a lot of other UI design crimes committed in TF2, so most serious players end up using a custom HUD.
<a href="http://img694.imageshack.us/img694/9827/65286506.jpg" target="_blank">This</a> one, for instance, is one of the most minimal/Quake-like HUDs around. It shows you the numbers you want (health, ammo, building name/health, medic name/ubercharge%) without any added backgrounds or symbols. Things are arranged closer to the middle of the screen, but without covering the middle over (since it's where you will be aiming). The capture point status is small and easy to read at a glance. <a href="http://www.youtube.com/watch?v=UCZqaFJf3ng" target="_blank">Here </a>is a video of me using this HUD playing Medic in a 6v6 match. The information on screen is used but it does not get in my way while I am healing people and watching for enemies.
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Current NS2 HUD<!--sizec--></span><!--/sizec-->
Here are some shots of the current NS2 HUD in action (from the b189 NS2HD video).
<a href="http://www.youtube.com/watch?v=30Ly_aEQ2Zs#t=26s" target="_blank">1) Aliens</a>
Health is in the very bottom-left corner, and is small. Adrenaline/weapon choices are in the bottom-right corner and are, again, small. The "alien-style" borders/backgrounds obscure the screen but they also add to the flavour and immersiveness of NS2, so it's debatable whether they're a problem. Having the armour level 'encircle' the health value as a border is cool, but ultimately I just look at the number to read how much armour I have.
All the space in the "middle-bottom" area of the screen is unused. This is the sweet spot for important HUD elements, as I showcased in the other examples. It would be nice to see some things moved there, if only for a test build.
<a href="http://www.youtube.com/watch?v=30Ly_aEQ2Zs#t=2m" target="_blank">2) Marines</a>
Health and armour are in the very bottom-right corner. This is not consistent with the Aliens' HUD.
Ammo is shown on the gun. In any other game, I would call this a horrible cliche. In NS, it aids the immersiveness (for instance, when you run, the gun is shifted so you can't see your ammo and it creates tension as aliens start to fight you).
Again, the 'sweet spot' goes to waste.
And <a href="http://www.youtube.com/watch?v=NxmvZwieLMU#t=2m50s" target="_blank">here </a>is a huge success of the NS/NS2 HUD designs. The minimap is normally shown in a corner of the HUD as a small detail (where it belongs, since it's not used as regularly as the other information). When you push 'c', though, the map is drawn in large scale on the middle of the screen. You can choose when to see it and when not to, and when you DO see it, the information is easy to very quickly assess before it is hidden again.
Of course, this same idea cannot be applied to more common HUD elements. Or can it? When you are at full health as an alien, the HUD currently does not show your health/armour (which is cool, because you don't need to know the exact value until it changes). I see this as another success of UI design - when it changes, it cues the player to recognize that they have taken damage (and in what amount), and when it is not drawn it's less useless information taking up precious screen space.
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->Future HUD Ideas<!--sizec--></span><!--/sizec-->
So, the reason I posted this thread is that I want to see some thought given to HUD design in NS2. Here are some things that might be good to look at:
<ul><li>Allow for custom HUD/skinning/whatever (this may be possible already - correct me if it is!)</li><li>Better default HUD - move things around, change how they appear. Make things more accessible and less intrusive. Ask players what they want to see, what they like and so on. No 'tiny information in the corners' please!</li><li>More HUD features that are geared toward immersiveness. The gun model ammo works in this game, and so does the hidden/reappearing alien health. I'm sure some other HUD elements could be made more immersive.</li><li>Consistency - even though the aliens and marines are two very different sides, their HUD elements should be arranged in a similar way (not on opposite sides of the screen). Ideally you want people playing both sides as they see fit, and any small jarring transitions will make them less likely to do that.</li></ul>
<!--sizeo:5--><span style="font-size:18pt;line-height:100%"><!--/sizeo-->What do you guys think?<!--sizec--></span><!--/sizec-->
Comments
Oh and please move the health indicator to the left side! Moving it a bit closer to the center would make sense as well as it's almost a full foot from where you're looking at most of the time if you have a big screen.
<a href="http://keekerdc.com/2011/11/extvtgbf-spectator-hud-for-team-fortress-2/" target="_blank">http://keekerdc.com/2011/11/extvtgbf-spect...eam-fortress-2/</a>
Here you can see all player classes and HPs on the left screen side and the controlpoint display is on the screen bottom.
Would be nice to see something like that in the near future. I know, there are other things which are more important, but with a new spectator HUD the quality of all casts and also NS2HD's videos would be improved very much!
Oh and please move the health indicator to the left side! Moving it a bit closer to the center would make sense as well as it's almost a full foot from where you're looking at most of the time if you have a big screen.<!--QuoteEnd--></div><!--QuoteEEnd-->
I think I prefer to have at least resoucre information avaible at all times. It makes it easier to synchronize yourself with the commander actions that require investments. For example you want to know when the commander can afford medpacking, nano shield or building you need to build so that you can move to position when needed. Game time is also really useful for timing your actions like taking down a hive or so.
Upgrade situation isn't that critical as long as you've got a good way to keep track of the overall upgrades. I don't think it has to take that much information from the view though. I'd maybe prefer to have the NS1 style icons with a C&C 'clock' progress information on them so that you can actually tell when the commander is upgrading the next level.
Of course I don't mind if someone wants to toggle off HUD elements, but I really like having a lot of information avaible on HUD so that I can adjust my play style depending on the situation.
Also, it would be nice to have HUD information on whether the commander is hovering above you at the very moment. It's a lot easier to make decisions when you know whether the commander support is present.
<!--quoteo(post=1888176:date=Dec 3 2011, 07:34 PM:name=internetexplorer)--><div class='quotetop'>QUOTE (internetexplorer @ Dec 3 2011, 07:34 PM) <a href="index.php?act=findpost&pid=1888176"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Allow for custom HUD/skinning/whatever (this may be possible already - correct me if it is!)<!--QuoteEnd--></div><!--QuoteEEnd-->
This^10.
HUD customization should both be possible and relatively easily accessible for the players. Everybody has different preferences and you're never going to be able to please everybody with the default HUD, no matter how "good" it is, especially when people are used to customizing their HUD from other games. I suppose the default HUD needs to have "looking cool" as the primary objective for marketing purposes, but players who don't want all that jazz on their screen should be able to modify it to suit their needs. Do that and you'll please everybody.
I personally find everything being in the middle counter-intuitive because I'm so used to the 'inferior' corner HUD that I've always used. I also like the ammo counters on the weapons, nice touch that still gives you the info you need without breaking immersion, though with the technology in this game I can just as easily understand it being on your actual HUD.
And on that note, why not have a customizable HUD? At least have the positions of things changeable, like HP can be center, lower right or lower left, marine ammo count can be on the HUD on/off since it will always be on the weapon etc.
Plus if you look at the visors there's no reason you can't have a customizable HUD, though a change like this wouldn't exactly be high on the priority list.
-Changeable positions of HUD elements, toggle certain parts on/off (Upgrade icon visibility, heavy armor/jetpack icons).
-HUD fade in/out based on game situation, taking damage highlights health/armor, new order highlights minimap and order icon on-screen, firing your weapon highlights the ammo count etc. Maybe make this one optional?
-Key bind to highlight your entire HUD all at once (I'd prefer it separate from other binds, as this isn't a console game where we have a very limited number of inputs, but it could be the use or reload key to help simplify it), would be unnecessary if the previous feature is disabled.
-Flash the ammo, health and armor indicators if any of them are low. Again, optional.
-Standard minimap/radar toggle that shows (visible by you or your team only, of course) enemy locations, maybe have the radar mode show motion tracking blips, but only show red dots even when the enemy is visible rather than an image of the enemy like the regular minimap does, would not show building (friendly or otherwise) locations and of course you have no map while that mode is active. Maybe a toggle at the armory (Or even observatory, probably armory to streamline it, but require an observatory, maybe motion tracking first?).
That's about what I got from this thread, while adding a few things I thought would fit or that I personally preferred.
I'd definitely like to try moving the hp/armor to the lower left, and having the minimap in the lower right, with an ammo count on top of, or just left of that along the bottom of the screen, as well as having upgrade icons fade away after 20 seconds or so.