Fingernail UIs

I was recently at the Berkeley Center for New Media Open House and there was a student who was working on fingernails that can show digital information, such as dots for numbers or ambient light. When asked how the fingernails might be used in the world, she gave the example of holding your hand up to a dishwasher and the fingernails lighting up as ambient information indicating whether or not the dishes are clean. Essentially using fingers to physically touch the world around us to gain additional digital information.  The fingernails immediately came to mind when reading McCullough’s piece, because it is such a beautiful extension of the hand.

As McCullough describes, the hand is so closely connected to the mind so to place a digital object on the hands which extends its ability to sense and perceive the world around us seems like a logical place. I like that the fingernails require placing one’s hand on physical objects to sense this additional digital information, which is in line with McCullough’s arguments. Although, the idea of ambient light on the fingernails is requiring a secondary sense, sight. To align more with McCullough’s argument, it might be more fitting to have the digital fingernails output another form of information, maybe some sort of buzz or change in temperature. This would leverage our body’s innate ability to feel and sense more through our fingers (ex: some sort of information conveyed when the left thumb nail changes in temperature which our brains may pick up faster/distinguish more than our left thumb nail lighting up).

Drinks in a Wine Glass

Description

3 LEDs diffused together with fluff in an upside down wine glass. The user can input in what type of drink they’d like. For example, they can have ‘wine’, a ‘smoothie’, or an ‘abc’ drink which is a mystery drink. The wine glass will fill with an appropriate color for each of the drinks. For the ‘abc’ mystery drink the glass fills with a fading progression through all of the colors.

Components

1 Arduino

3 LED

3 220 Ohm Resistor

1 Breadboard

4 wires

Code

/* 
 * Serial RGB LED
 * ---------------
 * Serial commands control the brightness of R,G,B LEDs 
 *
 * Command structure is "<colorCode><colorVal>", where "colorCode" is
 * one of "r","g",or "b" and "colorVal" is a number 0 to 255.
 * E.g. "r0" turns the red LED off. 
 * "g127" turns the green LED to half brightness
 * "b64" turns the blue LED to 1/4 brightness
 *
 * Created 18 October 2006
 * copyleft 2006 Tod E. Kurt <tod@todbot.com
 * http://todbot.com/
 */

char serInString[100]; // array that will hold the different bytes of the string. 100=100characters;
 // -> you must state how long the array will be else it won't work properly
String colorCode;
int colorVal;

int redPin = 9; // Red LED, connected to digital pin 9
int greenPin = 10; // Green LED, connected to digital pin 10
int bluePin = 11; // Blue LED, connected to digital pin 11

void setup() {
 pinMode(redPin, OUTPUT); // sets the pins as output
 pinMode(greenPin, OUTPUT); 
 pinMode(bluePin, OUTPUT);
 Serial.begin(9600);
 analogWrite(redPin, 0); // set them all to mid brightness
 analogWrite(greenPin, 0); // set them all to mid brightness
 analogWrite(bluePin, 0); // set them all to mid brightness
 Serial.println("What would you like to drink? wine, smoothie, or abc?"); 
}

void loop () {
 // clear the string
 memset(serInString, 0, 100);
 //read the serial port and create a string out of what you read
 readSerialString(serInString);
 
 colorCode = String(serInString);
 if( colorCode == "wine" || colorCode == "smoothie" || colorCode == "abc" ) {
 Serial.println("We will now poor your drink!");
 if(colorCode == "wine") {
 analogWrite(redPin, 255);
 analogWrite(greenPin, 10);
 analogWrite(bluePin, 10);
 } else if(colorCode == "smoothie") {
 analogWrite(redPin, 200);
 analogWrite(greenPin, 100);
 analogWrite(bluePin, 100);
 } else if(colorCode == "abc") {
 int i = 1;
 int rValue = 0;
 int gValue = 30;
 int bValue = 60;
 int change = 5;
 while (i < 1000) {
 rValue = (rValue + change)%255;
 gValue = (gValue + change)%255;
 bValue = (bValue + change)%255;
 analogWrite(redPin, rValue);
 analogWrite(greenPin, gValue);
 analogWrite(bluePin, bValue);
 delay(50);
 if (i%50 == 0) {
 change = change*-1;
 }
 i++;
 } 
 }
 }
 
 delay(100); // wait a bit, for serial data
}

