Interface mattersrev

Interface Matters

© 2001 MIT Media Laboratory

Jay Lee Research Scientist

Tangible Media Group

Longing the boundaryIntellectual and conceptual exploration

Design the boundaryHuman-Computer Interaction and User Interface

Beyond the boundaryDigital Design and Media Technology

BorderSpatial ColonizationContours, boundaries, and geographies are called upon to stand in for the contested realms of identity, from the national to ethnic.

Its contours and voids are occupied by bodies that replicate internally the external conditions of political and social struggles as well as private and public interventions.Man-made Political Borders | Ingo

Gunter 1997

Longing the boundaryborder | enclosure | interface | vehicle

EnclosureTerritorial Mapping All intellectual and experimental reversals involving in both the construction and de-construction, as well as the inevitable ambiguities between the reality and its imagination.

Perhaps space has always been deconstructed to generate a massive work of reconstruction.A Room in the Room | Jay Lee 1999


InterfaceConstant Interaction In between the spaces and enclosures, there are always transition that is made between two elements which form common boundary between two parts of matter or space.

We live on the boundary between physical space and cyberspace. However, these interfaces are confined to GUI boxes that are separated from physical space and impoverish human senses. Tangible Bits | Hiroshi Ishii & TMG 1998


Media Roomhybrid media spaceBy sitting on a chair facing a large projection wall, embedded sensors all over the room are used for accessing electronic content. In this hybrid architectural space, a room serves as a computer terminal in which bits meet atoms and the electronic information overlaps with everyday physical world and human life.


Nicholas Negroponte and AMG 1980

1935 Mathematical Computing

1945 Electronic ComputingNature of Computer

1953 Graphical Communication1960 Synergetic Coupling

1963 Literary Machine Computer Aided Design

Computer Networking1968 Interactive Hypermedia

1970 Head-Mounted Display

1972 Personal Computing

Hybrid Media Space1981 Direct Manipulation

1983 Graphical User Interface1991 Ubiquitous Computing

1993 Augmented RealityGraspable User Interface

1995 Tangible User Interface 1999 Pervasive Computing

2006 Cloud Computing

Designing the boundaryIntellectual Exploration

Differential Analyzermathematical computing

An analog computer using mechanical integrators, gears for constant multiplication, (+/-), was primarily used for evaluating and solving differential equations by mechanical integration. A series of rotating shafts and wheels, powered by electric motors, ran problems through ten integration units to produce a solution.[Vannevar Bush and MIT ’35]

Photos courtesy MIT Museum


ENIAC electronic computing

Consisted of 1500 relays and hundreds of thousands of resistors, capacitors, and inductors. All of this electronics were held in 42 panels: 9 feet tall, 2 feet wide, and one foot thick.

Applications: atomic energy problems, computing ballistic trajectories, weather prediction, astronomical cosmic ray studies. [Eckert and Mauchly ‘45]


MEMEXnature of computer

Computer as a fundamental tool for transforming human thought and creative activity.

As we may think, the form of a desk, a device for individual, is a sort of mechanized private file and library: Information Storage, Retrieval, and Multimedia. [Vannevar Bush ’45]


Whirlwind | SAGEgraphical communication

An air-defense command and control system which allows human to manipulate pictures as well as numbers and texts on display.

- Internal hierarchic structure of iconic representations pictures- Master picture and its instances (object oriented programming) - Operations: copy, move, delete[MIT Lincoln Lab ’53]


Man-Machine Symbiosissynergetic coupling

Computer as a intellectual partner or a facilitator of aspects of human creativity and problem solving. Human brains and computing machines will be coupled together very tightly, and that the resulting partnership will think as no human brain has ever thought. [J.C.R. Licklider ’60]


SketchPad computer-aided design

The display, a lightpen, and a bank of switches were the interface as the first interactive computer graphics. Highly precise drawings could be created, manipulated, duplicated, and stored. The software provided a scale of 2000:1, offering many acres of drawing space. [Ivan Surtherland ’63]


