pcomp: out of soap

i wrote in a previous post about a sensor/light system that lets you know when you’re running low on something. the code was straightforward! i just smushed together the last sensor testing lab with arduino’s built-in “blink” program. i don’t really understand why i have to map the sensor to the 0-255 range, but other than that i think the program will function as needed if i just build some physical cues around the circuit.

"out of soap" circuit
“out of soap” circuit


pcomp: sensor application

below is the analog input lab from last week’s class.

sensor testing

i’ve been thinking a lot about how sensors could be helpful in collective living situations. i want to make a thing that would let you know when you’re running low on things like soap, rice, etc. it would attach to the bottom of the dispenser/jar/whatever, and when the analog input was between certain numbers, a yellow light would light up and then a red light would light up. it’s basically a scale with a light system connected to it.

the problem is that you’d have to keep the program running all the time, which is a goofy use of electricity. but maybe it could turn on when the room lights turn on (or some other cue), check analog input, light up if it needs to, and shut off if it doesn’t need to.

pcomp: whole foods checkout line

prompt: Pick a piece of interactive technology in public, used by multiple people. Write down your assumptions as to how it’s used, and describe the context in which it’s being used. Watch people use it, preferably without them knowing they’re being observed. Take notes on how they use it, what they do differently, what appear to be the difficulties, what appear to be the easiest parts. Record what takes the longest, what takes the least amount of time, and how long the whole transaction takes. Consider how the readings from Norman and Crawford reflect on what you see.

i went to union square whole foods on the way to the g line around 6:30pm. i got into an “11 items or fewer” checkout line at 6:50 and was at a register by 7:00. there are four or five lanes in this checkout section, and the section was completely packed when i arrived at the back of the far left lane.

the checkout line is managed by a brilliant system of screens, numbers, and colors. each lane aligns with a screen that has its own background color, so the far left lane aligns with a red rectangle on the screen, the next lane in aligns with a blue rectangle that’s just in from the red rectangle, etc.

checkout line system

beyond these screens, there is a corresponding system of cashiers with lit numbers above their stations. when a cashier is available, they push a button (i think, but have not confirmed), the lit number above their station flashes, and the number of their station appears in a colored box that aligns with a checkout lane. in this illustration, cashier 3 is available. the person waiting in the lane aligned with the blue rectangle goes to cashier 3, assisted by the blinking light above that cashier station. for the people waiting in line, the lanes are called from left to right—so after the blue lane goes, the next number appears in the green rectangle, the next appears in the yellow rectangle, etc.

i calculated that it took a little over a minute for the numbers to cycle through. five people every minute means that in the ten minutes i waited in line, whole foods checked out about 50 people. mileage may vary for non-express lanes, but this is still way impressive.

i admit that i have not always loved the union square whole foods checkout system as much as i do now. the first time i went, i didn’t see the overhead screens and didn’t know when to go to the cashier or which cashier to go to. the numbers cycled through several times before i caught on.

i’ve easily spent 10 minutes waiting in line at home depot behind 5 people, and self checkout lines there take longer. i think this is a combination of bulkier merchandise that’s more complicated to ring up, fewer cashiers, and the fact that self checkout systems are universally terrible.

side note: cool nerdy article!

A Long Line for a Shorter Wait at the Supermarket – New York Times

pcomp: takeaways from donald norman

visibility. an excess of visibility (overly complicated gadget-y things) is as problematic for the user as a dearth of visibility (poorly labeled doors, salt and pepper shakers with no visible distinction).

affordances, constraints, mappings.

affordances, constraints, mappings

visual cues and good conceptual models are essential for good design.

pcomp: digital input and output lab

UPDATE: i went to tom’s office hours and managed to get the circuits in this lab running correctly. we lit one LED, then the other, set delays, and reversed the order in which they lit up.

we talked about how the circuit (below) is really three separate, smaller circuits. we can test each one individually to see if they’re wired correctly before we connect the whole thing to power. this almost feels like, in icm, calling a single function with everything else commented out (ceteris paribus, to get econ-y about it) before running a multi-function program all at once.

digital in/out

we talked about voltage flows (high [+] to low [- or ground], always) and how, when the power source is the arduino, pushing the switch to complete the circuit won’t work. when the arduino is the intermediary, we have to tell the arduino to complete the circuit; it’s no longer a purely mechanical process like it would be if the power source was a battery. the arduino is reading what’s happening to the flow of current and reporting back to the computer that we interface with.

we talked about how parallel circuits are like ‘or’ statements and series circuits are like ‘and’ statements. why? in a parallel circuit, voltage can flow through one resistor/to one output ‘or’ another ‘or’ another; they don’t all have to receive voltage for one to receive voltage. in a series circuit, the same voltage is flowing through the different components of the whole circuit. if one part of a series circuit is not complete for some reason, the last output does not receive power.

pcomp: make a switch

things i’m finding difficult: 

