Usability issue when drawing gradents (.054)

[Ingolf]

Figma (Ugly but modern)

CorelDRAW (Ugly but modern)

Affinity:

Corel Vector / Gravit Designer:

Inkscape:

Easy to understand, works exactly how the Joe Average or expert expects it to work.

And then two programs, Vectorstyler and Illustrator, have to stand out like this:

It is by reducing unnecessary complexity and visual elements that Vectorstyler can compete on more than just raw features.

[b77]

@Ingolf Thanks for the screenshots — will upvote your post.

But!

Handles are needed anyway — think about the case where the start or end color stop doesn't coincide with the start or end of a gradient. You do need a visible handle to grab and adjust the gradient angle, isn't it?

And if handles are not displayed separately for "normal" gradients (those with the both start and end stops at the start and end), I guess the poll I made last week missed an important fifth possibility — Option-drag to "unglue" a color stop from the start or end of the gradient? Because you need this.

How do these apps do that on the canvas? I mean: how do you move a start or end color stop from its location?

[Ingolf]

@b77 You have to try one of those programs, it is impossible to explain the action and experience in a post.

Let's just say it works great in all these programs, and no one has ever requested the Illustrator model ever in any context I've witnessed.

[b77]

@Ingolf You should be able to find and write how is the action I described done in CDR, AD and the others. It was an honest question — I'm genuinely curious.

[Ingolf]

@b77 said in Usability issue when drawing gradents (.054):

@Ingolf You should be able to find and write how is the action I described done in CDR, AD and the others. It was an honest question — I'm genuinely curious.

I know

[b77]

@Ingolf said in Usability issue when drawing gradents (.054):

Let's just say it works great in all these programs, and no one has ever requested the Illustrator model ever in any context I've witnessed.

Not satisfied with 'Let's just say it works great in all these programs' and with bandwagon arguments ('CorelDRAW, Affinity, Gravit Designer, Figma, etc don't use handles).

If they don't use handles, how do they do that necessary operation? With a modifier key?

[Ingolf]

All inside shape

Also outside

No modifiers or complexity. Just moving gradient stops.

[Ingolf]

See how easy it is to work with (and understand), plus how easy it is to switch between gradient types in the context toolbar.

That's the kind of thing that makes you effective. And happy with your tool.

Quick demo of gradients

EDIT: New video

[Subpath]

@b77 said in Usability issue when drawing gradents (.054):

Handles are needed anyway — think about the case where the start or end color stop doesn't coincide with the start or end of a gradient. You do need a visible handle to grab and adjust the gradient angle, isn't it?

And if handles are not displayed separately for "normal" gradients (those with the both start and end stops at the start and end), I guess the poll I made last week missed an important fifth possibility — Option-drag to "unglue" a color stop from the start or end of the gradient? Because you need this.

@b77

I'm with you, even though gradients in Vector programs I used don't have such handles.

The way VS does it has never bothered me much, even if it was a bit unusual at the beginning.

[Ingolf]

Aha. I hear no arguments or business case for the extra handles being there. On the contrary.

[Ingolf]

Let me make it easier for you. You are a product owner at Corel, Serif or Figma, and need to write a user story explaining to the development team what needs to be developed and why (this is done so that the programmers fully understand the value to be added, which in turn helps to achieve a better common understanding between customer and developer of the 'Definition of Done'):

Template:
As a <type of user> I want <feature> implemented to achieve <business value>

Finish this:
"As a designer I want handles a'la Illustrator/vectorstyler added to gradients to achieve" <business value>

?? Exactly what?

This is how I work daily with our software engineering team as a product owner.

[Subpath]

@Ingolf said in Usability issue when drawing gradents (.054):

Aha. I hear no arguments or business case for the extra handles being there. On the contrary.

I wondered if the question was meant for me or @b77 ?

[Ingolf]

Anyone may have a go at it.

[b77]

@Ingolf said in Usability issue when drawing gradents (.054):

Aha. I hear no arguments or business case for the extra handles being there. On the contrary.

Uh… I did mention the limitation that arises from having the gradient handles "under" the start and end color stops — you wouldn't be able to move any of these two stops away from the gradient ends with the gradient tool.

Unless a keyboard modifier is assigned for this, the user has to go to the Appearance or Gradient panel to do it.

You might say: "Please no more shortcuts, it's OK to do this operation only from the panels — most people won't mind". And you might be right.

But the app still needs visually different handles for these cases — both with the current detached handles and with "hidden" handles (your suggestion).

……… . .

Btw, my CDR 2021 trial expired last week, so I could test moving start or end color stops only in Inkscape v1.2.1, and… I don't see any such possibility with its gradient tool — it can be done only from its 'Fill and Stoke' panel, and the gradient tool displays no detached handle at that end after you do that… this last part is terrible if you ask me.

I also tried to do this in AD on iPad, and… I couldn't even find a Gradient panel equivalent, so I guess it's not possible.

……… . .

@VectorStyler Are combinations of dragging + two keyboard modifiers possible/allowed?

[Ingolf]

@b77 said in Usability issue when drawing gradents (.054):

@Ingolf said in Usability issue when drawing gradents (.054):

Aha. I hear no arguments or business case for the extra handles being there. On the contrary.

Uh… I did mention the limitation that arises from having the gradient handles "under" the start and end color stops — you wouldn't be able to move any of these two stops away from the gradient ends with the gradient tool.

You did but I am not sure what limitation that would be.

Could you demonstrate with a side by side example from one program like VS and one like the others what you can achive with these gradient ends that will be missing if they are removed?

[b77]

@Ingolf Yes, here is a quick comparison:

(Btw, I love these GIF compression artifacts! ).

So in VS I can drag the start or end color stop easily and without disturbing those three color stops in the middle.

[Ingolf]

@b77 said in Usability issue when drawing gradents (.054):

@Ingolf Yes, here is a quick comparison:

Ah, that makes some sense, granted. And now I understand your love of screentshots. Much easier to understand.

Still, if I need the middle nodes to "stand still" I insert an extra gradient stop and get same result. I don't remember that as an issue/need, personally.

Gradient static stops

So I'm neither completely convinced nor with a winning argument. I can certainly say I enjoy using programs that remove as many controls and noise on the screen as possible, so I can focus on the drawing and exactly what needs to be done by the user interface, and would rather have the "modern" model any day.

@VectorStyler If you keep the current model, then the model used in Amadine might be worth considering for gradient end nodes. Here I don't think their choice of symbol for gradient ends is particularly logical either.

[Ingolf]

(However, the advantage of the Amadine model is that the gradient start-end symbol and first gradient stop stand exactly next to each other, beginning at the same place, which is much more logical than the Illustrator model.)

[b77]

@Ingolf Oh, I did think about that workaround.
But since it adds an intermediary color, it's not "the same result" — it's not the exact color of the closest color stop. Which might not be a problem sometimes, but sometimes it is.

To recap, from my POV:

1. If the current "detached handles" model stays, the handles should look visibly different from the color stops — smaller and let's say squared.
   Or maybe the color stops should be bigger.

2. If the simpler "no visible" handles model is implemented, I hope there is a way to easily "unglue" the start or end color stop from its location.
   Not a must, but it's nice to be able to do this from the gradient tool, not only from a panel.
   And when one of the start or end color stops is moved, the handle that becomes visible still needs to look different in size and shape. (I hope everybody agrees on that).

[Ingolf]

But please for the love of all wonderful, no fugly symbols like CorelDRAW:

Like arrows and squares. I am asking for less details. Then I'd rather stick to the current model

CorelDRAW take me back to a distant fugly past with lines and noise ad libitum: