My old school solid UI mock-up for Pillars of Eternity

[Falkon Swiftblade]

 

just out of curiosity, why not go with a spherical hud similar to temple of elemental evil?

Because it's neither as quickly accessible nor does it feel natural and comfortable. Also, it doesn't address the screen view problem that many people tend to complain about (right click on an enemy....and suddenly a giant radial menu pops up blocking your view of the world....right in the middle, even!)

 

I can't stand Wheel HUDs. In both ToEE and Planescape Torment I found myself constantly wrestling with them.

 

 

I think it would be instantaneous for accessibility. You can code the timing of a hover state, or delay it with CSS or Javascript fairly easily. When you're not using something it's not in sight, when you need it just hover and right click. It's no extra steps, and the icon's are case sensitive so you only need to see what you need. I think ToEE was a little too big and clunky, but I'm imagining everything you need to be a spherical shape of not more than one of the green and yellow circles I've seen that cover maybe 3 characters. I haven't played planscape, but I can imagine they both were probably more text based. I'm thinking of something more like 2-3 separate circles of circles, when one is not being used it disappears so you never have more than one row of circles and you'd only see one circle on either side at one time. Not unlike your tool bar at the top of the browser, except it's graphics instead of text, smaller, and case sensitive for what's being highlighted. The main skill will be seen, but everything else would be hidden, and you would be able to adjust how fast the scrolling was in between via options. I know it's a bit different than what you're used to, but I feel like it would work. It's ok if you disagree  

[Grotesque]

nothing beats in the accessibility department when you have an UI that display's all the most used icons on the screen without the need to hover and click mouse twice, three times etc.

Also I think that mouse precision is important, that's why having big icons/buttons  without the need to press them with pinpoint accuracy is good.

 

 

 

 

this picture is entitled: Symmetry

 

 

This main UI was entirely made by reusing Obsidian assets like the pillars at the bottom, demon heads, statue, skulls

I love to recycle assets!

Edited February 10, 2015 by Grotesque

[illathid]

That's absolutely gorgeous! I want it. Any chance you Bester, and Sensuki could work together to add it as a mod?

[Grotesque]

If a character would have more abilities that nine, I could add scroll arrows at  both ends of the ability bar.

 

Will a character have more than nine abilities?

 

Also the intended role of the gems between the roman numerals is to select the active chants of the chanter (i know that there are just 4 chants and there are 5 gems)

[Grotesque]

I think having the quick slots and weapon sets so far away from the spells and abilities would be a bit of pain in combat but I guess U shaped UIs aren't really for people who care about mouse travel.

 

Mouse travel becomes obsolete once you know shortcuts.

 

And because this is not a console game, the possible keys and key combinations are more than enough.

 

Having a mouse with 5 buttons, you can map those buttons to do any action as long the game key mapping is in depth (good to have for people who lost an arm for example)

Edited February 10, 2015 by Grotesque

[Azureblaze]

Nice Job with the revisions Grotesque, I'd tap that UI.

[Grotesque]

Nice Job with the revisions Grotesque, I'd tap that UI.

 

 

I am still making improvements and soon I'll make a mockup for 4:3  (1440x1080) monitors.

Edited February 11, 2015 by Grotesque

[GreyFox]

That's a much better looking UI than the current one but I can't comment on it's functionality...the combat/dialog box being in the middle already makes it head and shoulders above the main game UI.

[Shepyrd]

That is a really cool UI, Grotesque. Nice work.

[Hassat Hunter]

While I like the mockup, I still think U takes too much space and while it made sense in the BG-era, L is still better in modern aging. Intend to update your L-shaped mockup too or is it exclusively U-shape from now on?

And yay for vertical big character portraits.

 

 

 

This main UI was entirely made by reusing Obsidian assets like the pillars at the bottom, demon heads, statue, skulls

I love to recycle assets!

You would make game designers proud

[Grotesque]

While I like the mockup, I still think U takes too much space and while it made sense in the BG-era, L is still better in modern aging. Intend to update your L-shaped mockup too or is it exclusively U-shape from now on?

And yay for vertical big character portraits.

 

 

 

This main UI was entirely made by reusing Obsidian assets like the pillars at the bottom, demon heads, statue, skulls

I love to recycle assets!

You would make game designers proud

 

 

I intend to redesign the mockup for 4:3 monitors and if that mockup leaves the viewable window too small, I'll try to make a L shaped design.

