The International Simutrans Forum

 

Author Topic: Better layout for player color chooser  (Read 1632 times)

0 Members and 1 Guest are viewing this topic.

Offline Spike

  • *
  • Posts: 1361
  • First Simutrans Developer and Graphics Artist
Better layout for player color chooser
« on: January 27, 2012, 10:49:43 PM »
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.
« Last Edit: January 27, 2012, 10:56:39 PM by Hajo »

Offline Spike

  • *
  • Posts: 1361
  • First Simutrans Developer and Graphics Artist
Re: Better layout for player color chooser
« Reply #1 on: January 29, 2012, 10:30:56 PM »
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.

Offline Fabio

  • Devotee
  • Administrator
  • *
  • Posts: 2898
  • The Pak128 Guy
    • Visit me on Facebook
  • Languages: EN, IT, RO, FR
Re: Better layout for player color chooser
« Reply #2 on: January 29, 2012, 10:40:52 PM »
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...

Offline Spike

  • *
  • Posts: 1361
  • First Simutrans Developer and Graphics Artist
Re: Better layout for player color chooser
« Reply #3 on: January 29, 2012, 10:42:10 PM »
Good to see more ideas coming :)

Offline Fabio

  • Devotee
  • Administrator
  • *
  • Posts: 2898
  • The Pak128 Guy
    • Visit me on Facebook
  • Languages: EN, IT, RO, FR
Re: Better layout for player color chooser
« Reply #4 on: January 29, 2012, 11:13:21 PM »
I have another idea, for a completely different layout.

Code: [Select]
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.



Offline Isaac.Eiland-Hall us

  • Benevolent Dictator
  • Administrator
  • *
  • Posts: 3661
  • PanamaCityPC.com/support/
    • Facebook Profile
  • Languages: EN
Re: Better layout for player color chooser
« Reply #5 on: January 30, 2012, 01:34:57 AM »
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. :)

Code: [Select]
Foreground/Primary colour:                   Background/Secondary colour:

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

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

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

Ugly, but maybe it helps :)

Offline prissi

  • Developer
  • Administrator
  • *
  • Posts: 9584
  • Languages: De,EN,JP
Re: Better layout for player color chooser
« Reply #6 on: January 30, 2012, 10:12:41 AM »
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.

Offline Zeno

  • ENASSA Designer
  • Devotee
  • *
  • Posts: 1997
    • Zeno's Simutrans Creations
  • Languages: ES, EN, CAT
Re: Better layout for player color chooser
« Reply #7 on: January 30, 2012, 10:18:41 AM »
I'd also prefer an RGB selector... everybody knows what "red", "green" and "blue" are, you know :)

Offline Fabio

  • Devotee
  • Administrator
  • *
  • Posts: 2898
  • The Pak128 Guy
    • Visit me on Facebook
  • Languages: EN, IT, RO, FR
Re: Better layout for player color chooser
« Reply #8 on: January 30, 2012, 10:45:29 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

Offline Spike

  • *
  • Posts: 1361
  • First Simutrans Developer and Graphics Artist
Re: Better layout for player color chooser
« Reply #9 on: January 30, 2012, 10:54:11 AM »
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.