Sensuki's Suggestions #029: Customizable Main HUD [Mockup]

[Sensuki]

I think I figured out a way to improve the user interface, while also making the majority of users happy. The major part of that answer is to allow players to customize the position of elements in the UI.

 

But before I go into that I will address some of the current problems that the User Interface has

 

Issue 1

 

For me, the current size of portraits in the UI are too small. It also seems pointless to me to have a separate space above the portraits for the status effect icons, and a large space between the portrait bar and the main menu bar. To me this is a waste of UI space.

I have also been testing Pillars of Eternity on different resolutions now that full scaling options down to 640x480 are possible with the new UI scaling system. Let me tell you, there are problems. The UI is incredibly tiny on resolutions below 1920x1080 and the elements are downscaled with a very bad algorithm, causing severe loss of detail. I can put any image into some random website with downscaling code and it will give me a 99% accurate smaller version.

So at the expense of about 30 extra pixels (on 1920x1080), I think it would be a good idea to slightly increase the natural height of the portrait bar area, and the combat log area. This would allow for slightly better scaling at lower resolutions and would just look much nicer (IMO) than what we currently have. I think larger portraits would be a very popular addition.

Here is my dodgy mspaint mockup of the new portrait bar 

[Level up icon would become part of the status bar, and would just always be at the very top left of the status bar icon]

 

 

[OBVIOUSLY the Health icon and Health bar would be blue or green based on your colorblind option, but I created them with red because I stole the red color from another image, and creating a non-terrible looking blue or green would be time consuming for me in mspaint. Try and imagine them with blue or green yourself]

 

I have increased the width of the little 'tabs' that appear under the portrait bar to the full length of the portrait, and slightly increased the height so that it fits Obsidian's current font for class resource numbers. I have added a Health icon that will display current character health in an integer value, represented by the dodgy + symbol and the three zeroes next to it. I have also moved all class resources (Cipher Chants, Monk Wounds, Cipher Focus and Ranger Animal Companion) over to the right side, where the Ranger Animal Companion is currently. Since no class can be both a Ranger and a Cipher (or Monk or Chanter), I see no reason why such resources should occupy different space.

Issue 2

 

I think the main menu in the middle takes up a lot of precious horizontal space. From the beginning the Main HUD has been designed around a central menu. Larger portrait and Combat log areas afford some extra vertical pixels and allow the sides of the main menu elements to be vertically aligned.

 

Like so:

 

Issue 3

 

The combat log doesn't have enough vertical or horizontal space for the text that prints out

 

Solution is to make it larger, and take up the same extra few vertical pixels, and all of the free space between the main menu and the log

 

To something like this:

 

The Result

What we end up with is something like this



You will note that I have put red squares around each element. This is for a reason. That reason is customization. inXile were able to make their UI customizable even with their early WL2 First Look demo. I have been informed that the later Unity versions make it very easy to move elements around in NGUI and provide a customizable user interface. I'm not quite sure as to the reason why Obsidian hasn't offered this solution anyway, but with the extra time afforded to them by the delay of the project, I believe they should be able to offer UI Customization.

My vision for this UI customization is this. The UI shall be split into five different regions numbered in this picture. Portrait bar, Party Actions, Clock, Main Menu and Log. Each element except for the portraits shall be individually collapsible by a small gem at the top of each element like in the Infinity Engine games (rather than a small horizontal tab which takes up precious horizontal space). These gems are not present in my picture currently so just use your imagination.

The player will also be able to slide each UI element to the left or right, and it will 'swap places' with the element next to it. If you want your party action bar on the left of the portraits, you can move it to the left of the portraits and the portraits will shift to the right. You can also collapse any of the elements you like. They already have some of the code they need for this in place - because you CAN DO IT WITH THE PORTRAITS.

Here are some of the other available options, which would ideally be realized by simply swapping UI elements around like tetris

Maybe you prefer a Fallout style UI?



My preferred version



