Instrumental interaction demos

Michel Beaudouin-Lafon

These demos were created in 2000 for the following paper:

Beaudouin-Lafon, M. (2000) Instrumental Interaction: An Interaction Model for Designing Post-WIMP User Interfaces. In Proc. ACM Human Factors in Computing Systems (CHI '00). ACM, pp. 446-453.

These demos were programmed in Tcl/Tk and are known to work on Mac OS X 10.6 using the stock install. To run them, simply type

        % wish indirect.tcl
        % wish search.tcl
        % wish guidelines.tcl

in a terminal window.

Demo 1 — (in)direct manipulation

This demo illustrates three ways to change the size of a text object in so-called direct-manipulation interfaces.

Menu + Dialog box

Inspector window (a.k.a. property box)

Direct manipulation

The point here is that all three techniques achieve the same result with various levels of interaction overhead. The first technique is the most complex and indirect, the last one the most direct. That is not to say that direct interaction is always better. For example, the last technique does not make it possible to assign a specific text size, e.g. 42, to an object. With the Inspector technique, this is possible but requires adjusting the slider rather than entering the value directly with the keyboard.

Demo 2 — search-and-replace instrument

This demo illustrates the reification of a text search-and-replace command into an instrument.

The concept for the instrument is to be a lens that is applied to the text, rather than a modal command that forces you to look at occurrences sequentially. Here is how it works:

The point here is to show how the concept of reification can lead to an original design. While the ability to highlight all occurrences has become more common, I am not aware of any example that supports live highlighting during editing and the ability to selectively replace occurrences.

A variant of this instrument was used to create an index for a book: the search string was a text area where the user would enter all the words that were considered for the index; the replace string was a regular expression that added the proper markup to add an occurrence to the index. This made it extremely simple to select occurrences to be added to the index, and to see their distribution in the text.

Demo 3 — magnetic guidelines

This demo illustrates the reification of the align command commonly found in drawing tools into an instrument called "magnetic guidelines". These magnetic guidelines were implemented in the CPN2000 tool for editing and simulating colored Petri nets.

A magnetic guideline is an object that is added to the drawing surface to help with layout. Here is how it works:

The point here is to demonstrate how a simple concept, the guideline, can be leveraged to create a powerful instrument that allows not only to intuitively align objects, but also to maintain the alignment. With a traditional alignment command, the user typically must choose the type of alignment (and often get it wrong), and needs to group the aligned object or select them together to keep them aligned.

The power of these guidelines goes beyond what is demonstrated in this demo. First, we can have multiple types of guidelines, including circular or rectangular shapes, or line segments. In those cases, when objects are added to or removed from the guideline, they are automatically distributed evenly. Second, since the guideline can be seen as the representation of the group of objects attached to it, commands applied to the guideline, e.g. changing the color, can be applied to all of the attached objects. This illustrates the power of the design principles described in the following paper:

Beaudouin-Lafon, M. & Mackay, W.E. (2000) Reification, Polymorphism and Reuse: Three Principles for Designing Visual Interfaces. In Proc. Advanced Visual Interfaces (AVI’00), Palermo, Italy. ACM, pp. 102.