search

phetsims / unit-rates

"Unit Rates" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 2 forks source link

layout of shopping items on scale and shelf #167

Closed pixelzoom closed 7 years ago

pixelzoom commented 7 years ago

I'm creating this issue primarily to track decisions that we make.

In the original implementation (e.g. 1.0.0-dev.19), shopping items were arranged in front/back rows on the shelf:

screenshot_165

... while items on the scale were stacked in two rows:

screenshot_166

Since there doesn't seem to be any pedagogical or usability reason for this difference, it would be better to have a similar layout (and therefore single implementation) on both scale and shelf.

For fruit, the shelf can contain both bags and items. Bags are in a their own row behind items. So stacking items on the shelf could make it a little tricky to grab a bag that is behind the items.

Stacking also looks a bit unnatural, for example:

screenshot_167

The front/back layout makes it a little more difficult to count items on the scale. And more difficult to grab items. But theses issues could easily be addressed by increasing space between the items, and changing the viewing perspective (effectively tilting the scale and shelf a bit more).

pixelzoom commented 7 years ago

In 1.0.0-dev.64, I implemented the "front/back layout" for both the shelf and scale.

Caveats: This implementation is incomplete. Fruit bags do not open yet, so the shelf is initially populated with some items. If you put bags and individual items on the scale, keep in mind that this will never happen for fruit. That said…

I replaced the scale PNG file with a programmatic implementation. (I had done this awhile back for the shelf.) This allowed me to easily change the viewing perspective, effectively tilting both the scale and the shelf, and making it easier to see (and count) individual items. The scale doesn’t look identical to the PNG file, but does include gradient shading, and I added a shadow under the top platter of the scale. Both the scale and shelf appear to be deeper due to the new viewing perspective angle. Here's a sample screenshot:

screenshot_168

Overall, I like this approach. It’s easy to count items on the scale. Bags and items coexist nicely on the shelf. Bags and items have plenty of space between them, making them easy to grab. And it certainly looks more natural than the stacking approach. Compare this layout of Pears to the old one shown above:

screenshot_169

@arouinfar your feedback?

arouinfar commented 7 years ago

@pixelzoom I love the new scale and layout! I think all of the items are very easily distinguishable on the scale and shelf, and overall I think it feels more natural than the stacked items.

pixelzoom commented 7 years ago

Great. I'll proceed with the new layout.