A play on icongraphic product semantics. Flash Actionscript created by Francis Garing, with support from Carla Diana.
Meaning of play
“Play” is an important aspect of interface design, serving as a means to entice the user into exploring,
learning, and investigatiing various aspects of a product and its interface. The theme of “play” within
interface design helps to facilitate a more enjoyable, intuitive, and interactive product experience.
The overall theme of our installation was “play” within the design scope of iconographic American
children’s toys.. Early investigation into this theme as a class led us to the conclusion that play could
take on many different forms and representations. An interface could be playful by employing a
variety of audio and video stimuli. A product can be playful by its use for creative, entertaining, or
surprising purposes. An experience can be playful by making it collaborative and interactive.
Our team’s interface design theme was semantics. Semantics is the language given through form,
graphics, or sound to communicate information or usage of a product. Children’s toys urtilize very
obvious and clear cut semantics. Even though these semantics clearly define usage and interaction,
their meanings are often open- ended, leaving more than one possibility of play and interaction. For
example, building blocks and toy cars. Children’s toys, especially well-known, time-tested iconographic
ones, use non-verbal communication, and often borrow semantics from other well known forms. For
example, LEGO’s take the form of bricks, and their pin-to-hole features suggest interconnection and
stacking.
By studying the semantics of various classic toys, we decided to focus our project on two attributes
of play - surprise and collaboration.
Exhibit theme
The overall theme governing all of the concepts of the installation was the idea of “play”. Through our
probing and investigation of the theme, we concluded that play could be interpreted as two things:
collaboration and surprise.
Our specific theme was that of form and interface semantics. With this in mind, we sought
to isolate a classic American toy with icongraphic form and interface semantics. We searched
for something simple and easily recognizable, and choose the Etch-a-Sketch. The
Etch-a-Sketch’s knurled white knobs, beveled red frame, and large white screen encourage the user
to draw and create. Almost instantly, the user realizes the disparity of control between the two knobs,
which dictate horizontal and vertical displacement of the “etching” cursor. It is a simple toy that
one can learn to play within moments.
Our installation seeks to emulate these clear product semantics, but play with it to elicit a collaborative
and surprising experience. By playing with the scale of the toy and making the knobs too far apart
to be used by one person alone, we created a collaborative interface. By modifying the drawing
space and user controls, we were able to simulate a three-dimensional canvas within the traditional
product form. This would create an environment that is unexpected from what the user might
expect from the toy’s history and iconography.
Concept
Due to the simplicity of form and operation of the Etch-a-Sketch, our team soon discovered the large-scale
variation that we settled on developing could take various forms. We decided that the installation should
focus first and foremost on semantics. Therefore, the most important elements would be the knobs and
the shaking based inputs.
The frame would be large enough to separate the knobs sufficiently far to elicit collaboration, but small enough for two people to shake.
Our framewould be made of a single studio-pinup board, onto which the knobs would be
mounted and the “etchings” projected. All of the interface and output software would be run off of a laptop and programmed in Flash Actionscript. To simplify the programming and input construction,
we used USB optical computer mice as input devices. The mice were disassembled and placed into fixed orientations to isolate their input capabilities.
Our main challenges were to create a large-scale installation with the least amount of construction, and
to create an input mechanism that required the least amount of proprietary electronics and
programming. We wanted a clean, simple, robust installation assembly. As far as programming is
concerned, the challenges lay in creating the appropriate algorithms to handle these modified inputs.
The idea of programming an Etch-a-Sketch program was very simple. Handling our reworked inputs and
our three-dimensional rendered environment however introduced a few complexities.
Details
The final concept was a large-scale Etch-a-Sketch with three-dimensional rendering capability.
The physical components of the installation consisted of the traditional red Etch-a-Sketch bezel mounted on
a studio pin-up board, and two white input control knobs. The pin-up board was chosen as a supporting
structure since it was readily avialable and was mounted on wheels. The wheels allow the entire assembly
to be shaken, which would allow the shaking input of the original Etch-a-Sketch to be emulated. The pin-up
board was also chosen due to its appropriate scale in creating a collaborative interaction scenario.
The Etch-a-Sketch input consisted of the two, classic white control knobs, made from 10" diameter acryllic tubing. Each handled vertical and
horizontal movement of the cursor independently, as the original, but each had an added depth control.
X-axis and Y-axis translation was handled by rotating the knobs either left or right, and Z-axis translation
was handled by telescoping the knobs in or out. X and Y translation inputs were handled by isolating the
axis inputs on two optical mice through fixed orientation of the mice (one reading vertical movement, mounted in-line with the axis of the knob, and
one reading horizontal, mounted perpendicular to the axis). The Z translation was handled by coupling the scroll wheel input with code to
track the scroll input as displacement in the depth plane.
The Etch-a-Sketch output consisted of a standard computer projector. The projector was set up a distance
away so as to project an active drawing area that fit within the bezel constructed on the pin-up board. The
inputs and outputs run through a Flash Actionscript controlled program whose main functions were to
take the isolated mouse inputs and track them as three-dimensional coordinate translations, and to render
the inputs as markings within a simulated three-dimensional environment with appropriate line weight and thickness.
Insight
Through this project, we learned the power of simple form semantics and products semantics.
Although the forms in the original Etch-a-Sketch are very basic and ubiquitous, they easily speak an
interaction language that allowed the operation of an Etch-a-Sketch to be discovered with minimal
effort, and to transcend generations of age and technological advancement.
Through the development of our project, we learned that many of the functional challenges that could
be solved with programming and advanced circuitry could be surmounted much more easily and
quickly with novel and clever reconfigurations of existing devices. This allowed us to create an overall
more robust final product with which we could easily experiment with and develop further.
Vistior Feedback
Many visitors commented on the surprising effect of pushing and pulling the knobs. Operation
was pretty self-explanatory, and we rarely had to describe how to use them.
One aspect that did require explanation was how to erase. Although all the visitors knew how
to erase on a regular sized Etch-a-Sketch, few expected that function to translate
to our large-scale version. The shaking sounds from behind the screen added another element of suprise.
As expected, many discovered that using the knobs required two people in coordination.
|
|
A really fun project to work on.
 First 2D version. By spacing the knobs far apart, two users must collaborate to create an image.
Feedback that it should be more than just an enlarged 2D copy.
Isolating the scroll-wheel mechanism.
Detail of the separated scroll-wheel.
Detail of the scroll-wheel pressed into the axle of the knob. The white wheel keys into machined slot in the axle, allowing the outer shell to slide in and out several inches for the zoom effect, while maintaining contact with the optical sensor.
Sideview showing the whole mechanism. From left to right: The interface for the outer shell of the knob, the tubing spacers to keep the keyed-wheel centered over the optical sensor, and the scroll-wheel contacting the slotted-axle.
Inner workings of the Left/Right knob, with pendulum switch for shaking/clearing the screen.
Cutting the frame from 3/4" MDF on a 3-axis CNC router.
Painting the frame.
Scott enjoying himself. Pushing and pulling on the knobs creates depth in space, and changes lineweight accordingly.
Two kids playing with the installation.
|
