Tactile Schematics – Design

Close up of hands exploring a tactile schematic of a continuity tester.

Tactile Schematics

Context

Problem

Schematics are drawings of the relationships between components in an electronic device and are used to build circuits. While sighted learners rely on schematic images to understand how electronics work, Blind and Low Vision learners rely on circuit descriptions.

A circuit description can be read through a screen reader to understand circuits auditorily.

→ Go to transcript

LED Resistor Regulator in Series schematic
The schematic the circuit description was describing.

It’s difficult to understand a circuit from a description, especially if you’re a beginner. Electronics beginners can benefit from the spatial information schematics provide and learn the relationships of the components through touch. No tactile graphical representation had yet been able to compete with circuit descriptions.

Summary

I designed a set of standards and best practices for designing tactile schematics for non-visual circuit building, along with a free library of completed tactile schematics for download. The library of designed tactile schematics has been published as a resource in NYU ITP’s Physical Computing curriculum, accessed over 1,800 times, and used in two NYU Blind Arduino workshops.

Academic Advisors: Dr. Amy Hurst, Tom Igoe

Industry Advisors: Dr. Joshua Miele, Chancey Fleet

Platform: Tactile Graphics SVG, Responsive Web

Timeframe: Q4 2018 – Q2 2019

Constraints: I was completely new to tactile design, dealing with a steep learning curve while keeping up with a Blind student’s class progression.

Role: As Lead Accessibility Designer, I was responsible for preventing ableism through research, prototyping and evaluating, iterating and creating final designs, and developing tactile design guidelines.

Research prevents embedding ableism into our designs.

Educational Tools

  1. Verbal descriptions: these support auditory learning but exclude those those who learn through touch.
  2. Braille translations: braille supports those who learn through reading/writing learning, but not those who learn spatially.
  3. Blind Arduino workshops: Blind-developed and led workshops help those who benefit from constructivist learning, but they weren’t integrating tactile schematics up until this point.
  4. Tactile graphics: 2.5D graphics support those who learn through touch but had not yet been applied to electronics diagrams.

Educational Resources

  1. Blind Arduino Project develops and shares techniques for learners to build electronics projects nonvisually. Our work sought to support tactile learners in these workshops.
  2. Andrew Heiskell Braille and Talking Book Library hosts Arduino workshops with the Dimensions program, using tactile methods to learn hardware and software. No tactile schematics were being used at the time of this project.
  3. Smith Kettlewell Technical File was a publication for Blind or Low Vision electronics enthusiasts and used standardized verbal circuit descriptions instead of diagrams. The file was heavily geared towards experienced practitioners rather than beginners.

Persona Development

Persona diagram of persona 1, Jo. Long description in link below.

→ Long description of persona 1

Persona diagram of persona 2, Eric. Long description in link below.

→ Long description of persona 2

Persona diagram of persona 3, Amanda. Long description in link below.

→ Long description of persona 3

Experience Map

Experience map of a user interacting with tactile schematics.
Timeframe Homework is assigned Homework is started Homework is unfinished Homework is overdue
Activities Opens class site and finds the lab is due Can’t understand the circuit description Has to keep replaying the circuit description Gives up and moves on to the remaining content
Touch Points Phone/laptop Phone/laptop Phone/laptop Phone/laptop
Emotion Line Optimistic Curious Frustrated Hopeless
Pain Points Needs to keep up with the demanding course load Has limited resources for understanding circuits Circuit descriptions are hard for beginners Feels like none of the options are for him
Ideas for Improvement Add other learning style resources to class site Link from class lab to resources presented in another format Schematics are converted to tactile schematics as SVGs Have resources available ahead of the lab due date

User Journey

Going from Auditory to Touch

It’s hard to understand a circuit from a description, especially if you’re a beginner.

Electronics beginners can benefit from the spatial information schematics provide and learn the relationships of the components through touch.

Close up of hands tapping a schematic on an iPhone.
Eric opens up the Physical Computing site on his phone to see what homework is due. He uses his screen reader to navigate to the lab and listens to the circuit description of how the Arduino should be set up.
Hands tracing the shape of a circuit on a desktop.
He listens to the circuit descriptions, while tracing the outline of its spacial arrangement with his finger on the table. He plays it over and over again to understand.
Hands tapping a smartphone screen and downloading a file.
He continues listening and hears that there is also a tactile schematic available for download. He tabs over to the link to download an SVG of the schematic.
Swell Touch Paper being fed through a Swell Form Machine.
He prints the schematic on Swell Touch Paper and runs through a Swell Form Machine. The black Braille and outlines of the schematic puff up.

Hands exploring a tactile schematic.
He feels the raised surfaces and builds a mental model. He gets his Arduino out and hooks it up, periodically reaching over and double checking with the tactile schematic to make sure he has the right pin connections.

Finger pressing a button on a breadboard with a piezo.
The piezo buzzes when he presses the button which means the circuit works.

Prototyping & Iterating

Learning Tactile Graphic Production

Close up of Swell Form Machine dial set to Medium.
Test printing helps determine the best heat setting for the paper and tactile graphics fuser you’re using. I used the P.I.A.F. model for this project.
Manual feed tray in a color laser printer ejected and loaded with Swell Touch Paper.
I loaded the paper so that it prints on the sticky, coated side of the paper
Swell Touch Paper being fed through a Swell Form Machine.
I inserted the paper following the direction of the arrow. The carbon in the black ink reacts to the heat and puffs up to create a tactile graphic.

