Background

We typically see websites that are responsive to the device that you are using. This allows for sites to adjust their layouts to make things easier to read and more legible on smaller devices.

However, this only assumes that you are viewing it at a typical distance from your device. As people get further away from their computer, how does their perception of the typography change then?

Working together with Ramya Mallya, Ayobami Olubeko, and Barath Chandrashekar, we wanted to experiment with a method to provide people with the best viewing experience regardless of how they used their computer to consume content.

Goals

• Design the best way for people to consume web content based on their context
• It needs to work on the average consumer computer (no extra sensors or devices)

Design Solution

Using the built-in webcam on our laptops, we implemented a Javascript face-tracking library to detect distance between a person’s eyes. Using the distance information, we were able calculate changes in the distances between the viewer and the screen. We used that information to update the interface according to what we felt was most natural.

We prototyped Tango to respond to 3 distances:

1. Leaning back (Medium): Shows an overview of articles with an image, headline, and the first few lines of the article
2. Leaning in (Close): Displays the full length article for you to read
3. Walk away (Far): Automatically plays the article video and cycles through next videos

Design Decisions

We were inspired by existing natural and intuitive interactions when reading a newspaper or watching television. This led us to create digital counterparts for consuming the same type of content on the web.

We also wanted to share this interaction technique with the world, and the use of the ubiquitous built-in webcam and web browser made it accessible to a wide audience with no additional hardware required.

Process

During our prototyping process, we quickly discovered that the facial structure of each person, in addition to their natural lean-in/lean-back gestures would be different enough to throw off the threshold to change the layout. We implemented an automatic calibration step to adjust to each new user’s face, as well as how far they would need to move for the adjustment to happen.

Live Demo

We completed this project in September of 2013. Without maintenance, we don't expect this to work in all browsers as standards change, however we have posted our demo below if you would like to see it live.