UI consistency

[Waywocket]

I'd like to talk about consistency in user interface design, using Icewind Dale as an example.

Examples I give here are screenshots taken at 640x480, as that's the lowest resolution the game supports - its lowest common denominator, for which it was originally designed.

 

First, the basic in-game layout:

Everything in the red rectangle here is dependent upon being in the in-game view (as opposed to the inventory or map or whatever). The elements in white are controls that are only relevant when in this view.

 

If there's anyone here who's not played any IE games, the element in the bottom left is the pause button, and the pair on the right hand side are toggle AI and select all. These two sections are the only part of the interface that are relevant only to this view, but not part of this view.

(BTW the button beneath those is 'rest', which is usable from all screens)

 

Now the map view:

Here, the AI/select all buttons have been removed. This is fairly subtle as they don't really stand out anyway, so most players probably never noticed a change. The pause button is still there, but it does nothing. In principle, there's no reason it shouldn't work here (and I think in BG2 maybe it did?), but I think it was a design choice that the game pause should only be toggled while you're actually looking at the game. The icon is left there though, because removing it would stand out a lot more when you switch screens - plus it looks cool.

 

Note that all the buttons on the left, and the character icons on the right, remain unchanged and unmoved. This is a standard principle that applies in all screens in this game. From here, as with all screens, it's possible to switch to any other screen by clicking its icon, or by pressing its shortcut key. It's also possible to select a character, and they will be highlighted on the map.

 

A quick look at the inventory:

Not a great deal to say here: it's obvious that character selection is relevant for this screen since there are separate inventories, and of course the buttons on the left remain as always.

 

The character record and spellbook screens are similar - it's easy to see that the character selection portraits are needed there, and of course both they and the screen selection buttons remain the same.

 

The journal is a little different:

 

In this case, the choice of character is meaningless, and clicking their portraits does nothing. They are left there, even though they're irrelevant at this stage, because removing them would be visually jarring and there's no compelling reason not to have them there - any change in placement or layout imposes a (small) cognitive load on the user that needs to be justified. Compare this with commands in most applications that aren't always usable, but don't generally disappear, rather being greyed out when unavailable (paste, for example, if the clipboard is empty).

 

I have a lot more to say on how this relates to PoE, but that will take some time to type up, plus I'm at the attachment size cap; consider this as background...

Edited August 20, 2014 by Waywocket

[Waywocket]

Okay, for PoE I'm going to be using examples at 1280x720, as this seems to be the lowest resolution the game is intended to support (you can pick lower in the launcher, but important bits of the UI end up getting cropped).

 

In-game layout:

 

Again, I've highlighted the parts of the interface that are relevant only on this screen. Note that they aren't clustered, but are instead alternating between other elements.

 

Now the map view:

There are no elements in common - this could be a screenshot from a different game for all we know. at most, there are some minor stylistic similarities.

 

Functionally, this is missing the ability to a) switch to other screens like the inventory or the options menu, and b) highlight individual characters.

These features could be added easily enough, but how would that be presented?

The most obvious answer would be to use the dead space on the left and right hand sides to fit in the extra UI elements, however if this were done, then those elements would have different positioning (and probably appearances, since the sizes would have to be tweaked) compared to the in-game screen. If, on the other hand, those elements appeared in exactly the same way as they do on the in-game screen, then they'd be out of place - partly due to the general layout of this page not being suitable, but partly because they were alternating between page-specific controls and this page doesn't have its own specific controls to fill that space.

 

On to the inventory page:

