Design Compact HUD Design for Coop game

[Jaqueta]

Ok, here's the thing, I'm making a Hack n' Slash coop game, since it's coop, I want to show all players HUDs at the same time (Max 4 players), like Castle Crashers, Payday 2, Left 4 Dead...

I'm trying to come up with a few compact HUD designs, but I want to make sure that the player can read fast and easily the information he want to, since the game is really fast paced.

This is all the information I want to be showed:
- HP
- Lives/Downs
- Deployable Type and Amount (Medic Bag, Ammo Bag...)
- Ammo for Each weapon (Pistols, Heavy and Special)
- Grenades (The player can have up to 8 grenades if he have the right skill, by default it's 3)
- Show which Weapon is being used at the moment

Spoiler: OLD HUD CONCEPT

What do you guys think? It's pretty compact, but it looks nice? And do you think it will be easy to read the information on it at a quick glance?

PS: On that blank space on the left side of the number, I pretend to draw an Icon that represents which character the player is using....

PPS: I pretend giving the player an option for "HUD Scale", because, well, monitors have different resolutions, the base resolution I used for this is 960x540.

Spoiler: SECOND CONCEPT

This time I decided to separate the HUD in 2, one part is at the Top, the other is at the bottom, well, the reason is pretty obvious, the player will be able to read what he wants faster, so he doesn't have to "find" his information by searching them in 4 Rows, with 2 is pretty easy!

This time I won't point out what each thing is, but I'll give you a hint: you can still see all the weapons ammo.

So, what do you guys think?! =D

NEW CONCEPT! Almost like the last one, but with a different layout

 

[Yal]

Have you considered putting parts of the HUD above the character's heads following them around? I find that to be pretty useful in fast-paced games because you never need to move your eyes away from your character, and I think displaying ammo/current weapon this way might be pretty useful. Castle Crashers does this when you change your currently equipped item, and a vast number of games does this one way or another (Remar Games' Retrobattle, for instance, displays your ammo this way as you deplete it, and Super Mario Galaxy does this with air and flight meters,...). I don't think you could put the WHOLE hud there without it getting in the way, but you could shave off some space by putting parts of it right in the action.

 

[Jaqueta]

First of all, thanks for the feedback!

Have you considered putting parts of the HUD above the character's heads following them around?

I did, and there are a few reasons of why I won't do that, except if the Players think that this is a very important feature and should be implemented pronto.

I will have ONE floating icon only, it will be for the HP of the current target (Enemy), it's little icon that shows which enemy is being targeted and it's HP in a simple way. It will work more as an Indicator than an HP bar itself.

I personally don't like having floating Icons and Bars and Numbers everywhere, for this reason: the player will have to always look at a different place in the screen to see the info, this means that he will need to "find" the info on the screen. With a fixed HUD, the player already know where to look, even before doing so.

And another problem would be: Showing the ammo only when it's consumed is a problem, because the ammo supplier won't be able to know how much ammo his Team Mates have except if his team mates uses his weapon, it's a coop game so you need to rely on Team Mates to resupply Ammo, Health, Grenades... also if the player run out of ammo, the icon will be shown constantly and obscure the player vision even more. :s

 

[nujumkey]

If your UI is getting really cluttered, maybe you should simplify elements of your game that might be making your game unnecessarily clunky. Ask yourself do you need all the system your game currently has? A lack of features can make the game bland and uninteresting, but too many features can bog down the experience.

In my opinion there are plenty of systems the average shooter uses that you can strip away for a smoother experience. Ammunition systems were first introduced to incentivize using new guns, to help balance certain weapons (mostly rocket launchers), and to add an element of strategy in a genre all about holding down the fire button. Ammunition meant your guns had limited use, and players often has to switch weapons in their single player campaigns to guns they weren't used to. That said, if you're devoted to designing a cooperative experience maybe it's best to retire the ammunition system. It can break up the action in a very frustrating way, and it adds extra numbers to your UI to confuse new players.

Another suggestion would be health bars. You mentioned the HP of the current enemy would be floating around the world, but if you look at any modern shooter the HP bars are nonexistent. Of course, that is in part due to the realistic aesthetic shooters have been moving towards where the floating red bar would look cartoony and out of place, but depending on the enemy i don't feel like you would need an individual health bar for every combat scenario. In situations where enemies only live to take 3 hits, is the health bar really of much use? If you really want to give the player clarity that their weapons are dealing damage, maybe you can change the enemy's model after going below %50 HP, or have red numbers appear whenever a bullet hits an enemy.

Of course, i'm not designing your game so i have no idea how effective all these might be. The design of your game sounds very interesting. "Ammo supplier" is a term that i've not heard, and experimenting with cooperative gameplay sounds very cool. Good Luck on your game.

 

