Click-On MSU Kiosk
PI: Carrie Heeter
Team: Pericles Gomes, Randy Russell, Steve Sneed, Brian Holland,
and many more
ClickON MSU was a kiosk created for MSU
Student Affairs and Services in 1991, using a Mac II, Macromedia
Director (version 3.0) to control an interactive videodisc. The
installation was selected for exhibition at SIGGRAPH. Animated characters
called "ClickONs" competed for user attention. These creatures
were customized for the component of university life they represented.
For example, theater's ClickON was a Charlie Chaplin character.
Sports and Athletics was a fuzzy green creature waving a pompom.
A team of 13 students worked with lab director Carrie Heeter to
develop this installation.
-- exhibited at SIGGRAPH Tomorrow's Realities Gallery, 1991
ClickOn MSU stylistically portrays an image of Michigan State University
with a sense of whimsy and magic through animated interactivity,
painting with video, and merging reality with fantasy. ClickOn MSU
runs on a Mac IIci with 8MB of RAM and a RasterOps 364 Board, working
with a Pioneer 4200 LaserDisc Player and 2 Bose speakers.
Using Director 2.0 as the sole development platform made ongoing
experimentation with animation and video irresistible, which is
why we chose it.
When HyperCard first came out, we were delighted with the idea
of “buttons,” and incorporated round rectangles with
little icons liberally throughout our stacks. Buttons encapsulate
functionality bounded by familiar, clearly distinguishable attributes.
But buttons also make users very aware that they are “using
As our design values developed with experience, we began to feel
constrained by the small size of icons and by the boundaries imposed
by buttons. We wanted to integrate functionality rather than separate
“Point and click” hypermedia applications need to communicate
quickly and easily to users what they can click on to make things
happen. The name ClickOn MSU springs from a user interface based
on animated creatures called “ClickOns” which identify
things onscreen to click on. ClickOns are small, fuzzy beasts which
make strange noises, flash and wave and engage in other attention-getting
behavior to attract users to click on them. They compete with each
other for attention. ClickOns are functional, but also contribute
to the ambience of different content segments by being context appropriate
and a little weird. They help remind the user which section they
Within the “Sports to Watch” section, the ClickOn waves
a pom pom. The “Entertainment” ClickOn dons a bowler
hat and moustache which twitches while it appears to walk like Charlie
Chaplin. ClickOns come in two sizes-- normal and miniature. The
tiny waving ClickOns are appear in repetitive menu choices.
There is a single instruction at the top of every screen: “Click
once on a furry little beast (a ClickOn) to ClickOn MSU.”
Naive, first time users have no problem using the system. Experienced
DOS users balk a little at first but do catch on.
The menus in ClickOn MSU are animated, not just with ClickOns but
also with other relevant action. Often the menu is a scenario. Never
is a menu just text. In a sense, the user enters a cartoon world
when they use the system. There is no reason for menus not to be
interesting, no reason for them not to be fun. Menus convey meaning
and an image of MSU just as information screens which have narrative
PAINTING WITH VIDEO
The RasterOps 364 board allowed us to display still and motion
video in a rectangle of any size and of any aspect ratio.
Minimalism, Warped Aspect Ratio and Integration of Video &
Running 24 bit video and graphic Director movies runs out of 8Mb
of RAM quickly, requiring creation of many small segments rather
than a few large ones. At first we planned to go to full screen,
full motion video sequences to cover the 20-35 seconds needed to
load each segment. Full screen full motion video on the Mac screen
in the middle of animated menus and ClickOns was a let down. It
looked like normal television. Suddenly, we had left the make believe
world of computer animation and entered the real world of regular
television. We decided it was better to stay within a computer-generated
environment, placing video within a rectangle on a screen with other
graphics. This maintained the look and feel of a created environment.
Integrating video with graphics was a challenge. At first, we tried
heavy textures, placing rectangular blocks of marble with 3-D shadows
for video to play over into the scenes. It was too heavy and didn’t
fit with the style of the rest of the graphics. Next we tried solid
color coordinated rectangles, framing the video like a photograph.
Didn’t work. Still too solid. Finally, we moved toward a minimalist,
wire frame rectangle, with the video showing a fraction of an inch
inside of the lines, so that the background color outside of the
rectangle also appeared between the rectangle and the video. It
worked. We wrote a macro to make it easy to position and resize
rectangles, to encourage experimentation with placement. Off center
worked better than centered, at least within our contexts.
Still trying to get away from the feel of “regular video,”
we started warping the aspect ratio of the rectangles. It’s
amazing how drastically one can alter aspect ratio and preserve
the intelligible content of video. In the end, we paid no attention
to aspect ratio other than intentionally violating it some of the
time. The tools we had created made it easy to position video into
whatever size and shape of rectangle fit best into the scene, and
we never knew or worried about how close we were to real TV.
The World as (Still and Motion) Clip Art
Video was also a key element in graphic design. The 364 board allows
capture of still and motion sequences, and subsequent processing
and integration of those images and motion sequences with other
animations. We posed people in sports positions to be “moving
clip art,” grabbed sequences off videotape, and generally
treated the world as a palette.
MIXING FANTASY AND REALITY
Hypermedia tools provide the wherewithal to create interesting
worlds which dance back and forth between fantasy and reality. The
user deserves to feel a sense of intrigue, unexpected, and fun.
Diverse, interesting sounds at every mouseClick helped achieve that,
as did animation and fanciful modification of real world images.
Designing with whimsy was critical.
ClickOn MSU was created by the Michigan State University Communication
Technology Laboratory in the College of Communication Arts and Sciences
for the Office of Student Affairs and Services. Principle designers
were Carrie Heeter, Ph.D., Director of the Comm Tech Lab and multitalented
education graduate students Pericles Gomes, Steve Sneed and Randy
Russell. Fourteen other students collaborated on the project. Many
campus units contributed video sequences and slides for the videodisc.