Sensuki's Suggestions #012: Non-Terrible Main HUD [Mockup]

[Sensuki]

 

Here is a non-terrible Main HUD design.

 

Currently the Main HUD in Pillars of Eternity has some awkward UI design practices taken into place. The center of the screen contains the menu and exploration buttons for the party. This is a menu that the majority of players will never interact with (IMO) and is the least important part of the UI.

 

The other terrible thing about the design is that the combat log is in the absolute worst position for on-the-fly reading in combat. Humans from the majority of societies in the world are used to left-indented reading and books, programs, operating systems and everything as such is designed with a large focus on the left side of interactive objects and devices.

 

The position of the combat log in Pillars of Eternity is placed in the most counter-intuitive position to read, on the far right of the screen. On the fly reading of the combat log was one of THE things that was very unique to the Infinity Engine. Damage, To Hit rolls (if you used them) and other important information was displayed in the combat log and you had to read the combat log to understand what was going on in combat.

In the Baldur's Gate games and Icewind Dale, the combat log was centered, so it was very easy to pan your eyes up and down from the center of the screen to the bottom center of the screen to see the combat and read what was actually happening.
Icewind Dale 2 moved the combat log over to the bottom left, which is arguably even better, because we are used to reading from the left. Instead, our focus shifted comfortably from the center to the bottom left, we read the lines from the very left of the screen towards the middle center and then shifted our view back into the center of the screen where the combat was happening.

 

Trying to do this in Pillars of Eternity is very jarring because it requires constant shifting of focus of our eyes on the screen. You initiate combat, you select your character, select an action and undertake that action, shift your focus onto the center of the screen to see that action take place and then you have to shift the focus of your eyes to the bottom right and read all the way from the middle bottom right, to the far right of the screen to see what the outcome of your action was if it was not apparent in the game. THEN you have to shift your focus all the way back to the other side of the screen, select your character and pick another action.

 

This makes it really difficult for on the fly reading of combat, and I believe this is counter-intuitive to the way we interact with programs in general.

 

Another annoying thing about the Main HUD of Pillars of Eternity is the amount of dead space on the screen. There are these sizable gaps between the sections of the HUD that could be being used for functionality. Instead they are just empty.

 

Here is a visual example of your focus shifting on the current HUD

 

Here I have provided a rework of the Main HUD that I think would be more intuitive and easier to use. 

 

 

One thing I have done in my mockup of what I would like for a re-worked HUD is I have increased the amount of slots in the old center UI that contains the exploration actions and menu. There is still space on the screen for some extra functionality buttons such as some formation presets, Guard Function (if it was every worked on) and Party AI function (whether or not you want auto attack on).

 

The Attack and Stop buttons are still on the right of the portraits just as they are now, and the Action bar is still above the portraits, like the lead designer wants them to be. The three sections of the UI would also still be collapsible, the only catch is that the portraits would now be centered instead of being on the far left. 

I really cannot see any downsides of changing the main HUD to this style, as it still offers everything that the current Main HUD offers, the only difference is that the portraits and action bar are centered (this might be a good thing) and there are a few more buttons for functionality on the exploration menu/menu buttons off to the side.

I realize that this may be waaaay too late to expect any sort of modification to the main HUD as Obsidian have been set on this design for a long time and have been unwilling to show it to the public for further scrutiny up until the First Look EX and IGN Previews about a month ago. I really do not think the current design is good enough and I think that this design is much better for usability and focus points, and makes the combat log MUCH EASIER TO USE. You'd need to move the action bar in a bit closer together so that the combat log doesn't overlap it, though. The center of the portraits is off on my mock up by about 20 pixels, you'd need to move them closer to the combat log to be perfectly centered, but there is enough room, and move the action bar across a bit.

 

I have a dream ...

What do you guys think?

Edited August 27, 2014 by Sensuki

[Seari]

I would prefer having the combat log in the middle.

[Mayama]

I agree that combat log/text on the left and hero icon in the center feels way better. You always need to click abilites in combat so allowing access to it in a more central spot helps a lot.

[Mayama]

I would prefer having the combat log in the middle.

I dont I would prefer the hero icons in the middle, so why not let us all allow to arrange it the way we want. 3 sections, text, heros, menu and you can switch them around so it fits your personal preference.

[Silent Winter]

It's better than current.

I too like the log in the middle but for clicks and things it makes sense to have portraits there.

I'd prefer portraits right, log middle, other left.

[Sensuki]

One thing they could do is allow shifting of the elements, split the UI into three parts and allow users to select where they want the orientation.

 

Might be a bit of work for Brian Macintosh though and might be outside the scope of the project budget wise.

 

I personally don't mind if the combat log is in the middle, or on the left.

Edited August 27, 2014 by Sensuki

[Tartantyco]

I'd prefer portraits right, log middle, other left.

 

The only correct answer.

[Mayama]

Most people will have the screen centered around the action so having the skill buttons on the far out left tribles the mouse movement required (select hero, select skill, select target) compared to having them in the centre on your average wide screen monitor.

[Ineth]

I like it, except for:

 

One thing I have done in my mockup of what I would like for a re-worked HUD is I have increased the amount of slots in the old center UI that contains the exploration actions and menu.

 

Instead, I think the combat log should be made much wider than it is now. Combat updates should not be forced to break into multiple lines.

 

Of course, then the portraits will no longer be strictly aligned to the center of the screen any more. If that looks weird, go with your original suggestion and put the combat log in the middle.

[Osvir]

The absolutely best thing to do would be to allow us to drag the UI, switch positions (Have characters on the left, the middle or the right if you want to). Though, the button areas/log/portraits need to have some sort of set "window" border. If this is possible that would be great. Unless the code asks for X-axis and Y-axis on the screen.

