20181207_segal_71.jpg

SLIDE / SWIPE / ZOOM

Designing Product Interactions: Fall 2018

Background

For the final project of the Designing Product Interactions course at Northwestern, my four-person team was inspired by the challenge to “make something digital more physical.” We sought to create an interactive display that would allow users to experience physical/mechanical equivalents of the common gestures we use on touchscreen hundreds of times a day. The tabletop display features three separate gesture modules and a main display that shows feedback to the input from each module.

Details

We chose to focus on three of the most common touchscreen gestures: sliding for vertical movement, swiping for horizontal movement, and pinching to zoom in and out. The physical equivalents for each of these are a slider on a track, a cloth on a scroll, and an elastic sheet of fabric. We incorporated sensors into each in order to read the user’s interaction with each module as an input that was translated to the display as an output.

I was responsible for designing and creating the “zoom” module. I designed and 3D printed two finger-holders that slide along a track. These are hidden under a sheet of stretchy fabric. Because the fabric was not elastic enough to achieve the desired effect, I added a spring between the finger holders. A linear ribbon potentiometer is placed along the track to detect the position of the user’s fingers, which subsequently controls the level of zoom of the image on the display.

I was also responsible for integrating all three subsystems with the display. The sensor involved in each subsystem is connected to an Arduino, which is connected to a laptop. I programmed a web page to get input from the Arduino via the serial port using the P5.serialport library. The web page displays an image and dynamically pans and zooms in response to input from each of the gesture modules.

OUTCOMES

We successfully integrated the three gesture modules with the display for a seamless interactive experience. At Northwestern’s Fall Design Expo, users delighted in exploring the classic painting A Sunday on La Grande Jatte using familiar gestures with an added dimension of physical and tactile interaction and feedback.

Skills Used

  • Mechatronics

  • Microcontroller programming (Arduino/C)

  • Laser cutting

  • SolidWorks

  • 3D Printing

  • p5.js (JavaScript library)

Zoom module