Skip to content

UI Improvement Suggestions Thread

2456711

Comments

  • PeccaPecca Member Posts: 2,175
    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
  • [Deleted User][Deleted User] Posts: 0
    edited August 2016
    The user and all related content has been deleted.
  • DeeDee Member Posts: 10,447
    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: 2,175
    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: 2,175
    @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: 5,975
    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: 2,175
    Using the functionality above, this is how it would personally work for me:
    dee5.png 552.9K
  • RavenslightRavenslight Member Posts: 1,609
    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,447
    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: 2,175

    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
  • [Deleted User][Deleted User] Posts: 0
    edited August 2016
    The user and all related content has been deleted.
  • DeeDee Member Posts: 10,447

    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: 2,175
    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: 2,175
    @subtledoctor: Picture's worth a thousand words. ;)
  • RavenslightRavenslight Member Posts: 1,609
    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,447
    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: 2,175
    That layout I like.
  • DeeDee Member Posts: 10,447
    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: 2,175
    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,447
    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,447
    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.
  • [Deleted User][Deleted User] Posts: 0
    edited August 2016
    The user and all related content has been deleted.
    ineth
  • CahirCahir Member, Moderator, Translator (NDA) Posts: 2,819
    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,609
    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: 2,175
    Here's Dee's layout:

    dee6.png 609.5K
    DeeswitJuliusBorisov
  • DeeDee Member Posts: 10,447
    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: 2,175
    Sure, it's just very rough mockup, just to get the idea.
Sign In or Register to comment.