search

phetsims / gas-properties

"Gas Properties" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
6 stars 6 forks source link

icons for Collision Counter and Stopwatch #57

Closed pixelzoom closed 5 years ago

pixelzoom commented 5 years ago

This was mentioned in an earlier design meeting.

Icons currently look like this:

screenshot_1163

We probably want something that is less detailed, but can still be created programmatically.

arouinfar commented 5 years ago

The TimerNode has less going on, so I think something as simple as hiding the 0.00 ps readout (leaving the field empty) would go a long way to decluttering the icon. If the empty readout looks too strange, we could try displaying a noValue character such as an emdash instead.

The Collision Counter icon is trickier, and I'm not sure I have a great idea, but here are a few possibilities:

  1. Remove Wall Collisions and Sample Period strings, but leave layout unchanged. image

  2. Really iconify things, and just show the counter field and play button centered in the icon. image

I prefer option (1), as seems more reasonable and doesn't look too bad at 100% zoom. Tagging for design meeting to get team feedback, and to see if folks have any other suggestions.

pixelzoom commented 5 years ago

I should have clarified. The goal here is to avoid having to create full-blown model + view in order to create icons. Neither of the above gets us there. If we're going to provide that much detail, we should continue to use what we have. It's going to be too complicated to create something that detailed, for little gain.

I had something much more simplified in mind, see below (also in master). Or maybe we should drop the icons?

screenshot_969

arouinfar commented 5 years ago

Ah, thanks for the clarification @pixelzoom. I really like your proposed icons!

Looks like we have 3 options to discuss with the team. In descending order of my personal preference...

  1. Go truly iconic with the silhouette proposed in https://github.com/phetsims/gas-properties/issues/57#issuecomment-492009797
  2. Icon is a scaled-down version of the tool, text and all
  3. No icon

Having an icon next to the checkboxes will make them a bit more attention grabbing, so students are more likely to find the tool or interact with it a bit earlier in the flow. I would prefer to keep an icon of some sort. Looking at master, the simple icon looks quite nice. It's still attention-grabbing, but it doesn't look busy with all of the text/buttons.

pixelzoom commented 5 years ago

I would also prefer to have an icon. And (for me) the most important features of the icon are its general shape and color.

pixelzoom commented 5 years ago

5/16/19 design meeting: Simplified icons approved. Closing.