Fist, there are more obvious stylistic similarities between this and the map page (there are some minor issues like using a different icon for close, but that's not terribly important at this stage), which is obviously good for an overall consistent feel. There are still problems with this page though.

 

I'll quickly point out that once again there's no way to get to the other screens from here. I imagine the keyboard shortcuts will be sorted out at some point, but the ability to do so using the visible UI as in IWD would be useful. I won't labour that point though, and I won't mention it again for other screens as the same issue applies: it should be possible to more directly from screen to screen without first closing the screen you're on.

 

The much bigger issue on this page is that here the need to select characters is unavoidable - it would be useless without that - so they have been included here. The way part members are presented here is unique to this page: this is the only place where all party members are listed with their portraits vertically like this. This is understandable, as the portrait is linked to that character's section of the inventory so they need to be visually connected. Showing the portraits in the same way as they are currently shown in-game would not allow that connection without a radical redesign of the inventory page, and it would look pretty weird laid out that way.

 

I know some people have been arguing in favour of a completely shared inventory. I don't have strong opinions on that idea one way or the other, but if it were the case then at least it would remove the need for the portraits to be visually linked to their section, allowing them to be shown at the bottom in the same way they are in-game - albeit with a fairly major redesign to the layout of this page.

 

For IWD I skipped the character record screen since the layout is so consistent that it was unnecessary; here I think this page has problems that need to be addressed:

(An aside: like the inventory screen, there are a number of minor problems with this like the fact that the background image is subtly different to the inventory, the buttons are not the same size, and the left-hand pane has a different background. All of these will be straightforward fixes I'm sure)

 

With this page it's also important to be able to switch characters, though possibly somewhat less so than in the inventory. This page however has an entirely different method of doing so again: arrows that you have to press to cycle between them. It's important to avoid having one-off controls like these that make each screen feel like they were designed by different people without any shared design plan; this page really needs to fit in portraits to select from. Since the majority of the content is freely reflowable text, they could easily be put in on one of the sides, or - with some relatively minor redesign - at the bottom to be consistent with the in-game view.

 

I won't bother with a shot of the journal page as there's not much to say - it doesn't need access to portraits, though it has relatively few layout restrictions and enough space that they could be put there to match, if the other screens had them added.

 

I'll quickly chuck up the options screen just to note that, aside from stylistic similarities, it looks more-or-less completely different again: a new layout, and a completely different size.

 

Overall, I feel that IWD - or more properly BG1 since it essentially lifted its UI wholesale - feels like it was designed by a person or a team with a clear view of how they want options to be presented, and with careful thought to which elements should always be present, which should not, and how to group and place them. The current UI in PoE feels rather more like one person was asked to design a game screen, another was asked to design an inventory, etc - and then the results were just put together. (Sorry if this offends anyone; I know all about time pressures and so on, but this is definitely the impression I get.)

 

As for improving the current state, there are a couple of ways it could go, and I have another post lined up for that...

[Co0n]

I see your point, I dislike the overall inconsinstencies in PoE (UI, Portraits)

[CR88]

I definitely see your point and I agree. There are inconsistencies in the UI but hopefully, that's because it's still beta (hence, unfinished) and prone to redesigns. Hell, maybe they ARE redesigning and streamlining it in this very moment!

I'd certainly like to have a way to cycle between inventory/map/scrolls/whatever like the IE games did without having to close the current window and open a new one. And I don't mean it in a "wah wah the old games are better and this one sucks" way - I really do think that solution was efficient back then and it would still work now.

[Sensuki]

UI consistency is a big issue in Pillars of Eternity. I made some points about this in one of my suggestion threads, but you're absolutely right. I think all panels should follow a uniform design.

[Waywocket]

So I said there are a couple of ways to go.

 

First is assuming that Obsidian is strongly in favour of keeping the layout in-game the same as it currently is. In that case, the command buttons and the screen switching options should be swapped around, to create a grouping between the sections that are specific to this screen and those that aren't.

Apparently there's going to be a solid background behind the portraits. I've made this quick ghetto mock-up with these points in mind:

 

The highlighted section covers the screen-independent UI elements in this case. This section should then always be there, regardless of the screen you're viewing at the time. I believe this would then give an overall UI design fairly like IWD2, though I've never got around to playing so I could be wrong.

 

In order for this to work, all of the other screens would need to be redesigned somewhat to take this into account. I've not made mock-ups for these as that could represent some fairly substantial design work. The inventory would be particularly problematic, as there would need to be some way to visually link the character portraits to that character's inventory, and there's no obvious way to do that with the portraits positioned as they are since having each inventory arranged vertically would look weird. This problem would go away if the game switched to a shared inventory, of course.

 

The other option would be to change the layout of the in-game screen. Personally I'm not sold on having everything at the bottom anyway: it's always seemed odd to me that as the world moved to having wider, shorter screens, game UIs moved from having things at the sides to having things at the bottom, accentuating the letterboxing effect. I've always felt that it would make more sense to make use of that extra width by putting UI elements to the sides. Moving to the more traditional portraits-on-the-side layout would arguably make the game look more derivative, though in this case that's probably not such a bad thing as it might be in other games (and arguably having it all at the bottom is equally as derivative these days, just derivative of different games). The real win though is that it would be a lot easier to fit with the current design of all the other screens: the inventory already has that layout, and the others have room that they could easily use without major changes.

 

Either way, I think there need to be more passes focussing on getting a more unified look and feel for the different screens as they stand, making buttons and backgrounds consistent, along with the sizing of various elements, and making the layouts as consistent as practical given the different kinds of content on each screen.

 

So, thoughts anybody?

 

(BTW I have more to say on some of the smaller sections like the presentation of individual popups and the like, but I've bored you enough for now.)

[Sensuki]

Just to go on your change of the UI pane, I can understand the reasoning for Obsidian's change here.

 

The PE UI is flipped around from what the early IE games had. Portraits on the left instead of the right, and menu on the right instead of the left.

 

The combat relative buttons need to be closer to the portraits on the UI, so thats why the attack, cancel, select all buttons and whatnot are on the left side.

 

There will also be a solid UI bar coming soon hopefully.

 

I think the reason a lot of the panes are small is they made the assets to be semi-full screen at 1280x720, rather than a higher source art resolution and downscaling. They're also 2D, whereas games that use 3D can scale them with resolution, like Age of Wonders 2.

Edited August 20, 2014 by Sensuki

[Caerdon]

A little irritating fact: you can press C to open the character sheet and then I to switch to inventory, but you can't do this in reverse order...

 

--

 

Why is it that back in the day when we had narrow screens sidebars were used all the time in games, but now that we have widescreen displays, everything tends to be at the bottom... I generally react very well to change and I'll never subscribe to the "things work just fine so nothing should be changed" attitude, but the UI in IE games made perfect sense and was just superior in most aspects. Similar concepts should really be used for PoE.

[Justinian]

I highly agree with the points made here. The UI feels inconsistent for the reasons you pointed out, despite looking vaguely the same.

 

Then there's the whole full screen UI to level up characters thing that just doesn't belong with the rest of the in-game UI at all. For character creation fullscreen is fine, but during level up in the middle of the game it completely clashes with every other part of the UI. Going from the level up screen back to the character screen is like going between 2 different games.

[PrimeHydra]

I couldn't quite put my finger on why transitioning between the various screens felt a bit jarring, but having read your post it makes sense; they need to bring the look/feel/dimensions into harmony.