I like what you want to do with the mock up, and you had fair and intelligent points in your video. But I kind of like the Portrait position, but I don't like the Combat/Narrative Log being so tiny, and the mid-piece in the UI does feel "floaty" and not "attached" in some way...

I could do with the entire middle piece being "tabs" along the sides of the screen that you can expand (and lock as well so you don't accidentally click em) and have the Combat/Narrative Log occupy that entire screen region.

[limaxophobiacq]

I approve this even as someone who didn't use the combat log in IE games. Playing on a 27 inch 1440p monitor the distance down to the abilities on the left when managing a fight at the center of the screen is not really ideal (and it would be terrible on a 21:9 monitor) and having portraits and abilities in the middle would be much better. The decision to have the least used part of the interface (and the part not used 'under stress' in battle) at the center like it is now I don't really understand.

[Elerond]

I would like to see character portraits in left upper corner, because combat is currently so fast paced even with pause that it is quite important see character status changes as soon as possible and left upper corner is best place for such information for people that have used to read from left to right and from up to down.

 

Both logs are currently quite important to actually comprehend fully what happens on screen, so logs probably should be moved in left lower corner, lower middle where they are easier to follow same time when eyes are focused on middle of the screen where action happens. 

 

Control panel I would probably put in right upper or lower corner as it see quite little of use in course of the game.

 

 

EDIT: It probably should mentioned that I think that better visual feedback on battlefield would lessen significantly importance of the logs. Currently visual feedback don't give you nearly enough information what is happening in the fight. 

Edited August 27, 2014 by Elerond

[Aramintai]

Why does everything in the hud has to be at the bottom of the screen?

Why can't we have something like BG2 hud, where everything was around the screen and optionally could be hidden?

We all have big monitors now, vertical+horizontal won't impede the view much.

[Vaultman]

 

 

Here is a non-terrible Main HUD design.

Love it!

 

 

 

[kloperius]

I wold prefer like baldurs gate 2 but with the option to hide the left vertical bar.

[swordofthesith]

This is great OP. Hope the designers consider your UI recommendation. Voted up! 

[Endrosz]

I like the thought and work that went into this.

 

I realize that this may be waaaay too late to expect any sort of modification to the main HUD as Obsidian have been set on this design for a long time and have been unwilling to show it to the public for further scrutiny up until the First Look EX and IGN Previews about a month ago.

I worked with Unity, and rearranging UI (with the same icons) is really simple even within base Unity, without using any plugins (and there are excellent UI plugins for Unity in the Asset Store, in the ~50 dollar price range, which is trivial for a company like Obsidian). This is one area where software development has come a long way since the IE era. Those were hard-coded buttons on static resolution backgrounds, now it takes 5 minutes to put buttons elsewhere while retaining functionality.

 

So what I'm saying is that compared to many other design aspects, UI is low-cost to shuffle around. It's definitely worth talking about and asking for.

Edited August 27, 2014 by Endrosz

[Aramintai]

I wold prefer like baldurs gate 2 but with the option to hide the left vertical bar.

You could do that in BG2, both left and right bars had hide buttons.

Edited August 27, 2014 by Aramintai

[Endrosz]

... again Quote instead of Edit...

Edited August 27, 2014 by Endrosz

[Lasweetlife]

A 3-section UI with the ability to place each section where you want, even if you are restricted to the 'all on the bottom IWD-style UI', would be great.

[Grotesque]

 

 

Guess where the log is situated in this gem of a game!

[Mayama]

Why does everything in the hud has to be at the bottom of the screen?

Why can't we have something like BG2 hud, where everything was around the screen and optionally could be hidden?

We all have big monitors now, vertical+horizontal won't impede the view much.

 

My personal opinion on WHY its better to have all UI elements at the bottom is immersion. I really dislike UI's that basicaly force me to view through a picture frame. It creates another layer of distance between the player and the action. UI's that let you always see through, means no blocks that completly hide the game make the UI feel lighter, less in your face. UI's are a crutch, a abstract layer that lets you interact and gather information that you would not be able to get in another way. The best UI is a UI that does not feel like a UI. The ring menu's of ToEE or dead space with its UI build into the armor of the protagonists are examples of really well done UI's.

Edited August 27, 2014 by Mayama

[Ineth]

 

I wold prefer like baldurs gate 2 but with the option to hide the left vertical bar.

You could do that in BG2, both left and right bars had hide buttons.

 

Yeah I always hide that left bar too in BG2. No need for those inventory/spellbook/option/... buttons taking up screen space all the time, I use keyboard shortcuts for that.

 

Same in PoE, I'd love to hide those "UI related" buttons completely, while still keeping the gameplay utility buttons like formations and force attack / initiate dialog.

[GrinningReaper659]

Not sure that I love the arrangement, but it is preferable to the way it's set up now. I'll say again what I said before in the 'general suggestions' thread: please just separate these three HUD elements and allow us to rearrange them, at least along the bottom of the screen; even better if they could be flipped vertically and moved around the border. I'm not sure how much effort this would take, but it seems like it would be the best way to please all parties if possible.

[IndiraLightfoot]

After having played the beta, I'm leaning towards a UI like M&M X:

https://www.youtube.com/watch?v=8gPZiFUreEk#t=4m41s[/youtube

 

Clear combat log to the left (upper left, lower left), and then you have large portraits with clear combat/status effects on those portraits. For each character you pick, there is a generous bar beneath the portraits, letting you pick your preferred action fast and easy. But instead of mini-map (no need for that, have the hub there).

Edited August 27, 2014 by IndiraLightfoot