News:

Want to praise Simutrans?
Your feedback is important for us ;D.

Better layout for player color chooser

Started by Spike, January 27, 2012, 10:49:43 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Spike

I have some ideas for improving the player color chooser.

- Make the window a bit bigger, and the buttons in the color lists at the right, too.
- Move the example color ranges more towards the bottom

This will make it easier to actually see and hit the color buttons, and will allow for a better text how to use the dialog. I have tried to find a better text, but it is very hard to explain everything in this small space. A bigger window will not hurt here, because the player does not need to interact much with the map while the dialog is open, and the dialog usually isn't open while playing.

Edit: At the first sight it was unclear to me, that the ranges below the texts are passive elements and the list to the right are where I need to click. It seems the big range boxes and their placement attracts the players attention, while the lists to the right don't. Might only happen to me, though, and I don't know a good solution but to change the size relations, smaller ranges, bigger buttons.

Moving the buttons to the left might help, too. I was told that western people who are used to read from left to right, also expect starting UI dialogs left and work right/downwards when completing them.

Spike

I've tried to edit the window a bit and create an example that

- Has a more relaxed layout
- Will be used from left to right
- Has explanation text for color preview

Maybe that makes the idea more clear.

Fabio

Much better, but the dialog could be a bit taller and the colour columns could have headers (Primary and Secondary).

Additionally, they should be spaced a bit more, for sure horizontally, but possibly also vertically...

Spike


Fabio

I have another idea, for a completely different layout.


Pick your primary player color:
[horizontal palette, even on more rows if needed]

Pick your secondary player color:
[horizontal palette, even on more rows if needed]

Preview:
[preview image]



This layout would be more understandable and possibly nicer too.

The colour buttons of the palettes should be better squared, something like 16x16 or so.



Isaac Eiland-Hall

Would it be possible to programmatically define the colours based on an HSB system? Or at least HS...

I'm thinking two sliders each for fore and back: One for hue, one for saturation. (brightness would be programmatically determined)

Could have the two sliders; hue adjusts the saturation slider; and they both are used to generate the preview of the colours. Does that make sense, or do I need to do a mockup of what I mean? If you use Photoshop, surely it makes some sense. :)

Foreground/Primary colour:                   Background/Secondary colour:

<---------(hue slider)--------->                          <---------(hue slider)--------->

<-----------(saturation)--------->                      <-----------(saturation)--------->

Preview: [][][][][][][]                                      Preview: [][][][][][][]


Ugly, but maybe it helps :)

prissi

IN the moment those colors come from a palette of predefined 256 colros.

In principle a much wider choice of colors would be possible (with defined brightness steps in between). But a dialog to allow this would be more difficult. Especially as most people (including me) are not familar with hue saturation and so on, so they likely also want rgb. And then of course the intervall between the color must be choosen too.

Zeno

I'd also prefer an RGB selector... everybody knows what "red", "green" and "blue" are, you know :)

Fabio

Quote from: Zeno on January 30, 2012, 10:18:41 AM
everybody knows what "red", "green" and "blue" are, you know :)

But fewer know how to make a yellow or a brown or a purple mixing them :P

Spike

I want to make gold. What is the rgb for that? Don't give me yellow ;)

Edit: Once used to, HSB seems a more natural system than RGB - painters usually think in hues, and select brightness and saturation. It's hard to make a half-satruaded red in RGB, or a half bright sea-green.

Hue = Raindow colors + magenta
Saturation = White -> pastel -> strong colors
Brightness = Let there be light. And he saw, it was good.