Hypertext literary machines

Computer as the tool that makes explicit the interdependence of ideas, drawing out connections between literature, art, music and science.

Human brains and computing machines will be coupled together very tightly, and that the resulting partnership will think as no human brain has ever thought. [Ted Nelson ’63]


ARPANETnetworking: resource sharing

Virtually all the world is linked by packet switched communications service which become the revolution of Human Communication:

ARPANET>TELNET > USENET > INTERNET[Lawrence Robert ’66]


Ultimate Displayhead-mounted display (HMD)

A helmet shaped apparatus designed to immerse the viewer in a visually simulated 3D toward marrying the computer to the design, construction, navigation and habitation of virtual worlds.

This ineffable potential of computers to transform the abstract nature of mathematical constructions into habitable, expressive worlds. [Ivan Sutherland ’66]


oNLine System (NLS)interactive hypermedia

Augmenting the human intellect will exhibit more of what can be called intelligence by organizing his intellectual capabilities into higher levels of synergistic structuring and physical interface

A collaborative method of sharing knowledge through interactive linking is now modern on-line system. [Douglas Elgelbart ’68]


Dynabookpersonal computing

User interface design first happened when we better understand how our minds worked would completely shift the paradigm of interaction.

As a dynamic medium for creative thought through synthesizing static media with the intimacy and responsiveness of the personal computer. [Xerox Parc and Alan Kay ’72]


Media Roomhybrid media space

By sitting on a chair facing a large projection wall, embedded sensors all over the room are used for accessing electronic content. In this hybrid architectural space, a room serves as a computer terminal in which bits meet atoms and the electronic information overlaps with everyday physical world and human life.[Nicholas Negraponte + AMG ’80]


Stardirect manipulation (WYSWYG)8010 Star Information System: Pioneering for User InterfaceNetworking: file/print server Knowledge Workers [Xerox Parc ’81]


Applesgraphical user interface (GUI)

Lisa [Apple ’83] Together with the use of icons and windows in the desktop metaphor.

Macintoshi 128K [Apple ’84]8Mhz CPU, 128K Ram, Graphical User Interface and Desktop Publishing a computer intended to be literally revolutionary.


Ubiquitous Computing transparent interface

The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.

Computational services are delivered through a variety of computational devices such as Tabs, Pads, and Boards, with the infrastructure to allow these devices to talk with each other.[Mark Weiser ‘91]


Wearable Computingaugmented reality

With heads-up displays, unobtrusive input devices, etc. , the wearable computer can act as an intelligent assistant. Through the consistency and mediation, user can interact with digital information based in the context of the situation. [Steve Mann ’81 MIT, VuMan: CMU ’91, Thad Starner: MIT ‘92]


KARMAcomputer-augmented env.(CAE)

One of the most powerful uses of virtual worlds will not be to replace the real world, but rather to augment the user's view of the real world with additional information.

Graphics and text overlaid on the surrounding world could explain how to operate, maintain, or repair equipment. [Steven Feiner ‘93]


digitalDESKaugmented reality

Exploratory Interfaces between atom, bits, and people; making physical forms to digital information and talking advantage of direct manipulation and physical affordances in Human-Computer Interaction.[Pierre Wellner ‘93]


Chameleongraspable user interface

As input devices that can be held in a hand and moved on a surface, bricks can control the computer directly manipulating the objects.

-Direct control of virtual objects through physical handles - Blend physical / virtual afford. - Distribute cognitive load more evenly from visual to tactile system [Fitzmaurice, Ishii, Boxton ‘95]


Tangible Bitstangible user interface (TUI)

Physical Interfaces between atom, bits, and people; making physical forms to digital information and talking advantage of human senses and skills in everyday life.

Physical Direct Manipulation(WYGIWIG)[Hiroshi Ishii and Tangible Media Groupat the MIT Media Lab ‘97]


Augmentation Hypertext | NLS | Ubicomp

WYSIWYG | WYSIWIS | WYGIWIG

”Demo or Die”

