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

[Rostere]

 

 

 

 

"liking things now that are part of the past is the definition of beeing nostalgic."

 

sorry, but this is the most idiotic thing I've seen today

Come on seriously? Just get a dictionary and search for the word and the definition of it. Sorry its not "liking" its "longing or yerning" which is actually alot stronger. Also thanks for the insult.

 

Its kinda interesting, how aggressive, defensive and personal people get here about that topic even if my post were neutral and only talked about the topic in general and its a opinion and you cant force it on everyone.

 

But this has nothing to do with nostalgia. I'm longing for prerendered backgrounds and solid UIs because I like them. I like how they look. The solid UI is a great addition for the visuals, and prerendered backgrounds is a cheap, hardware efficient way of doing great looking enviroments. Unfortunately somewhere around the late 2000s, some people just said that "ok, That's it, gamers don't want these anymore, lets start making expensive 3D enviroments". 3D has its place, almost all genre benefitted from it. You cannot have FPS or racing games without good 3D. But prerendered games should have a place in strategy and roleplaying games.

 

Ugh what is your problem with the word nostalgic?!?!?!

 

Solid UI's is a part of the past. Can we agree on that? I assume yes. It is part of the past. They usually dont make games with such UI's anymore. Like they dont make cars like they did in the 50ties or no one wears a top hat anymore. Its nostalgic. What is everyones problem with that single word. It perfectly defines it. It has nothing to do with why you like it its just says "its from the past and I like it". Gosh seriously I guess the problem here is that some people have a problem with beeing called nostalgic, whatever.

 

Well, in many cases people used it as a negative adjective. Now I know that you used it as a natural, at least that's why you say, but I assume to many people nostalgic reads like "you only like it because it is like in the old games".

 

And all in all, the problem is not with the word nostalgic. It's about dismissin solid UIs, and prerendered backgrounds because of innovation.

 

Don't feed the troll man...

[Aramintai]

Update: wider combat log and view area. 1920x1080

 

This is the most refined version of this mock-up to date. Small changes to weapon sets layout for the future.

 

 

 

 

 

If even now you are not satisfied with the wider view angle, nothing will.

I want this one in the game  Come on, devs, at least consider it for an after-release update. This just looks too awesome to pass.

[Sif]

Update: wider combat log and view area. 1920x1080

 

This is the most refined version of this mock-up to date. Small changes to weapon sets layout for the future.

 

 

 

 

 

If even now you are not satisfied with the wider view angle, nothing will.

 

Beautifully crafted, as always... Kudos to you Grotesque!

 

By the way what about a 1920x1200 res (16:10) version? Hm?

[Mayama]

 

So after a long discussion that escalated way to quickly here some constructive critique

 

Its usually more aesthetically pleasing if menu's end on the same height. The combat log and the portraits seem to end at a random height.

 

Combat Log in the middle would give it a more balanced feel.

 

Why are the menu buttons all over the place, it forces the player to memorize 3 different areas where he has to look for the menu buttons.

 

Are the formation buttons really that important to give it so much screen space?

 

What about putting all menu buttons on the left side, using rectangular boxes?

 

[ character   ]

[ Notebook   ]

[ Stronghold ]

 

etc etc... with icons instead of writing ofcourse.

Edited February 16, 2015 by Mayama

[Sensuki]

The select all button was in the bottom right of the screen in BG1, BG2 and IWD1 - that's leveraging the muscle memory of the user, which is good interface design.

Same with the rest button, it was located in that part of the screen for BG1, but was on the left side of the screen for BG2.

Combat log in the middle is the easiest to read on the fly, as you can just flick your eyes down to read the current lines, rather than having to pause the game and move your vision away from the center of focus (the combat).

 

I think Grotesque's mockup looks fantastic but as far as optimal positions of elements and dead space goes - there's still a way to go. Eventually I'll get around to suggesting some improvements, but I'm focused on the actual game at the moment.

Edited February 16, 2015 by Sensuki

[Grotesque]

 

 

So after a long discussion that escalated way to quickly here some constructive critique

 

1. The combat log and the portraits seem to end at a random height.

 

2. Combat Log in the middle would give it a more balanced feel.

 

3. Why are the menu buttons all over the place, it forces the player to memorize 3 different areas where he has to look for the menu buttons.

 

4. Are the formation buttons really that important to give it so much screen space?

 

5. What about putting all menu buttons on the left side, using rectangular boxes?

 

 

1. Bringing the portraits to the same height as the log would shrink them too much.

 

Also, the log is a bit depressed so that the conversation and fight log tabs would not pop out and intrude the view area. also it gives a nice effect of variation by breaking the line and giving a larger view area on the vertical axis in the center of the screen where it counts most.  And considering the log's height is to be player customed, you can bring it at any height you want, pixel by pixel.

 

