Blit
Blit was the first bitmap display system for Unix. Video directed by Lillian Schwartz(!), with additional credits to Dan Ingalls.
Rob Pike and Bart Locanthi Jr, 1983.
Put That There
Combination of voice and gestural input used to control an AI-mediated virtual reality shipping application.
Chris Schmandt, 1983.
Video Games By Example
Programming by example in Lisp to construct a Pong game at Atari.
Henry Lieberman, 1983.
Menulay: A System for Rapidly Sketching, Prototyping and Implementing User Interfaces
Two-handed UI controlling various applications for a vector graphics display.
Bill Buxton, Martin Lamb, David Sherman and K.C. Smith, 1983.
Smalltalk
A video showing the main features of the Smalltalk programming environment.
Xerox PARC, 1983.
Programming by Example
An implementation of programming by example on the Xerox Star.
Dan Halbert, 1985.
A Multi-Touch Three Dimensional Touch-Tablet
Likely the first paper on multi-touch gestural input devices, which are now very common in smartphones, tablets, &c. Includes a partitioning approach for 3D input.
S.K. Lee, Bill Buxton & K.C. Smith, 1985.
Percent Done Indicator
A demonstration of the newly invented “percent done” progress bar.
Brad Myers, 1985.
The User Interface of Sapphire
Many UI elements that the world now takes for granted are explained for the first time here.
Brad Myers, 1985.
Boxer: Applications of a Personal Computing Environment
Abelson and DiSessa’s long-running project on a uniform programming UI (which isn’t really done justice by this presentation).
Hal Abelson, Andrea A. Disessa, 1985.
Snap-Dragging and the Gargoyle Illustration System
A constraint-based vector-editor program for the Cedar environment. Note that Gargoyle was used to make diagrams that were embedded within its own source code.
Eric Bier, Ken Pier, Maureen Stone, 1987.
Sassafras
Interlisp-D system with keyboard, mouse, and touchpad. Interesting interactions using both hands at once.
Ralph Hill, 1987.
Data Analysis Networks in DINDE
Directed graph-based statistical data analysis system implemented using the Loops object system in Interlisp-D.
R. W. Oldford, 1987.
The Information Lens
Speech Act-based (!) visual rule system builder for email routing, appointment booking, &c, implemented in Interlisp-D. Definitely too complicated, but hints at what sorts of things your info feeds should be able to do for you.
Thomas Malone, 1987.
Leap Technology
The Canon Cat's Leap keys are demonstrated, thus showing off the use of pseudo-modes.
Jef Raskin, 1987.
SemNet 2.1
Already showed in 1987 that using directed graphs for knowledge bases is a mess without a way to cluster items to reduce complexity.
Kim Michael Fairchild, Steven E. Poltrock, 1987.
DataGlove: A Hand Gesture Interface Device
Early virtual reality system with gestural input, visual/gestural programming, &c.
Thomas G. Zimmerman, Jaron Lanier, Chuck Blanchard, Steve Bryson, Young Harvill, 1987.
The Alternate Reality Kit
2D interactive physics modeling world builder in Smalltalk-80.
Randall B. Smith, 1987.
Visible Language Workshop
Fonts-by-example, document layout with style sheets, design tools, tablet computing, personalization.
Muriel Cooper, &c, 1987.
Conversational Desktop
An entire office automated using a voice recognizing chatbot, similar to Siri, &c.
Chris Schmandt, 1987.
Set Operations on Polyhedra Using Binary Space Partitioning Trees
Early work on 3D modeling with binary operations.
Bruce Naylor, Bill Thibault, 1987.
Telepresence in Dataspace
Early VR telepresence work from VPRI, including glove-based gestures and voice control.
Scott Fisher, Douglas Kerr, Warren Robinett, Amy Wu, Kelvin Chan, Clay Coler, 1987
Doing with Images Makes Symbols
Early VR telepresence work from VPRI, including glove-based gestures and voice control.
Alan Kay, 1987
Action!
A fully interactive interface builder written in Lisp that allowed modification of the UI while the program was running.
Denny Bollay, 1988.
Visualizing the Execution of Prolog Programs
Illustrates a graphical Prolog execution model to facilitate learning.
Marc Eisenstadt, Mike Brayshaw, 1988.
Viewpoint: Toward a Computer for Visual Thinkers
Viewpoint is a pixel-based text and graphics editor built at Xerox PARC to demonstrate a new design constraint called “visibility”.
Worth watching because of how different it is from everything else, even if it’s not your kind of thing.
Scott Kim, 1988.
Experiments in Computer Support for Teamwork
Describes the Golab meeting room, Golab software tools, multiuser interface concepts (such as shared workspaces and telepointers), and tools for meeting analysis.
Greff Foster, Deborah Tatar, Daniel Tatar, Daniel G. Bobrow, Herb Jellinek, Stanley Lannnig, Mark Stefik, Lucy Suchman, 1988.
Creating User Interfaces by Demonstration: The Peridot UIMS
Interactive application builder using programming-by-example with inferencing. The work is very good, but the quality of the video is quite poor. I recommend this paper to get the flavor of the system.
Brad Myers, 1988.
16,000 Miles on a Bicycle
Living/working on a custom-built solar-powered bicycle/hackstation hybrid.
Steven Roberts, 1989.
Scripted Documents
Multimedia hypertext with scripted narrative “paths”. Links to specific locations within particular versions of documents, annotations, programmable, &c. Implemented on Cedar.
Polle Zellweger, 1989.
Human Interface Toolset
Interactive tablet + natural language + knowledge base interface to a Lisp system that uses neural networks to convert sketched UI representations into working UIs. “Silicon paper”. More information in the paper.
Mark Rosenstein, 1989.
The Paper-like Interface
Direct pen tablet interface with recognition for mathematical expressions. Extensible/trainable gesture recognition. Spreadsheet demo is particularly nice!
Catherine Wolf, 1989.
A Navigator for Unix
A spiritual ancestor of the NeXT/OS X Finder. The form builder extensions and hypertext features didn’t make it into modern systems (sadly).
Stephen Pope, Adele Goldberg, 1989.
Gargoyle 3D: Snap-Dragging in 3D
Constraint-based 3D environment in PARC’s Cedar. Some of these UI ideas would be very useful if implemented in Blender today.
Eric A. Bier, 1989.
Matchtool: Interactive Graphical Search and Substitute
Graphical search is a technique for finding all instances of a graphical pattern in a synthetic picture in which objects consist of regions bounded by lines and curves.
Eric Bier, 1989.
An Overview of the Andrew System
CMU’s big project to build a unified, networked substrate for the entire university (shared filesystem, SSO, email/messaging, &c). Much of the research that went into this system flowed into subsequent systems.
Nathaniel Borenstein, 1989.
Three-dimensional Interfaces in Shared Environments
Gesture and voice used in service of creating and manipulating objects in a shared virtual 3D space.
David Weimer, S.K. Ganapathy, 1990.
3-Draw: A Tool for the Conceptual Design of Three Dimensional Shapes
Creating drawings in 3D space using the tablet, stylus, and Polhemus tracker. Similar to Tilt Brush. Inspired by that famous photo of Picasso light-painting.
Emanuel Sachs, Andrew Roberts, David Stoops, 1990.
FormsVBT: A Two-view Approach to Constructing User Interfaces
A Two-view Approach to Constructing User Interfaces. Two-way binding between source code and graphical UI editor, changes to either are reflected in the other.
Gideon Avrahami, Kenneth P. Brooks, Marc H. Brown, 1990.
Metamouse: End-user Programming by Demonstration
End-user Programming by Demonstration. More no-code work using a turtle, constraints, and user-demonstration. Implemented on a Mac.
David Maulsby, 1990.
Documents as User Interfaces
Documents are extended to serve as user interfaces in the Cedar operating system. Very good.
Eric A. Bier, Ken Pier, 1991.
GENIE: Developing and Assessing State-of-the-Art Integrated Programming Environments
Template-based syntax-directed structure editor. Tolerates programs with errors to avoid breaking user's flow. Code in database, projectional views, good debugger. Supports Pascal and “a teaching language called Karel the Robot”.
Dennis R. Goldenson, Ravinder P. Chandhok, David H. Garlan, Glenn Meter, Philip L. Miller, John Pane, Jacobo Carrasquel, James A. Roberts, Edward J. Skwarecki, 1991.
Rapid Controlled Movement Through Virtual 3D Workspaces
Logarithmic movement in 3D space to improve UX. Still used today. Anyone working on a ZUI should pay attention to the section on “point of interest movement”.
Jock D. Mackinlay, George G. Robertson, Stuart K. Card, 1991.
JANUS: Basic Concepts and Sample Run
An integrated design environment for constructive and argumentative design. Architect’s helper. “Critics” supply pros/cons for design choices, plus backup library of examples and design principles.
Anders Morch, Andreas Girgensohn, 1991.
Editable Graphical Histories
Branching histories in a drawing program. Keeps a log of operations, allows the user to rewind, change an operation, and then replay the rest of the stack.
David Kurlander, Steven Feiner, 1991.
A Hypersimulation-Based Learning Environment: SIMPLE
Japanese learning/simulation environment on a Lisp Machine. Power station simulation with multiply bound values in circuit diagrams, algebraic notation, geometric visualization. Parallel world stuff.
Junich Yoshizawa, Syoichi Muto, Takeo Ueda, Shogo Nishida, 1991.
Eager: Programming Repetitive Tasks by Example
Programming by example extension to Hypercard. See the paper here.
Allen Cypher, 1991.
Project Athena
Documents an eight-year (1983–1991) collaborative project involving MIT, IBM, and Digital Equipment Corporation (DEC) to invent distributed computing, and integrate computers into the university curriculum at MIT and beyond. Kerberos (public key encryption), Instant Messaging, Active Directory, and the X Window System.
MIT, 1991.
Multi-modal Natural Dialogue
Voice + gesture + head/eye tracking dialogue interface
Kristinn R. Thorisson, David B. Koons, Richard A. Bolt, 1992.
Briar: A Constraint-Based Drawing Program
It gets especially interesting once the constraints are used to do direct manipulation kinematics for a drawing of an engine.
Michael Gleicher, 1992.
MMM: The Multi-Device Multi-User Multi-Editor
Real-time collaborative text and graphical editor with multiple cursors, &c. Implemented on the Cedar operating system.
Eric A. Bier, Steve Freeman, Ken Pier, 1992.
Combining Gestures and Direct Manipulation
Combining Gestures and Direct Manipulation. Demo’d with a mouse, but many of these ideas would be very good in a tablet context.
Dean Rubine, 1992.
High Interaction Data Visualization Using Seesoft to Visualize Program Change History
Interactively visualize source code history over time. Some of these views would be an interesting addition to Github.
Joseph L. Steffen, Stephen G. Eick, 1993.
Inferring Graphical Constraints with Rockit
A sort of auto-complete for graphical constraints. The sound effects are hilarious, but also seem useful.
Solange Karsenty, Chris Weikart, James A. Landay, 1993.
ARGOS: a Display System for Augmenting Reality
An augmented reality telerobotics project that started in 1987. Parts of the video require old school red/blue 3D glasses.
David Drascic, Julius J. Grodski, Paul Milgram, Ken Ruffo, Peter Wong, Shumin Zhai, 1993.
Graphical Editing by Example
Graphical search for elements of vector drawings, changeable operation histories, constraints, &c. (A more sophisticated version things he presented in several previous videos in this series.)
David Kurlander, 1993.
Multimedia Documents as User Interfaces
Showcases the Firefly system: multimedia hypertext, constraints for narrative, UIs built on documents that access databases, internationalization, &c.
M. Cecelia Buchanan, Polle T. Zellweger, Ken Pier, 1993.
PA3D
Zoomable user interface implemented on an SGI in Lisp using accelerated 3D graphics. Shows zooming, authoring, text, images, dynamic fisheye of source code, live visual bookmarks, and a nested zooming file browser.
Ben Bederson, Jim Hollan, 1993.
Wacom: Tangible Drawing
A Wacom tablet enhanced with additional non-pen controls.
Y. Fukuzaki, Bill Buxton, 1993.
SASSE: the Collaborative Editor
A networked multi-author interactive document editor.
Ronald M. Baecker, Geof Glass, Alex Mitchell, Ilona Posner, 1994.
The Garnet User interface Development Environment
Classic Common Lisp-based UI toolkit presented by Brad Myers. Constraints, objects based on knowledge representation, prototypes, &c.
Brad Myers, 1994.
The Attribute Explorer
Dramatic improvement on the standard attribute filtering interface used all over the web today, invented before the web took over. Recommended.
Lisa Tweedie, Bob Spence, David Williams, Ravinder Bhogal, 1994.
The Chameleon: Spatially Aware Palmtop Computers
Handheld device that provides a portal into a 3D world that’s navigated by device position, rotation, &c. Similar to various cute iPhone apps and demos from 15 years later.
George Fitzmaurice, William Buxton, 1994.
Iconic: Speech and Depictive Gestures at the Human-Machine Interface
3D spatial interface that uses voice and gesture. N.B. gestures are depictive communications, not direct manipulation! Should be revisited with modern hardware and neural nets.
David B. Koons, Carlton J. Sparrell, 1994.
Interactive Video Actors
Essentially human form kit-bashing applied to overlaid footage in the context of multimedia applications. Included for the wonderfully bonkers style of the video and its enjoyable music.
Christian Breiteneder, Simon Gibbs, 1994.
Toolglass and Magic Lenses: the See-through Interface
The Cedar team uses two input devices at once to control overlay tool palettes (visual clipboard, magnifiers, &c). Worth it for intro alone, which shows inspiration from tools in many other domains!
Eric A. Bier, Maureen C. Stone, Ken Pier, Ken Fishkin, Thomas Baudel, Matt Conway, William Buxton, Tony DeRose, 1994.
Creating Charts by Demonstration
This research system interpreted the user's drawings to create custom charts and graphs.
Brad A. Myers, Jade Goldstein, and Matthew A. Goldberg, 1994.
The Tablet Newspaper: a Vision for the Future
iPad-like multimedia newspaper reader prototype, but with stylus. Predicts skeuomorphism during early adoption. Clear view of the eventual ad-driven model of the internet.
Teresa A. Martin, Roger Fidler, 1995.
Tactile-based Direct Manipulation in GUIs for Blind Users
EU-funded work on making GUIs more accessible for blind users using sound and touch.
Helen Petrie, Sarah Morley, Gerhard Weber, 1995.
Exploring Large Tables with the Table Lens
Some nice early data visualization work from PARC for viewing patterns in large tabular datasets.
Ramana Rao, Stuart K. Card, 1995.
Building a Distributed Application Using Visual Obliq
A GUI builder for creating distributed multiuser applications at DEC SRC. No websockets in sight. More about Luca Cardelli's Obliq language here.
Krishna Bharat, Marc H. Brown, 1995.
Ariel: Augmenting Paper Engineering Drawings
Observing a real context of use leads to one of the earliest tools using a camera and projector aimed down on a desk to augment paper documents with an overlay hypermedia system.
W. E. Mackay, D. S. Pagani, L. Faber, B. Inwood, P. Launiainen, L. Brenta, V. Pouzol, 1995.
A Taxonomy of See-through Tools
The Cedar team back with more double input device Toolglass work a year later. So many great ideas!
Eric A. Bier, Ken Fishkin, Ken Pier, Maureen C. Stone, 1995.
Wearable Computing: Remembrance Agent and Privacy
An early experiment in wearable computing, which amounted to a 486 in a rucksack, a twiddler, and an overlay display running emacs. Alan Alda (!) discusses the privacy implications of ubiquitous wearables with the creator of the system.
Thad Starner, 1996.
SILK: Sketching Interfaces like Krazy
Converts fuzzy mouse-drawn sketches of interface elements into an interface. Includes storyboards.
James A. Landay, 1996.
The DeckScape Web Browser
Interesting seeing people grapple with the awkwardness of web browsers early in their history.
Marc H. Brown, Robert A. Shillner, 1996.
Lifestreams: an Alternative to the Desktop Metaphor
Temporal organization, persistent queries, &c.
Scott Fertig, Eric Freeman, David Gelernter, 1996.
Visualizing Information Retrieval Results: a Demonstration of the TileBar Interface
Information search/retrieval after the web but before Google. Notable that the test search is “documents comparing Prolog and Lisp”.
Marti A. Hearst, Jan O. Pedersen, 1996.
Pad++
Shows the Pad++ system, including authoring, portals, HTML hypertext, zoomable directory browser, and magic lenses. Part two is also on YouTube.
Ben Bederson, Ken Perlin, 1996.
The Amulet User Interface Development Environment
Interface builder with prototype-based OO, constraints, gestures, &c.
Brad Myers, 1997.
A GUI Paradigm Using Tablets, Two-hands and Transparency
Another ToolGlass-style system from a different team, focused on artwork (uses two mice, or a mouse and a pen tablet).
George Fitzmaurice, Thomas Baudel, Gordon Kurtenbach, Bill Buxton, 1997.
Distributed Applets
Further adventures building distributed applications with the Obliq programming language.
Marc H. Brown, Marc A. Najork, 1997.
WebCard = Email + News + WWW
Treats email messages, web pages, and USENET news articles the same way, with a single interface for bookmarks, &c.
Marc H. Brown, 1997.
Triangles: Tangible Interface for Manipulation and Exploration of Digital Information Topography
A system of reconfigurable triangular building blocks that can be arranged in different shapes to communicate with the computer.
Matthew G. Gorbet, Maggie Orth, Hiroshi Ishii, 1998.
Using Elastic Windows for World-Wide Web Browsing
More attempts to come to grips with UI for the early web, including tiled browser strips that stack left to right.
Eser Kandogan, Ben Shneiderman, 1998.
PRoP: Personal Roving Presence
Starts with micro-blimps, turns into something nearly identical to the rolling-iPad-stand telepresence rigs of a few years ago. Weird and fun.
Eric Paulos, John Canny, 1998.
LegoWall
A physical interface that can be reconfigured by attaching Lego-like blocks to a wall.
A/S Modulex, 1998.
ARQuake: An Outdoor/Indoor Augmented Reality First Person Application
ARQuake is an Augmented Reality (AR) version of the popular Quake game. It uses a head mounted display, mobile computer, head tracker, and GPS system to provide inputs to control the game.
Thomas, B., Close, B., Donoghue, J., Squires, J., De Bondi, P., Morris, M., and Piekarski, W., 1998.
PadPrints: Zoomable Web Browser
PAD++ implementation of a browser interface to provide context and zoomable histories. Quite similar to As We May Think-style trails.
Ron R. Hightower, Laura T. Ring, Jonathan I. Helfman, Benjamin B. Bederson, James D. Hollan, 1998.
Teddy: A Sketching Interface for 3D Freeform Design
A 2D drawing interface with affordances to produce 3D models. Very nice!
Takeo Igarashi, Hidehiko Tanaka, 1999.
Towards Usable VR: an Empirical Study of User Interfaces for Immersive Virtual Environments
Rigging up a touch sensor and a ping pong paddle as a haptic input device for VR.
Robert W. Lindeman, John L. Sibert, James K. Hahn, 1999.
mediaBlocks: Tangible Interfaces for Online Media
Clever use of physical tokens to “move” media objects between devices, arrange sequences, as UI, &c.
Brygg Ullmer, Hiroshi Ishii, 1999.
Flatland: New Dimensions in Office Whiteboards
An office-of-the-future prototype. Very nice.
Elizabeth D. Mynatt, Takeo Igarashi, W. Keith Edwards, Anthony LaMarca, 1999.
Fluid Links for Informed and Incremental Hypertext Browsing
Polle T. Zellweger, who had already been working in hypertext for a decade, makes some lovely suggestions for improving link UX.
Polle T. Zellweger, Bay Wei Chang, Jock D. Mackinlay, 1999.
i-LAND: an Interactive Landscape for Creativity and Innovation
Massive touch screen “dynawall”, “comm chairs”, “interact-table” allow team collab in a multimedia environment. More physical tokens. Star Trek vibes.
Norbert A. Streitz, Jörg Geißler, Torsten Holmer, Shin'ichi Konomi, Christian Müller-Tomfelde, Wolfgang Reischl, Petra Rexroth, Peter Seitz, Ralf Steinmetz, 1999.
Illuminating Light: a Casual Optics Workbench
Simulated light-routing environment using overhead camera/projector. Quite cool.
John Underkoffler, Hiroshi Ishii, 1999.
Navigation Methods for an Augmented Reality System
More physical tokens and overhead camera/projector pairs.
Morten Fjeld, Fred Voorhorst, Martin Bichsel, Helmut Krueger, Matthias Rauterberg, 2000.
Multiple-Computer User Interfaces
Ideas around using direct manipulation to move things from one’s handheld to a shared digital whiteboard or a desktop. Still grumpy this isn’t how everything works.
Jun Rekimoto, 2000.
Private and Public Spaces: the Use of Video Mediated Communication in a Future Home Environment
Predicts home-workers making Zoom calls with custom backgrounds, &c.
Stefan Junestrand, Konrad Tollmar, Sören Lenman, Björn Thuresson, 2000.
User Interfaces for Portable Devices
Predicts a large number of future smartphone behaviors — camera, GPS, maps, health tracking, &c.
Gaetano Borriello, 2000.
FRIDGE: Exploring Intuitive Interaction Styles for Home Information Appliances
Yet another projector/camera-from-above interface, featuring handwriting input and “real handles on virtual objects”.
Marina Vroubel, Panos Markopoulos, Mathilde Bekker, 2001.
StoryKit: Tools for Children to Build Room-sized Interactive Experiences
Would love to see more of this kind of thing. Dynamicland vibes.
Lisa Sherman, Allison Druin, Jaime Montemayor, Allison Farber, Michele Platner, Sante Simms, Jessica Porteous, Houman Alborzi, Jack Best, Joe Hammer, Alex Kruskal, Jade Matthews, Emily Rhodes, Cassandra Cosans, Abby Lal, 2001.
Classroom Collaboration in the Design of Tangible Interfaces for Storytelling
More programmable play environments for children.
Danae Stanton, Victor Bayon, Helen Neale, Ahmed Ghali, Steve Benford, Sue Cobb, Rob Ingram, Claire O'Malley, John Wilson, Tony Pridmore, 2001.
GeoNotes: social enhancement of physical space
Digital geo-caching. Ancestor to Pokemon Go, &c.
Per Persson, Fredrik Espinoza, Elenor Cacciatore, 2001.
Sensetable: a Wireless Object Tracking Platform for Tangible User Interfaces
Collection of tangible UI-objects interacting on a table surface. Good aesthetics.
James Patten, Hiroshi Ishii, Jim Hines, Gian Pangaro, 2001.
Creating Principal 3D Curves with Digital Tape Drawing
A really clever tangible interface for curve drawing.
Tovi Grossman, Ravin Balakrishnan, Gordon Kurtenbach, George Fitzmaurice, Azam Khan, Bill Buxton, 2002.