[Grotesque]

 

update:

 

formation buttons and new map button, animal companion icon

 

Also in this screenshot, the game is zoomed out. Maybe those who say that this UI takes up too much screen space forgot about this game  feature.

Edited February 11, 2015 by Grotesque

[Rostere]

Also in this screenshot, the game is zoomed out. Maybe those who say that this UI takes up too much screen space forgot about this game  feature.

 

That is a very good point!

[Aramintai]

 

update:

 

formation buttons and new map button, animal companion icon

 

Also in this screenshot, the game is zoomed out. Maybe those who say that this UI takes up too much screen space forgot about this game  feature.

I really like that you can see spells right away in this UI without the need to click on another button to show them. I don't like using keyboard shortcuts so having so many other functionality buttons visible in the UI is a big plus from me. Keep up the good work, hopefully devs will take notice and improve game's UI to smth similar.

Edited February 11, 2015 by Aramintai

[ryukenden]

after looking at these old-school ui, it reminds me of beamdog's enhance edition. With a UI like this, PoE can be imported to iPad or tablet.

 

 

hmmm, tablet, starting to sound sexy.

[Malekith]

Grotesque, on 11 Feb 2015 - 08:16 AM, said:

 

update:

 

formation buttons and new map button, animal companion icon

 

Also in this screenshot, the game is zoomed out. Maybe those who say that this UI takes up too much screen space forgot about this game  feature.

This is almost perfect. I would honestly delay my first playthrough just to wait you and Bester mod your UI into the game. You just made my day.

[Aramintai]

I think it can be a bit thinner on the sides though, like in BG:

 

Formations icons can be grouped into one pop-up menu and the rest can be lined into one vertical line.

Icons that BG UI had on the left side were Center on Player, Map, Journal, Inventory, Character Sheet, Wizard Spellbook, Cleric Spellbook, Game Settings, Rest, Time of Day. I suppose all of them should be useful in PoE as well, except that here spellboks are replaced by grimoires. 

 

Also, horizontal bar can be thinned in the BG way as well - there it can change icons set depending on whether you're selecting one character or all of them. Like here:

http://static.gamespot.com/uploads/original/416/4161502/2404599-0008.jpg

http://static.gamespot.com/uploads/original/416/4161502/2404598-0003.jpg

 

Also, there were buttons for slide-hiding left or right side.

Edited February 11, 2015 by Aramintai

[Malekith]

Aramintai, on 11 Feb 2015 - 12:37 PM, said:

I think it can be a bit thinner on the sides though, like in BG:

 

Formations icons can be grouped into one pop-up menu and the rest can be lined into one vertical line.

Icons that BG UI had on the left side were Center on Player, Map, Journal, Inventory, Character Sheet, Wizard Spellbook, Cleric Spellbook, Game Settings, Rest, Time of Day. I suppose all of them should be useful in PoE as well, except that here spellboks are replaced by grimoires. 

 

Also, horizontal bar can be thinned in the BG way as well - there it can change icons set depending on whether you're selecting one character or all of them. Like here:

http://static.gamespot.com/uploads/original/416/4161502/2404599-0008.jpg

http://static.gamespot.com/uploads/original/416/4161502/2404598-0003.jpg

 

Also, there were buttons for slide-hiding left or right side.

Not realy. First of all, the picture you showed looks bad since it's with widescreen mod that changes game resolution. BG2 UI looks good in 800:600 resolution, which was the one it was designed for.

Second, PoE needs more icons than BG since classes have way more abilities and actions than characters in IE games.

[Vaalac]

I must say I do love your UI too, it's very nice to directly see spells. First time I'm seriously thinking of taking a mod for the UI of this game.

[Aramintai]

 

Aramintai, on 11 Feb 2015 - 12:37 PM, said:

I think it can be a bit thinner on the sides though, like in BG:

 

Formations icons can be grouped into one pop-up menu and the rest can be lined into one vertical line.

Icons that BG UI had on the left side were Center on Player, Map, Journal, Inventory, Character Sheet, Wizard Spellbook, Cleric Spellbook, Game Settings, Rest, Time of Day. I suppose all of them should be useful in PoE as well, except that here spellboks are replaced by grimoires. 

 

Also, horizontal bar can be thinned in the BG way as well - there it can change icons set depending on whether you're selecting one character or all of them. Like here:

http://static.gamespot.com/uploads/original/416/4161502/2404599-0008.jpg