2. Combat log is in the middle of the screen (vertical axis). You perceive it otherwise because of an optical illusion. Seeing the mockup in its native resolution and full screen would eliminate that.

 

3. The UI is practically littered with buttons (spell levels, active chants, weapons slots and quick items are buttons too). And the interface is not designed to the lowest player common denominator (which in this case would be not being able to memorize 2 simple buttons in 5 minutes.)

 

Also Baldur's Gate did it the same, which can be viewed as a mini-tribute. Replacing the buttons would only leave the area empty and unbalanced and clutter other areas because...

 

4. The formation buttons are important (at least to me and maybe others.)

Besides several formations being ONE click ready & "pressable" (not an actual word), it helps by filling the otherwise empty space on the left section.

 

And because this is a symmetrical design on the vertical axis ( and forever will be so on 16:9 monitor proportions), the width of the left section is dictated by the width of the right section which houses those big portraits that me and nearly all love (as it seems).

 

5. Putting all the main buttons to the left side would only clutter it and leave other areas empty and unbalanced ,such as the case of removing the buttons above sets and quick items slots. Those buttons help to visually balance the spell levels, active chants and grimoire/chanter's scroll icons of the opposed side of the vertical axis.

Edited February 16, 2015 by Grotesque

[Mayama]

1. Bringing the portraits to the same height as the log would shrink them too much.

 

Also, the log is a bit depressed so that the conversation and fight log tabs would not pop out and intrude the view area. also it gives a nice effect of variation by breaking the line and giving a larger view area on the vertical axis in the center of the screen where it count most.  And considering the log's height is to be player customed, you can bring it at any height you want, pixel by pixel.

 

2. Combat log is in the middle of the screen (vertical axis). You perceive it otherwise because of an optical illusion. Seeing the mockup in its native resolution and full screen would eliminate that.

 

3. The UI is practically littered with buttons (spell levels, active chants, weapons slots and quick items are buttons too). And the interface is not designed to the lowest player common denominator (which in this case would be not being able to memorize 2 simple buttons in 5 minutes.)

 

Also Baldur's Gate did it the same, which can be viewed as a mini-tribute. Replacing the buttons would only leave the area empty and unbalanced and clutter other areas because...

 

4. The formation buttons are important (at least to me and maybe others.)

Besides several formations being ONE click ready & "pressable" (not an actual word), it helps by filling the otherwise empty space on the left section.

 

And because this is a symmetrical design on the vertical axis ( and forever will be so on 16:9 monitor proportions), the width of the left section is dictated by the width of the right section which houses those big portraits that me and nearly all love (as it seems).

 

5. Putting all the main buttons to the left side would only clutter it and leave other areas empty and unbalanced ,such as the case of removing the buttons above sets and quick items slots. Those buttons help to visually balance the spell levels, active chants and grimoire/chanter's scroll icons of the opposed side of the vertical axis.

 

 

3. The buttons are not sortet logicaly, like why is the "select all" and rest button together on the right bottom corner? If you want to fill that space why not put the map or a huge game options button their. Those two feel like (for me) they could easily stand alone. Its not so much about having buttons on different areas as it is about the question "why is that button exactly their?".

 

4. I dont see any problems in actually leaving space unused. It gives the design more room to "breath". Especially the attack and stealth button feel like they are kinda forced into the character action section.

 

5. Putting all the buttons on the left side in rectangular boxes wouldnt clutter it anymore than it is right now. If you would make those boxes half as high as a character portrait it would reduce the visual noice. Also are 8 buttons for formations really necessary? I never played so much with formations but what about 4 buttons for customizable formations instead of 8?

[Sensuki]

 

 

like why is the "select all" and rest button together on the right bottom corner?

I already answered that one for you.

[Hassat Hunter]

Ah, Mayama's "points" remind me of how FPS 'progressed'... from fun to cover-based shooters. And now, "for some reason" (*cough*) we're going back to the good old times of FPS.
 
And Mayama is there crying "Why are you having fun in your FPS? This is not the progression. You're going back to older times. Come back here. Stop having fun, hide here and play pop-a-mole behind a wall with regenerating health. Stop, stop... why are you using medikits? Why are you trying not to be hit? WHY ARE YOU HAVING FUN?"
 
Sometimes people just forget good stuff from the old times, and crowdfunding was made to give us games we want. If you didn't want a IE-type game, why back PoE? Also, your "we should never go to old times, people don't want it"... explain to me then how exactly $65 MILLION(!) in players money was gathered for Star Citizen. No market, eh? No one wants it, eh?
 
