Tactile Design for Accessibility | Accessibility NYC Meetup Recap

LAUREN: So hello. My name is Lauren Race. I'm with the NYU Ability Project. So the a11y meetup was a really supportive community to me when I was in grad school, so I'm so excited to be here and I'm really glad you're here tonight.Tonight I'm gonna talk a little bit about tactile design for accessibility, and for accessibility purposes, I'll be describing the images on the screen as needed.

A little bit about myself. I have a BFA from Pratt Institute in communications design with a minor in art history. So I have a formal art and design background. And while I was at Pratt, I learned one type of design, which was visual design.

So that could be typography, it could be color theory, light, composition, and as you can imagine, visual design has a lot of challenges with accessibility. So I applied these principles for ten years in ad tech as an art director, where I developed interactive experiences that told stories about brands. So I worked at an old ad agency called BPDO, a more modern place called Razorfish, some freelance stints, but at those places I was really focusing on the brands and their stories.

But as I got more into the tech side of things, I got more interested in what people would use, versus what people would buy. So I shifted my focus from the brand to the user. And I knew grad school was a good way to go about that. So I applied to NYU ITP.

It stands for interactive telecommunications program. It's a weird name, weird little program, but I describe it as a creative tech program that focuses on the intersection of technology and art. So while I was there, I took an accessibility design class, and I got completely hooked, and focused on that for the rest of my time in grad school. While I was there, I was introduced to non-visual design, which got me extremely excited as a visual designer, because it felt like a great way to build on this visual design background that I had.

And I also discovered the practice of designing with someone, rather than designing for someone. Because for the larger part of my career, I was just making something for someone that I thought they wanted. So now I have a fellowship at the NYU Ability Project. The NYU Ability Project is an interdisciplinary research space focusing on disability and technology.

But my research is at the intersection of accessibility and design. So I'm gonna run this workshop in two sections. I'm gonna speak for about 20 minutes, about tactile design. And then we're gonna have a little over an hour to go off and make our own tactile graphics, which you're welcome to take home with you tonight.

I'm gonna start with a general overview of inclusive design. And then talk about tactile graphics as an inclusive design tool. So how and why we use them. Then I'm gonna share a use case from the NYU Ability Project from our research last year, as well as standards and best practices for tactile design, and then we're gonna go off and make our own.

So first I'm gonna do a recap of what I want to tell you in this talk. The four main takeaways I want you to walk away with tonight. First is inclusive design. Which is the methodology that enables and draws on the full range of human diversity.

Then underneath that is the practice of tactile design, which is a practice that focuses on the sense of touch. And then two examples of tactile design are tactile graphics, which are transformed representation of images that are adapted for the sense of touch. And then our use case, my use case, which is tactile schematics, which are visual schematics that are converted to tactile ones using raised surfaces, so they can be touched. First I'm gonna do a quick review of inclusive design.

So inclusive design is a methodology that enables and draws on the full range of human diversity. So essentially it's extending design benefits across a spectrum of needs. So if we think of someone who is unable to use their left arm, for some reason, whether that's permanent or temporary or situational, by considering all of those users' needs, it often makes the product more accessible for everyone. And so when I think about a persona for design, I know in experience design we often talk about personas, I don't think of it so much as an archetype so much as a spectrum.

So the images on this slide show a person with an amputated left arm, a left arm in a cast, and a left arm holding a baby. So if inclusive design is the process, then accessibility is the outcome. And accessibility is the practice of ensuring that products can be used by a diverse range of abilities. That could be cognitive, sensory, mobility, speech, and situational.

And if you want to read more about that, I find NYU's digital accessibility website a fantastic resource, and I'll provide that link at the end of the talk as well. So when we talk about disability, we approach it with two models. There's the medical model for disability and then there's the social model for disability. The medical model is that the person should be changed by medical treatments.

And the social model is that society should be changed by removing the barriers for that person. And so when we talk about inclusive design, we use the social model for disability, because it's about designing our world to include everyone. So a good example of that is the stair example. So with the medical model, I would say: I want you to climb the stairs.

