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.
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.
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.
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.
@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.
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.
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'.
@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.
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.
- 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.
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="" />
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.
@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.
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).
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.
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.
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.
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.
Comments
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.
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.
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.
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.
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'.
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.
I did say it should not have the red highlight just an equivalent to it...
I do think that having the text itself aligned to the right is nice though.
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.
- 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.
<<div class="Spoiler">img src="https://forums.beamdog.com/uploads/editor/19/3qqelrxqankt.png" alt="" />
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.
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.
Alternatively, you could start the description with the name of the option.
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.
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.