[wp-trac] [WordPress Trac] #21206: Replace Farbtastic color picker

[WordPress Trac]

#21206: Replace Farbtastic color picker
----------------------------+------------------
 Reporter:  lessbloat       |       Owner:
     Type:  task (blessed)  |      Status:  new
 Priority:  normal          |   Milestone:  3.5
Component:  UI              |     Version:
 Severity:  normal          |  Resolution:
 Keywords:                  |
----------------------------+------------------

Comment (by mattwiebe):

 Replying to [comment:77 nacin]:
 > > Where's my rainbow? With iris-picker-15.diff after clicking Default
 and then clicking around the left side of the picker.
 >
 > Comments like this make me want to stop changing the square based on the
 slider. The big giant swatch of the current color was not present with
 Farbtastic, and should prevent issues of people changing one side without
 knowing why the color is changing. Still, I think that problem is better
 than people being trapped and unable to even find other colors.

 On a personal level, I agree, which is why the first iterations behaved
 that way. But they overwhelmingly failed in user testing, whereas this
 model has been surprisingly successful.

 To reiterate some discussion that's been had on IRC for the benefit of
 all: there are two poles of usability in a color picker: 1)
 **consistency** (keeping the color model internally consistent) and 2)
 **discoverability** (ease of pointing to a desired color). As every color
 model has at least 3 factors, a square 2-axis control and a 1 axis slider
 is the smallest number of UI controls possible for a color picker. And,
 the major question of control canonicity maps to our usability poles:

 * Dual canonical controls favors **consistency**. No matter where you
 click in any control, that's the color you wind up with. The weakness
 here, as in ryan's comment, is that **discoverability** suffers in some
 color situations.
 * A single canonical control favors **discoverability** (there's always
 something to click on) over **consistency** (if you click on the non-
 canonical slider control, you are only adjusting that single aspect in the
 color model, but are not actually getting that color.)

 Early versions of Iris (and Farbtastic currently) took a single canonical
 approach. And user testing revealed that this is a usability disaster.
 Users would click on pretty rainbow to get a blue, even thought the
 canonical square control still had the color situated in a black-ish area,
 resulting in an actually black-ish color (but with a blue hue that made no
 difference). See http://wp.me/p29g3i-bT under Step Six (one of several
 that played out similarly).

 Once we moved to a dual canonical control model, users were initially off-
 put by the lowered discoverability, but after playing with it briefly
 ''intuited the color model'' and found the color they were looking for.
 See http://wp.me/p29g3i-c1 under Step Four and http://wp.me/p29g3i-c6

 With these testing findings, I think that the obvious direction is to
 ''maintain dual canonical controls while making efforts to increase
 discoverability''. I have an incoming patch that will implement a version
 of [comment:61 lessbloat's palette idea] so that there will always be some
 clickable colors present.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21206#comment:78>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software