Design Iterations

Original Schematic

  • The overall graphic is tiny
  • There’s text and no braille
  • Some of the lines are gray so they won’t puff up in the fuser, which makes the lines feel broken
  • There’s no way to tell how to hold the page
  • The symbols are small and too close together
Original analog in circuit as displayed on the NYU website, not optimized for tactile perception
Original file: Analog In as downloaded from the Physical Computing site

Version 1

  • I tried portrait orientation but it ended. up being much too cluttered
  • I chose a gray for the text, but learned that the contrast ratio is 3.03:1, which is not accessible
  • The braille plus sign I used was incorrect
  • The size of the components aren’t yet optimized using iterative design
1st iteration of analog in tactile schematic with the key on the same page and poorly designed schematic symbols
Version 1: First iteration of Analog In

Printing out any image and making it tactile does not make it readable. It needs design work.

Usability Testing

Recruiting

I recruited 5 Blind and Low Vision participants through my professional network. They represented a range in learning style, finger variables (sensitivity and size), electronics experience, Braille literacy, and visual acuity.

Hands touching common component symbols and reading the Braille label to the right of it.

Procedure

I conducted my research through NYU’s Institutional Review Board. I presented participants with tactile versions of the six schematics crucial to understanding Physical Computing. I gave informed consent before recording our sessions. I used a series of tasks, asking participants to identify specific electronics components, and explain the schematic in their own words.

Hands exploring the schematic of an LED, Resistor, Regulator in Series during a usability test.

Key Questions

  1. What is title of the schematic?
  2. What kind of resistor is depicted?
  3. How many LED’s are shown?
  4. How would you explain the schematic back to me in your own words?
  5. Which is more clear to you? Which do you prefer, the circuit descriptions or the tactile schematics?

Refining Final Designs

Optimizing for Tactile Discernibility

  • I rotated the layout to avoid clutter
  • I changed the text color to a 10:01 color contrast ratio, but still won’t puff up on the fuser
  • I corrected the Braille plus sign
  • I optimized the symbols with user feedback
  • I followed conventions for the orientation slash mark, giving it a triple slash and placing it in the upper right-hand corner
11th iteration of Analog In tactile schematic with braille, high contrast text labeling, and optimized symbol sizing
Version 11: final iteration of Analog In

Usability Demo

Demo of hands exploring Analog In before and after the standards & best practices were applied

→ Go to video transcript

Outcomes

Press & Exhibitions

IEEE Spectrum
China Daily Hong Kong
ASSETS 2019 Poster
CHI 2020 Poster
Dubai Design Week 2019
NYC Media Lab Annual Summit
ITP Spring Show 2019

Conference Publications

ACM SIGACCESS:
Designing Tactile Schematics: Improving Electronic Circuit Accessibility

ACM SIGCHI:
Designing Educational Materials for a Blind Arduino Workshop

ACM SIGACCESS:
Putting Tools in Hands: Designing Curriculum for a Nonvisual Soldering Workshop.

Published in NYU ITP’s curriculum

NYU now has an accessible digital library of accessible tactile schematics for nonvisual learners. The schematics were published as a resource in ITP’s electronics curriculum.

Published at 3 academic conferences

We published 3 individual papers, first on tactile schematics design, then on their evaluation, and third on their implementation in nonvisual workshops.

Used in nonvisual electronics workshops

In March of 2020, we used the tactile schematics as a learning tool in Blind-led nonvisual soldering workshop taught by Dr. Joshua Miele at ITP. They were used to construct a continuity tester.

Six attendees sit at a long conference table at a blind soldering workshop, set up with individual soldering stations that include soldering mats, fans, helping hands, tools, a tactile schematic, and soldering irons. In the foreground, Josh Miele hands a circuit board to an attendee.
We implemented the final designs in a Blind-led nonvisual soldering workshop
A tactile schematic of a continuity tester with alligator clips, a wire cutter, forceps, and the finished project laying around its perimeter.
Attendees used a tactile schematic to build a continuity tester

Disseminated by Blind and Low Vision makers

We shared the library of 50+ tactile schematics to our network on Twitter and were accessed over 1,800 times. Blind and Low Vision makers told us they were downloading the schematics and using them to assemble circuits.

Conclusions

There is no universal solution

We still need to do more research to determine if these are as effective as circuit descriptions and evaluate combining the two modalities.

Tactile graphic evaluation changes with each use case

How do we evaluate tactile graphic readability given the variability of usage? Because their effectiveness isn’t universal, I would always have to tailor them to the audience I’m designing them for. For example, one user might prefer Braille, one might prefer high contrast ratio text.

We need more non-visual circuit building workflows

Can tactile schematics go beyond understanding how a circuit works to actually hooking one up? This is the beginning stage of much larger scope of work to see if we can develop a non-visual workflow for building circuits.

Tactile Schematics for ITP’s Physical Computing Course

Download Schematics
Overhead view of a tactile schematic of a piezo, resistor in series. There is a braille label at the top, a page-orientation slash in the upper right-hand corner, and a schematic of an Arduino hooked up to a resistor, piezo buzzer, and ground.
Printed tactile schematic from the Physical Computing library

Style Guide

Download Non-visual Guide
Download Visual Guide
Page from the style guide that shows how to improve line consistency for tactile discernibility