The only option that this does not afford is a centered portrait bar, because the portrait and the log are both bigger than the main menu, so there is no way to put the portrait bar in the middle.

I believe this could be achieved by offering an option centers the portrait bar, combined with a shrunk combat log and a docked menu section. You should ideally be able to flip the menu section and the combat log to the left or side of the screen, and the menu section should always display the party action side closer to the portraits (or allow individual swapping of the menu sections within it's own docked space).



The second last thing is that the "Solid HUD" would likely just be fill in art that surrounds the elements, and the design is pretty neutral of the position of the element on the screen (no like dragons pointing left or right or anything like that).

The last issue I can see with this suggestion is that if portraits are on the right side, then the action bar could eventually become too long to fit all of the slots on the screen. My solution would be that once the action bar becomes too long, create a new line above it where the spell selections usually go, and when the spell selections are open, have them simply replace the upper action slots when it is open.

Apologizes in advance to Brian Macintosh and Roby Atadero if anything from this suggestion gets implemented.

Let me know what you think.


 

Edited November 5, 2014 by Sensuki

[Sensuki]

The UI is incredibly tiny on resolutions below 1920x1080 and the elements are downscaled with a very bad algorithm, causing severe loss of detail. I can put any image into some random website with downscaling code and it will give me a 99% accurate smaller version.

 

I've been informed that this is a problem with NGUI itself.

Edited November 5, 2014 by Sensuki

[Gairnulf]

1. Are the talents/spells shown only on hover or all the time?

2. Are any of the three main parts of the HUD hideable?

[Sensuki]

1. Only when you have a character selected, like currently.

 

2. Yes, I mentioned that in the text (if you read it, and missed it)

 

 

 

Each element except for the portraits shall be individually collapsible by a small gem at the top of each element like in the Infinity Engine games (rather than a small horizontal tab which takes up precious horizontal space). These gems are not present in my picture currently so just use your imagination.

Edited November 5, 2014 by Sensuki

[Gairnulf]

 

1. Only when you have a character selected, like currently.

 

2. Yes, I mentioned that in the text (if you read it, and missed it)

 

 

 

Each element except for the portraits shall be individually collapsible by a small gem at the top of each element like in the Infinity Engine games (rather than a small horizontal tab which takes up precious horizontal space). These gems are not present in my picture currently so just use your imagination.

 

 

So when the buttons are separated will they be hidden via separate gems, or by the same gem?

[Sensuki]

One on each element.

[Dark_Ansem]

you know what... this is reasonable. and I think that Unity 5 *should* be flexible enough to allow this... lemme email their customer service...

points 2-4 need to be more compact in this view.

[xsikal]

I like it. Would probably roll with your preferred version if it was an option.
 

[Bester]

you know what... this is reasonable. and I think that Unity 5 *should* be flexible enough to allow this... lemme email their customer service...

points 2-4 need to be more compact in this view.

 

- Unity 5 will introduce physically based rendering, web builds playable in html5 or flash, some audio features, etc. No new UI features.

- Unity 5 comes out next summer.

 

Customer support's face when they read your email...

 

Edited November 5, 2014 by Bester

[Silent Winter]

The only option that this does not afford is a centered portrait bar, because the portrait and the log are both bigger than the main menu, so there is no way to put the portrait bar in the middle.

But you could still put log on the left, then portraits (off-centre) and then buttons right, right?

That'd be fine for me.  (Though your 'preferred version' is good for me too)

[Kjaamor]

The only bonus I see from this is that it puts the combat log on the left, unless you're counting the dubious bonus of being able to play in higher resolutions - although as you say that is an NGUI issue anyway.

 

In terms of priorities for change (for it is that rather than "to fix") I find the suggestions in this particular thread to be pretty near the bottom at best.

[Karkarov]

This is an improvement over other outings.  I will be posting something myself later on since I can no longer resist.

[Dark_Ansem]

 

you know what... this is reasonable. and I think that Unity 5 *should* be flexible enough to allow this... lemme email their customer service...

points 2-4 need to be more compact in this view.

 

- Unity 5 will introduce physically based rendering, web builds playable in html5 or flash, some audio features, etc. No new UI features.

- Unity 5 comes out next summer.

 

Customer support's face when they read your email...

 

 

the beta is already out and the devs should have it, since they are Unity Pro subscribers. aren't you, what's the word, dense?

And it will feature a better code, a better workflow and a faster set of instructions. therefore, making those kind of adjustment would be easier.

Not to mention, faster rendering helps always.

[Karkarov]

So I will toss my own most recent mock up in here.  Please bear in mind this one is a work in progress and designed to stay as close to the current UI as possible with some changes to appeal to players who aren't quite happy with the layout or sizing of some things.  Places where I felt like there was no need to make a change (like the action bars) I didn't make one.  I also restricted myself to only using UI elements that actually exist in game now.

 

That said I feel there were room for improvements in a few places. 

 

1: Like Sensuki I don't like buffs off the portraits.  Just don't need it, plenty of space on the portraits.

2: Pet icon is too huge and should be fit to the portrait.

3: Resource indicators were cramped, and if you look closely actually do overlap with the portraits slightly due to lack of room on the bottom edge.

4: I feel like we need to move "cooldown" timers to the portraits to make it easier to see, it is too small/hard to see on those tiny hud elements.

5: Addition of current action indicators on the portrait is helpful in my opinion because it lets you tell at a fast glance if your mage has started that buff yet, has the rogue finished moving, blah blah blah without having to interpret the sometimes VERY busy game screen.

6: Felt like the health/stam colors needed to be swapped around, just a personal thing.

 

NOTE: I no longer bothered with a selected character indicator on the portraits.  Why?  Because with the action bars being so wildly different from character to character and the highlight on the selection circle being so strong on the game screen I see no point.  Hell the current way it is done is so subtle in game I don't even notice it half the time.

 

Anyway, mark 1 BB Inspired UI - here we go!  As always I request you please click it and such as needed to view it at full res.

 

----------

 

Edited November 6, 2014 by Karkarov

[AlekzanderZ]

Really nice Karkarov, I really like it.

[lordkim]

way better than  anyone else karkarov !!!

[Sensuki]

Combat log is too small for me, that's the only reason I didn't make one with portraits in the middle.

[IndiraLightfoot]

Karkarov: As always, you have a knack for making these UI widgets, at least in my book.

 

This is perhaps odd, but I'd like to switch the portraits with the combat log, while keeping the action bar/icons where you have put them - quite close to the action, which is very clever.

[Karkarov]

Thanks for the feedback everyone!  Glad to hear it is mostly well received.  I will be doing a mark 2 later that is going to be a more .... minimalist approach.

[Cubiq]

I'm don't really want to have the biggest bulk in the middle of the screen. That's where the combat is, so if they went with that, the ability popups would need to be a lot more compressed.

[IndiraLightfoot]

Cubiq: Fair point. But I want those action icons and that action bar bigger than it is in PoE (tiny). Perhaps the solution is to keep the combat log where Karkarov put it, put then move those portraits and have them on the upper left side (like many classic CRPGs and now, soon, DA:I) Then the bottom can be all action bar-stuff, like in Seari's EE PoE mockup?

[Sensuki]

I highly doubt Obsidian will do that though. At least if the UI was modular you could move stuff around yourself.

[Silent Winter]

Combat log is too small for me, that's the only reason I didn't make one with portraits in the middle.

Well, there's room there for the combat log to be wider without overlapping the portraits, and it can always be made to stretch vertically too.

Looks plenty big enough to me (and I like the portraits being in the middle) (assuming they can't be on the side BG-style)

[Sensuki]

Still not enough room for me. Combat log should be as wide as the portrait bar.

Edited November 7, 2014 by Sensuki

[Quantics]

I agree with sensuki. PE is going to be very story driven. 

 

Yet at the moment it's really a pain to read dialogue since the box is so small.