Improvement to numbers for "numbered grid"

[emily-phet]

The current numbers in the "numbered grid" scenario need some refinements. Additionally, there are some possible concerns related to these numbers that may require a unique design solution. Here are the related design considerations, and then some design ideas (from simple to more complex).

Design Considerations

• The numbers need to be able to be changed so that they span 0-10, 0-20, 0-40, and possibly 0-30. There needs to be an intuitive way for learners to make this change, that is not particularly prominent visually, as it's a tertiary action. Note - this is not the same as zoom-in/zoom-out behavior, the markers will stay in place, and only the grid will change. Mathematically, this is not "scaling", it's something else (at least, this is my understanding from math ed folks).
• The numbers may be obscured when using a touch screen. It may be ideal to be able to either have the numbers located in the center of the screen, or to be able to change the location of the numbers (left, center, right).
• The numbers need to be more inviting - aligned with numbers used in other math sims. Depending on size of screen the numbers may need to be scaled in size to allow for more gridlines/numbers as the maximum value is changed.

Possible Solutions

• Do not allow changes to location of numbers, numbers are fixed to either left side or center. Changes to maximum number value is done using some as-yet-determined interaction with the current maximum value (possibly a drop down box), or an option located next to the grid.
• Rather than implementing the numbers as affixed to the grid, implement the numbers as a physical tool overlaid on the grid. This would involve turning the "numbered grid" radio button into a "number tool" option (maybe a checkbox?). When the "number tool" option is selected, a colored bar with numbers on it appears left aligned (or center aligned) on the grid. This tool could have some subtle visual indicators that it is moveable (e.g., a small handle), and could potentially be moved to left, center, right (no up/down movement, i.e., number 1 is always aligned with the grid line with a value of 1). The option to change the max value could be next to the "number tool" indicator. This solution significantly complicates alternative input, and description, and should be considered carefully.

I would like to discuss these ideas with the team. @zepumph and @BLFiedler assigned to you to please take a look and consider before we next discuss. I'll check with folks about schedules and see if we can pin down a time to discuss this and other design questions next week, probably Tuesday or Wednesday.

[emily-phet]

Here's a mockup of what a "number tool" could be like. Notice that with a number tool, I think we could have grid and number tool as checkboxes, removing the previous radio buttons. Note, this mockup does not include a solution for the changing the max number on the number tool. It would need to be either 1) on the number tool itself, or 2) a sub-option under the "number tool" checkbox...which would not be a great place for a drop down menu since it would probably have a width not conducive to being a "sub option".

[brettfiedler]

We did not get to this during design meeting, but there has been some discussion on the e-mail list that I'll post here:

From Dor:

Quickly,

I’d say ’no.’. Let’s keep rulers as rulers. Perhaps the hand icons should have little horizontal protrusions half way up, on each side, so as to cue alignment on the horizontal grid lines. (When working with ‘plus’ cursors, the horizontal protrusions are native to the ‘plus’ icon itself.) The proposed image suggests having a “count” paradigm rather than the “measure” paradigm. I did not quite understand from your explanation the perceived advantages of this paradigm. We know that those two paradigms clash — for example, when young kids use a ruler or measuring tape to determine the length of a line, they will often put the “1” at the end, rather than the “0.” Here were are definitely going toward quantifying position as a location relative to the lowest horizontal line. That would relate in spindly ways to a count-paradigm.

As for the grid tool. I would use people’s familiarity with the zoom- in/out pinch gesture to change the grid’s unit size.

Again, apologies I cannot spend more time on this. I hope this is clear.

From Amanda:

I think that as long as those numbers are aligned with the horizontal lines, they will make sense as labels. I am not bothered by it being movable, as long as it can only be moved left/right and not up/down. I could see it being useful to have it in the center if you are using both hands to control the two markers!

I think an important question about the scale is: when you change the scale, do the hands move with it? So, if they were at 2 and 4, do they stay at 2 and 4 and shift down? Or do they stay static and their new locations become 4 and 8? I'm assuming the latter, but wanted to be sure.

I don't love the sliding/pinch-to-zoom option for changing the scale because I think pinch-to-zoom is challenging for young kids and their motor skills, but I could be wrong there. If we have zoom/magnification in sims that seems like it could get confusing. Also, while I don't see it as a pedagogical problem, I don't like the slide down interaction. Without a clear idea of what sliding on the scale does, I might not know where to stop. I think a dropdown would work well here to consolidate the view options and it is super clear what the scale levels are.

[emily-phet]

I think Dor may have misinterpreted my description, and envisioned that learners would be using the "tool" to "measure". I think Amanda's wording is better, I should have used "label" to describe what is the intent behind the suggestion, and called the new thing a "number label".

I used "tool" only to indicate that it is it's own "thing" that is interactive (like PhET readout tools, etc.), but my wording could easily have been interpreted to imagine "measurement".

I'll brainstorm more with some folks around this in a Thursday design meeting later today.

[emily-phet]

@zepumph From the design meeting 5/21, it was decided to proceed with moving the number to the center of the gridlines, as in mockup below. @amanda-phet mentioned that other math sims have numbers at 18 point font. Let's give that a try, unless it seems obviously too big, and then go a bit smaller. In the current prototype, they seem too small.

Note - unlike the mockup below, gridlines and numbers should be dark grey in color.

[zepumph]

Implemented above. Please review:

[amanda-phet]

I like the alignment of the numbers and grid lines!

Not sure if this is the right issue to mention this but I think the white dots in the hands could be smaller. Maybe 50% of the current diameter, so it looks more like a "point."

[zepumph]

With the increased label size, I removed the option have 40 grid lines. This prevented the possibility of overlap.

[emily-phet]

@amanda-phet Thanks for weighing in here. Regarding the numbers - I really like the general look of this, but something about the numbers still looks a little unfinished to me. Do you know of any other fonts used for numbers in math sims? Do you see any issue with us playing around with different fonts or trying the numbers bold?

@zepumph - I agree with @amanda-phet regarding the size of the white circle. In Slack yesterday, I think the image was small-ish. Looking at it full screen today, they do seem too large.

[amanda-phet]

Do you know of any other fonts used for numbers in math sims? Do you see any issue with us playing around with different fonts or trying the numbers bold?

We use Times italic for things like variables, but usually just use the PhET sans serif font for numerals. I think you should feel free to play around with them to look the way you want!

I assume there is a reason for the numerals and the lines being different colors, but I wonder if it would look more finished if they were the same color, like both black.

[zepumph]

@zepumph - I agree with @amanda-phet regarding the size of the white circle. In Slack yesterday, I think the image was small-ish. Looking at it full screen today, they do seem too large.

See https://github.com/phetsims/ratio-and-proportion/issues/17

[emily-phet]

@zepumph - can you try making the numbers bold (thicker stroke), and making them the same grey color as the grid lines?

If it's straightforward to do, could we play around with font, color, etc. in realtime during the RaP design meeting on Tuesday morning?

[zepumph]

It is likely very straightforward. I made things bold and grey above. Please review, and we can discuss more tomorrow if desired.

[emily-phet]

I like 1) having the numbers the same color as the gridlines, and 2) having the numbers bold. The gridlines and numbers become a little hard to see when the background is the darkest green, but let's tackle that issue in #57, since there may be more background colors added (as in #54).