phetsims / number-line-operations

"Number Line: Operations" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 3 forks source link

Usability of control used to apply an operation #42

Closed pixelzoom closed 3 years ago

pixelzoom commented 3 years ago

Noted during #35 code review.

Being the author of Equality Explorer, I had expectations about how this control works:

screenshot_789

Students who are familiar with Equality Explorer might have similar expectations, so I'll note what I observed here.

(1) I couldn't figure out why I couldn't use the control multiple times. Apparently you can set the operator and operand once, and then the "apply" button is disabled until you reset or erase. This is very different than Equality Explorer, where you can keep applying operations using the same control.

(2) There are only 2 instances of this control in the carousel, so you're limited to applying 2 operations. I never figured out why that's a useful limit, and I kept wanting to apply more operations.

(3) Having played with the sim for 45 minutes, I finally discovered (accidentally) that moving a point on the number line changes the operator and/or operand on the control - and scrolls the carousel to show the control that was used to create the point. There sure is a lot going on here - when I did more the point a whole bunch of stuff happened, and it took me a minute to figure out that the carousel had scrolled AND the operator had changed AND the operand had changed. How important is it for the student to discover this, and figure out what's going on?

pixelzoom commented 3 years ago

(4) I also finally realized that the points (and their labels) that are added get progressively lighter in color. It's very subtle, and there's no color-coding to the operation control instances. Why not match the picker colors, instead of using the default 'black'? And will this be a usability problem for users with vision impairments?

amanda-phet commented 3 years ago

(1) We want users to be able to edit the operation. If the same control can be used multiple times, they would only be able to edit it using the point controllers. In interviews, this interaction worked well.

(2) This design is related to the fact that we can't put an unlimited number of operations on the number line. Two is adequate for this grade level, as well, since this is early on in the understanding of operations.

(3) When you move a point, only the operand should change. If the operator is changing, that is a bug! The auto-scroll feature of the operation control was added so that all of the linked representations were visible at the same time.

(4) The colors were tested for contrast and color-blindness, so I think they should be fine. I'm fine with making the picker colors coordinate with the points, but we changed the carousel to be color-coordinated too, and that might be too much color. Happy to try this out though.

@pixelzoom assigning you in case you want to discuss any of these points further. Also tagging this for design meeting to discuss (4).

pixelzoom commented 3 years ago

I don't have anything else to add. I'm happy to have the design team decide if there's anything to be done here, and I don't need to be involved.

amanda-phet commented 3 years ago

Discussed (4) via #46 .