[nvrogers]

I don't have time to write anything detailed right now, but here's a quick suggestion:
Only show the ammo of the gun currently being used. There will only be one number to worry about, which is less confusing, and most players can remember about how much ammo they have for each of their weapons (as long as there are only a few at a time). Then you can make the equipment icons a little larger and more readable, and maybe have a dedicated spot for remaining lives instead of layering it on the health bar (which looks a little funky in my opinion).

 

[The M]

I would really suggest adding some kind of ammo symbol to show what kind of ammo those numbers represent and maybe also a + in the upper right corner of the health bar to show that it's your health. Without your explaining text it'd be impossible to know what's what.

 

[Jaqueta]

Wow, I wasn't expecting for that amount of feedback xD, Thank you everbody!
Er, my reply is actually... well, kinda... A LOT OF TEXT, so I decided to put is on a Spoiler!
Click the spoiler below to read a book my replies. ;D

Spoiler: My replies

New If your UI is getting really cluttered, maybe you should simplify elements of your game that might be making your game unnecessarily clunky[...]Ask yourself do you need all the system your game currently has?[...]too many features can bog down the experience

This is something that I'm really afraid of. xD
Perhaps there are some things that I can get rid off, like the "lives", this is something pretty easy for the player to remember, I can also to something like Left4Dead of Payday, when you are on your last live, your screen gets an black n white shader. Actually, I already got rid of some things, my initial plan was that the player could carry 3 different types of Grenades as well. The funny part that I removed that is because it would be difficult to some player to Throw a grenade (LB Button) while holding one of the triggers at the same time xD.

Ammunition systems were first introduced to incentivize using new guns, to help balance certain weapons (mostly rocket launchers)

That's the main reason of why I added this, the player will be able to select different weapons on the Character Customization Screen.
Since the weapons are pretty simple, I don't see any other stats that can be tweaked to balance the weapons without messing with the Gameplay flow for now.

if you're devoted to designing a cooperative experience maybe it's best to retire the ammunition system. It can break up the action in a very frustrating way, and it adds extra numbers to your UI to confuse new players.

Well, the player won't have all Weapons unlocked at first, he'll only have the Pistol, to get more weapons he will need to get certain skills first.
Plus, there is a certain passive skill that can give players ammo, is not efficient as an ammo bag, but certainly is something that can make up for this.

Maybe with this feature this may not be a problem? Because when the player gets this skill, he won't be a beginner anymore... I think...

You mentioned the HP of the current enemy would be floating around the world[...]maybe you can change the enemy's model after going below %50 HP

That's a cool idea, since my game will use Skeletal Animation, it's very easy to change the skins without having to remake all the animations!
My idea of Indicator that show HP, is something similar to Assassin's Creed indicator, like this:

"Ammo supplier" is a term that i've not heard, and experimenting with cooperative gameplay sounds very cool.

If you played PAYDAY you know what I'm talking about, the players can carry different equipments that he and his teammates can used after deployed, this includes (Medic Bag, Ammo Bag, Grenades Bag, and Boost Station)...

Thanks for the feedback nujumkey! =)

Only show the ammo of the gun currently being used. There will only be one number to worry about, which is less confusing, and most players can remember about how much ammo they have for each of their weapons (as long as there are only a few at a time). Then you can make the equipment icons a little larger and more readable, and maybe have a dedicated spot for remaining lives instead of layering it on the health bar (which looks a little funky in my opinion).

I as said previously, the reason of why I want this is because sometimes you need to know how much ammo your TeamMates have, so you'll be able to know when to give ammo to them. I will get rid of the lives on the HUD and probably use a Shader or something like a "Danger" Icon on the HP when he gets to his last live.
I will do something about the Icons, I think that I will increase the whole HUD size, from 160x to 240x probably... This is still enough to fit on a HD monitor without having to rescale it. =)

Thanks for the feedback nvrogers! =)

I would really suggest adding some kind of ammo symbol to show what kind of ammo those numbers represent and maybe also a + in the upper right corner of the health bar to show that it's your health. Without your explaining text it'd be impossible to know what's what.

Indeed, thanks for the hint, I'll look forward into that.

Thanks for the feedback The M! =)

---------------------------------------------

Oh, guys, one thing that I forgot to mention is that, since this is a Hack n Slash game, you need to change guns really fast, I got this idea from Ninja Theory's DmC, where you can Swap weapons by simply holding down one of the controller triggers.

(Taking in consideration a Xbox Controller)
You press B, the character shots with a Pistol, you press B+LT, he shots with a Shotgun, B+RT shots with the Special Weapon. This also applies to melee weapons, this mean that the players will be constantly swapping between weapons.

