Page 1 of 1

HUD Panel in RTS Game

PostPosted: 29 Aug 2015, 08:36
by Nikita_Sadkov
For me it was always a puzzle, why Blizzard moved the panel with minimap and buttons to the bottom, which was followed by other developers doing the same.

It appears to be due to the two factors:
1. psychological, because humans have more attention horizontally, than vertically.
2. isometry: the angle compresses the terrain, so it looks wider.


Am I correct?

Re: HUD Panel in RTS Game

PostPosted: 29 Aug 2015, 09:22
by Julius
Moving this to a more fitting sub-forum.

I think it had just as much to do with keeping traditions and pleasing the huge fan-base of Starcraft1 (which came out when 4:3 screens where still the norm).

Re: HUD Panel in RTS Game

PostPosted: 29 Aug 2015, 11:09
by Evropi
I have some UX design experience and extensive readings in the theory.

I'd say it's primarily skeuomorphism. Any post-Street Fighter 2 fighting game is good to illustrate this theory. It was designed for the arcade machine's input method. Two players take sides on each control stick and buttons, placed left and right. Then you see the two fighters where you are standing. Then you see the health bar above each fighter, completing the top-to-bottom UI design. It wasn't always like this (SF1 screenshot).

Back to RTSs. The screen is an extension of the user's workstation. The user's input method goes hands->keyboard/mouse->monitor. it is more immediately obvious to treat the controls at the bottom as if they're an extension of the keyboard, which is in front of your screen. The menu is now at the front of your keyboard too, making for a more consistent and thus better-feeling UI. Finally, into the MOBA age, you have actions labelled 1-2-3-4, like the keys behind them on your desk. The immediate intuitiveness of this design (compared to a vertical bar) cannot be overstated.

I agree that ultimately it is done for legacy reasons, as Julius suggested, but I reckon the original decision to put the menu at the bottom is due to timeless and effective design ideas -- as detailed above.