Consider adding option for double arrow in ArrowButton

[chrisklus]

@Luisav1 and I are looking at upcoming needs for Build a Nucleus and the design has a double arrow button that looks very similar to ArrowButton but with two arrows adjacent to each other, with two separate fills for each. See mockup below:

@pixelzoom would it be okay if we add an option to display a second arrow? This does not seems like a trivial change, so we have also considered making this a separate class, but are hoping to avoid any duplication. ArrowButton seems well suited to create multiple arrows at once, so this could maybe be accomplished by just adding a new calculation for arrowOffset, but that won't enough to have the arrows be different colors. So it seems like we might need another loop, but one that creates a whole new arrow shape and path for each pass of the loop.

Since numberOfArrows already exists as an option, the wording for this option may be confusing too. It's unclear to us if this feature should share that option, or be something completely new like includeDoubleArrow, which would default to false. Since the arrows need different fills, this doesn't seem as scalable as numberOfArrows currently is. So maybe something more boolean-like for this case (like includeDoubleArrow) would be easier to manage, because it would default to them having the same color, with another option like secondArrowFill.

@pixelzoom if you have any initial thoughts about this or recommendation for how to proceed, they would be helpful to hear. If you don't have time to look into this much, would it be okay for us to try out a version and make a patch for you to consider? Thanks!

[pixelzoom]

My first instinct is to push back on the design. Spinners with a single arrow are the UI standard. What do these buttons with the double arrows do? Can the goals be met with the current ArrowButton?

[pixelzoom]

Looking at ArrowButton, I definitely do not recommend adding this feature to ArrowButton. There's not a lot there -- it just creates the arrow icon and what the button does is up to the client -- and this feature would make it much more complicated. It would be better to create an entirely new class like DoubleArrowButton.

But again, I'd like to hear about the design. Because my first reaction is that these buttons are odd, and perhaps unnecessary.

[pixelzoom]

If I were going to write ArrowButton today, I would draw the arrow head in one orientation, then rotate it based on direction: ArrowButtonDirection. I might even factor out something like ArrowHeadShape.

[chrisklus]

My first instinct is to push back on the design. Spinners with a single arrow are the UI standard. What do these buttons with the double arrows do? Can the goals be met with the current ArrowButton?

They increment/decrement the model by one proton and one neutron. I think the design is solid - users should have individual control over the number of protons and neutrons (the outer left and outer right standard arrow buttons), but many or most interactions will involve changing both at the same time. This is because of the following (rough) nuclide chart (also worth noting that it's abbreviated and the sim numbers will go much higher):

Only the "Stable" and "Radioactive" combinations of nucleons form (the sim does not allow anything in blue), so it's annoying to have to increment them separately since everything is happening pretty near to y=x. I think the double, color-matched arrow button does a good job of representing that clicking it will perform the same action as both the proton buttons and neutron buttons combined. I don't a single arrow button for this purpose would be as clear.

Looking at ArrowButton, I definitely do not recommend adding this feature to ArrowButton. There's not a lot there -- it just creates the arrow icon and what the button does is up to the client -- and this feature would make it much more complicated. It would be better to create an entirely new class like DoubleArrowButton.

If I were going to write ArrowButton today, I would draw the arrow head in one orientation, then rotate it based on direction: ArrowButtonDirection. I might even factor out something like ArrowHeadShape.

Understood, thanks. Factoring out ArrowHeadShape (with its own options) and creating DoubleArrowButton and ArrowButton around that seems like a good direction to me.

[pixelzoom]

... I think the design is solid - users should have individual control over the number of protons and neutrons ...

I guess I don't totally agree with "the design is solid". There are other ways to provide "individual control" that don't require a double-arrow button. For example, this feels like a superior UX to me -- all of the arrow buttons are the same, and it's clear what they do:

There's probably a better label than "Pair", but you get the idea.

More thoughts on the current design:

• Showing 3 protons and 3 neutrons next to the buttons is (imo) misleading. The buttons add/remove 1 proton/neutron, so showing 3 is superfluous/misleading.
• The gray arrows (color-code to the neutrons) make the buttons look like they are disabled.
• If you do proceed with DoubleArrowButton, I think that it can (should?) live in build-a-nucleus, until there's a need for it in a second sim.

[chrisklus]

Thanks for your thoughts, I like that design too.

Showing 3 protons and 3 neutrons next to the buttons is (imo) misleading. The buttons add/remove 1 proton/neutron, so showing 3 is superfluous/misleading.

Yeah, I can see that a supply pile that's this small could be misleading.

If you do proceed with DoubleArrowButton, I think that it can (should?) live in build-a-nucleus, until there's a need for it in a second sim.

Agreed.

With the current design, I do like that there is only one supply node for each type of nucleon. But I think having 3 supply areas would not be an issue. Tagging @ariel-phet if you would like to weigh in here.

[ariel-phet]

@pixelzoom @chrisklus I think for this sim (based on some of the comments above) doing a sim-specific implementation is the best way to go.

@pixelzoom definitely appreciate some alternative UI thoughts, but in the particular case of this sim I think a "pair pile" would be problematic.

1. We want to color code the arrows, might be a bit funky to do for the "pair" (and we will make sure to polish the gray arrow color in a way that does not look disabled)

2. I think we only want to have clearly labeled proton and neutron supply piles. You do actually get processes like "neutron capture" happening in nature, and we want the focus being on the individual nucleons. These don't really come as a pair easily in nature, so it would be a bit odd to have them in a supply pile.

3. I think the rules around when you could or couldn't add a pair could become complicated (as there are many nucleons that do not form) -- we have a plan to handle that for the individual nucleons but the logic would be complicated by also having a pair supply pile.

4. Since the supply piles could be used up, there would be an odd interaction if you used all the protons for instance but still had a neutron to use. I suppose you would disable the "pair" but again adds complexity to the experience.

Anyhow for the purposes of this sim, I think having the double arrow button makes sense, but agree it would smartest to just make sim specific.

[chrisklus]

We ended up proceeding with a sim-specific implementation that is working well. Closing.