search

phetsims / models-of-the-hydrogen-atom

"Models of the Hydrogen Atom" is an educational simulation in HTML5, by PhET Interactive Simulations at the University of Colorado Boulder.
GNU General Public License v3.0
2 stars 3 forks source link

design refresh #1

Closed pixelzoom closed 1 month ago

pixelzoom commented 8 years ago

"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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

I've already started porting.

pixelzoom commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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.

screenshot_63

pixelzoom commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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

pixelzoom commented 8 years ago

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

screenshot_68

pixelzoom commented 8 years ago

@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 https://github.com/phetsims/scenery-phet/issues/211#issuecomment-157863752.

amyh-phet commented 7 years ago

@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 commented 2 years ago

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 commented 2 years ago

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:

arouinfar commented 1 year ago

Unassigning myself until work resumes on this sim.

DianaTavares commented 1 month ago

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.