PhET John Travoltage Simulation Design

Introduction

The goal is to create an accessible and inclusive design and implementation of the existing John Travoltage simulation.

The design and development approach is to create an equivalent version of the simulation using solely native HTML 5 elements. The purpose of this approach is to create an interaction that is natively supported by assertive technologies, and integrate this as the parallel DOM to the existing simulation. Design and usability will be informed by a participatory design process involving experts and stakeholders.

Current Demos

• John Travoltage Simulation with Keyboard and Screen Reader Accessibility
  • Demo
  • Early HTML 5 Prototype
  • Design - this wiki page
• John Travoltage Simulation Prototype with sonification
  • Demo
  • Design

One Sim. Multiple On-Ramps.

To a sighted user, the John Travoltage sim appears as it would on the left below. To a non-sighted user, the same simulation would appear like on the right below.

Coupled with sonification, updating text descriptions, support for keyboard and gesture input - users can have multiple ways of interacting with the sim.

This is what the current development version of the native HTML 5 version is like:

Try the demo at: https://jhung.github.io/john-travoltage-html/

Updating Description of the Sim

After the sim's header, there is a description of the sim. As the user interacts with the sim, this description is updated to reflect the current state of the sim. The intention is that the user can come back to this description any time to get an updated description.

Because the simulation has a finite possible states, it's possible to automatically generate a text description to reflect what is happened visually.

Initial Description

The following paragraph is the sim's description on first load, and before any action has been performed. This initial description is replaced by sentences taken from the tables below once the user has interacted with the sim.

"Actor John Travolta is standing with a foot on the rug, and his hand is very close to the doorknob."

Foot Rub Description Table

Additional description for slight foot movements that don't change the quantity of charge in a significant way. This will not be implemented immediately and will depend on initial testing.

Hand Description Table

* replace "His" with "John" if there is no foot description.

Additional description for slight movements that don't result in a change in the descriptive hand position region. This will not be implemented immediately and will depend on initial testing.

Charge Description Table

The following description is rendered only when there has been a discharge.

"John's small number of negative charges have been discharged and there are no negative charges left."

Example Descriptions

The following is an example of how a description of the sim updates as a user interacts with the game.

Scene Description and Leg Position Changes (Sep 2016)

Based on user experiences, the strings used to describe the movement of the foot needed to change to better reflect what is happening visually and in the model.

Rename the foot slider label to "Leg swing".

Leg and Arm as an HTML Slider

Implement the arm and leg as an HTML slider. For further background on this decision, see PhET John Travoltage Arm Implementation Research.

Reasoning

• A slider is immediately understood by a screen reader.
• Non-sighted keyboard users would understand how to use it.
• The slider maps nicely to the range of motion of the arm or leg:
  
  • Each extreme of the slider would be the extremes of the limb motion
  • Middle of the slider would be closest arm position to the door knob, or the perpendicular position of the leg to the carpet.
• Native keyboard support:
  • Cursor keys move the slider.
  • PgUp / PgDown skips by increments.
  • Home / End moves from one extreme to the other.

No-Wrapping

• If the arm is implemented using a slider, there will not be any wrapping when the user has reached an extreme. They will be forced to move in the opposite direction. This is mitigated by the supported native short-cut keys.

Arm Implementation as Slider

To someone using a screen reader, the hand position is controlled by a slider with values ranging from 0 to 60. By default the slider will be at position 12. As the user adjusts the slider, the screen reader will read back the slider position and its relative position to the door knob.

To a sighted user, the arm can be dragged around in a circle but the motion stops at the 0 (or 60) mark at the top of the circle.

Implementation Details

• Slider label "Hand position"
• As the position on the slider moves / hand moves around the arc:
  • the sim description is updated with new text if the region changes.
  • the AT would read back the region if it changes
  • two notes are played indicating both proximity and direction of arm movement relative to the doorknob.
• The default value is approximately 12 (exact value TBD)

Interesting Moments

Leg Implementation as Slider

• Using a clock scheme: Value range: 0 to 30. 0 is at the right, and 30 is at the left.
• Label "Foot position"
• As the leg moves around in an arc:
  • the sim description is updated with new text if the region changes.
  • the AT would read back the region if it changes
• a brushing sound is heard if the foot moves within the "on carpet" region.
• The default value is about 12 (exact value TBD)
• See this IRC chat log: https://botbot.me/freenode/fluid-work/2015-11-26/?msg=54983997&page=1
• Also see PhET John Travoltage Arm Implementation Research

Interesting Moments

Sonification

See: PhET John Travoltage Sonification Design

Design Sketches

Screen Reader Perspective

A rendering of the John Travoltage simulation as perceived by a screen reader.
The diagram shows the simulation in its default state, and after the user has gathered electrons and has discharged them.

Interaction Mock-Up

The following are mock-ups illustrating some of the above elements put together with visuals from the simulation.

Current sketch - Dec, 2015 (Download)

• Current Sketch - Dec, 2015
• Second Sketch - Nov, 2015
• First Sketch - Oct 27, 2015

Learning Outcomes

• distance and charge are related
  • The more charge you have, the farther you can be to discharge
  • The less charge you have, the closer you need to be to discharge
• electrons repel each other
• it is possible to create a generator by putting the finger close to the doorknob and constantly rub your feet (although this isn't directly related to static electricity)

Interactive components

• Arm rotation
  • controls distance from finger to doorknob
  • 360 degrees of movement
• Foot shuffle
  • controls the quantity of charge
  • 180 degrees of movement

Design and Interaction Notes

• For younger learners - keep it simple
• Travoltage is often used as an introductory sim for PhET

Charge / discharge behaviour:

• distribution of the charge within the body does not matter
• there is a maximum quantity of charge (i.e. there is a finite capacity)
• discharge is at a constant rate regardless of the quantity of charges.