Add hand over toggle on kitten representation

[catherinecarter]

During interviews, students did not see the toggle over the kittens. They said it looked like a "bow" or something decorative over their ears.

To help make the toggle more discoverable, let's try adding the hand to cue the toggle upon their first interaction, and then remove it once the toggle has been discovered.

[marlitas]

Here's a first pass at the hand icon pointing towards the toggle. Let me know what you think @catherinecarter

[catherinecarter]

I think the hand will be effective. I think if we tweak it just a little, it will pop a little bit more.

Let's try:

• Moving the hand so the finger is pointing to the middle of the toggle rather than the left side. It gets lost for me when the finger is pointing to its current location on the yellow kitten
  

• Make the stroke on the hand black so it pops a little more:
  

[marlitas]

Done above!

[pixelzoom]

@marlitas said that there is concern about adding this hand icon:

The hand was added because the switch was being interpretted as a bow in interviews. I agree that it's unfortunate to need the hand icon. When I first encountered it, I thought it was my cursor.

Another approach would be to make the switch clearer, and I think that could be accomplished by getting rid of the color circles and the hand icon, and make the toggle bigger. Something like:

@marlitas Here's a patch if you want to explore this direction. handIcon still needs to be removed in this patch, and I would add a bit more space below the switch.

Subject: [PATCH] remove redundant/confusing fill and stroke options, https://github.com/phetsims/number-pairs/issues/69
---
Index: js/common/view/KittenNode.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/common/view/KittenNode.ts b/js/common/view/KittenNode.ts
--- a/js/common/view/KittenNode.ts	(revision 61cf489b3b6ec3be5bca401bcc3ea512373de5f5)
+++ b/js/common/view/KittenNode.ts	(date 1740505320745)
@@ -85,18 +85,17 @@
       isLeftAddendProperty.value = addendType === AddendType.LEFT;
     } );
 
-    const switchLeftIcon = new Circle( ICON_RADIUS, {
-      stroke: NumberPairsColors.attributeLeftAddendColorProperty.value.darkerColor(),
-      fill: NumberPairsColors.attributeLeftAddendColorProperty
-    } );
-    const switchRightIcon = new Circle( ICON_RADIUS, {
-      stroke: NumberPairsColors.attributeRightAddendColorProperty.value.darkerColor(),
-      fill: NumberPairsColors.attributeRightAddendColorProperty
-    } );
+    const switchLeftIcon = new Circle( 1 );
+    const switchRightIcon = new Circle( 1 );
     const kittenAttributeSwitch = new ABSwitch( isLeftAddendProperty, true, switchLeftIcon, false, switchRightIcon, {
       toggleSwitchOptions: {
-        size: new Dimension2( 20, 10 ),
-        focusable: false
+        size: new Dimension2( 30, 15 ),
+        focusable: false,
+        thumbFill: new DerivedProperty(
+          [ countingObject.addendTypeProperty, NumberPairsColors.attributeLeftAddendColorProperty, NumberPairsColors.attributeRightAddendColorProperty ],
+          ( addendType, attributeLeftAddendColor, attributeRightAddendColor ) =>
+            addendType === AddendType.LEFT ? attributeLeftAddendColor : attributeRightAddendColor
+        )
       },
       spacing: 4,
       tandem: options.tandem.createTandem( 'kittenAttributeSwitch' ),
@@ -146,7 +145,7 @@
 
     // TODO: use options.children = instead, etc.
     const superOptions = combineOptions<NodeOptions>( {
-      children: [ focusPanel, leftAddendKittenImage, rightAddendKittenImage, handIcon ],
+      children: [ focusPanel, leftAddendKittenImage, rightAddendKittenImage ],
       focusHighlight: Shape.bounds( focusPanel.bounds )
     }, options );
     super( superOptions );