Coding in processing
Storytelling and directing
Two week student project
exploration tangible interactions and physical computing
Call websites with our prototype internet phone!
The Internet Phone makes the intangible processes of the internet tangible. You can access websites with the nostalgic interface of a rotary phone. Look up the IP address of the website you want to call in a special cyber directory, dial the twelve-digit IP address using the rotary, and wait for your website to be read out loud in the receiver. You can enhance your experience with four different mode tokens – Article, Developer, Incognito, and History.
We wanted to reveal the hidden processes of the internet. Before the late-1990s, dial-up was the standard way of connecting to the Internet. Accessing the Internet was a conscious action that involved negotiation between family members living in the same house. The nostalgic dial-up modem sound of Pshhh-kkkk-rrrkakingkakingkakingtshchchchchcch… was the bridge between the analogue and the digital. Today, we are living in a world where the Internet and connected devices have become ubiquitous. The excitement around connecting to websites has disappeared and the underlying mechanism of the internet is hidden.
The Internet Phone with the cyber directory of IP address phone numbers
Detail view of the four mode tokens
All of the different parts of the Internet Phone deconstructed
Two lovely ladies who tried The Internet Phone in Copenhagen
A group of Swiss highschoolers who tried to call Buzzfeed.com
Yes! It’s a working prototype! We hacked the rotary phone with using an Arduino that records the input from the rotary wheel and sends a string to the java/processing sketch. We wrote a processing sketch that reformats the string to an IP address and uses the JSoup Java library to retrieve raw HTML data. Then we use various functions to parse out the natural language parts. We feed that data to a speech synthesizer using the Minim processing library. The synthesizer reads the text and sends the audio signal through the computer’s audio jack to the receiver.
The article, developer, history and incognito token each have a different resistor. When the resistor makes contact with the two exposed metal conductors in the microphone cavity of the receiver, the Arduino sends a unique command to the Processing sketch to switch the mode.
In the Article mode, we only parse sections with a tag. In Developer mode, we read out the bare HTML content. In the History mode, we retrieve the last couple of IP addresses. In the Incognito mode, webpages are read out in a whisper tone.
Tinkering with the rotary wheel
Initial brain session on ways to make the internet physical
The mode tokens consisted of different resistors
Connecting the rotary phone to an Arduino
After we decided to explore the affordances of the rotary phone, we started to tinker. We had gone through many brainstorming, research, and lo-fi prototyping before landing on the rotary phone as an interface. Initially, we experimented with routers as the metaphor for the internet. But we quickly realized that routers were too abstract and too complicated. Looking for another device suitable to represent the internet we came across an old rotary phone. We saw the potential in the metaphor and affordance of the rotary phone.
One of the biggest learnings from the prototyping sessions is the importance of micro-interactions. The classic telephone interface seems straightforward. But when we switch the context, the user experience became complex. What happens if the website does not load? What happens if you dial the wrong IP address? Should you be greeted when you pick up the receiver, or when your page is loaded? We had many testing sessions to iterate on these little moments. As a result, we implemented several important micro-interactions. For example, the greeting message has a four seconds delay after you pick up the receiver. When you make a wrong dial and do not hang up for more than 5 seconds, an error tone is played.
Initial brainstorming session
Setting up the scene for the photoshoot
Isak acting for the concept video
A lot of tinkering and prototyping
I was involved in all of the phases of this project with a focus on coding and storytelling via video. In addition to the ideation and brainstorming phase, I wrote the code for the Processing sketch that retrieved web pages and parsed them for content. I designed and built the different mode tokens using a variety of workshop tools and a laser cutter. I took part in the storyboarding and video production of the concept video.
Figuring out how to parse web pages with JSoup
Directing the video shot