Color gestures widget idea
There was a discussion about the color gestures recently. I have an idea how to make them more usable and discoverable. The basic idea is to display a small strip with a gradient under the cursor. To understand what I mean check out any recent version of GIMP or GThumb, load up an image too big to fit in the window and see what happens when you drag on the small four-way arrow in the lower right-hand corner of the window.
Instead of a thumbnail, a color gradient corresponding to the setting that is currently being adjusted would be displayed. The feature would be activated by dragging on a small widget with a two-way arrow superimposed over a color circle or a gradient. The appearance of the icon could change depending on what is adjusted (H/S/L) but that's optional.
Why this idea is an imporvement over the current gesture functionality: First, it will be much easier to get the color you want quickly. Second, it will be more discoverable. Third, the widget could be reused to pop up similar icons on the canvas to allow the user to e.g. adjust the color of a gradient node (there would be something that enables them, maybe a separate tool, to minimize visual pollution).
I believe the "everything on canvas" paradigm is superior to "tweak values in dialogs" and one of the things Inkscape does right, so expanding on-canvas functionality seems to be a good idea to me.
Regards, Krzysztof Kosiński.
On Thu, Oct 23, 2008 at 8:15 PM, Krzysztof Kosiński wrote:
I believe the "everything on canvas" paradigm is superior to "tweak values in dialogs" and one of the things Inkscape does right, so expanding on-canvas functionality seems to be a good idea to me.
I like the idea. However we probably need a finished port to Cairo canvas for that ;-)
Alexandre
On Thu, Oct 23, 2008 at 1:15 PM, Krzysztof Kosiński <tweenk.pl@...400...> wrote:
Instead of a thumbnail, a color gradient corresponding to the setting that is currently being adjusted would be displayed. The feature would be activated by dragging on a small widget with a two-way arrow superimposed over a color circle or a gradient. The appearance of the icon could change depending on what is adjusted (H/S/L) but that's optional.
I'm not quite sure I can visualize that. Can you (or anyone else) please show a mock-up for how this would work?
I believe the "everything on canvas" paradigm is superior to "tweak values in dialogs" and one of the things Inkscape does right, so expanding on-canvas functionality seems to be a good idea to me.
Generally, yes, but there are other considerations as well. First, color gestures do not require any dialog to pop up. Second, they are initiated always at the same point close to the edge of screen, which is good for usability and speed of work. Third, they give you whole screen for extremely precise adjustments. I think these qualities are what makes them worthwhile. I would welcome any improvements to make the color gestures more intuitive, discoverable, and self-explanatory, but not those that would remove the basic advantages that I've just listed.
Probably I was a bit confusing about the on-canvas functionality: that's an idea for the future. For now I only propose the color adjustment / gesture widget.
http://www.vmc.org.pl/pliki/gestures-before.png http://www.vmc.org.pl/pliki/gestures-after.png
I hope it explains my idea a bit. The second image shows what would happen when pressing LMB on the icon with the two-way arrow. Pressing Ctrl or Shift would change the little icon to show a different gradient. Depending on the currently active color, the horizontal bar would have to pop up in a slightly different place so that the current color is under the cursor, except tf there's no space because the icon is to close to the edge of the screen - in that case the bar would touch the edge.
Regards, Krzysztof Kosiński.
On Fri, Oct 24, 2008 at 10:34 PM, Krzysztof Kosiński <tweenk.pl@...400...> wrote:
Well, I honestly don't see why we need this additional complexity and why we need to restrict the gestures to small icons. Again, is the action of "drop the color of selection on non-selected objects" really so often needed? If it is used but rarely, maybe we could afford a couple small additional icons for it somewhere, and leave the gestures alone?
This is not very intuitive: the actual adjusting movement is along an arc, not linearly, with 45 degrees line being the center. If the floating display does not reflect that, I think it will bring more confusion than clarification.
On Oct 26, 2008, at 10:43 AM, bulia byak wrote:
On Fri, Oct 24, 2008 at 10:34 PM, Krzysztof Kosiński <tweenk.pl@...400...> wrote:
This is not very intuitive: the actual adjusting movement is along an arc, not linearly, with 45 degrees line being the center. If the floating display does not reflect that, I think it will bring more confusion than clarification.
This is where studying things like mouse gestures in Firefox and such can help. Personally I don't use them. That might be a hold-over from when I owned a Newton PDA with real writing recognition when others were using Palm PDAs with Graffiti.
Despite the fact that I don't use them much myself, I do recognize their usefulness for those who do use them. Done right, they can be *very* helpful.
bulia byak wrote:
This is not very intuitive: the actual adjusting movement is along an arc, not linearly, with 45 degrees line being the center.
Ah, so that's why it seemed to act strangely for me. I would have never figured this out myself (I'm honest). The cursor kind of suggests this action but what I thought when I saw it was that moving up and/or left is +, while moving down and/or right is -, and the distance from the swatch doesn't make a difference. The gesture action is not very intuitive. I think some additional visual cues about what exactly you're doing would help, for example an arc-shaped gradient strip under the cursor, dynamically resizing as you move away from the swatch.
On the other hand I suppose if I clicked at the widget, I would immediately figure out what it's for. It's as intuitive as the color pickers. However, I don't like the idea of using modifier keys to overload it (this applies to the current gesture implementation as well). Another problem with my idea is that when using the widget on the canvas, the bar would obscure the thing you were adjusting the color for.
I can understand your position, because you know this feature very well, and once you do it's simple to use. However, for people who don't know about it it's rather hard to figure out - this is my main concern.
Jon A. Cruz wrote:
This is where studying things like mouse gestures in Firefox and such can help.
Those are different because they can be initiated anywhere on the screen. Our feature works only when initiated on the style swatch. Additionally, "real" gestures are completely indiscoverable, so they're best as a facility that's explicitly configured by the user.
Regards, Krzysztof Kosiński
On Sun, Oct 26, 2008 at 3:24 PM, Krzysztof Kosiński <tweenk.pl@...400...> wrote:
Ah, so that's why it seemed to act strangely for me. I would have never figured this out myself (I'm honest). The cursor kind of suggests this action but what I thought when I saw it was that moving up and/or left is +, while moving down and/or right is -, and the distance from the swatch doesn't make a difference. The gesture action is not very intuitive.
Well, not everything has intuitivity as its top priority. Sometimes, things are done for speed and precision. This is not the main method for adjusting colors - it's an alternative, for heavy users only, and as such it can be a little "weird" if that is justified by speed/precision advantages.
I think some additional visual cues about what exactly you're doing would help, for example an arc-shaped gradient strip under the cursor, dynamically resizing as you move away from the swatch.
Yes, that would be perfect for clarification, albeit a bit on a clumsy side. We once tried to switch to colored SVG mouse cursors, but had to back them out because they were crashy in GTK.
On the other hand I suppose if I clicked at the widget, I would immediately figure out what it's for. It's as intuitive as the color pickers.
If you just click it, you get the Fill & Stroke dialog - intuitive enough imho.
I can understand your position, because you know this feature very well, and once you do it's simple to use. However, for people who don't know about it it's rather hard to figure out - this is my main concern.
I think ideally it should just display that zero-change 45 degrees as a thin line, the min/max lines (hor/vert) , and an arc arrow, all as a semitrasparent overlay covering the canvas and whatever else is in the window. But I have no idea how to do that in GTK.
Well, I imagined this way different. I did a little skecth of my idea. The image can be seen at http://img259.imagevenue.com/img.php?image=79619_color-on-canvas_122_493lo.j...
Color picker is selected. (rename to color tool) Right-click on any object to have a color picker pop up, as seen on the image. Different color schemes for popup would be selectable from toolbar.
My 50cents Mattias
Mattias-10 wrote:
Well, I imagined this way different. I did a little skecth of my idea. The image can be seen at http://img259.imagevenue.com/img.php?image=79619_color-on-canvas_122_493lo.j...
Yeah, I was also thinking about something like that. But the problem is that the box would obscure the object for which the color is being adjusted, except when the object is very large. You couldn't see how it looks in real time, especially when zoomed out.
Regards, Krzysztof Kosiński
Krzysztof Kosiński wrote:
Mattias-10 wrote:
Well, I imagined this way different. I did a little skecth of my idea. The image can be seen at http://img259.imagevenue.com/img.php?image=79619_color-on-canvas_122_493lo.j...
Yeah, I was also thinking about something like that. But the problem is that the box would obscure the object for which the color is being adjusted, except when the object is very large. You couldn't see how it looks in real time, especially when zoomed out.
Perhaps not show the entire block, but just the boundaries or something. Or only the diagonals.
In any case, something to clarify this feature would be great, looking at the above mock-up I finally understood how to actually use this feature. And for the record, if there hadn't been so much discussion I'd never, ever have found it, and that's a shame, as it awesome.
I do feel that the current choice of being able to use the entire screen is kind of nice though.
One more mockup. http://img21.imagevenue.com/img.php?image=49958_circle-picker_122_1132lo.jpg
Imagine one more round picker being full specter of colors (like color wheel we already have) and all the wheels adjusting their size to stay below mouse. So to get extra precision, drag wider.
Mattias
participants (6)
-
Alexandre Prokoudine -
bulia byak -
Jasper van de Gronde -
Jon A. Cruz -
Krzysztof Kosiński -
Mattias