Don't require the user to experiment to find out what the color-selector icons are for

[mikus]

XO-1 os1 (F14) sugar-0.89.7
For someone who has not previously used the color-selector (in 'My Settings' -> 'About Me'), currently there is NO guidance provided.

There appears to be enough vertical space to be able to move the "name" entry field down a bit. Then a small image (outline gray, center black) could be placed centered under the two lefttmost colored icons, and a small image (outline black, center gray) could be placed centered under the two rightmost colored icons. This would give the user a clue as to WHAT would be affected by clicking on those non-central icons.

Also, I personally would prefer to have a larger visual gap (spacing) to separate the central colored icon from the others.

[mikus]

Color selector - how to change the "fill" is not obvious

[walter]

I am confused about what I am seeing in your attached PNG file. I notice that you made your own icon. Perhaps you could attach that icon to the ticket, as I think it may be the source of the problem/confusion.

[mikus]

Replying to walter:

I notice that you made your own icon. Perhaps you could attach that icon to the ticket, as I think it may be the source of the problem/confusion.

I believe you are missing the reason why I wrote #2282. For me, the SHAPE of the icons is a "strawman" -- right now the user is presented with five icons, without a CLUE (especially if not connected to the wiki on the internet) as to how he is supposed to work with those icons. I am suggesting that some graphical 'guides' be added to this particular screen, to introduce the user to a quicker understanding of the the function of those five icons.

Per your request, I am attaching the icon I use. I have been using that same icon for over two years, and it has never given me any trouble. [I did not make that icon myself - I got it from one of the commercial "parts suppliers" for the OLPC.]

[mikus]

Icon used by mikus in place of the "standard" XO icon.

[walter]

Thanks for attaching the icon. It looks OK, so I am even more confused. I don't understand how the fill color in your attached PNG could be the same in all five instances of the image.

I believe you are missing the reason why I wrote #2282

Given that the fill color is not changing, I understand your confusion and hence the motivation for the ticket. If the fill color were different in the two left-hand icons, I don't believe you'd have been as confused by the interface. So, I'd like to get to the root cause of the first problem before considering a design change.

Did you somehow customize your colors, or are they from the standard list? I assume that nothing happens when you click on either of the left-hand icons. But does the stroke color change when you click on either of the right-hand icons?

thanks.

[walter]

this color combination has no alternative fills for this stroke

[mikus]

Replying to walter:

I am confused about what I am seeing in your attached PNG file.

What you are seeing is five colored icons, which the user has to experimentally click on -- to try to figure out "what is happening" when he does so. [I believe additional 'guidance' (placed right by the icon to be clicked) would be helpful to that user.]

If you were confused by the SHAPE of the icon I used, I have enclosed another PNG file -- taken (on sugar-0.89.8) while using the "standard" XO icon shape. With both PNG files, I am emphasizing that when presented with similar-looking paired icons, the user might get quite confused.

---

I can understand the concept of 'fill' (to be controlled by the left pair) and 'stroke' (to be controlled by the right pair). Perhaps there is a bug with the current implementation - but I am unable to describe a "how to reproduce the confusing part" procedure.

For myself, I have settled on wanting particular 'stroke/fill' colors to identify specific machines. But in using the existing implementation, sometimes when I click on the outside-right icon, the 'fill' shown in the two leftmost icons changes color. That leaves me unable to proceed systematically - e.g., to cycle until I get the 'fill' I want, then cycle until I get the 'stroke' I want. Net result: so far I myself HAVE NOT LEARNED how to use those five icons.

