CS 275Tidwell Course NotesPage 128 Chapter 8: Builders And Editors Whether providing the user with an application to create and/or edit text, tables, images, or interfaces, certain standard approaches are generally used. Provide a canvas upon which the “creation” will be displayed. Provide ubiquitous tools that are intuitive to use. Avoid excessive labor by users (e.g., mouse manipulation, keyboard operations, text reading).

CS 275Tidwell Course NotesPage 129 WYSIWYG Editing For some applications, it’s preferable to go to the trouble of designing and implementing an interface that will display obvious, natural results than to compel users to interpret what they’re seeing or to imagine the results of their actions. Using Visual Studio, the “TV Guide” application’s controls were entirely created via the Designer, while most of the “County Demographics” controls were generated by code.

CS 275Tidwell Course NotesPage 130 Direct Manipulation Enabling users to directly manipulate the components of an interface provides physical reinforcement to the mental concepts being addressed. Touch screen technology permits users to physically activate controls, without using intermediate interactive devices such as a keyboard or a mouse. In the application above, two workers are allowed to simultaneously interact with a single design, with each person’s counterpart displayed in real time as a background on the screen. Capacitive Small voltages at corners have altered currents when screen is touched, with current ratios determining the touch location. Resistive User pushes flexible membrane, causing two conductive materials to meet and producing a locatable voltage. Infrared Infrared beams are broken by screen touching, yielding X and Y coordinates of touch. Acoustic Ultrasonic devices produce acoustic patterns when touched, matching stored patterns corresponding to screen position.

CS 275Tidwell Course NotesPage 131 Interface Modes Due to the limited availability of interactive devices and components in most applications, the current context in which the interaction takes place often determines how the application will interpret the interaction. Different mouse cursors appear on screen, based upon what a mouse action will signify when it’s performed at a particular location in the current mode of the application.

CS 275Tidwell Course NotesPage 132 Natural Selection Although various conventions have been established for selecting and manipulating different objects within an interface (text, tables, images, etc.), certain specialized maneuvers may yield surprising results. In Microsoft Word, double-clicking on the right border of a cell resizes that cell, disrupting the entire table. A similar operation on an entire column avoids those adverse effects.

CS 275Tidwell Course NotesPage 133 Pattern #79: Edit-In-Place For small textual elements of the editor display, allow users to edit the text in its current location in order to ensure the operation’s efficiency and simplicity. Example: When editing a header or footer in a Microsoft Word document, the user is allowed to perform alterations in the location at which the header or footer will appear in the document.

CS 275Tidwell Course NotesPage 134 Pattern #80: Smart Selection Provide a mechanism that allows users to perform selection operations that are commonly needed, but that might be tedious or impractical to perform otherwise. Example: Microsoft Word’s “Set Transparent Color” capability changes all of the pixels matching the mouse-clicked color in an image to transparent. Example: Macromedia’s Fireworks enables the user to select the outline of what is considered to be a likely object in an image, and then to alter just that object.

CS 275Tidwell Course NotesPage 135 Pattern #81: Composite Selection When objects within the editor’s canvas are grouped together to make a composite object, use interactive operations to select the components that are different from those used to select the entire composite. Example: When images are grouped together in Microsoft Word, the composite object can be selected via a single mouse click; component objects are then selected via additional single mouse clicks. Example: In Microsoft Developer Studio, resetting properties of container objects results in their child controls being reset as well.

CS 275Tidwell Course NotesPage 136 Pattern #82: One-Off Mode When users switch to a particular mode within an application to perform a single, isolated action, immediately exit that mode once the action has been performed. Example: Microsoft Visio’s “lasso” mode lasts until the user closes a freestyle loop around the objects that are being selected, or until the user explicitly turns it off, whichever comes first.

CS 275Tidwell Course NotesPage 137 Pattern #83: Spring-Loaded Mode When users switch to a particular mode within an application to perform a sequence of actions, provide a mouse or keyboard action that, while sustained, keeps the user in the required mode. Example: Microsoft Research has developed the Springboard technique, which uses a keyboard-activated menu (the “lagoon”) to enable the user to select a tool; as long as the user keeps the lagoon key pressed, the application is in the mode associated with the tool.

CS 275Tidwell Course NotesPage 138 Pattern #84: Constrained Resize Provide the user with mechanisms for resizing objects on the canvas in different manners. Example: Microsoft Word permits the user to resize an object while maintaining one or more of its corner coordinates, or (when accompanied by a depressed Control key) while maintaining its center coordinates.

CS 275Tidwell Course NotesPage 139 Pattern #85: Magnetism When objects need to be positioned against each other, make them snap together when the user moves one object within reasonable proximity of the other. Example: When placing an image inside a table cell in Microsoft Word, the user positions the image’s upper right corner inside the cell, and Word enforces alignment within the cell’s borders.

CS 275Tidwell Course NotesPage 140 Pattern #86: Guides To assist users in aligning objects within the canvas, the application should provide horizontal and vertical reference lines. Example: In Microsoft Visual Studio, when a new control is being placed within a form, purple reference lines are shown to assist in aligning text on the same horizontal line, while blue reference lines are shown to assist in aligning control edges.

CS 275Tidwell Course NotesPage 141 Pattern #87: Paste Variations Supply the user with a clear way of pasting objects of different types onto the canvas. Example: Microsoft PowerPoint provides separate menu items for pasting image, sound, and movie files into a presentation.