Slide 1

CS 275Tidwell Course NotesPage 128Chapter 8: Builders And EditorsWhether 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 129WYSIWYG EditingFor some applications, its 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 theyre seeing or to imagine the results of their actions.Using Visual Studio, the TV Guide applications controls were entirely created via the Designer, while most of the County Demographics controls were generated by code.

CS 275Tidwell Course NotesPage 130Direct ManipulationEnabling 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 persons counterpart displayed in real time as a background on the screen.CapacitiveSmall voltages at corners have altered currents when screen is touched, with current ratios determining the touch location.ResistiveUser pushes flexible membrane, causing two conductive materials to meet and producing a locatable voltage.

InfraredInfrared beams are broken by screen touching, yielding X and Y coordinates of touch.

AcousticUltrasonic devices produce acoustic patterns when touched, matching stored patterns corresponding to screen position.

CS 275Tidwell Course NotesPage 131Interface ModesDue 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 its performed at a particular location in the current mode of the application.CS 275Tidwell Course NotesPage 132Natural SelectionAlthough 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 133Pattern #79: Edit-In-PlaceFor small textual elements of the editor display, allow users to edit the text in its current location in order to ensure the operations 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 134Pattern #80: Smart SelectionProvide 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 Words Set Transparent Color capability changes all of the pixels matching the mouse-clicked color in an image to transparent. Example: Macromedias 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 SelectionWhen objects within the editors 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 136Pattern #82: One-Off ModeWhen 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 Visios 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 ModeWhen 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 138Pattern #84: Constrained ResizeProvide 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 139Pattern #85: MagnetismWhen 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 images upper right corner inside the cell, and Word enforces alignment within the cells borders.

CS 275Tidwell Course NotesPage 140Pattern #86: GuidesTo 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 141Pattern #87: Paste VariationsSupply 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.