Make non-droppable area bigger around eye toggle

[catherinecarter]

While interviewing, a student intentionally put the kittens "all over the place." The corners were their favorite location (farthest from each other possible), and therefore put two kittens over they eye toggle:

Recommendation: to make objects repel away from the eye toggle so when the user touches something near it, the intended action is interpreted by the sim (e.g., if the user moves an object close by and subsequently wants to activate the eye toggle, they can without needing move objects out of the way).

[marlitas]

The main things that need to get addressed in this issue are:

• When an object is dropped (through mouse or keyboard) any objects that were behind it should move out of the way.
  • Objects that move out of the way should not move outside the bounds of the CountingAreaNode, and should not cover the eye toggle.
• When an object is dropped (through mouse of keyboard) on top of the eye toggle, it should move over so that it is not blocking it.
  • The final position of the dropped object should not be covering another object, and should be within the bounds of the CountingAreaNode.

Currently there is rudimentary logic for this in CountingAreaNode:

• dropCountingObject
• getDropZoneBounds
• sendToValidDropPoint
• getValidDropPoint

[pixelzoom]

This seems like an unnecessary complication. Have you considered putting the eye toggle buttons outside the box? There is plenty of space below the boxes, in all screens.

In addition to reducing implementation complexity, I can make an argument that putting the eye toggles outside the box is a better, more consistent UX. Better because the student doesn't have to try to avoid dragging onto the toggles. Better because the eye toggle may be slightly more obvious outside the box. And more consistent because other buttons that affect the contents of the box (organize, swap) are outside the box.

[marlitas]

I will let @catherinecarter answer this as I agree that putting it outside the counting area would simplify development.

[catherinecarter]

We could try that, I agree that it would make the code simpler.

In terms of discoverability, however, I think putting the eye toggle below the countingArea makes it more confusing for the user to know what the toggle is controlling. And, it looks weird below the countingArea on the left.

In all other sims with an eye toggle, the toggle is to the right or left of the thing it controls (e.g., calculus grapher, graphing lines), except for function builder where the eye toggle is centered below the thing it controls.

If we could put it to the right or left of the countingArea, it would make more sense, but there is not enough room for the eye toggle to be on the right of the location-based representation where there are two eye toggles, and I feel like it would be weird to put one toggle to the left and the other below (maybe, maybe not?), like shown below:

Since it makes more sense to not move left the eye toggle from screen to screen, we'd have to consider the toggle either under or to the left of the countingArea. Here's what it would look like to have the eye toggle below the countingArea in other representations (which I think looks awkward and unintuitive):

What makes more sense is to have the eye toggle to the left of the countingArea in many ways:

• functionally for what it controls,
• visually to know what the toggle is controlling, and
• consistently across sims.

Ideas?

[pixelzoom]

I agree that the toggle button looks better to the left of the countingArea and is more consistent with other sims. But I didn't suggest that because it's not possible for the location-based representations, where the left and right halves of the countingArea each have their own toggle button. And having the 2 toggle buttons in different (inconsistent) locations for left and right halves seems way worse than the compromise of putting them both below the countingArea.

[pixelzoom]

I said:

... There is plenty of space below the boxes, in all screens.

My bad. That's not the case for the Number Line:

I don't think it would be terrible to put the eye toggle button to the left of the countingArea for all cases where there is 1 such button. And put them below the counting area when there is a pair of eye toggle buttons.