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. |
|
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. |
|