And with the social model, I would say: I have other options to get you to the next floor. And tactile graphics are a really excellent collaborative tool for inclusive design. So tactile graphics communicate the same information that a sighted person would receive from looking at an image using tactile raised surfaces. They're a learning material option for blind and low vision learners, or even tactile learners.

And it's often in educational settings. But for tactile learners in industry settings, that could mean sighted designers could touch their designs. You can make your low fidelity prototype tactile. Oftentimes when we talk about visual design we talk about 2D design, but 2.5D design opens up a whole new world of design possibilities.

The image on this side shows hands exploring the relationship of the earth and the moon with an embossed surface and Braille labels. So when do we make them? First, when the object is unavailable, like the stars. When the object is too small.

Like an insect. When the object is too large. A tree. When it's difficult to explain, like the phenomenon of a rainbow.

It cannot be touched, like a snowflake that would melt, or maybe a poisonous snake. Or the size relationship needs describing, like an elephant versus a man. And there's also a long history of DIY tactile graphics. So you can use customized paper collaging, you can use felt and hot glue.

Oftentimes people will use WikiSticks, or you can use found objects. But the problem with these is that they're singular graphics that are really hard to reproduce. There's only one of them. Right?

And the images on this slide show a handmade collage of a lake, a sun, a felt book of two flowers, and pots next to a glue gun, and tree planted in grass with roots using stick leaves and astroturf and straws. But the good news is: There are three other ways in which you can reproduce them. The first way is embossing. Which is great.

But it's a dot matrix. So you lose a lot of data. And it's also too low contrast for low vision learners, but it is ideal for Braille. The image on this slide shows hands touching an embossed graphic of moon cycles, where the Braille labels are high resolution and very readable, but the moon phases are really low resolution.

There's vacuum forming, which requires expensive equipment, and the image shows a vacuum formed graphic of a rabbit and a frog with its accompanying mold. And then there's microcapsule printing, which uses a fuser, black ink, and microcapsule paper. I use this technique, because it's reproducible, and it's high contrast for low vision learners. The image on this slide shows a microcapsule graphic of a house and an apple tree.

So our chosen method for microcapsule printing. You use microcapsule paper, a fuser, and some form of carbon. The fuser produces heat that makes carbon on the paper puff up. And carbon -- you can do Sharpies and pencils, which we have.

There's carbon in pencil lead and in the black ink of Sharpies, but you can also use an ink jet or laser printer. The images on this side show microcapsule paper, a black fuser with a tactile graphic coming out of it, and a rock of carbon. In terms of user flow, step one would be to add ink to the microcapsule paper. The image shows designers using pencils and Sharpies to draw on microcapsule paper.

Step two would be to heat the fuser to medium. And the image shows a close-up of a fuser dial set to medium. The machine takes a couple minutes to warm up. These are currently on and chugging away.

But you can always increase or decrease the temperature later. Sometimes when you heat the paper too much it gets a busy... It gets kind of textured and feels like a busy background for a tactile learner. So it's just something to be aware of.

Also, if sometimes the heater is too hot, the areas that have carbon in them will start to bubble. And that's not really an ideal situation, because it just feels busy. The only way to mitigate that is to test print, test print, test print. Every brand of fuser and every brand of microcapsule paper is different and they have different relationships with each other.

I have a really special relationship with the blue fuser, because I know how it works, I know how temperamental it is, to the point where after ten graphics I know it's time to let it cool down. So you'll get to know your fuser the more you use it. But again, test print. So we just talked about tactile graphics.

And now we're gonna talk about tactile schematics. Which is a use case for tactile graphics. So I use tactile graphics to design what I call tactile schematics for my graduate thesis in partnership with the NYU Ability Project. The goal was to create educational materials that provide greater access within maker culture.

So the idea was to take schematics, the drawings of the relationships between components in an electronic device, and make them tactile. Schematics are used to build circuits. Circuit examples could be a basic flashlight, to the complexity of these laptops. The image on this slide is an example of a schematic of an LED resistor regulator in series.

The video on this slide, which would play if it was in presenter mode... I don't think it'll play... Shows hands exploring the schematic from the previous slide that has been redesigned to be tactile. So I went through 11 iterations to produce a readable tactile schematic.

