Improve timer buttons (and reset button) with new JB L&F

[jonathanolson]

Pending on buttons being ready.

[jonathanolson]

Timer will use Bryce's stopwatch.

[ariel-phet]

hey @jonathanolson...I think use the common component buttons, but if you are not too keen on the BG's stopwatch design, feel free to create one of your own. It would be good to draw it programatically anyhow and design it to be a common component.

[jonathanolson]

See current design:

[ariel-phet]

Hey @jonathanolson I think this design is nice and clean and simple. A few requested tweaks:

1. Can we make the shading more like the body of the transmittance probe in beer's law: http://phet.colorado.edu/sims/html/beers-law-lab/latest/beers-law-lab_en.html right now the left side of the timer looks flat and the right side looks shaded for slight 3d.
2. Can we make the reset arrow like the one in the planet selection of GAO? Just to differentiate it a bit more from the "reset all button"
3. Can we make the "stop" button look like this to differtiate from the play/pause sim control?
4. Can we think of a different icon for "start" instead of the "play" icon...I don't like that when I have the timer open I have two "play" buttons that have different actions.

[samreid]

Can we think of a different icon for "start" instead of the "play" icon...I don't like that when I have the timer open I have two "play" buttons that have different actions.

Just brainstorming here and not strongly advocating (because I know it isn't perfect), but how about a circular red "record"-style button? Like you are recording the time on the stopwatch?

[jonathanolson]

Google Images for "UI timer" and "UI stopwatch" seem to show "Start", "Stop" / "Pause", and "Reset" if it's stopped, OR use the play-pause icons. Should we revert back to text?

[jonathanolson]

Can we make the shading more like the body of the transmittance probe in beer's law: http://phet.colorado.edu/sims/html/beers-law-lab/latest/beers-law-lab_en.html right now the left side of the timer looks flat and the right side looks shaded for slight 3d.

First, I dislike the beveling since the main body is darker than all of the edges - only realistic if it is being lit from all sides other than the front, and doesn't look physical. Second, are you talking about the rectangular readout panel, not the probe itself? That can be partially mimicked by creating custom radial gradients for the corners, and I can come up with a top highlight approximation.

Can we make the reset arrow like the one in the planet selection of GAO? Just to differentiate it a bit more from the "reset all button"

I notice that it's rotated (almost 90 degrees), there's a larger gap between the tip and tail, and it is quite pixelated. Should we consider something like http://www.uiparade.com/portfolio/timer/ (the U-turn like symbol), or which of the attributes of that reset would you want changed?

Can we make the "stop" button look like this to differtiate from the play/pause sim control?

Sure, but I'd like to have the "play" icon or text decided on first.

[ariel-phet]

Hey @jonathanolson I like the "U-turn" symbol for the timer reset button. Simple, distinct, and I think pretty intuitive.

For the timer body, yes I was talking about the rectangular readout panel. Please try what you suggested (radial gradients and top highlight approximation). I don't think the beveled look is necessary, just the slight 3d shading.

For the "play" icon I think a simple black solid circle might work. The timer is so simple, I think the action of pressing a button will be obvious. Or a forward arrow that is distinct from the "play" button such as (but just in black):

https://helpdesk.antioch.edu/images/go_icon.gif

Thoughts?

[jonathanolson]

Decisions:

1. Improve beveling with corners
2. U-turn icon
3. Play will be like the linked arrow (https://helpdesk.antioch.edu/images/go_icon.gif)
4. Stop will be a black square

[jonathanolson]

Completed, will reopen as necessary.