design refresh

[pixelzoom]

"Models of the Hydrogen Atom" is being ported from Java, see http://phet.colorado.edu/en/simulation/hydrogen-atom.

Review the Java version to see how its design should be refreshed/revised.

@amyh-phet I believe that @ariel-phet assigned this to you. Feel free to handle however you feel best (Google Doc, comments in this issue, ...) Note that this sim has 2 features in the Help menu (Legend, Transitions) that need to move to the play area.

[amyh-phet]

@pixelzoom I'm currently working on a design doc in Google drive. Do we have a time frame for when you will begin this port?

CM edit: design doc is Models of the Hydrogen Atom HTML5

[ariel-phet]

@amyh-phet I think that will depend a bit on what your review of the sim produces. If basically we are just making aesthetic changes (breaking into screens, face lifting etc), then I think @pixelzoom will be comfortable porting over the model and such. However, if we are envisioning any feature changes (ideally not), then it might be a longer time line before beginning the port.

[pixelzoom]

I've already started porting.

[pixelzoom]

Hard for me to envision how this sim could end up as multiple screens. Unless you're considering a screen for each model? That was considered during the original Java design, and it was decided that being able to quickly compare models on the same screen was fundamental to the learning goals. The number of models (6) would also be problematic for HTML5 sims, where are upper limit is typically 4 screens.

[amyh-phet]

I think that keeping all models on the same screen would be the best way to go. The only way I could see this being multiple screens would be to have two screens - experimental and then prediction (with all models). I don't think this is necessary and would make comparing experimental and predicted a bit more difficult. I think the major changes would be in layout and updated artwork for things like the light "gun". I think the biggest challenge will be to incorporate the 2 features from the Help menu into the playspace without making it visually crowded.

As far as feature changes, I think the current sim function is good and supports student achievement of learning goals. No need for major changes to features.

[pixelzoom]

Moving "Experiment" and "Prediction" to separate screens would make it cumbersome to compare the various models ("prediction") to reality ("experment"), which was also fundamental to the learning goals, as I recall.

[pixelzoom]

For the "Legend" feature, having it in the Help menu never made sense to me, since it's already shown in the play area - see screenshot below. The only time it's not shown in the play area is when you switch to "Experiment", which would be easy to change.

[pixelzoom]

The "Transitions" dialog is related to the light control when it's in "Monochromatic" mode, so that you can dial in specific wavelengths. It might be useful if this dialog were made accessible from within the light control.

[amyh-phet]

I think it makes sense to keep this sim to one screen. Your suggestions for "Transitions" and "Legend" sound good - might need to rearrange a few of the control panels to make room for the transitions info.

[pixelzoom]

@amyh-phet another design issue... In the Java version, the playback control are at the bottom center of the screen (see screenshot above). In HTML sims, that area is taken by the navigation bar, and screen-specific elements (controls, etc) cannot be put in (or on) the navigation bar. So we'll need to find space for the playback controls in the play area (i.e., above the navigation bar).

[amyh-phet]

@pixelzoom I think we will run into many design issues with this one. I'm working on a new layout today - lots of things to fit and not a lot of space.

I do have one question about the spectrometer from the Java version. In Java, you could take a snapshot of the spectometer, save the snapshot, and then compare it to snapshots from other models or the experiment mode. I know in Java you could move the snapshots around as it generated a separate window. What does this interaction look like in HTML?

[pixelzoom]

@amyh-phet asked:

... I know in Java you could move the snapshots around as it generated a separate window. What does this interaction look like in HTML?

It's not actually a separate window in Java, it just looks like a window. We can provide the same presentation and interaction in HTML.

[pixelzoom]

@amyh-phet Assuming that we're going to replace the cheesy "ray gun"... It would nice to reuse something from another HTML5 sim.

Consider using one of the lights from "Molecules and Light":
http://phet.colorado.edu/sims/html/molecules-and-light/latest/molecules-and-light_en.html

Or the light from "Beer's Law Lab" may be a better choice, because it has room for a big red button:
http://phet.colorado.edu/sims/html/beers-law-lab/latest/beers-law-lab_en.html

[amyh-phet]

I agree the light ray gun needs to be updated and we should remove the "Turn on the gun" prompt when the sim opens. In the current mock up I used a variation on the Beer's law light source. The version I used is in the design mock up for the Rutherford sim. I can send a screen shot to give you an idea-not at home right now so it will be a bit before I can send it. I did ask for time at design meeting for this sim.

[amyh-phet]

Here's what I have so far. Happy to discuss further.

[pixelzoom]

Also consider using PhET's new standard "radio button group", which appears in other others. Here's what it looks like in this sim:

[pixelzoom]

@amyh-phet I noticed that our current wavelength slider (scenery-phet.WavelengthSlider) only supports visible wavelengths. So there is some work that will need to be done to either enhance that slider, or create a new one. But before we do that, I'd like to revisit the "Show absorption wavelengths" in this sim, see phetsims/scenery-phet#211 (comment).

[amyh-phet]

@pixelzoom and @ariel-phet I've added the AI files to the MOTHA folder in drive. Mockups are updated as of 06/26/17, including projector model.

[pixelzoom]

Un-deferring, because development has resumed for this sim.

Amy H is no longer with the project, and @arouinfar is taking over as lead designer.

@arouinfar If there's anything else you'd like changed about the design, now's the time. As I recall, there were open issues in the design doc.

[pixelzoom]

Raising prioirty of this issue. @arouinfar if we're going to make other "refreshes" to this sim, I need to know soon.

I reviewed this issue and the HTML5 design doc, looking for unfinished design work, and broke out these specific issues:

• Redesign the UI for selecting absorption wavelengths. #31
• Presentation of Transitions #32
• Presentation of Electron Energy Level diagram #33
• Reconsider design of Spectrometer snapshots #34
• Light and time controls are not visually separated/grouped.  #35

[arouinfar]

Unassigning myself until work resumes on this sim.

[DianaTavares]

We have a new design working and for now, we have well identified design request. We can close this issue to focus on the details.