how should items pop out of the carousel?

[pixelzoom]

Related to #88 code review. Noticed while playing with the sim to familiarize myself with it.

When you select an item from the carousel, it does not pop "up". It pops out in a direction that corresponds to the pointer's relationship to the item's center.

For example, in the Basics screen, if you click below the center of a coin, it pops down. Click to the left of the center of a coin, and it pops to the left. This seems unnecessarily "clever". It differs from sims that I've worked on (e.g. Function Builder, Unit Rates) where the requirement was to always pop the item straight up. And (most importantly) it creates a potential usability problem on touch devices -- if you click an item below it's center, it will pop down and be obscured by your finger (which was the rationale for always popping up in other sims).

I see this same behavior in other @jbphet simulations - e.g. Balancing Act, toolbox in Gene Expression Essentials. So either (a) no one has noticed, or (b) it's not significant.

If you decide to change the behavior in this sim, also consider changing other sims.

[amanda-phet]

I didn't notice it, but in general I'm a fan of popping up from carousels/panels that are at the bottom on the screen.

[jbphet]

@amanda-phet - I'm going to need a little clarification. I just looked at a couple of sims for reference, and the behavior varies. In Charges and Fields (CAF), the mouse behavior is exactly like it currently is in this sim (ExEx) where created objects move such that they are centered at the mouse position, but when using CAF in touch mode, the charges and sensors pop up so that they can be seen above the user's finger. In Function Builder, the created items pop up when selected in all cases, to the point where an item can in some cases be dragged from below its lower edge. I reviewed and discussed these with @ariel-phet and he said that the Function Builder behavior was necessary because it was important to make things pop upwards when removing them from the pipeline so that it was clear to the user that they had been removed. In Area Builder, the position where the user clicks is retained so that created items appear to be dragged from exactly the point where the user clicks, and a shadow is used to indicate to the user that something has been created. And, as @pixelzoom noted above, the behavior that is currently exhibited in ExEx is used in several other simulations. @ariel-phet said it's @amanda-phet's call. What do you think would work best in this sim?

If you'd like to look at a few possibilities over Skype or while you're here, let me know and we can set something up.

[jbphet]

I just discussed this with @amanda-phet, and we decided to go for the Charges and Fields behavior, i.e. it behaves as it does now for mouse interaction but for touch interactions the selected item should pop upwards a bit so that it isn't occluded by the user's finger.

[pixelzoom]

Different implementation for mouse vs touch? That seems totally unnecessary -- it does nothing to improve the user experience with mouse, it's so subtle that no one will even notice, it's inconsistent with other sims, and it creates 2 sets of code to test and maintain. What is it buying you?

[jbphet]

What is it buying you?

The ability to see the items being dragged without having them be occluded by the user's finger. It was @ariel-phet who brought it up that this is how Charges and Fields behaves, and I tried it out and found it quite usable.

Different implementation for mouse vs touch?

I haven't implemented this before, but I think it would actually just be a few lines of additional code that would use a different initial offset for the drag if the event were a touch event instead of a mouse event.

[pixelzoom]

@ariel-phet Can you explain how popping something down prevents it from being occluded by a finger on a touch device? And why we had such an extensive discussion about this in Function Builder and came to a totally different conclusion, which was then applied in Unit Rates?

[jbphet]

It would pop up, as the charges and the sensors do in the currently published version of Charges and Fields.

[pixelzoom]

I'm confused... In Expression Exchange, click below the center of a coin in the carousel. The coin pops down, not up. Ditto for charges and sensors in Charges and Fields.

[jbphet]

I see what you're saying, and yes, that's true. In the mouse case, when clicking on a coin term, it centers at the mouse position, so if you click the top of the creator node the created node will be above creator node. If you click at the bottom of the creator node, the created node will be created below the creator node (which is the case you're describing in the comment immediately above). This is what is done in Charges and Fields (CAF) and several other simulations. However, what is different in CAF is that the charges and sensors are offset a bit in the case of touch events because they are smaller than the average finger and could thus be hard to see. This offset puts them a little above the touch point, though still centered in the horizontal direction. When in "variables mode", the coin terms are depicted as variables, and are also small enough to be blocked by a finger, so it is being proposed that we use the previously arrived at solution for this problem ala CAF.

[pixelzoom]

I still haven't heard why simply popping "up" (regardless of where you click in the carousel or panel) doesn't work for both mouse and touch. That was the conclusion that we came to in Function Builder, and then again in Unit Rates.

[jbphet]

There is a lot of precise placement in Expression Exchange, and I find the current behavior works well for this, and the "always jump up" behavior in Function Builder doesn't seem all that well suited to this case, though I understand the need for it in FB. Having said that, it certainly wouldn't break the sim or significantly diminish the user experience to do it the FB way. What say we send it to binding arbitration?

@amanda-phet - would you like Charges and Fields style mouse/touch behavior or Function Builder style?

[pixelzoom]

There is a lot of precise placement in Expression Exchange, and I find the current behavior works well for this, and the "always jump up" behavior in Function Builder doesn't seem all that well suited to this case, though I understand the need for it in FB.

I don't understand how or why "precise placement" should be at all affected by how an item pops out of a carousel. Or how this scenario (taking something out of a carousel) is at all different than Function Builder or Unit Rates... or Equality Explorer, where I'm in the process of using the same behavior.

What say we send it to binding arbitration?

Fine with me. As long as I'm not asked to implement this in Equality Explorer.

[amanda-phet]

I would guess that the reason for having different behavior for touch/mouse is that with a mouse it is logical that the object being clicked be directly under the cursor, but with touch you can't see the object if it's under your finger.

If the object always popped up, then small objects (like variables), could easily look like they're floating above the cursor, which is very strange behavior. In FB, the objects in question are large enough that the pop up only creates this scenario if the user clicks the very bottom edge. The variables in ExEx already have the situation where you can drag with the cursor not directly clicking the stroke of the letter, and I don't want to exacerbate that with an additional jump.

I'd like to move forward with the CaF model for this sim.

For Equality Explorer, the objects are more "solid", so I think the Unit Rates model will work fine.

[ariel-phet]

Agreed with @amanda-phet's last comment. Removing my assignment.

[jbphet]

Implemented the CaF-style behavior. @amanda-phet - please take this for a test drive from master and either let me know what you think should change or simply close.

[amanda-phet]

Looks great with the tweak we just made. Thanks!