PhET Energy Skatepark Free Form Track Construction

Owned by Jonathan Hung
Last updated: Jun 22, 2017

Introduction

This is a working document intended to track design issues and possible solutions related to free form track construction for the PhET Energy Skatepark sim.

The Goal

Design an inclusive experience for Energy Skatepark track construction that allows the user to create tracks of any arbitrary shape.

Challenges

  • How would you describe any arbitrary track programmatically?
  • When constructing a track, how would you orient a non-visual user?
  • What would keyboard access be like?











Keyboard Track Construction: Point by point

This interaction is similar to connect-the-dots, with a curve connecting the dots. Similar to the bezier curve tool in Adobe Illustrator.

  1. Place your first point.
  2. Place your second point.
  3. This results in a straight line joining points 1 and 2.
  4. Place a 3rd point - this creates a curve joining the 3 points.
  5. Place a 4th point, this creates a curve joining the 4 points.
  6. etc.

Brainstorming keyboard interaction with text descriptions:

  • User places track points one by one.
  • Grid system is used for moving point around
  • Position of points described by its relative position to the middle of the play area point.
ActionVisual ResultFeedback (Textual and auditory)


Tab to track toolTrack builder tool highlighted"Track construction tool"
Enter
  • Tool becomes activated
  • A grid appears over the play area
  • Construction cursor appears in the middle point in grid
  • "Track construction tool activated."
  • Help text - "You choose locations for track points, and a track is automatically created to connect the points you chose."
  • "Current location is in the middle of the play area."
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Enter
  • Point is placed the middle.
  • "Track point 1 placed in the middle"
  • If the user had moved cursor away from the middle, "Track point placed 2 meters left, and 1 meter above the middle".
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Left arrow
  • Cursor moves left 1 spot
  • Current location is 1 meter left of the middle.
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Left-arrow,Left-arrow, Up-arrow, Up-arrow
  • Cursor moves 2 left and 2 up.
  • Current location is 3 meters left and 2 meters above the middle.
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Enter
  • Point is placed
  • "Track point 2 placed 3 meters left and 2 meters above the middle."
  • "A track has been created sloping upward from the top-right to the middle of the play area. <play sonification of track shape>"
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Right, right, up, up, Enter
  • point is placed
TODO

The above track isn't right. The shape of the previous track sections shouldn't change after the user has moved on to other parts of the track.

Reshaping a Track During Construction

ActionVisual ResultTextual / Auditory FeedbackMockup
User starts the track construction tool

User presses Enter to place a track point.

User presses up.

User presses up then left twice.

User presses enter.

User presses down