Adobe GoLive’s Point & Shoot:
an interface technique for creating hyperlinks

Matthias Müller-Prove

December 1999 (submission for CHI 2000 – rejected)


Point & Shoot is a break through. It is cool. It is fun to use.
I don’t know who did it but they did it right! – Bruce Tognazzini, August 2000

ABSTRACT

A special widget to create hyperlinks in HTML was introduced by the HTML editor golive(TM) in 1996. (1)1) goliveTM and its successor GoLive CyberStudioTM run on Apple MacOS. Since the acquisition of GoLive Systems in 1999 by Adobe Systems Adobe GoLiveTM 4 runs on Microsoft WindowsTM 98/NT as well.

2) A comprehensive guide to the field of hypertext is [6].
This interface element is called Point & Shoot. The paper describes its details as it is used today in Adobe GoLiveTM 4.

A brief introduction presents earlier approaches of hypertext systems to create links in hypertext.(2)

Keywords

HTML authoring, World Wide Web, hypertext, hypermedia, graphical user interface, direct manipulation, drag & drop, widget design, interaction design

A Short History of Creating Links

In 1945 Vannevar Bush outlined a microfilm based system called Memex. Trails through collections of pages can be build by assigning a common name to them [5]. Trails should work like associative human thoughts. In the late 1960s Bush’s ideas are generalized to hypertext by Ted Nelson [8]. Trails became hyperlinks and guided tours.

Intermedia was developed during the late 1980s. The act of making links was modeled as closely as possible on the Smalltalk/Macintosh copy/paste paradigm [11]: Select a piece of text, choose the menu command Start Link, select another part of the text and choose a Complete Link menu command. This kind of creating links is modeless. A pending link can be completed any time after the origin has been defined.

At the same time Symbolics introduced Document Examiner. The editor Concordia is capable to create links from one record to another: You place the cursor at the desired origin of the new link, click the Create Link command, and then supply the target record by clicking on it. [10]

Storyspace works similar to Concordia. But after choosing the Create Link command a line is drawn between the origin of the link and the position of the mouse cursor until the user clicks the target. [4]

NeXT Interface Builder is not a hypertext tool, but it influenced the development of point & shoot for GoLive quite directly. Interface Builder is a development toolkit first released in 1988 to create the user interface of OPENSTEP applications. The object oriented approach called for a solution to connect two objects to each other, e.g. a button control object should send a message to another object that handles the user request if the button gets clicked. Therefore the button needs a reference to its target object. By pressing Control and dragging the mouse from an object, a right angled connection line is drawn between the object and the mouse. If the mouse enters a valid destination object a black frame is drawn around it. If the mouse is released, a new connection between the two objects is established. [3]

Point & Shoot

Why Not Use Drag & Drop?

Drag & drop is an important user interaction for the direct manipulative user interface. You can move items on the desktop, e.g. drag a document icon into an open folder window to move the file into the associated directory of the file system. Word processors use drag & drop to move text to another position in the document. In most cases the dragged item is manipulated in an attribute that is spatially represented. No drag & drop action is really sufficient to edit an internal attribute like a reference to another object.

The mouse actions to perform point & shoot are identical to drag & drop. Click the mouse on an item and keep the mouse button pressed. Move the mouse to a new position and release the mouse button. But point & shoot has a new semantic that differs from drag & drop. It establishes a permanent connection between two objects.

Initiate a Point & Shoot Action

Each object, i.e. a selected piece of text on a HTML page, can be edited within an Inspector palette. The user can drag the point & shoot line out of a special button below the URL text field. Alternatively pressing the Command key (Alt key for Windows) offers the possibility the drag the line right out of the object itself, e.g. in Fig. 1 the line would start from the selected text.

 Ask Tog: Maximizing Windows

Figure 1: Using point & shoot to create a hyperlink /cf. AskTog: Maximizing Windows

Finding the Target