Paolo Alto (GUI) | Collab (CSCW)Mosaic: Univ. of Illinois

Lisa / Mac (GUI): AppleNavigator: NetscapePC, Internet, Web [Bill Verpank ’98]

paradigm

principle

idea

hunch

hack

prototype

product

market


Physical Representation

Digital Information


Digital Control


Digital Mediation

Physical States

Digital States

Dynamic Digital Media

Live Video, Audio

Data Structure

Combination of data, attributes, operations

Digital Attribute

Material Properties

Static Digital Media

Image, a/v files

Remote Interaction

People Places, Devices

Physical - Digital Mapping Characteristics

Information storage, retrieval, and manipulation | Information visualization |Simulation Modeling and construction | Systems management, configuration, and control | Education | Interaction in social spaces | Remote communication and awareness | Augmentation Entertainment

Metaphor MeaningScenario Inventing

Control ManipulationDisplay Mapping

Model ConsistencyTask Engineering

Idea MotivationError Observation



metaDESK CHI ‘97, UIST ‘97

TrianglesCHI ‘98

Illuminating Light CHI ‘98

PingPongPlusCHI ‘98, CHI ‘99SIGGRAPH ‘98

mediaBlocksSIGGRAPH ‘98

Beyond GUI:grasp and manipulate “bits”in the center of users’ focus

UrpCHI ‘99,SIGGRAPH ‘99

inTouch CSCW ‘98

TouchCounters

CHI ‘99

HandSCAPE CHI ‘00, SIGGRAPH ‘99

musicBottlesSIGGRAPH ‘99

curlybot CHI ‘00, SIGGRAPH ‘99

PSyBench CSCW ‘98

HandSCAPEComputer augmented digital measuring tape, Presented at Emerging Technology at SIGGRAPH 1999, LA Convention Center, Los Angeles and CHI 2000, The Hague, Netherlands

HandSCAPE is a vectorizing digital tape measure as an input device for digitizing field measurements, and visualizing the volume of the resulting vectors with computer graphics.

Using embedded orientation-sensing hardware, HandSCAPE captures relevant vectors on each linear measurements and transmits this data wirelessly to a remote computer in real-time. Combining physical measuring and computer modeling as a seamless step enhances the efficiency of on-site measuring tasks with the addition of digital functionality.

Beyond the boundaryInteractive System and Interface Design


Handheld Unit 9W x 4H x 2D (cm)

Base Unit 8W x 8H x 1D (cm)

Music BottlesEvocative Interface

Seamless extension of physical affordances and aesthetical metaphors into the digital domain is a key principle for the design of this transparent interfaces.

Upon opening the bottles, users can hear the sound of music, or narrative stories with computer control light projections. Electromagnetic tags enable each bottle to be wirelessly identified and sensed. The resonant frequencies of the various tags embedded in the bottles are detected and transmitted to the computer through the use of a custom designed tag reader board.


RF-ID Tag and Tag Reader board

Data LiFTHybrid NavigationIn between the two elevators, a intricately framed elevator is constructed in existing architecture. By displaying and manipulating the building data, viewers can seamlessly navigate the building virtually before physically walking around.

[Jay Lee, Brygg Ullmer | Inter-design Workshop 1999]


Suspended WindowsFictitious Space“Window-within-a-Window” provides an impetus in which a second window is built having the same scales and multi-window configuration. While viewers are in the space between two windows, the projected image is broken apart in squares in the corresponding area. [Jay Lee, Bill Keays | Interactive Expression at MIT Center for Advanced Visual Studies, ACM SIGGRAPH 2000]


Extruded WindowsIllusion Extended“Window-within-a-Window” provides an impetus in which a second window is built having the same scales and multi-window configuration. While viewers are in the space between two windows, the projected image is broken apart in squares in the corresponding area.[Jay Lee, Bill Keays | Interaction 2001, Fourth Biennale of The World Forum for Media and Culture, Ogaky City, Gifu Prefecture, Japan]


Documents

Interface mattersrev