Oftentimes when we talk about design, we talk about iteration. When we iterate, we design, we prototype, we evaluate, and then we repeat it as many times as necessary to get something that's usable. And tactile graphics are a really great way to iterate during the inclusive design process. In my case, it was between blind designers and sighted designers.

So I partnered with blind designers to get feedback. Some of my designers were Chancey Fleet from the Talking Book Library, Tom Eygo, a co- founder of Arduino, and Amy Hearst, the co-director of the NYU Ability Project. I also reached out to non-visual learners who wanted to understand schematics. The image on this slide shows a circular diagram of the iterative design process.

So I use tactile graphics as a tool for prototyping and for the final piece of my designs, and I iterated on them before producing my final. Now I'm gonna show a demo video of hands exploring another schematic that hadn't been redesigned. Let's see if this works.

Label at the top. Looks like some smudged... LED. Resistor crossover.

And there's a line leading to text. There's definitely... Definitely a resistor. Leading to ground.

But the lead is broken there. So the print didn't make it all the way through.

LAUREN: Okay. So there's some problems with this one. We're gonna debrief it real fast, if I can get to the next slide. Hold on.

Okay. All right. So it's tiny. There's no Braille.

All of the elements are way too close together for tactile discernability, and some of the lines in that graphic are actually gray. Which -- that means there's not enough carbon in them to pop up and swell, so it feels like the line is broken. Now I'm gonna show a demo with hands exploring the 11th iteration of this same schematic.

Here's a label up top. Analog in. Voltage in. It says plus V. And goes into a variable resistor.

Which is a resistor sign with a squiggle line through it. Then this line goes into... It says input to microcontroller. And it also continues down to a resistor.

And into ground.

LAUREN: All right. So some fixes from the iterations. Shown here in this version. We're translating the text to Braille.

Including a high color contrast ratio text that won't puff up in the fuser but still is really good for low vision and sighted users. So it translates the Braille for them. Component symbols with optimal sizing. And also a slash in the upper right hand corner so you know how to hold the page.

You can download all 50 of the schematics for free at tactileschematics.com, and you can also download a free workflow and style guide with templates so you can make your own. You don't have to make schematics. You can just use the templates to make your own tactile graphic. And if you want to read more about our research, the site has a link to the academic paper I presented at Assets, an accessibility conference this October.

So how do we unpack all of that for what we're gonna be designing tonight? I'm gonna leave it super open for you. You can design whatever you want with Sharpies and pencils. But we're just gonna go over some standards.

After all the research that I did, I was able to put together my own set of design standards and best practices. For tonight, I want you to consider four of them. For tactile discernability. And what I did build on existing standards...

So if you want to learn more, I love the Braille Authority of North America's standards. It's really dense, but awesome. Or Polly Edmond has a fantastic book on it. I'll provide these at the end of the presentation, but they're two fantastic resources.

One is you put a slash in the upper right hand corner for page orientation. Triple slash. Another work around is you can snip the upper right hand corner page off with a pair of scissors. I don't know if you've ever noticed this, but your Metrocard has the upper right hand corner missing on it, so someone can feel it when they're swiping it through the machine.

Also, one graphic per page. You take up as much of the page as possible. The smaller your graphic is, the more you lose detail. So the image on this slide shows small ducks on one page with an X through it, and the second image shows one large duck on the other page with a green check mark.

Hollow is more discernible than solid. An outline is easier to build a mental image of than a blob. The first image shows a solid image of a duck with an X through it, and the second shows the outline of a duck with a green check mark. And you put about a quarter inch breathing room between all of your elements, and this helps to delineate between elements of your design.

The first image shows a duck with the waterline right on its stomach with an X through it, and the second shows a duck with the waterline moved slightly away from its stomach with the green check mark next to it. I'll bring these standards up again when you guys are designing them, but first I want to come full circle and do a recap of the four main takeaways of the talk. First, inclusive design, which is our methodology, that draws on the full range of human diversity, and underneath that is tactile design, which is a process that focuses on the sense of touch, and the two examples of that, tactile graphics, transformed representations of images that are adapted for the sense of touch, and tactile schematics, which is my use case, visual schematics, converted to tactile ones, creating raised images that can be read by touch.

