Design UX for color 'tinker mode'

[xmatthewx]

Webmaker will offer users a simple color palette for text, backgrounds, borders etc. Color "tinker mode" will allow users to step beyond the simple set to create custom colors for their projects.

The process of tinkering aims to reward users with the discovery that color has a language we can use to describe, share, copy, and remix color in a digital space.

Prototype

• basic ui for choosing color from a palette
• button to enter tinker mode :zap:
• tinker mode has more advanced UI that maps to the underlying code
• recent colors created in tinker mode are added to palette

  Learning goal

• User understands that color can be expressed in HEX or RGB, making it possible to copy, save, share, and use it anywhere on the web.
• User can read and copy a HEX or RGB value
• User is aware of the functional relationship between a color, its RGB values, and its expression as HEX.

  Research questions

• Can people utilize the basic UI to set the color on an element?
• Can people utilize the advanced UI to create custom colors?
• Do people discover a relationship between the UI sliders and HEX values?
• Do people realize that there's a language for digital color that enables us to describe, share, copy, and remix it?

cc @secretrobotron @LauraReynal

[flukeout]

Couple of options here and thoughts:

• RGB sliders suck as a main mode of picking a color, so we should keep a visual one still
• Added indication of relative weights of RGB as you move the UI around
• Format switches from HEX to RGBA and back depending on Alpha value

[secretrobotron]

Might be worth testing how users respond to predefined colour palettes (maybe even something autogenerated, like http://app.coolors.co/443742-846c5b-cea07e-edd9a3-e2e8c0).

[flukeout]

@secretrobotron I really like this little UI for seeing the effects of your slider movements here...

But.. good luck choosing the color you actually want.

The view I posted is the 'tinker' mode, so someone already would have moved past using one of the colors we would have suggested in the previous step.

I'm a little torn between exposing color mode concepts, and allowing you to choose a color easily.

HSL is a nice model for teaching color concepts, but isn't great because it's not a popular web standard.

I do think we could offer some pallette options in the initial color picking phase though.

[flukeout]

Hybrid that exposes RGBA sliders alongside a visual colorpicker. Might be a bit too much stuff crammed into one view though.

[secretrobotron]

I'm a little torn between exposing color mode concepts, and allowing you to choose a color easily.

If you need to make a decision between one or the other eventually, this could be an opportunity to test both (or all).

[flukeout]

Swipe through a bunch of different modes of editing a color, format updates in the line above the UI as you use different ones:

[flukeout]

Here's an option that combines a visual colorpicker with RGB sliders. While the sliders suck, they're a cool way to see the effects of modifying one of the values in isolation, and feel like a good way to "tinker".

[xmatthewx]

Nice mix of options @flukeout

I agree that RGB sliders are a terrible way to find the color you want. They're also the quickest way to intuit HEX, the most universal language for color on the web. You've stepped toward finding the balance.

If you need to make a decision between one or the other eventually, this could be an opportunity to test both (or all).

+1 - a quick lo-fi working prototype would help make the case. Since we will likely only launch with tinker mode for color and button links, we can invest a little more time getting it right.

Let's drop the (?) and the </> so we can focus on the key interaction.

[flukeout]

Latest version - https://redpen.io/jb1a5518c142f7e3e4

[xmatthewx]

Excellent work @flukeout. Closing this and opening a fresh ticket for the build.