[By the way, if there are 18 colors to choose from (for say a 'fill') -- how many times should I need to click to cycle to the color I want ? [Sometimes it seems like a LOT more then 18 clicks.]

[mikus]

Color selector image - standard icon used

[walter]

Mikus,

I think I have figured out what is going on. It seems that for this particular stroke color, there is no other fill color combination, hence the lack of a set of new choices for the fill colors. I'll double-check, but I think this may be an isolated example...

I am not sure where to go from here. I don't believe that your "help" idea would help in this circumstance, since clicking on the fill icons will not result in a change, further confusing the user. It may make sense to add a few more color combinations, so that this anomalous condition never occurs.

I will also explore increasing the spacing as per your suggestion.

[mikus]

Putting back the description I deleted accidentally

[walter]

If you were confused by the SHAPE of the icon I used

I wasn't confused by the shape, but I was suspicious that problem with the fill color was due to an error in the SVG. We confirmed that that is not the case.

if there are 18 colors to choose from (for say a 'fill')
how many times should I need to click to cycle to the color I want ?

As per above, there are varying numbers of fill and stroke combinations per color, so the cycle time will vary depending upon where you start. In the anomalous case you stumbled upon, dark purple stroke, the cycle time is zero. In the case of, for example, the light-blue stroke color, there are 11 fills.

Likewise for varying the stroke based on a selected fill. Some fills have more stroke-color combinations than others.

[garycmartin]

Replying to mikus:

I believe you are missing the reason why I wrote #2282. For me, the SHAPE of the icons is a "strawman" -- right now the user is presented with five icons, without a CLUE (especially if not connected to the wiki on the internet) as to how he is supposed to work with those icons.

+1, After much effort by Walter and many design attempts and directions, we seemed to land a patch just to land one of them before feature freeze. It currently reminds me of the 'three seashells' joke from The Demolition Man film . Some of the other designs (I see at least 7 screen grabs on my desktop) were visually clearer that this one, but I think we really just needed an 'undo' ability and keep the simplicity/elegance of the previous design, rather than trying to implement a 2d fill/stroke colour space navigator. Really glad the new design didn't also replace the first book colour chooser.

[mikus]

Replying to walter:

Given that the fill color is not changing, I understand your confusion and hence the motivation for the ticket.

Please note that I deliberately wrote this ticket as a request for an "enhancement".

Once the child? learns how the five icons are to be used, then a non-changing color would be a stumbling block. But what I was confused by was seeing FIVE icons without any explanation. I went to the wiki, where I found out that the left icons had something to do with 'fill', and the right icons had something to do with 'stroke'.

The motivation for the ticket was: There should be no need for the child? to go to the wiki. The use of the left icons should be shown on screen - as should the use of the right icons.

[By the way - the discussion referred to by the wiki also talked about the use of the center icon. In sugar-0.89.8 the center icon doesn't respond to clicks - I guess the previous ability to randomly change both 'stroke/fill' with one click is no longer being supported.]

Did you somehow customize your colors, or are they from the standard list?

I have customized nothing regarding XO color selection - meaning I use whatever the current implementation presents to me. However, not all of the color combinations I want are presented to me by sugar-0.88 and earlier. I'm thinking of manually updating the gconf entries in my systems to the colors I want - the only thing holding me back is needing to put together a table of the RGB values I want -- then I can simply ignore 'About me'.

---

I assume that nothing happens when you click on either of the left-hand icons. But does the stroke color change when you click on either of the right-hand icons?

There is a disconnect in our respective points of view. You are focusing on how the COMPUTER works - and I don't really want to debug that. I'm focusing on how the USER works -- and I feel that being presented with five icons, without explanation, does NOT give the user an adequate starting point.

[walter]

The motivation for the ticket was: There should be no need for the child? to go to the wiki.

Arguably, had the fill color changed when it was clicked, there would not have been any confusion and no need to go to the wiki. Sometimes the quickest way to learn is to explore, but if the tool (COMPUTER) is not working properly, this can be frustrating.

There is a disconnect in our respective points of view.
You are focusing on how the COMPUTER works - and I don't
really want to debug that. I'm focusing on how the USER
works -- and I feel that being presented with five icons,
without explanation, does NOT give the user an adequate
starting point.

I don't see any disconnect. There are two things going on here: a corner case in the implementation of the USER INTERFACE that was tripping you up -- I needed to understand how the COMPUTER works in order to diagnose the problem -- and a disagreement whether or not the USER can learn the INTERFACE without consulting additional documentation -- I think yes, but understand why the corner case led to your confusion and your doubts. I don't think it is a matter of how many icons: the icon you click is the colors you get. In the old interface, with 1 icon, you clicked and got something random.

[mikus]

Replying to walter:

Yes, there is a disconnect. My suggestion was to guide the child? in understanding "what the five colored icons can be used for" (i.e., get the user started). Your suggestion is "let the child? experiment to find out" (i.e., tell the user nothing).

My purpose in using this panel is to put in colors I'm deliberately choosing for this system's XO icon. To me that is a task, not a game. I get dissatisfied when I'm forced to "play around" too much (instead of getting the task done). With #2282, I'm speaking up for any other XO users who have a similar attitude towards "let's get the XO colors set to my liking".

The motivation for the ticket was: There should be no need for the child? to go to the wiki.

Arguably, had the fill color changed when it was clicked, there would not have been any confusion and no need to go to the wiki.

I never claimed the fill color did not change when a left icon was clicked -- it DID change.

What I am objecting to (and you are not) is that I HAD to click (repeatedly?) on a left icon to discover that the fill color was being changed. [Remember -- my purpose for being here is to perform a task -- to set the color combination -- it is NOT to explore "gee - I wonder why there are five icons being shown to me".]

why the corner case led to your confusion and your doubts
... was tripping you up

You keep mentioning the corner case (which I arrived at by indiscriminately clicking here and there, for a while). Speaking for myself, I don't CARE about that corner case - contrary to your statement, it did not trip me up at all. In general, a click on an icon will either "do" something, or will "NOT do" it. In that corner case, clicking on a left icon might do nothing - OK, that would be the "NOT do" situation - there is no doubt and no confusion (the user can think "it doesn't work" - and leave it at that).

the icon you click is the colors you get

THIS is what led to my doubt and my confusion.

I clicked on a left icon. Multiple icons changed colors. I STILL do not understand clearly which parts of which icons were supposed to change. But by reading the wiki, I learned that the 'fill' color was supposed to change. I did not have the patience to sit there at the XO and try to figure out which parts of which icons were supposed to change to which color.

Then I clicked on a right icon. BOTH the 'stroke' color and the 'fill' color of the various icons changed. That's when I gave up. [I exited the 'About Me' panel with the X (cancel).]

How am I supposed to use an icon when I don't understand what clicking it would do?

---

My doubt and my confusion (which is NOT what I wrote #2282 about) came from not understanding what each icon was supposed to DO when clicked on. [I don't remember the wiki describing when/why a 'stroke' icon can change the 'fill' as well.]

I wrote #2282 as a request to PLEASE give a person who has a specific task to perform ('set the colors') more guidance than "Sometimes the quickest way to learn is to explore".

[mikus]

Replying to walter:

I don't see any disconnect. There are two things going on here: a corner case in the implementation of the USER INTERFACE that was tripping you up -- I needed to understand how the COMPUTER works in order to diagnose the problem -- and a disagreement whether or not the USER can learn the INTERFACE without consulting additional documentation -- I think yes, but understand why the corner case led to your confusion and your doubts. I don't think it is a matter of how many icons: the icon you click is the colors you get.

My confusion came from being faced with five colored icons - and not knowing what to do with them. I've been thinking about how I would use the sugar-0.89.8 implementation, and this is what I came up with:

    The procedure I've decided to use for changing the center icon color combination:

      (1)   Think of a 'stroke' color I would like to use
        (1b)  If I have already tried as described all the available 'stroke' colors,
                and I haven't found any 'stroke/fill' combination that I would like
                to use,  give up and exit 'About Me' with the X (cancel) button

      (2)   Select __one__ left_side icon to be used in step (3c), in case it becomes
                necessary to "cycle" through all the 'fill' color tables
                [Note:  some 'fill' colors support fewer 'stroke' colors]
      (3)   Select __one__ right_side icon for use in steps (3a) and (3b).
        (3a)  If the selected right_side icon shows the 'stroke' color I am looking for,
                click once on that icon to "push" that 'stroke' color onto the left_side
                (and center) icons.  If the center icon now has the color combination
                I want, go to step (6), else go to step (4)
        (3b)  Click repeatedly ("cycle") on that selected right_side icon.  When it
                "previews" the 'stroke' color I am looking for, go to step (3a)
        (3c)  If the 'stroke' colors gotten in step (3b) are repeating without my
                desired color coming up,  click the left_side icon (selected in step(2))
                to change the 'fill' color of the right_side icons - then repeat
                step (3) - stil looking for that 'stroke' color I want
        (3d)  If the wanted 'stroke' color has never come up but the 'fill' colors
                gotten in step (3c) are repeating -- forget that particular 'stroke'
                color and start again with step (1)

      (4)   Think of a 'fill' color I would like to use with the 'stroke' color I have
      (5)   Select __one__ left_side icon (which has the 'stroke' color from step (3a)),
                for use in steps (5a) and (5b)
        (5a)  If I like the color combination now shown in the selected left_side icon,
                click once on that icon to "push" that color combination onto the
                center icon;  then go to step (6)
        (5b)  Click repeatedly ("cycle") on that selected left_side icon.  When it
                "previews" the 'fill' color I am looking for, go to step (5a)
        (5c)  If the 'fill' colors gotten in step (5b) are repeating without my desired
                color coming up,  think of an alternate 'fill' color to go with the
                'stroke' color from step (3a) - then go back to step (5) - now looking
                for that alternate 'fill' color
        (5d)  If none of the 'fill' colors look the way I want with the 'stroke' color
                from step (3a),  forget that 'stroke' color and start again with step (1)

      (6)   If I want to set the system's XO color with the color combination now shown
                by the center icon -- exit 'About Me' using the "checkmark" button
        (6b)  If this was a "dry run" -- exit 'About Me' using the X (cancel) button

My procedure would be a lot for a six year old child. My guess is that a six year old child would have the patience to keep clicking semi-randomly, until he saw a color combination he liked,

[walter]

Rather than continue to speculate as to what 6-year-old children can and cannot do, let's run a few more user studies. (The initial quick studies were positive in the sense that the kids who played with the interface seemed to manage OK.)