And here are some helpful resources for tactile design, if you want to learn more. I also, if you're interested, have an intro to accessibility 1 pager. If anyone is interested in having a bunch of resources at their fingertips. Shoot me an email, which will be on the next slide, and I will send it to you.

Thank you so much to my advisors, Chancey Fleet, from the Heiskell Talking Book Library, thank you to Tom, and thank you to Amy, the director of the NYU Ability Project. Thank you! And now we're gonna design our own, and I'll come around with questions too. Yes?

The mic for questions? Sure. Yeah, sure. It is Lauren.Race -- R-A-C-E, like a car -- @nyu.edu.

Now I'm gonna pass around some paper. And I'm gonna ask you guys when you're done... Joseph is gonna come around and I want you to describe your final design, so people at home can know what you've made.

For the next 15 to 30 minutes, while we do the workshop portion, we're gonna shut off the live stream so people don't have to watch us playing around for 30 minutes. All right. So they're gonna see us draw?

LAUREN: That's cool. That's cool.

And once we've finished with the actual workshop portion of making our designs, then Lauren is gonna ask a few of you, whoever wants to, to share what you drew and discuss the process of making it, and we'll wrap up for the night. All right? (People make their designs)

We're gonna get some descriptions now. Those waiting in line, please wait quietly and listen to descriptions.

Hi. I'm Kimmy, and I just drew an African mask.

Can you describe some of the elements of the mask?

Not really. (laughter)

I looked on Google and copied something. It has eyes. Oval shaped face. Eyes, mouth, and some motifs of...

I'm guessing earth and life and land and stuff like that. I think it's a female's face, a woman's face.

So maybe when you're describing your piece, start with the size of it and then talk about the composition of it. When you're describing it. Talk about the size of it first and then the composition.

Okay. Over here. (applause)

So I did the chemical structure of vitamin C. And it takes up... Where is it? Oh.

Hello. Oh, lovely. Chemical structure of vitamin C. And it's a fairly small molecule and I made it take up as much of the page as possible.

And I used the regular uppercase letters, per advice, rather than trying to do Braille. And I tried to make sure to space out things like the double bonds, so it would be clear that it's not just a thicker bond. Especially in contrast to whatever in the world the triangle-y thing is that sticks off of one corner, and then the sort of Wi-Fi-like thing that comes off of the triangle thing. I wanted to make sure it felt different.

I obviously don't remember my chemistry as well as I could have otherwise. But yeah. So I tried to make everything as distinct and broad and thick and simple, but clear, as possible.

All right. Who's up next?

So I drew a sun. And I have a microphone voice. So my sun has a happy face and a lot of rays. I figured that would be easy to describe if I was put on the spot.

And I put the words also letters... I also put... What are the other letters called? The traceable text.

I gave up on the Braille part, because I really couldn't figure those dots out. And then I tried to put the orientation on the page as well. (applause)

All right. Next up?

So... Hi, everybody. I'm Susie. Hey!

And so what I did was I did the constellation for Pisces. I really thought it would look more like a fish. Clearly I don't know much about constellations. I was just thinking...

Big dipper looks kind of... Anyways. And then I tried to use that traceable text on top. I don't know if it's really accurate.

It has 16 or 18 of those dots. Looks a little bit like an acute angle, less than 90 degrees, and I did Pisces, because that's my sign, but I don't really know more than that about Pisces. (applause)

Who's next? Who wants to describe? You?

Mine is pretty simple to describe. I made a builder hat. Because that is the logo of the company that I work for. Which in itself was just outlines, but it was an interesting exercise in thinking about...

I don't think when this was designed they thought about... Oh, this would actually be pretty easy or simple to do with outlines. But because he wanted to make it sort of simple, it was just lines, and that was actually really nice to discover. Although I butchered it a little bit.

But that's it. (applause)

Hi. So I have a graphic organizer. For an opinion essay, and it's meant to be used in K-5 classes. So it's three boxes, each of the boxes is labeled "detail", so detail, detail, detail.

And they lead to the box for opinion. That's it.

How about from this table?

Hello. My name is Snow. So it's kind of a mess here. I was trying two different types of...

