Skip to content

Making it Work: Options

2

Comments

  • ThelsThels Member Posts: 1,416
    The reason I want the gems on the left hand side, is so that it's easy to see which gem belongs to which option.

    In the current UI, the gems are on the right hand side, but the text is right aligned. If the text is changed to left hand side, it could leave quite a bit of a gap in between, which I personally find annoying.
    Mr2150cmk24
  • Mr2150Mr2150 Member Posts: 1,170
    I may just have jumped in before you @Thels - did you see my post just before yours?
  • ThelsThels Member Posts: 1,416
    I was sort of commenting on your "I don't think it matters." That example of yours looks better to me, than Pecca's example with the big gap in between some of the options.
    Mr2150
  • Mr2150Mr2150 Member Posts: 1,170
    edited September 2016
    I'm not bothered but I fully take your point with the gap between the gems and text. Also - the text may be quite long in some languages so giving as much as space as possible would be the ideal.

    What I mean there, is that you wouldn't want the text squishing right up next to the gem. When they are on the left, you wouldn't get that.
  • RavenslightRavenslight Member Posts: 1,609
    If talking about consistency, most buttons are placed to the right of the text, as when your choosing proficiencies etc. Aside from that, when looking at Mr2150’s current mockup it feels awkward to have to reach over the text to click the buttons.
  • ThelsThels Member Posts: 1,416
    @Ravenslight: The in game checkboxes have their text rightaligned, though.

    I think it should go one way or another:
    - Left aligned text with the gems left of that.
    - Right aligned text with the gems right of that.

    Since English is read left to right, aligning it to the left makes more sense, though I don't find the implementation currently in game annoying, and that is right aligned.

    There is one merit to left alignment over right alignment. If you align everything to the left (gems included), then you naturally create a gap between the left hand information and the right hand information. Even if a single line or two end up very long and pushing close to the contents on the right side, it is not particularly crowding as most of the other lines will have a big gap.

    That said, you could "fix" that issue by placing the checkboxes on the right hand side, and the other options (sliders and such) on the left hand side. This would also make the Language and Assign Keys windows fit better with the other windows.
  • Mr2150Mr2150 Member Posts: 1,170
    edited September 2016
    I was thinking the whole 'row' would be a button so clicking anywhere on the same row would toggle the gem on/off...

    It would work pretty much the same and feel the same as the mage spell screen selection where the icons are on the left, and the text is after them on the right (but left-aligned). In that screen, clicking anywhere on the same row will select a spell. Obviously, the red highlight wouldn't be needed.



    EDIT: You would need an equivalent to the red highlighting to display the help text in the description box on clicking the row. This can't be just a mouseover as Touch UIs wouldn't get the help text then. So I'd propose to have it as:

    Gems on the left, text next to it on the right (but left-aligned). Clicking a row shows the help text. Clicking it again toggles the gem. Clicking the gem directly toggles the gem regardless of whether the row is highlighted.
  • Mr2150Mr2150 Member Posts: 1,170
    It's also worth noting that my mouse cursor is on the left.

    I've just selected an option from the green box and then it's only a short hop to click the gems. In fact, other alignments will create that 'reaching over the text'.


  • RavenslightRavenslight Member Posts: 1,609
    @Mr2150
    That goes back to using something that feels more like a data base then a BG game. The game should keep it’s buttons and the feel that goes with them. I really dislike having whole sections of text light up with a rectangle rather then buttons.
  • Mr2150Mr2150 Member Posts: 1,170
    That's how it does it currently.

    I did say it should not have the red highlight just an equivalent to it...
  • RavenslightRavenslight Member Posts: 1,609
    I personally like the feel much better in your last mock up @Mr2150 where the buttons are to the right of the text, as they have always been.

    I do think that having the text itself aligned to the right is nice though.
  • ThelsThels Member Posts: 1,416
    I don't agree that clicking text solders the gap issue.

    1) Clicking the text should bring up a brief description of that option in the option box. You shouldn't have to change an option just to see that description, so I wouldn't recommend singleclicking an option's name automatically switching the gem. Doubleclicking could work.

    2) Even if the text could be clicked, you'd still have to know which gem belongs to which text, to see if it's already enabled or not.

  • Mr2150Mr2150 Member Posts: 1,170
    I'm basing it on how it works currently.

    - When you click the text it highlights the row (with the nasty red). The help text is then displayed.
    - You have to specifically click the gem to toggle the gem.


    My proposal was that clicking the text highlights the row still. But clicking the row a 2nd time would then toggle the gem. That saves you having to specifically hit the gem directly (something which can be tricky on small screens). However, you can still hit the gem directly and it will toggle it (without any highlighting). That way you get the best of both worlds.
  • RavenslightRavenslight Member Posts: 1,609
    edited September 2016
    I think I may have just started to understand your point @Thels Your eyes have trouble seeing which button each line of text is leading to in the bottom layout of this setup? But not in the top one?
    <<div class="Spoiler">img src="https://forums.beamdog.com/uploads/editor/19/3qqelrxqankt.png" alt="" />
    Post edited by Ravenslight on
  • ThelsThels Member Posts: 1,416
    Yeah, clicking it a second time to set it is fine with me. I don't like the red bars, though, so it would be nice if we could do away with them, which is quite feasible if we just keep the text and gems adjacent.

    Rightaligning the text would look like this:


    I'm not too fond with the artificial stuff stopping in the middle of the screen. So I tried swapping the left and right side of the screen, and got this:



    While it has the downside of the gem buttons being quite far from the menu buttons, there is more room this way. There is no sudden scrollbar in the middle of the window, and you can allow a couple of lines get quite a bit longer, without everything feeling cramped.
    RavenslightPecca
  • ThelsThels Member Posts: 1,416
    @Ravenslight: Your bottom picture has quite a bit of text between each option and the gem associated with that option, making it harder to see on a glance which option is enabled or not. It's not very pleasing to the eyes.
  • Mr2150Mr2150 Member Posts: 1,170
    I think a lot of people dislike the nasty red colour... you still need to find a way to 'highlight' the text to show you have that row selected but it can be achieved in many different ways (without the nasty red).
  • RavenslightRavenslight Member Posts: 1,609
    I like your last mock up @Thels .
  • RavenslightRavenslight Member Posts: 1,609
    @Mr2150 said:
    I did say it should not have the red highlight just an equivalent to it...

    Yes, That’s what I’m saying. It shouldn't be an equivalent to this.
  • Mr2150Mr2150 Member Posts: 1,170
    You need to indicate the row is highlighted in some way.
  • ThelsThels Member Posts: 1,416
    That could be helpful to show what the description is about.

    Alternatively, you could start the description with the name of the option.
  • RavenslightRavenslight Member Posts: 1,609
    In ver. 1.3 you click on the text and information appears in the box. There is no need for highlighting. Certainly no need for large rectangles of highlights. No matter what the color.
  • Mr2150Mr2150 Member Posts: 1,170
    The word highlighting does not have to mean rectangle colour blocks.

    Any method could be used to show that the row is currently selected... 'highlighting' does not have to mean a nasty red colour... Here you can see I've highlighted the Story Mode row...



    In this one, I've underlined the text...




    It doesn't matter to me what method we have, but you have to show that the row is currently selected or highlighted in some way.
  • RavenslightRavenslight Member Posts: 1,609
    edited September 2016
    If anything, I suppose if you had just the text you're clicking on highlight just slightly, but not the area around it, it might accomplish what your looking for without feeling so out of place for this game.
  • ThelsThels Member Posts: 1,416
    What about a little round pip in front of the text, the same pip that's used for weapon proficiencies and known spells?
    Ravenslight
  • Mr2150Mr2150 Member Posts: 1,170
    That would work (assuming the text is left-aligned) @Thels ... I think it might look odd on right-aligned text.
    Ravenslight
  • lroumenlroumen Member Posts: 2,508
    Menu left is not bad. Neither is text left aligned and gem right of the text. It actually follows the flow of the user eyes. Click menu, read text, see gem. Morwe detailed description all the way at the bottom is what actually breaks the flow. In essence it should be more like on the right of the gems.
    Scrollbar on the right makes sense too. Done clicking gem, scroll down. However if you use scroll lock on mouse then putting the scrollbar on the left may be visually more pleasing.

    So I think the sliders are actually the odd stuff out.
  • lefreutlefreut Member Posts: 1,462
    edited November 2019
    ***

    Post edited by lefreut on
    JuliusBorisovRavenslight
  • ParysParys Member Posts: 205
    lefreut said:

    Here are some BG2 mockups I make for the Customize screens. I think a similar style could be used for the Options screens :)







    Could you share with us your wonderful revamped Customize screen ?
    Ravenslight
  • lefreutlefreut Member Posts: 1,462
    edited November 2019
    ***
    Post edited by lefreut on
    Ravenslight
Sign In or Register to comment.