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.

AWARDS:

-- 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.

ANIMATED INTERACTIVITY

Using Director 2.0 as the sole development platform made ongoing experimentation with animation and video irresistible, which is why we chose it.

Introducing “ClickOns”

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 a computer.”

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 it.

“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 are exploring.

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.

Animated Menus

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 text.

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 & Graphics

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.

CREDITS

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.