A Balloon, a Sweater, & a Wall:

Developing Design Strategies for Accessible User Experiences with a Science Simulation


    Taliesin L. Smith, OCAD University

    Clayton Lewis, University Colorado, Boulder

    Emily B. Moore, University Colorado, Boulder

HCII, Toronto ON, July 22, 2016

Importance of Accessible Science Education

P1 (paraphrased): I wanted to study Chemistry, but when I started losing my sight in high school, my teachers could not figure out a way for me to do it. They suggested Biology, but still that was still a passive experience.
P6: " Interesting, I hear you talk about the negative charges and everything, and I feel kind of stupid because I don't even remember if like the little static shocks we get are negative or positive. I guess they are negative."
  • People are inspired by what interests them &,
  • Science helps us understand the world around us.

About PhET Interactive Simulations, Sims

Several PhET Simulations.
  • Founded in 2002 by Nobel Laureate, Carl Wieman
  • Created over 130 high quality science simulations, or sims
  • Very popular: over 5 million downloads per year; over 75 languages
  • Design of the sim guides learners along productive paths of inquiry implicitly (Podolefsky, Moore, & Perkins), without the user being aware that they are being guided.

Consider a simple exploration of Balloons & Static Electricity.

learners can explore the sim and engage in open questioning. I wonder what happens if… and then immediately try it out.

Target User & Design Challenge

How might a student who cannot see the visuals, and who does not use the mouse, interact & learn along side their sighted peers with this simulation?

Accessible design triad: Perceivable, Operable, Understandable.
Accessible design features focus on perceivability, operability, & understandability.
  • DOM (Document Object Model) of a web page has semantic structure that browsers make available to the screen reader
  • PhET sims are built in HTML5, using the canvas and SVG elements - creating a virtual black box to screen readers
  • We explored how to design a secondary access layer that would make a PhET sim accessible to screen readers users

Accessible Design Features

  1. Robust Parallel DOM: A semantically rich hierarchical representation of the sim creating an accessible content and interaction layer; deals with black box issue
  2. Descriptions for all static descriptions; plan for dynamic descriptions
    • Charge amount for Sweater & Wall
    • Balloon position while dragging,
    • Balloon sticking states upon release, &
    • Induced charge descriptions for Wall.
  3. Custom keyboard interactions for the balloon
    • drag interaction (WASD keys)
    • release mechanism (spacebar)
    • hotkey combinations (Maximo, 2012) to jump to important locations (JW, JN, JS, JC)
Demo the accessible features.
Simplified hierarchical structure of the Parallel Dom with tab order visually marked.

Inclusive Methods & Iterative Evaluation

Scotch tape on receipt form.
Video camera angle for interviews.
Keyboard with hands of user interacting with the sim.

Comparative Analysis of firsts (snapshot)

Comparison chart of timings for participant interactions.
Visualized data from 11 participants showing 5 interaction milestones from firt tab to successfully getting a change in charge on a balloon. All participants succeeded in getting a change in charge, but the amount of time it took them to do that varues greatly and tells us how the sim worked or didn't work for different users.

A few Quotes

Navigational strategies

P1: "I generally use the arrow keys to navigate line by line."
P8 (paraphrased for brevity) "I'm new to this site, so I am first going to go through everything with the down arrow [...] I'm repeating stuff to make sure I didn't miss anything. [...] Now, I'm going to do a Tab through."

Engagement with science

P3: [with 2 negatively charged balloons on the Sweater] "I want to see what happens if I put one balloon on top of the other." [second Balloon repels and moves to the bottom of the sweater.] "What will happen if I do the same thing on the Wall?"
P5: [After first rubbing Balloon on Sweater] "Hmmm...I got a lot more charges than I had before."

Findings: Challenges

Findings: What Worked Well

In Conclusions

  • Created accessible design features
  • Tested the features with 12 users
  • We found: descriptions within a robust Parallel DOM made the sim fully perceivable & operable;
    • however, some descriptions were difficult to understand for some users.
  • All participants accessed the sim descriptions, took action using the keyboard, & interacted with the Balloon.
  • Four participants demonstrated agency by engaging in unprompted, self-directed exploration which resulted in learning.
  • We believe this indicates that the approach we are taking is a good one.

Acknowledgements & Future Work

A big thanks to:

  • Jesse Greenberg, PhET Software Developer, for implementation & design insights
  • Our super enthusiastic participants
  • Shannon Fraser & Sambhavi Chandrashekar for assistance with interviews
  • Memorial University & CITL Media Services for video equipment
  • Inclusive Design Research Centre (Vera Roberts & Bert Shire) for space & video equipment

Funding for this work

  • provided in part by the National Science Foundation (DRL#1503439), the University of Colorado Boulder, & the William and Flora Hewlett Foundation.

Future Work

  • Evaluate latest prototype with users
  • Investigate where sonification can augment or support description
  • Apply our description framework to other sims

More information: phet.colorado.edu/en/accessibility

Taliesin L. Smith: [email protected]

References

← →

/