Stars design on LevelSelectionButtons

phetsims / vegas

Reusable game components for PhET simulations.

MIT License

1 stars 4 forks source link

Stars design on LevelSelectionButtons #123

Open marlitas opened 6 months ago

marlitas commented 6 months ago

While talking through https://github.com/phetsims/arithmetic/issues/174 with @catherinecarter she brought up the design of stars for reviews on online shopping sites. We noticed that they all have a similar way of outlining and filling stars in that differs from what games are currently doing.

Amazon: image (1) Target: Walmart: Ebay: REI (wasn't our favorite):

Our sims:

We felt that the design being used by these online shopping sites is more aesthetically pleasing, but also easier to read. The half stars are easier to process when there is a consistent outline around all the stars than when the outline is filled in as the star gets filled in.

We would like to:

Use a thinner outline that is always present for all stars (perhaps a darker yellow/orange rather than black)
Only have an empty outline instead of greyed out stars

pixelzoom commented 6 months ago

Stars design on LevelSelectionButtons

These stars are not specific to LevelSelectionButtons. They may also appear on the status bar for each level (FiniteStatusBar, InfiniteStatusBar) depending on how the status bar is configured, and in the dialog that is displayed when a level is completed (LevelCompletedNode).

pixelzoom commented 6 months ago

This seems like a fine change to me, but I have concerned about the stroke used in the mockups above. I think it would be fine to have the stroke be the same for all of the stars, regardless of whether they are filled. But I would stick with a ‘black’ stroke. I don’t think there’s a lot of benefit to non-black, and many potential landmines.

Also... The current design was done over in https://github.com/phetsims/vegas/issues/59#issuecomment-364608714. I believe @amanda-phet was involved.

pixelzoom commented 6 months ago

Thinking about it (and playing with it) more, I’m now on the fence. I tend to agree with what @kathy-phet said in Slack#design-sims:

I think for me the stroke - because it only turns to black with the star fill helps me realize it’s only a half full.

amanda-phet commented 6 months ago

I don't like the idea of using a non-black outline for the stars. Our current stars fit the "toon' style of our sims quite well by using a black stroke.

I just did a quick mockup of the other suggestion. If I understand correctly, @marlitas and @catherinecarter are suggesting option B:

Only have an empty outline instead of greyed out stars

I also mocked up option C based on the slack conversation.

Let me know what other options you'd like to see.

marlitas commented 6 months ago

Meeting 2/12:

This is not a priority, and would need student interviews to quantify the opinions here.
We are going to defer until larger game design conversations touch on this again.

amanda-phet commented 6 months ago

Our stars are most similar to Target's, so if we decide to "modernize" these stars then I would go that direction (thinner stroke and no gray fill on the unfilled stars).