NEW HUD CONCEPT ADDED AT THE POST! ;D

 

[BLang]

The new hud concept is pretty good, but I think there's still ways to make it more readable.
First off, you really don't have to display the whole name and class of the weapon - instead you could use an icon. It conveys much more much faster. A silhouette of a pistol is pretty unmistakable when compared to that of an assault rifle/shotgun/smg. And apart from that, if you have different pistols, usually their silhouettes are pretty easy to tell apart as well. This is used in CSGO, which has a pretty non-intrusive HUD.

The next thing you should consider is that having your HUD separated into two parts like that will actually increase the time needed to get all the essential information about the player. I think you should keep them together, but make the individual elements smaller. Does the healthbar really have to be that long? I think a player's current health would still be pretty readable at half that length.

Another thing that's pretty confusing are the two bars next to the ammo. I'm assuming they represent how much ammo you have left for your other weapons, but that's just because I've read through this thread. Definitely put some icons next to those.

Also, the names of the individual players are kindof irrelevant. You could just as easily only display a picture of the players choosing or something similar to that. Or not even that - the players are already colourcoded, and that is undoubtedly the fastest way to recognize them - you see a yellow player ingame and it's pretty clear already which one he is on the HUD.

One more thing that I think is worth mentioning is that displaying lives as dots on the beginning of the healthbar is a pretty good idea that you shouldn't have scrapped (at least it looks like you did?), and could be crucial to gameplay, depending on how characters in your game interact. For example, you're playing a medic character, and two of your teammates are low on health. If you can see their lives, then you can tell that you should probably heal the player on his last life as opposed to the one who has 2 lives left. That way, even if the other player dies, you still have four people on your team. However, if you don't have this information, you could easily make the wrong choice, leading to permanently losing a teammate. You said it's easy for players to keep track of their own lives, but also take into consideration that it's pretty easy to lose track of other people's lives - and that can make a world of difference in a coop game.

In the end, probably the best overall tip is that symbols are much more readable when compared to text, and they usually take up less space to boot. If there's a way to replace something in your HUD with a graphic, it's probably a good idea to do that.

 

[Jaqueta]

Yea, you're right, I took your suggestions and came up with these Layouts.

I personally like the second more, it doesn't fits on 1280x screens, BUT today, almost all monitors have a 1366x768 resolution or bigger. Even my Ben 10 Laptop ;P

 

[Turgon]

I agree the second/wider HUD is easier to understand at a glance. Tbh though I like your second mockup better than the new one you just posted. It's cleaner and feels more polished imo

 

[Jaqueta]

I think that I'm finally getting there xD
Maybe I should give the player an option to swap the HUD parts around?

It wouldn't require much effort anyway... :v (I Forgot to mirror the Deagle Icon, Ops)

 

[BLang]

That's definitely a step in the right direction, but it's a bit busy right now. I reccomend unifying the background colours of the different parts into one, to make it a bit cleaner. I did a quick edit of it to show you what I mean, if that's okay:

 

[Jaqueta]

I see, I think that this is depends on the player preference, for instance, I prefer the other way because it's easier for me to distinguish what is Ammo, and what is not. Since this is a simple color swap, I will consider making this as a player option as well. ;D

Thanks for the amazing feedback BLang!

 

[BLang]

Ahh, I see now, that makes sense.
Hey, glad I could help!

 

[NeoShade]

I think that I'm finally getting there xD
Maybe I should give the player an option to swap the HUD parts around?

I would personally not include the option to change the layout of the HUD around. Due to the fact that it's a multiplayer game, I can only see it leading to problems.

For example, if you allow each player to change their HUD individually in the same game, then when one player learns the layout of their HUD and then looks at somebody else's who has changed it around, it's going to take them time to register that information and figure out where the info they need to know is. On the other hand, if you make it so the HUD is set the same for all four players in the same game, but still customisable, then when a player goes and plays the game with a different group of friends, they might have it set a different way, which would be difficult for similar reasons.

Of course, this is all assuming that this is a local co-op game... I guess if it's online co-op then each player can set the HUD for all the players and they could all be laid out differently depending on which player's screen you're looking at.


Also, I agree with BLang that its cleaner with fewer colours. I think that I would find the light and dark separation distracting, which is not something you want from your HUD. I don't think that it's necessary to have the ammo on a different background to the health, etc. Players will come to know exactly where to look on the HUD to find the information they're after, so making it as clean and unobtrusive as possible is the way to go, IMO.

 

[Jaqueta]

Yes, the game in an Online Multiplayer, so there's no problem in giving the player an option for that. And as said previously, I'm going to give another option that let's the player choose the color of the backgrounds, everybody wins! YEEEYY! ;D

Thanks for the feedback!