Graphics UI Element Placement Tips?

[Karasu_Tomoe]

I'm trying to make a first-person fighter-type game, kind of like the Punch-Out series, with some overworld exploration elements. But I'm struggling with where to put things like the player health bar, enemy health bar, etc. Are there any sort of established conventions I should try to follow?

Example: The trend with health bars is typically to place them somewhere in the top corners of the screen for most games, namely those with 3rd-person perspectives (your Zelda's, Mario's, PUBG's, and on and on). However I notice for the majority of 1st-person games, the health bars (if they have them) and most other UI elements are typically found along the bottom corners. (Obviously there are exceptions both ways. Halo has its health bar top-center, for example, while Sekiro's player health is bottom-left.)

What I'm trying to research is what are the exact reasons for these devs' decisions to put things on the top of the screen as opposed to the bottom, or vice versa. Is the human eye drawn to certain parts of the screen over others? Could it be an affordance thing? (Example: looking down at a health bar on the bottom of the screen would equate to looking down at your own body, checking for injuries and such.)

For my game, I currently set up the player's health on the bottom-left, with your 1-on-1 opponent's health on the top-right. Could this be optimized somehow? To be honest, I'm starting to feel that having the two meters that far apart is leading to too much eye movement. Maybe putting the enemy health top-center would be better?

 

[Gradius]

In first person shooters the gun is already taking space up at the bottom of the screen, the ground is also likely to be the only thing down there. In a fighting game most of the time players will be on the ground, not high in the air, meaning the UI is safest there. Ultimately if it is out of the way of important elements, and not on the extreme edge of the screen (where overscan or a bezel might end up blocking it), you're probably fine. Sometimes convention is pretty arbitrary and based purely on looking like other games in the genre. This is, in part, why in platformers the player is never going to the left to get to the exit. Why mana bars are always blue. Why red barrels always explode. At a certain point things just become the norm and that helps players quickly know what to expect.

 

[Psycho_666]

Why not just set them top center for ebemy, bottom center for player? Make them long thin bars so they don't take a lot of space, but are easy to see and detdetermine the size of just by glancing at it for a moment.
The corners I would use for info, that you need to look every now and then, but not too often. Like money or minimap or whatever stats you need during fight.
The goal is to keep the sight of the player fairly stable without having to look all over the place.
TLR Top and bottom middle for the most important information that you need to check often, while the corners are for information you need every now and then IMHO.

 

[Karasu_Tomoe]

Why not just set them top center for ebemy, bottom center for player? Make them long thin bars so they don't take a lot of space, but are easy to see and detdetermine the size of just by glancing at it for a moment.
The corners I would use for info, that you need to look every now and then, but not too often. Like money or minimap or whatever stats you need during fight.
The goal is to keep the sight of the player fairly stable without having to look all over the place.
TLR Top and bottom middle for the most important information that you need to check often, while the corners are for information you need every now and then IMHO.

Great advice! Thanks!

Currently have the enemy's health and the "Time Up" timer top-center, which seems to being working out good, not a whole lot of eye strain there. Might keep the player health bottom-left, just because it might get in the way in the center, but we'll see. The stamina meter (fyi, this game also uses a Souls-style stamina system for attacking) would definitely benefit from being centered in this fashion, but I'd have to see how I could squeeze it in.

 

[SoVes]

Great advice! Thanks!

Currently have the enemy's health and the "Time Up" timer top-center, which seems to being working out good, not a whole lot of eye strain there. Might keep the player health bottom-left, just because it might get in the way in the center, but we'll see. The stamina meter (fyi, this game also uses a Souls-style stamina system for attacking) would definitely benefit from being centered in this fashion, but I'd have to see how I could squeeze it in.

biggest thing is just to make it invisible when the player is focused on the game. That's also why audio is also nice to give the player info for the changes in the ui while they aren't looking at it. You should have most info on 1 side of the screen and the useless stuff on the opposite of that. You should also avoid placing things for more than 2 sides of the screen since that will make player pay attention to it and it can look overwhelming. This is good for being on low hp effects though like blood around the screen or placing like iap things there. Transparency is also a great tool to hide to ui out of focus. Also ui on the bottom is easier for people with bad posture

 

[JeffJ]

Why not make it an option?

In the game I'm working on, it's a setting that the player can adjust. The player can move each individual HUD element separately - so you could have the health bar in one corner and the mana bar in the other (or any other position you want). Not only that, but you can also scale them up and down, as well as toy with their transparency and general visibility. For example: only show a HUD element for a certain amount of time once it changes, and then fade away (so if you got hit and lost health, it would fade in, show itself for 10 seconds, then fade out again).

This gives the player an enormous amount of freedom and flexibility, and this way, you don't have to worry about a "bad" decision. It's also fairly straightforward to code, since at the end of the day, it's just coordinates and values that needs to be stored, read and applied. Now, granted, I am a bit of an extremist when it comes to making everything an option/setting, but it's something to think about.

 

[Siolfor the Jackal]

I generally like the idea of player health centered on the bottom and boss. Though that said, I made a sort of Punch Out inspired jam game a while ago and I put the player health centered on the left and boss health on the right and I like to think that looked good and worked well enough.