//read a string from the serial and store it in an array
//you must supply the array variable
void readSerialString (char *strArray) {
 int i = 0;
 if(!Serial.available()) {
 return;
 }
 while (Serial.available()) {
 strArray[i] = Serial.read();
 i++;
 }
}
<img class="alignnone size-medium wp-image-579" src="https://blogs.ischool.berkeley.edu/i262/files/2016/09/Screen-Shot-2016-09-11-at-11.22.20-AM-300x262.png" alt="Screen Shot 2016-09-11 at 11.22.20 AM" width="300" height="262" />

Blinking – doubled

Description

A blinking LED that starts at with a given number of blinks and then doubles the number of blinks progressively. Example: 1 blink, pause, 2 blinks, pause, 4 blinks, pause, 8 blinks, …, all the way to 100 blinks.

Components

1 Arduino

1 LED

1 220 Ohm Resistor

1 Breadboard

3 wires

Code

/*
 Blink
 Turns on an LED 1 time, pauses, turns on an LED 2 times quickly, pauses, 
 turns on an LED 4 times quickly, pauses, etc., doubling the number
 of quick blinks each time. 
 */

// the setup function runs once when you press reset or power the board
void setup() {
 // initialize digital pin 13 as an output.
 pinMode(13, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
 int blinkCount = 1; //initialize the first number of blinks in a series
 while (blinkCount &lt; 100) { //max number of blinks in a series
 for (int i = 0; i &lt; blinkCount; i++) {
 digitalWrite(13, HIGH); //turn on LED
 delay(100); //time LED is on
 digitalWrite(13, LOW); //turn off LED
 delay(100); //time LED is off
 }
 delay(2000); //delay between blinking series
 blinkCount = blinkCount + blinkCount; //double the length of the series
 }
}

Image

Arduino

Google Maps

A UI that I use very frequently and love is Google Maps. I’m considering the UI as both the screen element (where the user inputs origin/destination information to see a route on the map), and the speech element when Google Maps tells me directions. Looking to Activity Theory, Google Maps, is an object in the world, that I, the subject, interact with. One aspect of Activity Theory is consideration of the social context of the activity relationship between a subject and an object. Google Maps is a wonderful UI because it is useful in this social context, and develops because of the social context.

When I use Google Maps, I’m using it to achieve a goal – to get me from point A to point B as quickly as possible. I have a larger motive though, which is to be efficient with my time. This is a psychological need of mine which is largely shaped by the culture I live in. I live in a culture that runs on efficiency. This results in punctuality being much more highly regarded than in other cultures. This cultural need, existing in the social context, transforms Google Maps so that it helps me achieve my motive. For example, when I begin my route from point A to point B, the speech component of the UI will inform me if there is an accident that has occurred that will delay me, and gives a precise number of minutes that the delay is expected to be. Additionally, the speech UI will periodically reassure me that I am still on the fastest route. These pieces of information are only valuable to me because I care about how my activity fits into the larger social context (what meeting I’m headed to, dinner I am traveling to, etc.) and they help me gauge if I need to be considerate and let others know if I will be late/on-time/early.

As this activity goes on over time between Google Maps and its users, the activity becomes so ubiquitous that it changes the cultural norms. For example, as Google Maps becomes more precise and as everyone uses it, there’s a higher expectation among humans to be on time. As this activity continues, it develops the humans (i.e. the subjects) into more punctual people who care more about optimizing their time (a motivation influenced by a changing culture) because it is easier to do so, and it develops Google Maps (i.e. the object) to have more precise algorithms for route optimization and further functionality to meet the changing human needs.