As long as the mouse button is pressed the line follows the mouse position.

Dragging the point & shoot line provides visual feedback for valid targets. Window borders get a drag highlight. A traveling text cursor indicates the text position for an anchor target. And document icons in the site window (3)3) Neither MacOS nor Windows offer access to the folder and file icons of the desktop. Therefore GoLive displays the content of the web site folder in a site window to present proper targets for point & shoot. get highlighted too.

Shneiderman [9, p. 204] mentions the huge requirement for screen space as one drawback of direct-manipulation. It might be hard to perform a proper drag & drop, because start and target need to be visible at the same time. MacOS 8 introduced spring-loaded folders to ease this problem [7]. During a drag action folders spring open if the mouse is over a closed folder icon. Additionally scrollers start to scroll the content, if the mouse is over an active region of the bar. Point & shoot takes this idea and applies it to windows, outline triangles [1] and tab controls [2]. Inactive windows are activated and updated. This allows the user to navigate to a target inside a nearly hidden window. The folders of the file hierarchy in the site window can be expanded by moving the mouse over the disclosure icon. And the tab control at top of the site window can be changed to another tab to get to the list of external URLs.

Complete the Point & Shoot Action

The connection line provides visual feedback if the mouse is released. For a valid target the line blinks as often as menu items do on selecting them. (4)4) Neither MacOS nor Windows offer access to the folder and file icons of the desktop. Therefore GoLive displays the content of the web site folder in a site window to present proper targets for point & shoot. If no valid target is hit the line retracts with an animation.

The visual feedback eliminates any uncertainty about the success of the action.

Conclusion

Point & shoot is neither obvious nor intuitive to the average user of PCs. But once they’ve learned how to use the technique, it becomes a convenient way to create links. Point & shoot is manually as easy to perform as drag & drop or using a pull-down menu. It allows the user to manipulate a value that is not graphically visualized, i.e. a reference to another item.

During the last 4 years we got a lot of positive feedback from our users. They all share the same experience: It is fun to use point & shoot.

REFERENCES

[1] Apple Computer, Inc.. Macintosh Human Interface Guidelines. Addison-Wesley, Reading, MA, 1995
[2] Apple Computer, Inc.. Mac OS 8 Human Interface Guidelines. 1997
[3] Apple Computer, Inc.. Discovering OPENSTEP: A Developer Tutorial. Release 4.1 for Windows. Apple Computer, Inc., Cupertino, CA, 1997
[4] Bolter, Jay David / Joyce, Michael / Smith, John B. / Bernstein, Mark. Getting Started with Storyspace for Macintosh 1.5. Eastgate Systems, Watertown, MA, 1996.
[5] Bush, Vannevar. As We May Think. In: ACM Interactions. Vol. 3, No. 2 (Mar.) pp. 35-46. 1996
Reprinted from The Atlantic Monthly 176 (July 1945)
[6] Keep, Christopher / McLaughlin, Tim: The Electronic Labyrinth. 1995
[7] Langer, Maria. Mac OS 8.5: Visual QuickStart Guide. Peachpit Press, Berkeley, CA, 1998
[8] Nelson, Theodor Holm: Literary Machines. 93.1. Mindful Press, Sausalito, CA, 1981
[9] Shneiderman, Ben. Designing the User Interface. 3rd ed.. Addison-Wesley, Reading, MA, 1998
[10] Walker, Janet H.. Supporting document development with Concordia. In: IEEE Computer. Vol. 21, No. 1 (Jan.) pp. 48-59. 1988
[11] Yankelovich, Nicole / Haan, Bernhard J. / Meyrowitz, Norman K. / Drucker, Steven M.. Intermedia: The Concept and the Construction of a Seamless Information Environment. In: IEEE Computer. Vol. 21, No. 1 (Jan.) pp. 81-96. 1988

à propos

Vision and Reality of Hypertext and Graphical User Interfaces – master's thesis