Design options for object and context responses for sliders

[terracoda]

Related to improvements in the slider API defined here: #929

From @terracode on slack:

Slider object and context response design seem to be a pain point for design teams. Slider interactions are often very important for the learning goals of a sim by showing either an inverse or direct relationship between a slider value change and changes in the sim.

I feel some common code options for sliders could help design teams build out the desired relationship between the object and context changes more easily. AND it would be a huge improvement to our API. I would love to have a bit of time with Jesse and Sam to work on this. There were a lot of slider in QWI that we had to work out, ...

Existing Design Documentation:

• Initial Object Responses by Interaction Type - Take the slider relevant info from here and create options for sliders
• Object Responses & Interaction Type - Take the slider relevant info from here and create options for sliders
• Design Patterns for Multi-State & Custom Interactions - Take the slider relevant info from here and create options for sliders

Design Considerations:

• Design Task for Creating Object Response - Take the slider relevant info from here and create options for sliders
• Summary of Context Responses - Take the slider relevant info from here and create options for sliders
• Exemplar - Cognitive Walkthrough GFLB - Take the lessons from this walkthrough and create GENERAL options for sliders
• Design Challenges for John Travoltage - the sliders in JT do not describe a simple relationship.

[terracoda]

Noting here that at Core Description Meeting on August 20th, it was also discussed we need a decision tree about how to determine when to use a slider and when to create a custom object.

[terracoda]

In this issue I want to map out one common relationship that a slider interaction is often used to communicate and that is inverse and direct relationships between two things.

Direct relationship:
A user changes the slider (i.e., moves the thumb or the object left or right or up or down) and something else in the sim changes in the same way. The value change is communicated as an accessible object response delivered through aria-valuetext and the change in value triggers a context response that ties the two changes together. This connection can be communicated simply and qualitatively or it can be more quantitatively with changed values, like in the GFLB example below. A qualitative connection may be all that is needed to make the slider user experience really meaningful - especially for Core Description.

• Increase/decrease voltage and voltage increases/decreases in response (OL)
  • As letter ⁨V⁩ ⁨grows⁩, letter I ⁨grows⁩. Current now ⁨10.0⁩ ⁨milliamps⁩.
  • As letter ⁨V⁩ ⁨shrinks⁩, letter I ⁨shrinks⁩. Current now ⁨9.0⁩ ⁨milliamps⁩.
• Increase/decrease mass and force increases or decreases in response (GFLB)
  • As mass gets bigger, force arrows get bigger, forces now 50.1 newtons.
  • As mass gets smaller, force arrows get smaller, forces now 33.4 newtons.
  • As mass gets bigger, force arrows get bigger.
  • As mass gets smaller, force arrows get smaller.
    As mass gets smaller, force arrows get smaller, forces now 33.4 newtons
• Increase/decrease wavelength and bright bands get farther apart or closer together in response (QWI)
  • Longer wavelength, bright bands get farther apart.
  • Shorter wavelength, bright bands get closer together.
• Increase/decrease source intensity, and screen becomes brighter or dimmer in response
  • Emission rate faster, detector screen brighter.
  • Emission rate slower, detector screen dimmer.
• Increase or decrease distance between Barrier and Screen and bright bands get farther apart or closer together in response (QWI)
  • Farther from barrier, bright bands get farther apart.
  • Closer to barrier, bright bands get closer together.

Inverse relationship:
The same idea as above except the change in the surrounding context is opposite to what happens to the object.

• Increase/decrease resistance and voltage increases/decreases in response (OL)
  • As letter ⁨R⁩ ⁨grows⁩, letter I ⁨shrinks⁩. Current now ⁨8.7⁩ ⁨milliamps⁩.
  • As letter ⁨R⁩ ⁨shrinks⁩, letter I ⁨grows⁩. Current now ⁨9.0⁩ ⁨milliamps⁩.
• Increase/decrease distance between centers of mass spheres and force decreases or increases in response (GFLB)
  • Closer, force arrows get bigger, forces now 43.6 newtons.
  • Farther away, force arrows get smaller, forces now 33.4 newtons.
  • Closer, force arrows get bigger.
  • Farther away, force arrows get smaller.
• Increase/decrease the slit separation in the barrier and the bight bands decrease/increase in response (QWI)
  • Wider slit separation, bright bands get closer together.
  • Narrower slit separation, bright bands get farther apart.

Design Note: GFLB and OL have more refined behaviours, like omitting information depending on whether or not a user changes direction, or is at the max or min end of the slider, or if there is a really big change: "As letter ⁨R⁩ ⁨grows⁩, letter I ⁨shrinks a lot⁩. Current now ⁨9.0⁩ ⁨milliamps⁩." The amount of detail that is built in is dependent on the level of description being implemented and the context and learning goals of the simulation.