Oh. I was trying two different types of design. The first one is kind of like a trace out of my hand. Where it's different patterns where the finger tip is.

I was trying to see if that can be a guide for people to place their fingers. Because sometimes in museums or whatever situation, you need to put your fingers on machines. And the second one was cubes. I was interested in how to represent the depths of space with this.

Because of the limitation of having to use black lines... I was just curious what kind of creative freedom can we get out of this. So I was drawing a cube for the face that's closer to where human eyes are. I give a thicker line and more layers with Sharpie.

So it's more... It pops out more prominently on the paper. And for what's supposedly further away from the human eye... I just used pencil and just one layer.

So it's less popped out on the paper. It came out okay.

Someone at our table is in the museum space. So this is a famous painting by Rene Magritte. I tried to do the apple in front of the man's face. He's wearing a hat.

And I also did the text really, really big, so maybe you can read it. I wasn't sure if the Braille would come out above each line, so I made the lines a really big space and did what you said. Nothing touches. The lines don't touch.

So hopefully someone who has a vision impairment can appreciate this painting in a museum.

Who wants to talk about their design? I'm gonna hold the mic for you.

I'm Antonio. And what I have here... The camera is there, right? Okay.

So I have a rectangle. Around the border of the page. A cross in the middle of the page. They're all squiggly lines.

And in the middle of the piece, there are a lot of different lines at an angle. So I tried to connect each corner by a line. And then go from there. And around each sort of top, bottom, left, and right are also semicircular lines inside of the rectangle, almost like a basketball field.

Sort of thing.

Thank you. Awesome. Yeah, it does. It really does.

Can you say that again?

It looks like a pyramid on the top of it. It's a very good figure, actually. Proper depth.

Do you want to talk about your Keith Haring? Just kidding. Anyone else?

Hi. I'm Radika, and what I have drawn here is to show vision disability, which is... Like an eyeball, and then it has a stroke on it. So people who have vision disability...

And I used the strokes and the way it has printed is it has... The carbon is showing in the same way that I drew the strokes. So that is what I'm trying to show here.

I'm Rebecca. I drew a roller coaster. I work with kids with cerebral palsy, so I figured this would be something they never experienced. So I drew it out.

We have time for two more. Yeah?

I'm Kevin. But I wouldn't know what to you call this. Maybe I'll call it a word maze or something. Camera.

And I just started writing and I came to the conclusion that none of these words have a relation towards anything. So start off with... What do you love? Bananas?

Family? Isolation? Imperfections? Tolerance?

Aggression? Paul Rudd? Ignorance? Torpidness?

Martin Scorcese? And at the end it says regardless of what you love, I hope it directs your life. I kind of wanted it to be lost and confused and... Oh, wait.

It doesn't really matter. Because I love what I love. And that's it.

My name is Matt, and this is Andrew. We partnered up together. And what we did was we took on as a challenge to try to do data visualization within the context of a tactile graphic. And what we came up with was a treasure hunt.

And so the idea is that the player could know that the game would be to start by sitting on a rock, follow a path, but the key points in the path would be visual landmarks. So the first visual landmark is a tree. Then at the tree, you change your direction, and follow a path... If we had had more time, there would have been other paths that could have been followed.

But weren't. But at the tree you would reverse the direction, and follow the direction from the path. Then when you reach a lake, follow it around the lake, until you get to flowers. And then the user...

The player would recognize on one side there's a lake and on the other side there's flowers. They would pass through the flowers. And ultimately get to the treasure. So that all...

The whole game and all the clues would be done through visual representations, rather than intentionally not use any words, not use any language, but do it all with symbolic language.

Thank you. So I'm gonna go last. So I did the accessibility New York City meetup logo. And I managed to get the Braille actually tactile, which is awesome.

Oops, sorry. Awesome. So... For those who can't see the visual of it, it is a stylized kind of design like the Empire State Building, and it has a11ynyc in the main body of the building.

I confess I didn't do the entire Braille by memory, because I forgot the starting delineation, but I got it more or less kind of there. Huge thank you. That was an awesome presentation and that was such a fun and successful activity. Thank you so much for bringing this.

(applause)