Riiiiiiiiiight...

 

(we seriously need a dislike button on this forum)
 
Anyway, back to the the actual topic, where I agree way more with Stun than I recall ever have doing so:

You know. The most important thing for me is really the large-size portraits on the right like in IWD, BG and BG2.

Hear hear. I *still* don't understand Obsidians insistant desire to place them in an undesirable location, Planescape: Torment, IWD2 and now PoE... :/
 

 

And in ToEE it was even worse, since some spells and items were complex and they had extra branches of clickable choices in the radial menu.

For example, sometimes you found yourself in a situation like this:



^Look at that. This was supposed to be a solution to 'screen hogging' panel-themed UIs that were the standard RPG fare back in the day. Yet it could (and often did) take up the whole screen during tense combat. And for an otherwise stunningly beautiful game like ToEE? Good God.

 
I think the only problem with that way was too much text, it would be way quicker to keep the icons and go from bigger icon to the smaller one to select it and whammo! Actually maybe more similar to how a mac's toolbar is when you hover over it, and you can actually make it bigger or smaller too. Also I'd dim them out when not highlighted, similar to the background of the text.

 

"Silver", an old action RPG did it plentry right by me. The ridial was 8 or so icons, when clicked you got 8 more icons, same ring. Then click what you wanted, bam... progress.
Which was needed since combat didn't pause when fiddling around, though it also only worked since there was quite a limit on weapons and magic I don't want a full-fledged RPG to have.
Still... best radial use I've seen so far... and that game was released in 1999
 

I know this is optic-trickery, but the left side does seem extensively larger than the right side. I personally account this to the right side containing character portraits, which despite their size do not look so big, and are such a filling of that sidebar that the left bar looks just too thick, since it doesn't have the same content variatio.
Also I don't understand other people's need for symmetry. An UI should look good and be funcional. What does putting things on wires to be specific sizes suit either of those?

 

Everything on the left seems like it could easily fit around the bottom left (with the clock) or along the icons of fighting/stealth/inventory.
 

Your UI looks very beautiful @Grotesque, and the bottom bar in particular looks like it would be more player-friendly and efficient than any other I've encountered in existing cRPGs.
 
Regarding the vertical portrait bar, I've previously argued against such a layout, but if the portraits are allowed to be as big as this (rather than as tiny as in BG2) it apparently works quite well.
 
The only thing I don't like in your mockups, is the left bar. It doesn't really seem to pull its weight in terms of usefulness, considering the amount of viewport space it obscures:

• Map screen, character record screen, settings screen, etc. are things that I always access via keyboard anyway, and from what I hear I'm not the only one. If those buttons are just there to help newbies learn the keybord shortcuts, having a full sidebar blocking a significant amount of viewport area seems like a waste.
   
• Having 8 different formation buttons visible at all times, is just excessive - I doubt anyone has a use for that. I, for one, only tend to use 2 different formations in the entire game when playing BG2 or IWD - a tight one for dungeons, and a more sparse one for open maps (like wilderness areas). And even players who use more than that, likely won't mind if they were accessed through a single button (i.e. two clicks instead of one to change formation)... Unlike selecting spells and quick items, this is not something players will typically want to do on every single "round" of combat, so having a single-click access scheme with always visible buttons provides much less benefit than it does for the bottom bar items.

With that in mind, I wonder how your UI would look with these changes:

• remove the current left bar completely
• move the portraits bar to the left (i.e. make the UI "L shaped")
• squeeze both the clock (current bottom left corner) and the bare minimum number of necessary buttons from the current left bar, into the bottom right corner. A round clock with (tiny versions of) the other buttons arranged around it in a semi-circle, might work.

That's what I always say, with modern monitors, L is better (though I would go to the right with the portraits akin to IE rather than the left). But no-one listens to this IWD/BG2 character . I wonder how many would even recognise it... as a IE-knowledge test. But I am derailing.

 

Just an idea, if the icons are moved along stealth/inventory/attack the first button could be the formation, and then the other buttons could form the various formations (instead of their usual function), then revert back to their function once you're done. No popup bar, or additional bar or so required then.

[Sensuki]

off topic but the state of FPS makes me want to cry, as an ex-competitive player, Call of Duty 4 with Promod was the last good competitive FPS imo. I don't count CS:GO as I think it's a garbage game, but ymmv.

 

wtb cs 1.6 / cod1 / ut2004 / quake 3 days again

Edited February 16, 2015 by Sensuki

[Abel]

Mayama has some good points here i guess, and Hassat too. The IE games had probably their own good reasons for doing some stuff, and the "It was like that in BGX" reason seems a bit out of topic. Still, it's a matter of details, and i agree that the button placing matter seems pretty hard to solve.

