Projects: TEEMSS2 : Toolbar UI Model
This page last changed on Mar 24, 2005 by sbannasch.
A tool should always be selected and highlighted in the Graph toolbar (and other compnents with a toolbar and canvas UI). The default tool should be the selection arrow (at the top). If another tool is deselected the Arrow should become selected.
The Default and Autoscale buttons are examples of button UI models. When a single click occurs on the tool the tool is highlighted, the operation is performed, and the tool is un-highlighted.
A double click of a Button UI tool should either perform the same operation or perform an extended version of the button operation if an extended operation is defined. For example I propose a single click on the Autoscale tool scales the Y axis to show the data associated with the visible X axis, while a double-click scales both the X and Y axes to fit the entire data set.
The Zoom-In and Zoom-Out buttons are examples of modal UI models. A single-click on one of these tools highlights the tool and changes the interaction model with the graph. When a modal tool is selected the cursor changes appropriately when the mouse is over component areas which support the interaction model.
Modal tools operate with clicks, drags, and introspection-clicks on the areas they have interaction with. A click with the Zoom-In tool on the graph canvas rescales the graph axes to zoom in on the clicked point. A drag with the Zoom-In tool presents a selection rectangle whose borders will set the new X and Y axes scale ranges when the drag operation is finished.
Introspection-clicks are user operations that indicate the user wants to either see a context sensitive menu of operations or to edit the properties of a selected object. This operation is performed with a click-and-hold, a right-click (default on Windows), a ctrl-click (default on MacOS), or a click on an introspection indicator. Right-click and ctrl-click are the standard UI models for windows and MacOS for these operations. A click-and-hold is a mouse-down event followed by a period of time without mouse movement. The period of time may be exposed in user preferences but should probably be set initially to 1s. An introspection indicator is a graphic indicator added to an object which makes a visible click-point region UI entry into the introspection model. When a single-click occurs on an introspection indicator the UI operation is the same as in the other introspection-clicks.
If the only possible introspection operation for an object is the editing of the object properties then a property editor dialog is presented for that object. If editing the properties is just one of the possible operations (or not available as an operation) than a popup menu is presented at the click-point with the possible operations to perform on that object.
An existing hybrid UI that combines some of these elements is the one associated with data-point labels. When the selection cursor passes over the text box of a data-point label a small black triangle is displayed in the lower-left corner of the label text box. Passing over the triangle itself causes the triangle to highlight by changing its color from black to red. Clicking on the triangle selects the object and displays a popup menu with the following items: Edit text, Change color, Delete note. Delete note is a verb which is applied to the selected object, while Edit Text and Change color are menu items which bring up specific property editors.
Here is another example (not implemented yet). When a selection cursor passes over the line of a data plot the entire data plot line is highlighted. In this case the the entire line of the visible plot is an introspection click-point. At this point any of the following UI operations introspects into the dataset: click, click-and-hold, right-click, ctrl-click, and double-click.
A double-click on a modal tool should cause a tool-appropriate operation. If the operation of a modal tool is to change the display aspects of the graph then if the last display operation on the graph was a change by this modal tool a double-click will reverse the operation. For example if the user use the Zoom-In tool to examine a small range of data, following this inspection a double-click on the Zoom-In tool will rescale the X and Y axes to the values before the last zoom in. Similarly after a single-click on the Default Axes tool resets the X and Y axes to the default for that data collector a double-click will revert back to the previous axis scale settings before the initial click on the Default Axes tool.
|Document generated by Confluence on Jan 27, 2014 16:43|