Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Neverwinter Nights: Enhanced Edition has been released! Visit nwn.beamdog.com to make an order. NWN:EE FAQ is available.
Soundtracks for BG:EE, SoD, BG2:EE, IWD:EE, PST:EE are now available in the Beamdog store.
Attention, new and old users! Please read the new rules of conduct for the forums, and we hope you enjoy your stay!

UI Improvement Suggestions Thread

2456711

Comments

  • PeccaPecca Member Posts: 1,930
    That looks much better. The problem with class area versus status effect area would still remain though.
    (and imo, the portrait looks much better above the character description than under it-see for yourself)


    dee1.png 587.3K
    dee.png 586.1K
    RavenslightswitJuliusBorisov
  • subtledoctorsubtledoctor Member Posts: 10,112
    edited August 2016
    Pecca said:

    here is a rough photoshop mockup.

    :cookie: :wink:
    Pecca said:

    if you had fixed sizes for the areas, then you would have to scroll the class for dual/multi classed characters. If you'd enlarge that area, then you would have left very small area for status effects.

    You make good points, of course. Rather than separate boxes you could put each of those sets of information into a single box with a single scroll bar, old-school-style.

    More generally: I think your original mockup just tried to squeeze too much information onto a single screen; whereas, the current 2.3 approach splits the information across too many screens (using boxes, some of which are too big for their contents and some of which are too small for their contents).

    There must be a middle-ground. The information in your most recent mockup is the information I would personally want visible immediately upon entering the Record screen. The other stuff - skills, biography, etc. - could be hidden away until I call it up.

  • DeeDee Member Posts: 10,438
    edited August 2016
    @Pecca that's remarkably close to what I was picturing (see below). Bravo!



    The only thing that I would change is to shift the buttons at the top over to the right, so that there's no confusion about what panel they're meant to interact with.

    I also would hesitate to put the ability scores somewhere that's likely to get moved around from character to character; if you have a Fighter/Mage in your party, their Ability Scores will be lower than on your single-class Kensai, and higher than your Fighter/Mage/Thief.

    My inclination would be to put the Class box under the ability scores, but that puts the block startlingly close to the XP bar on the left, which is visually dissonant. Maybe just put the class information in the Skills pane on the right, above proficiencies?

    I don't like that it would hide that information behind a button-press, though.

    EDIT: What you could do is change "Combat Stats" to "Information" and have it just be the text dump that's in the Information pane now--but put the Combat Stats at the top, just below the Class information. Then the "Skills" button shows you just your proficiencies and thieving skills. That way you also let people have their wall of text if they like the more "classic" look.

    00zim00
  • PeccaPecca Member Posts: 1,930
    edited August 2016
    @subtledoctor: You're right. My personal preference is having as much information visible as possible. I also prefer not to deviate too much from the original record screen (thus saving some spirit of it). Unlike other suggestions I've pointed in the OP, this is very opinionated, that's why I didn't put the record screen as my "suggestion", rather only inspiration.

    Post edited by Pecca on
    Ravenslight
  • PeccaPecca Member Posts: 1,930
    @Dee the class area may be smaller if we put experience into one row (it could even have the progress bar backround behind it). Then the area would be enough to account for all three possible classes (though there would be a gap in most cases). Functionality-wise it would work pretty well, but visually, I don't like it much.

    dee4.png 562.4K
    Ravenslight
  • sarevok57sarevok57 Member Posts: 4,067
    Dee said:

    @Pecca that's remarkably close to what I was picturing (see below). Bravo!




    The only thing that I would change is to shift the buttons at the top over to the right, so that there's no confusion about what panel they're meant to interact with.

    I also would hesitate to put the ability scores somewhere that's likely to get moved around from character to character; if you have a Fighter/Mage in your party, their Ability Scores will be lower than on your single-class Kensai, and higher than your Fighter/Mage/Thief.

    My inclination would be to put the Class box under the ability scores, but that puts the block startlingly close to the XP bar on the left, which is visually dissonant. Maybe just put the class information in the Skills pane on the right, above proficiencies?

    I don't like that it would hide that information behind a button-press, though.

    EDIT: What you could do is change "Combat Stats" to "Information" and have it just be the text dump that's in the Information pane now--but put the Combat Stats at the top, just below the Class information. Then the "Skills" button shows you just your proficiencies and thieving skills. That way you also let people have their wall of text if they like the more "classic" look.

    a lawful good thief eh? sounds legit ;)

  • PeccaPecca Member Posts: 1,930
    Using the functionality above, this is how it would personally work for me:

    dee5.png 552.9K
  • RavenslightRavenslight Member Posts: 1,602
    I have a question.

    Is it currently possible to mod all of the artwork, colors, textures, etcetera, in this new UI?

  • DeeDee Member Posts: 10,438
    I admit nothing. ;)

    @Pecca When designing a character sheet (or anything else with categorized information), you want anything that's static or unchanging to be more or less centralized and out of the way. The reason for this is simple: the reader doesn't need to constantly check it, so they need to be able to easily filter it out from their view. (That's why page numbers are always in the corner of the page of a book, instead of in the middle of a paragraph.)

    Here, what that means is that you want the things that are going to be the same (number of ability scores, name, portrait, and gender/race/class/alignment) to all be in a block together.

    Levels and experience, on the other hand, are things that will be different every time the player goes to that screen; they're part of the "current state of the character", much like Status Effects. So maybe something like this would be more appropriate...



    That places the constantly shifting elements together, below the centralized "Character Summary" block. It puts those elements lower on the screen than I'd like, but it groups "like" things together.

  • PeccaPecca Member Posts: 1,930

    I have a question.

    Is it currently possible to mod all of the artwork, colors, textures, etcetera, in this new UI?

    The only "visual" thing I haven't been able to mod is the yellow highlight over portraits in the inventory when an item is picked.

    Ravenslight
  • subtledoctorsubtledoctor Member Posts: 10,112
    edited August 2016
    Maybe shift the Dual/Customize/Reform/Export buttons somewhere else? They could probably be in a 2x2 grid at the bottom of the (wider) right-hand column. Those buttons all sort of take you further "out of" the game; I feel like the bottom right is an appropriate place for that. (Like where you would begin turning the page of a book.)

    Then you could merge the Sex/Race/Class/Alignment box with the Class/XP/Nect Level box, into a single text box. Important stuff, always visible, just below the portrait.

    Then extend the middle column all the way to the too often screen. "General Info" (lore, script) at the top; ability scores hinder below (never moving, just next to the portrait). "Saving Throws" below that, and "Status Effects" at the bottom. All in one box, separated by headings, so old-style scrolling if it becomes necessary late-game.

    On the right side, you could have
    - a single button (see below)
    -- Combat Stats
    -- Resistances
    -- Skills
    -- Proficiencies
    - The 2x2 button grid

    (The stuff with double dashes would be in a single box separated by headings. The Combat Stats would always be at the top, so always clearly visible in the same place.)

    That gets us down from three buttons to one, the label for which would change depending on what is displayed. With combat stats displayed, it would read "Biography." Clicking it would change that single box on the right into two boxes, so the right side of the screen would now look like:
    - the button
    - Biography
    - Statistics
    - the 2x2 button grid.

    And now the button would read "Skills" and clicking it would take us back to the Combat Stats column.

  • DeeDee Member Posts: 10,438

    I have a question.

    Is it currently possible to mod all of the artwork, colors, textures, etcetera, in this new UI?

    Yes; anything with a MOS or a PNG can be modified or replaced using any image editor.

    Ravenslight
  • Mr2150Mr2150 Member Posts: 1,170
    I had a crack at it too... apologies for poor MS paint job:




    All buttons are turned into icons with a tooltip.

    Red box in top right is export
    Then from left to right at the bottom: Dual Class, Customise, Reform, Combat Stats, Skills, Info

  • PeccaPecca Member Posts: 1,930
    edited August 2016
    @Dee those surely are all good and valid points and should be considered when designing a record screen for a new game. But we are not designing a new record screen here, we are changing an old one. And that should be taken into consideration. I really don't think it's a good idea to deviate too much from the original design in this case (the case is enhancing an old iconic game), no matter how much functionally superior would it be.

    Ravenslight
  • PeccaPecca Member Posts: 1,930
    @subtledoctor: Picture's worth a thousand words. ;)

  • RavenslightRavenslight Member Posts: 1,602
    Pecca said:

    @Dee those surely are all good and valid points and should be considered when designing a record screen for a new game. But we are not designing a new record screen here, we are changing an old one. And that should be taken into consideration. I really don't think it's a good idea to deviate too much from the original design in this case (the case is enhancing an old iconic game), no matter how much functionally superior would it be.

    This ^^^ So much this!

  • DeeDee Member Posts: 10,438
    edited August 2016
    Pecca said:

    @Dee those surely are all good and valid points and should be considered when designing a record screen for a new game. But we are not designing a new record screen here, we are changing an old one. And that should be taken into consideration. I really don't think it's a good idea to deviate too much from the original design in this case (the case is enhancing an old iconic game), no matter how much functionally superior would it be.

    My point still stands with the design of this game. There's a reason that the ability scores are all in the top left of the original game: they're the thing that will never change. The status effects and XP are things that will always be different, so they should be with other things that are different.

    Here's another example, with the portrait column in the middle instead of on the left:



    The layout of the screen doesn't matter, as long as similar pieces of information are grouped together. Granted, now there's very little difference from your mock-up to mine; the illustrated point, though, is that the ability scores should be at the top because, while very important, they're not going to change.

    EDIT: I'll show you what I mean:



    The blue squares represent things that will never (or almost never) change. The green squares represent things that are going to change on a regular basis, which you're likely to want to reference when you get to this screen.

    Ideally, you want the blue squares to be all together, and you want all the green squares to be together. Failing that, you want them to at least be symmetrical. The original Record screen followed that concept of symmetry.

    ThacoBell
  • PeccaPecca Member Posts: 1,930
  • DeeDee Member Posts: 10,438
    Pecca said:

    That layout I like.

    What's interesting about this is that I really didn't change much, conceptually, about my design; all I did was shift the layout so the portrait was in the middle.

    Would it be fair to say, then, that (for you at least) the most important thing about the original Record screen's layout was the placement of the portrait in the middle of the screen?

  • Mr2150Mr2150 Member Posts: 1,170
    For me, I'd rather have a symmetry to the whole thing, with the portrait front and center, and use more icons instead of big buttons - if you aren't sure what something is then that's what a tooltip is for.

    Also, better use of space in general - f.ex we don't need 10% of the window taken up with the title of the window as you can see it's a record screen.

    Actually, in comparison, your central portrait layout, @Dee , and mine are very similar.

  • PeccaPecca Member Posts: 1,930
    Dee said:

    Pecca said:

    That layout I like.

    What's interesting about this is that I really didn't change much, conceptually, about my design; all I did was shift the layout so the portrait was in the middle.

    Would it be fair to say, then, that (for you at least) the most important thing about the original Record screen's layout was the placement of the portrait in the middle of the screen?
    It is. And the ability scores on the left. It immediatelly invokes the right feeling, it keeps faithful to the original. You said "The layout of the screen doesn't matter as long as...". I disagree with that. The feeling is important.

    Ravenslight
  • DeeDee Member Posts: 10,438
    Icons are tricky--you can't always rely on tooltips to explain them (shout-out to my mobile peeps), and not everything is more easily conveyed by a picture than a word. There's actually a fair amount of space on this screen, if it's used well. The whole right side of the screen in my design, for instance, is one big text box; you don't need the full height of the screen to give the player what they need to see (whether it's their biography or an info-dump of their character's stats), and in fact if the box is too tall you run the risk of the panel feeling cramped horizontally.

    I would hesitate to remove "Record" from the screen, considering that it's been there for two decades. You need to be able to tell people what screen you're on, and the easiest way to communicate that is if the title of the screen is on the screen itself.

    Something else to be aware of: German.

    Putting the gender and race on the same line may seem like a good idea in English, but as soon as the strings get translated to German, words have a tendency to grow by about 30%. (That's why there's as much width as there is for the ability scores; you don't want the text to get shrunk for players who are using the "wrong" language.)

  • DeeDee Member Posts: 10,438
    Pecca said:

    Dee said:

    Pecca said:

    That layout I like.

    What's interesting about this is that I really didn't change much, conceptually, about my design; all I did was shift the layout so the portrait was in the middle.

    Would it be fair to say, then, that (for you at least) the most important thing about the original Record screen's layout was the placement of the portrait in the middle of the screen?
    It is. And the ability scores on the left. It immediatelly invokes the right feeling, it keeps faithful to the original. You said "The layout of the screen doesn't matter as long as...". I disagree with that. The feeling is important.
    Oh, sure--what I meant was, you don't have to sacrifice function in order to have a good form. You can have both, as long as you're paying attention to it. The feeling of a UI is definitely important.

  • subtledoctorsubtledoctor Member Posts: 10,112
    edited August 2016
    Pecca said:

    @subtledoctor: Picture's worth a thousand words. ;)

    No, my pictures are worth about six and a half words. Here:


    And yeah, I realized after drawing it that Xan should not be smiling.

    The point here is, squeeze things into two screens rather than three. Then instead of Beamdog's current five buttons we can use only one (which acts like two, because it's functions changes depending on what is currently displayed).

    The amount of space changed by that button shrinks, necessitating scroll bars for when you start to accrue a lot of resistances/skills/proficiencies/status effects in the late game.

    EDIT - Can gender be move somewhere else?And race, even? They would be appropriate with lore and reputation under "General Info," methinks. Most people will know that stuff without looking, or will be reminded by the portrait.

    EDIT2 - and the left and middle columns could be flipped here if it is aesthetically better.

    EDIT3 - I like @Dee's last design though. Only thing is, that's a lot of buttons up there in the top right. How about using a 2x2 grid for those:

    Information..........Skills
    Biography.........Statistics

    Rationale: 'Biography' and 'Statistics' are rarely visited, relative to the other two. So it's okay if their click targets are a bit buried. 'Information' is the most important of the four, and being in the top left of the grid suggests that... but remember, it will be the default screen every time you press 'R' so that click target is actually not of prime importance either. Of those four buttons, the one you will press most often will be 'Skills.' So, that button goes in the top right corner of the screen. Good for muscle memory.

    ineth
  • CahirCahir Member, Moderator, Translator (NDA) Posts: 1,972
    edited August 2016
    Dee said:

    Something else to be aware of: German.

    Putting the gender and race on the same line may seem like a good idea in English, but as soon as the strings get translated to German, words have a tendency to grow by about 30%. (That's why there's as much width as there is for the ability scores; you don't want the text to get shrunk for players who are using the "wrong" language.)

    This, and I think Polish is even worse in this regard. Fitting the translation in narrow boxes is always a chore for Polish translators.

  • Mr2150Mr2150 Member Posts: 1,170
    Fair point about icons on mobile, and our German/Polish friends...

    Conceptually, I think a symmetrical view works better and is more visually pleasing overall.

    My concern with icons vs buttons would be the size mainly. Currently the buttons take up about 20-25% of the screen - that feels like wasted space at the expense of information I want to see. For me, it would be better to have less or smaller buttons - but again, mobile is then potentially impacted. So maybe if you made the four buttons in the top right half size so they are the same size as the buttons in the middle column and stacked them in a 2x2 grid (like @subtledoctor suggested previously)...


    A minor consideration, I guess, would also be placement of things vs where the mouse cursor is coming from vs likely to go to next... excessive mouse movements are frustrating - mobile aside.

  • RavenslightRavenslight Member Posts: 1,602
    I personally don’t like the portrait portion shifted to the left. I much prefer both Dee’s and Pecca’s entire central portion of the screen. With the Duel Class, Customize, Export, Reform Party located there as well.

    ThacoBell
  • PeccaPecca Member Posts: 1,930
  • DeeDee Member Posts: 10,438
    Watch out for that bottom corner on the left, @Pecca - as soon as the player has a dozen statuses, the illusion of the interface's border will be disrupted. I'd recommend putting some kind of framing for that box.

    Looks good, though!

  • PeccaPecca Member Posts: 1,930
    Sure, it's just very rough mockup, just to get the idea.

Sign In or Register to comment.