http://static.gamespot.com/uploads/original/416/4161502/2404598-0003.jpg

 

Also, there were buttons for slide-hiding left or right side.

Not realy. First of all, the picture you showed looks bad since it's with widescreen mod that changes game resolution. BG2 UI looks good in 800:600 resolution, which was the one it was designed for.

Second, PoE needs more icons than BG since classes have way more abilities and actions than characters in IE games.

 

Are you gonna play PoE in that lowres? I don't think so, that's why I chose that screen as a reference, if you don't like that one check the other two from EE edition. And it's just a reference anyway cuz I'm not suggesting making it 1:1 BG lookalike. It's just a suggestion to trim unused space and make UI a bit slimmer. As for abilities - if you compare PoE ones to the amount of BG spells and special abilities then there was way more of them in BG. And in any case, they are already neatly covered in Grotesque's UI in the lower right corner.

Edited February 11, 2015 by Aramintai

[Malekith]

Aramintai, on 11 Feb 2015 - 3:01 PM, said:Aramintai, on 11 Feb 2015 - 3:01 PM, said:

 

Malekith, on 11 Feb 2015 - 2:40 PM, said:Malekith, on 11 Feb 2015 - 2:40 PM, said:

 

Aramintai, on 11 Feb 2015 - 12:37 PM, said:Aramintai, on 11 Feb 2015 - 12:37 PM, said:Aramintai, on 11 Feb 2015 - 12:37 PM, said:

I think it can be a bit thinner on the sides though, like in BG:

 

Formations icons can be grouped into one pop-up menu and the rest can be lined into one vertical line.

Icons that BG UI had on the left side were Center on Player, Map, Journal, Inventory, Character Sheet, Wizard Spellbook, Cleric Spellbook, Game Settings, Rest, Time of Day. I suppose all of them should be useful in PoE as well, except that here spellboks are replaced by grimoires. 

 

Also, horizontal bar can be thinned in the BG way as well - there it can change icons set depending on whether you're selecting one character or all of them. Like here:

http://static.gamespot.com/uploads/original/416/4161502/2404599-0008.jpg

http://static.gamespot.com/uploads/original/416/4161502/2404598-0003.jpg

 

Also, there were buttons for slide-hiding left or right side.

Not realy. First of all, the picture you showed looks bad since it's with widescreen mod that changes game resolution. BG2 UI looks good in 800:600 resolution, which was the one it was designed for.

Second, PoE needs more icons than BG since classes have way more abilities and actions than characters in IE games.

 

Are you gonna play PoE in that lowres? I don't think so, that's why I chose that screen as a reference, if you don't like that one check the other two from EE edition. And it's just a reference anyway cuz I'm not suggesting making it 1:1 BG lookalike. It's just a suggestion to trim unused space and make UI a bit slimmer. As for abilities - if you compare PoE ones to the amount of BG spells and special abilities then there was way more of them in BG. And in any case, they are already neatly covered in Grotesque's UI in the lower right corner.

 

PoE  won't be designed with 800:600 res as default, so no. But i always play IE games in that res, or maybe 1200:800 max. Anything above it makes the UIs terrible.

As for Grotesque's UI, i don't see much unused space. So in order to srink the UI he would have to remove or minimize the icons, and i don't want that.

Edited February 11, 2015 by Malekith

[Grotesque]

 

 

I just realized when making screenshots, the mouse does not appear in the final picture. 

I had this feeling that something is missing

Edited February 11, 2015 by Grotesque

[Veevoir]

It is extremely nice to actually see the spells on selected level all the time, instead of popup.

This UI is very neat and well laid out*. It needs to happen!  


_{*the left bar seems a bit overwhelming when you added all formations. So many buttons. It looked better in revious version (the one with statue in the middle of the bar), imho the only thing that needed fixing there is making the buttons bigger or reduce the width of the bar (no symmetry, I know).}

[Hassat Hunter]

I still don't see a mouse (I'm blind)?

 

Can't say I ever played BG2 on a lower resolution than 1024x768 and it's just fine. Yes, a lot of wasted space, which is why PoE should easily be able to afford L instead of of U.

But even not, the current mockup is already leagues better than the default of PoE.

 

And daaaaaang, does that EE UI look horrible :/

[Grotesque]

I still don't see a mouse (I'm blind)?

 

 

 

When pressing Print Screen key, the mouse is not captured.

Anybody knows how can I remedy this?