ManySpector, an inspector for multiple objects
An inspector (or property sheet) is a window containing a vertical list of pairs of property name and value (e.g. shape: rectangle, color: green, thickness: 3). An inspector offers two services to the user: visualizing values with progressive disclosure and modifying them. If multiple objects are selected, a classical inspector only displays values shared by all selected objects. Users can change such a value, and the system reflects the change to all selected objects. The inspector does not display any value for properties for which there are multiples values. Users are thus not informed about those values, and sometimes cannot modify them through the inspector.
We have designed ManySpector, an inspector that displays all used values for a property given a set of differing objects. Used values reveal an implicit structure of graphics, the sets of objects that share a value for a given property. Though not explicitly defined by the user, we think that such sets may be useful, since users sometimes think about objects with a graphical predicate (“all red objects”). We relied on the display of used values to design a set of interactions that offer new services for exploratory design and structure-based interaction: query and selection of objects with graphic examples, selection refinement, and properties modification on multiple objects.
Contact: raphael.hoarau at enac.fr, stephane.conversy at enac.fr
Updated Oct 10, 2012.
Comparison of a classical inspector and manyspector
The user’s selection contains objects with varying shapes, fill colors, width, and height. A classical inspector (left) displays a blank fill for those properties, whereas ManySpector (at right) displays all different values.
The representation of a used value in ManySpector actually reifies both the value per se, and the set of selected objects that exhibits this property value. As a value per se, users can drag the used value (considered as a value) from ManySpector onto (a selection of) objects in the main view to modify a property. If the used value is numerical, users can hover over it and rotate the mouse wheel to increment or decrement it (scope and specify actions). Together with immediate feedback, this enables both exploration and precise adjustment of properties, thus reducing temporal offset between action and feedback.
Since a used value also reifies a set of objects, hovering over a used value highlights the relevant objects while blurring others with a short animation. This makes it easy to figure out which set is made of what and to detect outliers and fix them.
The cursor is over the blue used value of the fill property. Because they don’t have this used value, the green rectangle, the pink circle and the two yellow shapes are dim.Users can drag a sample (a value) from the sample panel onto a used value (considered as a set of objects) to modify at once a property for multiple objects. Users can also drag a used value (value) onto another used value (set).
a) The user drags a “stroke thickness: 6pt” sample over the “fill: yellow” used value. Immediate feedback turns the stroke thickness of all yellow items to 6pt. b) the user has dropped the sample, the modification is applied.
The user drags the “width: 280” used value and drops it on the “shape: circle” used value. All circles in the selection now have a width set to 280.
In order to refine the selection, users can use three meta-instruments (i.e. instruments that control instruments, here the selection): Remover, Keeper and Extender. The interaction consists in a drag and drop of the representation of the instrument onto a used value. Remover throws out of the selection all objects that have this used value. Keeper keeps in the selection the objects that have this used value, and throws away the others. Extender adds to the selection all objects that are not selected but that possess this used value. The instruments can also be dropped onto an object of the scene to add or remove it from the selection.
The user drags the Remove tool onto the “fill: blue” used value. Blue objects are removed from the selection.