Card stacking direction

[samreid]

I noticed that Build a Fraction cards stack down to the right and Expression Exchange stacks up to the right.

It seems like we used to stack up to the right in Fractions, but changed it for some reason. I'll look in the code for clues, but perhaps @ariel-phet or another design team member from Fractions Intro remembers?

[jbphet]

Assigning to @amanda-phet to decide if the downward stacking direction is preferred.

[amanda-phet]

I'd like to know what @ariel-phet thinks because if there was evidence from interviews on Fractions Intro that the downward stacking is preferable we should stick with that direction. Up and right feels natural to me because the stacks grow upward toward the area we are dragging them, but that was my only reason for doing it so I'm not tied to it if there's a good reason to change.

[ariel-phet]

@amanda-phet I looked over the design doc (we were not as good at taking notes back then) and nothing pops out. I believe this was just an aesthetic decision. You will notice it is not even consistent for Build a Fraction. When the stacks are "shape" pieces they stack up and to the right (which is necessary so that the stacks do not interfere with the shape container from which they are being pulled.

It might have been driven by how the level selection screen would look? Perhaps stacking the other way was not as clean with all the numbers vertically aligned?

So I would say no reason not to change, but we should ideally set a standard for HTML5 sims, so that when we eventually port Fractions Intro/Build a Fraction we make this change.

[samreid]

I cannot see any comments in the simulation that indicate why a specific direction was chosen.

[kathy-phet]

Asthetically, I do prefer down and to the right for the cards. This seems more like how you would stack them in real life too if you were wanting to see a bit of each card.

I agree on the level selection that up and to the right would look odd.

[kathy-phet]

Another possible reason (although just speculating) is that it might be more obvious that you have a limited number of pieces if you have to drag across the cue about that. But I don't recall the conversation about it.

[amyh-phet]

I prefer down and to the right as well. I understand that up and left might better cue a user to drag a card up to the balance, but I think that up and left would look odd in the level selection screen.

[ariel-phet]

Basically agree with down and to the right in terms of looks, but up and to the right might be slightly better visual cue to drag upwards. Fine with whatever choice is made.

[arouinfar]

While I think it's a nice touch for the cards to be stacked up and to the right towards the play area, I'm not sure I would want this direction to be universal. In general, I think stacking down and to the right looks a bit cleaner. @ariel-phet makes a good point about the level selection screen, and I agree with @kathy-phet that real cards would probably be stacked down and to the right.

[amanda-phet]

Thanks everyone!

@jbphet let's change the card stack to be down and right for Expression Exchange.

[jbphet]

Done, it now looks like this:

Interesting Note: This was literally a one character change to the code. Like, for real. Click on 1214b7e73fc92a30a1a1955a8f818e6a0aa320cb to see it.

[jbphet]

@amanda-phet - this is done, assigning to you to take a look on phet-test or simply close at your discretion.

[amanda-phet]

Looks great. Thanks!