[Luckmann]

 

like why is the "select all" and rest button together on the right bottom corner?

 

I already answered that one for you.

 

Your muscle-memory really just comes from the fact that the IE games for whatever reason wouldn't let you assign the Select All button, forcing you to press Select All incessantly. If it was hotkeyed somewhere reasonable, say, right to the left of "1" instead on the ass-end of the keyboard, you'll probably end up using that anyway, fairly quickly.

[Sensuki]

Muscle Memory.

[Luckmann]

Retrain it. That corner is prime real estate.

[Sensuki]

Select All was the = button in the IE games, mate.

 

Personally I just found it faster to flick my mouse down to the select all button, because it was in the bottom right corner, very easy to hit with the mouse.

Edited February 16, 2015 by Sensuki

[Luckmann]

Select All was the = button in the IE games, mate.

 

Personally I just found it faster to flick my mouse down to the select all button, because it was in the bottom right corner, very easy to hit with the mouse.

 

I know, and it was annoying as all hell that you couldn't reassign it, especially since placements don't tend to correspond across different keyboards.

 

I always, constantly flick down to the lower-right corner, still, to this very day, and I'm so glad it's placed in such a way that it's practically impossible to accidentally hit something else or miss it, but I'd still kill to be able to reassign it and forget about manually pressing it forever.

[Zack Fair]

Select All was the = button in the IE games, mate.

 

I know, and it was annoying as all hell that you couldn't reassign it

Really? Because I'm almost 100% sure that I assigned select all to number 0. I think it was reassignable.

[Stun]

I have a gut feeling that the 'select all' button's placement/assignment is a very trivial UI issue for the devs. Have you seen the streams (as in, every single one of the streams?) They don't use it. Instead, they do things the hard, silly way. They click-and-drag the mouse over the whole party on the game screen in order to 'select all'.

Edited February 16, 2015 by Stun

[Luckmann]

 

Select All was the = button in the IE games, mate.

 

I know, and it was annoying as all hell that you couldn't reassign it

 

Really? Because I'm almost 100% sure that I assigned select all to number 0. I think it was reassignable.

 

I only have BG2 installed at the moment, and nope, not possible. Apparently it's hard-coded. Even changing it in the keybinds.ini does nothing.

 

I have a gut feeling that the 'select all' button's placement/assignment is a very trivial UI issue for the devs. Have you seen the streams (as in, every single one of the streams?) They don't use it. Instead, they do things the hard, silly way. They click-and-drag the mouse over the whole party on the game screen in order to 'select all'.

 

Well the devs also don't seem to care overly much about a good solid UI, so the discussion is really purely academic. For my sake, all of the non-essential menu buttons should be in the lower right (the most useless corner), since you'll never really use them commonly, and the most common functions will be accessed via hotkey anyway.

[TrueMenace]

The middle UI is the best one because it has the combat log in the middle.

[Shallow]

I have a gut feeling that the 'select all' button's placement/assignment is a very trivial UI issue for the devs. Have you seen the streams (as in, every single one of the streams?) They don't use it. Instead, they do things the hard, silly way. They click-and-drag the mouse over the whole party on the game screen in order to 'select all'.

As a person who doesn't use hotkeys, and always clicks and drags for select all, there really isn't that great a time difference, nor does it take a major hand movement, if you flick your mouse right.

[Karkarov]

 

I have a gut feeling that the 'select all' button's placement/assignment is a very trivial UI issue for the devs. Have you seen the streams (as in, every single one of the streams?) They don't use it. Instead, they do things the hard, silly way. They click-and-drag the mouse over the whole party on the game screen in order to 'select all'.

As a person who doesn't use hotkeys, and always clicks and drags for select all, there really isn't that great a time difference, nor does it take a major hand movement, if you flick your mouse right.

Personally I am a big fan of f12 / click and dragging the portraits themselves to group select.  I never use the "select all" button itself.

[Grotesque]

"select all "

 

should be

 

ctrl+A

 

no doubt about it

 

also they should implement selecting adiacent party characters with shift+left click

Edited February 16, 2015 by Grotesque

[Sensuki]

You can do that with control click. I used to use shift click in the IE games too, but that's now action queue.

Edited February 16, 2015 by Sensuki

[Hassat Hunter]

I have a gut feeling that the 'select all' button's placement/assignment is a very trivial UI issue for the devs. Have you seen the streams (as in, every single one of the streams?) They don't use it. Instead, they do things the hard, silly way. They click-and-drag the mouse over the whole party on the game screen in order to 'select all'.

Why is that hard and silly. That's how I always did it in the IE-games too...