The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Composite Selection


From Visual C++

What:

Use different gestures -- or mouse clicks in different screen areas, such as the composite's edges versus its insides -- to determine whether you should select a composite itself or allow its contained objects to be selected.

Use when:

Your graphical editor may contain composite objects -- things that you can move and otherwise manipulate, but happen to contain other objects. This is especially common in drawing programs and GUI builders.

Why:

When objects are on canvases, a single click normally selects the object. In this case, you want the user to be able to select the child objets (or create new ones) inside the composite, but that means the user has to click on the composite's background. Should it select the composite, or not? The mouse click has two interpretations, reflecting the double role -- parent and child -- that the composite plays.

Obviously one of these interpretations has to win out; the user needs to be able to predict what will happen when he clicks the mouse on the composite's background. Two different kinds of selection -- one for composites, and one for "leaf" objects that are not composites -- solves the problem (albeit in a brute-force fashion). The two selection modes are similar, but respond differently to mouse events like clicking and dragging.

How:

Visual Studio (see above) demonstrates the most common solution to this problem. A user cannot select its group boxes (which are technically not composites, but appear to be anyway) unless she clicks near the edge of the group box. Mouse clicks inside the object operate on the contents; if it's a click-and-drag, a lasso is started, and if it's just a click, the contained object is selected. She can also drag the group box by the edges; she can resize only by the eight selection handles, at the corners and edge centers. This limits direct manipulation, but the mechanism is simple and easily understood once the user knows what's going on.

When a composite is selected, draw the draggable edges and resize handles in a recognizable way, like the dotted border in the example above. The visual cue sets expectations for the user.

Examples:


From Dreamweaver

HTML tables are composites -- they usually contain objects like text, images, or nested tables. So an HTML editor such as Dreamweaver needs to give the user access to both the table as an object, and its contents as objects. Here, the lefthand screenshot shows a click inside the table -- such a click would select either an image or text. The example on the right shows table selection with a click on the table's edge.