circuits! pluses and minuses! reading schematic diagrams! i went to a pcomp help session, but the pluses and minuses and zigzags (diodes?) just float around in my brain. everything clicks a little more when i can start moving components around on the board. i worry about putting something in the wrong place and blowing out my LEDs/circuit board/laptop, though.

things i found super cool:

trying to turn an old apple mouse into a switch! obviously, the broken mouse was not functioning in quite the way apple intended it to when i turned it into an LED switch, but the mouse-switch is actually a very basic version of its fancier self. it was exciting to see and feel how apple—or, really, whoever invented the mouse—packed so much processing capacity into a thing and made it “legible” to us by designing it for the human hand. put another way: when i pulled apart the mouse, i didn’t know what i was looking at. if the circuit alone had been connected to a computer, naked and without its mouse clothes, i wouldn’t intuitively have known how to rig the circuit to communicate with the cursor. but i do know what to do when the circuit is wrapped in an orb that i can move around my desktop and tap with my finger. so that was exciting, and it made me think more about the potential for well-designed switch interfaces to enable other body parts to talk to devices.

test, test
test, test
9v converterwith black == ground (-) and red == 5v (+)
9v converter with black == ground (-) and red == 5v (+)
power running through the entire breadboard and LED lit
power running through the entire breadboard and LED lit
power running through half the breadboard and LED lit
power running through half the breadboard and LED lit
a very fancy apple mouse

icm: static screen sketch

prompt: Create your own static screen drawing: self-portrait, alien, monster, etc. Use only 2D primitive shapes—arc()curve()ellipse()line()point(),quad()rect()triangle()and basic color functions—background(),colorMode()fill()noFill()noStroke()stroke()Remember to use createCanvas() to specify the dimensions of your window.

cyberduck duck portrait

duck sketch code

sliding bar

sliding bars

pcomp: what is interaction?

prompt: After this class’ discussion and exercise, and reading Chris Crawford’s definition and Bret Victor’s rant, how would you define physical interaction? What makes for good physical interaction? Are there works from others that you would say are good examples of digital technology that are not interactive?

interactivity is a dialogue. chris crawford says in the art of interactive design that interaction is not graphic design or watching a movie or reading a book or alking to a brick wall. this feels narrow to me in a way that bret victor starts to open up in his brief rant on the future of interaction design.

crawford’s visions of the future might look like the pictures under glass that victor critiques for being flat, literally and metaphorically. victor valorizes the hammer for extending the capability of the human hand. crawford probably wouldn’t consider hammering a nail to be interactive.

the nail isn’t hammering back because that’s not what nails do, but it is in dialogue with the hammer. crawford only reads interactivity as a dialogue where both parties are speaking the same language. this flattens reality and strips richness from our experience of the world.

Pictures Under Glass is an interaction paradigm of permanent numbness. It’s a Novocaine drip to the wrist. It denies our hands what they do best. And yet, it’s the star player in every Vision Of The Future.

as victor notes, tech not-visionaries dream of putting more pictures under glass so we can poke at them with our fingers. for some, pictures of words under glass have replaced books—but as any book lover knows, reading is only partly about seeing words. it’s also about tearing and folding pages, underlining and doodling and highlighting, carrying the thing around, peeking at other people’s covers on the subway, trading and borrowing. books exist as shareable objects in the world in a way that opens up opportunities for humans to interact with each other.

“sharing” like “interactivity” is a buzzword worth thinking about in this context. i wonder what elements of IRL sharing are missed when i share a photo or thought on facebook, twitter, instagram, or skype/google hangout.

a not interactive digital technology: the brilliant, elegant, almighty rice cooker. a temperature sensor triggers a shut-off switch when the temperature inside the rice cooker rises above 212 F. as long as there is water in the rice cooker, the temperature stays at 212 F. once all the water boils off, steaming the rice, the temperature rises and shuts off the device.


Your rice cooker shows that there are times when limited interactivity is appropriate. Rice gets made better if we don’t interfere, so the interactivity between us and the cooker is limited to telling us when it’s done. How does it signal us? Or does it sit there silently, letting the rice go cold?

my rice cooker doesn’t give a signal. it only has two settings: COOK and WARM. when the water has boiled off, the cooker automatically rests at WARM until i unplug it. there are more advanced rice cookers with timers and notification systems.

How would you explain Crawford’s concept of different levels or scales of interactivity?  What are the qualities of those scales? Time? sensory richness? multimodal flexibility (i.e. a device that can either make a noise or vibrate, depending on which you want)? Are there other axes on which to measure interactivity?

yes, this is a great point.

When is the tangible ideal that Victor lays out less than ideal? Are there applications to which a less sensually complex system is more appropriate?

definitely! when mobility is limited, for example, an interface that only reads dramatic gestures becomes really problematic. i victor had to make the extreme point he did because so many of our devices are built around a “pictures under glass” model of interaction.