Chapter
`
`General
`
`Interaction Techniques
`
`some cases you can include these properties by implication
`example requesting the properties of
`text selection can also pro
`in which the text
`vide access to the properties of the paragraph
`selec
`
`For
`
`tion is included
`
`Another way to provide access to an objects properties is to create
`representation of the object For example the properties of
`page
`be accessed
`could
`graphic or other representation of the
`through
`special area for example the status bar of the window
`
`page in
`
`to consider
`
`is to include specific
`Yet another
`technique
`property
`on the menu of
`related object For example the pop-up
`entries
`menu of
`menu entry for
`text selection could
`include
`paragraph
`Or consider using the cascading
`submenu
`of the Properties conmTland
`individual menu entries
`but only if the properties arc not easily
`f(cid:0)r
`made accessible otherwise Adding entries
`for individual properties
`end up clutl ering menu
`can easily
`
`The Properties command is not
`the exclusive means of providing
`access to the properties of an object For example folder views
`properlies of objects stored in the file system In
`display certain
`you can use toolbar controls to display properties of
`selected objects
`
`addition
`
`Pen-Specific Editing Techniques
`
`device When
`pen is more than just
`pointing
`device is installed the system provides special
`
`standard
`pen
`and editing
`
`interfaces
`
`techniques
`
`Editing in Pen-Enabled Controls
`
`If
`
`pen is installed the system automatically
`provides
`special
`to make text editing as easy as
`called the writing tool
`interface
`possible enhance
`and streamline correction of
`accuracy
`recognition
`errors The writing tool
`as shown
`in Figure 5.7 adds
`interface
`re
`text controls Because
`button to your standard
`this effectively
`area of the text box take this into consideration
`duces
`the visible
`when designing their size
`
`66
`
`The Windows Interface
`
`Guidelines
`
`fur Software Design
`
`88
`
`

`

`General
`
`Interaction Techniques Chapter
`
`Writing
`
`tool button
`
`Figure
`
`5.7
`
`standard text box with writing tool button
`
`Figure 5.8 shows how you can atso add writing tool support
`as multiline text box
`of your software such
`special needs
`
`for any
`
`14 Mabt St
`
`iiitgfie1d
`
`Figure
`
`5.8 Adding the writing tool button
`
`When
`the text box control has the focus
`selection handle
`appears
`to make
`as shown in Figure 5.9 The user can drag this handle
`selection
`
`Selection
`
`handle
`
`Figure
`
`5.9 Text box displaying
`
`pen selection
`
`handle
`
`pen or clicking it with
`the writing tool button with
`Tapping
`text editing window as shown in Figure
`mouse presents
`special
`5.10 Within this window the user can write text
`is recognized
`automatically
`
`that
`
`The Windows Interface
`
`Guidelines
`
`for Software Design
`
`67
`
`89
`
`

`

`Chapter
`
`General
`
`Interaction Techniques
`
`1e
`
`IT1
`
`iii
`
`il14
`
`1PJa1 in St
`LS4Lrin.gfie1d
`
`HndoJK LJ LJJ
`
`OK
`
`Figure
`
`5.10 Single
`
`and
`
`rnultiline writing
`
`tool windows
`
`In the writing tool editing window each character
`is displayed
`within
`in the original
`special cell If the user selects
`text
`text
`the writing tool window reflects
`The user can
`that selection
`reset
`selection to an insertion point by tapping between characters This
`can be dragged
`selection handle
`also displays
`to select multiple
`that
`as shown
`characters
`
`field
`
`the
`
`in Figure 5.11
`
`PJ lJndoJ
`
`Glee
`
`Figure
`
`5.11 Selecting
`
`text with
`
`the selection
`
`handle
`
`The user can
`
`select
`
`double-tapping
`
`to select
`
`single character
`in its cell by tapping or
`word When
`single charac
`the user taps
`list of alternative
`ter an action handle displays
`characters
`shown in Figure 5.12
`
`as
`
`68
`
`The Windows
`
`Interface
`
`Guidelines
`
`for Software
`
`Design
`
`90
`
`

`

`General
`
`Interaction Techniques Chapter
`
`Action
`
`handle
`
`Figure
`
`5.12 An action
`
`handle with
`
`list of alternatives
`
`replaces the selected character and removes
`Choosing an alternative
`also removes
`character or tapping elsewhere
`the list Writing
`over
`the list The new character
`replaces the existing one and resets
`the
`to the left of the new character
`to an insertion point placed
`
`selection
`
`selects
`
`this choice
`selected and
`
`The list also includes an item labeled Wordlist When
`the user
`the word that contains the character becomes
`as shown in Figure
`list of alternatives
`is displayed
`appears when the user selects
`word by
`complete
`replaces the selected word
`Choosing an alternative
`
`5.13 This list also
`
`double-tapping
`
`Figure
`
`5.13 Tapping displays
`
`list of alternatives
`
`in the window an action handle
`Whenever
`selection exists
`appears
`the user can use it to perform other operations on the selected items
`For example using the action handle moves
`the selection
`or copies
`by dragging or the pop-up menu for the selection can be accessed
`tapping on the handle as shown
`in Figure 5.14
`
`by
`
`For more
`information
`pop-up menus
`see Chapter
`Menus Controls and Toolbars
`
`about
`
`The Windows Interface
`
`Guidelines
`
`for Software Design
`
`69
`
`91
`
`

`

`Chapter
`
`General
`
`Interaction Techniqnes
`
`Action
`
`handle
`
`Lfrido
`
`Figure
`
`5.14 Tapping on Ihe handle displays
`
`pop-up menu
`
`The buttons on the writing tool window provide for scrolling
`as well as common functions
`as Undo Backspace
`Insert Space
`such
`for closing the text window
`Insert Period and Close
`multiline
`writing tool window includes Insert New Line
`
`the text
`
`The writing tool windaw also provides
`keyboard as
`to entering characters with the
`onscreen
`an alternative
`pen as shown in Figure 5.15 The user taps the button with the cor
`keyboard glyph on it and the writing tool onscreen
`key
`responding
`board pop up window replaces the normal writing tool window
`
`button for access to an
`
`Figure
`
`5.15 The writing tool onscreen
`
`keyboard window
`
`70
`
`The Windnws
`
`Interface
`
`Gnidelines
`
`fnr Software
`
`Design
`
`92
`
`

`

`General
`
`Interaction Techniques Chapter
`
`remembers
`The writing tool
`input or as
`its previous use
`for text
`in the appropriate editing win
`and opens
`keyboard
`an onscreen
`note that when the user
`dow when subsequently
`used In addition
`writing tool window it gets
`focus so avoid
`the input
`displays
`using the loss of input
`focus
`field as an indication that
`the user is
`to
`finished with that
`field or that all
`text box
`
`text editing occurs
`
`directly within
`
`Pen Editing Gestures
`
`device
`
`if
`
`selections
`
`The pen when used
`pointing
`supports editing techniques
`as
`defined for the mouse When used
`the pen sup
`as writing device
`for Undo operate posi
`ports gestures for editing Gestures except
`tionally acting upon the objects on which they are drawn If the user
`gesture on an unselected
`draws
`even
`object
`it applies to that object
`elsewhere within the same selection area Any
`selection exists
`become
`unselected
`user draws
`gesture over
`If
`pending
`both selected and unselected
`objects however
`it applies only to the
`gesture is drawn over only ne element
`selected ones If
`of the
`selection it applies to the entire selection If the gesture is drawn in
`empty space on the background
`it applies to any existing
`selection
`within that selection scope If no selection exists the gesture has
`no effect
`
`For most gestures the hot spot of the gesture determines
`which object
`the gesture applies to If the hot spot occurs
`selection it applies to the whole selection
`of
`
`specifically
`on any part
`
`Table 5.2 lists the common pen editing gestures For these gestures
`the hot spot of the gesture is the area inside the circle stroke of the
`
`gesture
`
`The Winduws Interface
`
`Guidelines
`
`for Software Design
`
`71
`
`93
`
`

`

`gestures may be local
`in certain
`international
`ized
`versions In Japanese
`is used
`circled-k
`
`versions the
`
`to convert
`
`fl These
`
`gesture
`Kana to Kanji
`
`Chapter
`
`General
`
`Interaction Techniques
`
`Table
`
`5.2 Pen Editing Gestures
`
`Gesture
`
`Name
`
`Operation
`
`circled check
`
`Edit displays the writing
`dow for text Properties
`
`tool editing win
`
`for all other objects
`
`circled
`
`Copy
`
`circled-d
`
`Delete or Clear
`
`circled-rn
`
`Menu
`
`circled
`
`New line
`
`circled-p
`
`Paste
`
`circled
`
`Insert
`
`space
`
`circled-t
`
`Insert
`
`tab
`
`circled
`
`Undo
`
`circled
`
`Cut
`
`circled
`
`Insert
`
`text
`
`Transfer Operations
`
`involve or can be derived
`Transfer operations are operations that
`from moving copying and linking objects from one location to
`transfer op
`form of
`For example printing an object
`another
`it can be defined as copying
`eration because
`printer
`
`an object
`
`to
`
`is
`
`Three components make up
`to be
`the object
`transfer
`operation
`the destination of the transfer and the operation to be
`transferred
`performed You can define these components either explicitly
`or
`implicitly depending on which interaction
`you use
`technique
`
`72
`
`The Windows
`
`Interface
`
`Guidelines
`
`for Software Design
`
`94
`
`

`

`General
`
`Interaction Techniques Chapter
`
`transfer
`
`is determined
`
`define
`
`The operation defined by
`by the destination
`Because
`transfer may have
`possible interpretations you can
`several
`on
`default operation and other optimal operations
`based
`and the compat
`by the source of the transfer
`information
`provided
`ibility and capabilities
`of the destination
`For example
`attempting to
`in one of the following
`an object
`transfer
`alternatives
`
`to
`
`container
`
`can result
`
`Rejecting the object
`
`Accepting
`
`the object
`
`subset or
`
`transformed form of the object for ex
`Accepting
`or properties but discard its present
`ample extract
`its content
`new type
`containment or convert
`the object
`into
`
`Most
`
`transfers
`
`are based
`
`on one of the following
`
`three fundamental
`
`operations
`
`Operation
`
`Description
`
`Move
`
`Relucates
`
`ur repositions
`
`the basic
`
`it does
`the selected object Because
`of an object move operation
`not change
`identity
`and deleting
`the same as copying an object
`
`is not
`
`the
`
`original
`
`Copy
`
`Makes
`
`duplicate
`
`of
`
`nf an nhject The resulting nhject
`does not always
`
`is
`
`of
`
`independent
`Duplication
`its original
`clone Some of
`produce an identical
`the properties
`object may be different
`For
`from the original
`duplicated
`different name
`example copying
`an object may result
`in
`date Similarly if some component
`or creation
`then only the unrestricted
`copying
`be copied
`
`restricts
`
`of
`the object
`elements may
`
`Link
`
`Creates
`
`connection
`
`between
`
`two objects The result
`
`is
`
`usually
`
`an object
`
`in the destination
`
`that provides
`
`access
`
`to
`
`the original
`
`There are two different methods for supporting the basic transfer
`the command method and the direct manipulation method
`interface
`
`The Windows Interface
`
`Guidelines
`
`for Software
`
`Design
`
`73
`
`95
`
`

`

`Chapter
`
`General
`
`Interaction Techniqoes
`
`Command Method
`
`The command methoc for transferring objects uses the Cut Copy
`and Paste commands Place these commands on the Edit drop-down
`menu and on the pop-up menu for
`selected object You can also
`these commands
`include toolbar buttons to support
`
`To transfer
`
`an object
`
`the user
`
`Makes
`
`selection
`
`Chooses either Cut or Copy
`
`to the destination and sets the insertion location
`Navigates
`appropriate
`
`if
`
`Chooses
`
`Paste operation
`
`transfers
`
`it or
`Cut removes the selection and transfers
`reference to it to the
`the selection or
`reference to it and
`Clipboard Copy duplcates
`it to the Clipboard Paste completes
`the transfer
`operation
`For example when the user chooses Cut and Paste remove the se
`lection from the source
`and relocate it to the destination
`For Copy
`duplicate of the selection and leave
`and Paste insert
`an independent
`When the user chooses
`and Paste Link
`the original unaffected
`Copy
`or Paste Shortcut
`an object at the destination that
`insert
`
`is linked to
`
`the source
`
`how the object will
`form of Paste command that
`Choose
`indicates
`Use the Paste command by itself
`be transferred into the destination
`the object will be transferred as native content
`You
`forms of the Paste command for other 05
`can also use alternative
`form
`sible transfers using the following
`general
`
`to indicate that
`
`74
`
`The Windnws
`
`Interface
`
`Guidelines
`
`for Software
`
`Design
`
`96
`
`

`

`General
`
`Interaction Techniques Chapter
`
`information
`
`about
`
`For more
`names
`their
`including
`see Chapter 10 Inte
`the System
`
`object
`name
`type
`grating with
`
`For more
`
`these
`
`Paste
`
`about
`information
`command forms
`box
`and
`Special
`dialog
`see Chapter 11 Working with OLE
`Embedded
`and OLE
`Linked Objects
`
`the
`
`Paste
`
`Pastc
`
`name
`
`type name
`
`to object name
`
`For example Paste Cells as Word Table where
`and Word Table is the converted
`type name
`
`name is Cells
`
`The following
`
`summarizes common forms of the Paste command
`
`Command
`
`Function
`
`Paste
`
`Paste
`
`Paste
`
`as Icon
`
`Paste Link
`
`name
`
`name
`
`Paste Link to
`name
`
`Paste
`
`Shortcut
`
`Inserts the object
`content data
`
`on the Clspboard as natsve
`
`on the Clipboard as an OLE
`Inserts the object
`embedded object The OLE embedded object
`be activated
`directly within
`
`the destination
`
`can
`
`on the Clipboard as an OLE
`Inserts the object
`embedded object The OLE embedded object
`as an icon
`
`displayed
`
`ss
`
`that was copied to
`Inserts
`data link to the object
`the Clipboard The objects value
`transformed as native
`content within
`
`is integrated
`
`or
`
`the
`
`destination
`
`but remains linked
`
`to the original
`
`object
`
`so that changes
`destination
`
`to it are reflected in the
`
`Inserts an OLE linked
`object displayed
`as
`copied to the Clipboard The
`the object
`picture of
`is linked
`to the object
`copied to the
`representation
`that any changes
`Clipboard so
`tu the original
`object will be reflected in the destination
`
`source
`
`as
`
`Inserts an OLE linked
`object displayed
`icon to the object
`that was copied to the
`shortcut
`Clipboard The representation
`is linked
`to the
`copied to the Clipboard so
`that any
`object will be
`to the original
`in the destination
`
`object
`
`changes
`reflected
`
`source
`
`Paste
`
`Special
`
`box that gives
`the user explicit
`Displays
`dialog
`control uer how to insert
`un the
`the ubjcct
`
`Clipboard
`
`The Windows Interface
`
`Guidelines
`
`for Software Design
`
`75
`
`97
`
`

`

`Chapter
`
`General
`
`Interaction Techniques
`
`what forms of the Paste
`Use the destinations
`to determine
`context
`on what options it can offer to the user
`operation to include based
`on the available forms of the object
`which in turn may depend
`that
`It can also be dependent on the
`its source location object provides
`For example
`defines
`
`nature or purpose
`
`of the destination
`
`printer
`
`the context of transfers
`
`to it
`
`you will need only Paste and Paste Special commands
`Typically
`The Paste command can be dynamically modified to reflect
`the
`default or preferred form by inserting
`destinations
`the transferred
`as native data or as an OLE embedded
`for example
`object
`The Paste Special command can be used
`to handle
`any special
`context makes
`of transfer Although if the destinations
`it reason
`specialized form of transfer
`able to provide fast access to another
`include that command
`as Paste Link you can also
`
`object
`
`forms
`
`such
`
`Use the destinations
`
`effects
`
`type of object being
`
`context also
`to determine
`the appropriate side
`You may also need to consider
`the
`of the Paste operation
`inserted by the Paste operation and the relation
`are some common
`The following
`type to the destination
`
`ship of that
`
`scenarios
`
`specific
`
`in text or
`
`When
`destination that supports
`the user pastes into
`insertion location
`replace the selection in the destination with the
`transferred data For example
`list contexts where the
`selection repiesents
`replace the
`insertion location
`spccific
`In text contexts where there is an
`destinations
`active selection
`but there is no existing selection place the
`insertion point after
`the inserted object
`
`insertion location
`
`contexts where
`ordered
`or
`For destinations with nonordered
`add the pasted object and make
`there is no explicit
`insertion point
`it the active selection Also use the destinations
`to deter
`mine where to place the pasted object Consider
`any appropriate
`For example if the user chooses
`the
`user contextual
`information
`pop-up menu ou can use the pointers
`Paste command from
`location when the mouse button is clicked to place the incoming
`If the user supplies no contextual
`clues place the object at
`object
`the location that best fits
`the context of the destination
`for
`
`context
`
`example
`
`at the next grid position
`
`76
`
`The Windows Interface
`
`Guidelines
`
`for Software Design
`
`98
`
`

`

`General
`
`Interaction Techniques Chapter
`
`If the new object
`linked to the active
`connected
`is automatically
`graph you may insert
`data and
`selection for example table
`the
`new object
`in addition to the selection and make the inserted
`the new selection
`object
`
`to display an OLE em
`whether
`You also use context
`to determine
`or OLE linked object
`view or picture of the
`bedded
`as content
`intemal data or as an icon For example you can decide
`objects
`what presentation to display based
`on what Paste operation the user
`implies pasting an OLE link as an icon Simi
`selects Paste Shortcut
`larly the Paste Special command includes options that allow the
`user to specify how the transferred object should
`be displayed If
`the destination application de
`there is no user-supplied
`preference
`the default For documents
`display the inserted
`you typically
`fines
`OLE object
`fit the con
`in its content
`If icons better
`presentation
`text of your application make the default Paste operation display the
`transferred OLE object
`as an icon
`
`as
`
`Paste command should not affect
`The execution
`of
`of
`the content
`the Clipboard This allows data on the Clipboard to be pasted mul
`tiple times although
`Paste operations should
`always
`subsequent
`in copies of the original However
`subsequent Cut or Copy
`result
`command replaces the last entry on the Clipboard
`
`Direct Manipulation Method
`The command method is useful when
`operation requires
`transfer
`and destination However for
`between source
`the user to navigate
`natural and quick method In
`many transfers direct manipulation
`and drags an object
`transfer the user selects
`direct manipulation
`this method requires motor skills
`the desired location
`that may be difficult
`for some users to master avoid using it as
`the
`exclusive transfer method The best interfaces
`the transfer
`support
`command method for basic operations and direct manipulation
`shortcut
`fer as
`technique
`
`is
`
`but because
`
`to
`
`trans
`
`used
`
`as
`
`or when it drags an
`When
`pen is being
`device
`pointing
`the same conventions
`action handle it follows
`as dragging with
`mouse button
`For pens with barrel buttons
`use the barreldrag
`action as the equivalent of dragging with mouse button
`no keyboard interface
`transfers
`
`for direct manipulation
`
`There is
`
`The Windows Interface
`
`Guidelines
`
`for Software Design
`
`77
`
`99
`
`

`

`Chapter
`
`General
`
`Interaction Techniques
`
`You can support direct manipulation
`to any visible
`object
`transfers
`window or
`The object for example
`icon need not be currently
`in an inactive win
`active For example the user can drop an object
`dow The drop action activates
`the window If an inactive object
`transfer it or its container
`cannot
`direct manipulation
`to the user
`
`accept
`should provide feedback
`
`How the transferred object
`is integrated and displayed in the drop
`by the destinations
`dropped
`context
`destination is determined
`as native data an OLE object
`object can be incorporated
`form of the object
`or
`such
`its properties
`trans
`partial
`whether
`to add to or replace an exist
`formed object You determine
`on the context of the operation
`ing selection based
`using such
`the destinations
`the formats available for the object
`and any user-supplied
`information
`such
`the specific
`purpose
`the user drops or commands or modes that
`location that
`has selected For example an application can supply
`of tool
`the properties of objects
`
`as
`
`the user
`
`particular
`
`type
`
`either
`
`as
`
`factors
`
`as
`
`for copying
`
`Default Drag and Drop
`
`an object using mouse button
`Default drag and drop transfers
`How the operation is interpreted is determined
`by what
`the destina
`As with the com
`tion defines as the appropriate default operation
`mand method the destination determines
`on information
`this based
`the object and the formats available for the object
`and the
`about
`context of the destination itself Avoid defining
`destructive opera
`the default When
`message box
`is unavoidable display
`that
`tion as
`to confirm the intentions of the user
`
`transfer
`
`technique the user can directly
`Using this transfer
`objects
`between documents defined by your application as well
`as to system
`and printers Support
`drag and drop follow
`such
`resources
`as
`folders
`the system supports the user presses but
`ing the same conventions
`down on an object moves
`the mouse while holding the button
`ton
`down and then releases
`the button at the destination
`For the pen the
`by the location where the user lifts
`the pen
`destination is determined
`tip from the input surface
`
`78
`
`The Windows
`
`Interface
`
`Guidelines
`
`for Software Design
`
`100
`
`

`

`General
`
`Interaction Techniques Chapter
`
`transfer
`
`operation is Move but the desti
`The most common default
`the operation to be what
`nation dropped on object
`can reinterpret
`ever is most appropriate
`you can define
`default drag
`Therefore
`and drop operation to be another
`operation such
`general
`transfer
`command such
`as Print or Send
`Cupy ur Link
`destination specific
`To or even
`specialized form of transfer
`as Copy Properties
`such
`
`as
`
`Nondefault Drag and Drop
`
`an object using mouse button
`drag and drop transfers
`Nondefault
`In this case rather than executing
`default operation the destination
`pop up menu when the user releases
`the mouse button as
`displays
`shown in Figure 5.16 The pop up menu contains the appropriate
`commands
`completion
`transfer
`
`100.00
`
`r9hFlDHtrpim
`
`He
`
`Copy Here
`
`Link
`
`Heta
`
`Cancel
`
`Figure
`
`5.16
`
`nondetault drag and drop operation
`
`com
`which transfer
`The destination always
`determines
`completion
`pop up menu usually factoring in
`mands
`to include on the resulting
`information
`the object supplied by the source location
`
`about
`
`The form for nondefault
`
`as
`
`drag and drop transfer
`verbs
`completion
`the Paste command Use the common
`follows similar conventions
`verbs Move Here Copy Here and Link Here
`completion
`when the object being
`transferred is native data of the destination
`When it is not
`include the type name You can also display altema
`verbs that communicate the context of the destina
`tive completion
`
`transfer
`
`The Windows Interface
`
`Guidelines
`
`for Software Design
`
`79
`
`101
`
`

`

`Chapter
`
`General
`
`Interactinn Techniqnes
`
`Print Here command
`tion for example
`printer displays
`commands that support only
`transformation
`partial aspect or
`an object use more descriptive indicators
`for example Copy
`Properties Here or Transpose Here
`
`For
`
`of
`
`Use the following
`commands
`
`general
`
`form for nondefault
`
`drag and drop transfer
`
`Name Ftype name
`
`object name Here
`
`type name
`
`summarizes common forms for nondefault
`The following
`commands
`
`completion
`
`transfer
`
`Command
`
`Move Here
`
`Copy Here
`
`Function
`
`Moves the selected
`
`destination
`
`as native
`
`to the
`object
`content data
`
`Creates
`
`copy of
`the destination
`as native
`
`the selected
`
`object
`content
`
`in
`
`Link Here
`
`Creates
`
`data link between
`
`the selected
`
`and the destination
`object
`objects value is integrated
`transformed as native
`data within the
`but remains linked
`
`destination
`
`to the
`
`The original
`
`or
`
`original
`
`object
`
`so that changes
`
`to it are
`
`reflected
`
`in the destination
`
`Move
`Copy
`
`name Here
`name Here
`
`as an
`
`Moves or copies
`the selected
`object
`OLE embedded object The OLE
`embedded object
`in its
`is displayed
`and can be activated
`
`content
`
`presentation
`directly within
`
`the destination
`
`Link
`
`name Here
`
`Creates
`
`an OLE linked
`object
`displayed
`the selected object The
`is linked
`to the selected
`
`as
`
`picture of
`
`representation
`to the original
`that any changes
`so
`object
`object will be reflected in the destination
`
`80
`
`The Windows
`
`Interface
`
`Guidelines
`
`for Software Design
`
`102
`
`

`

`General
`
`Interaction Techniques Chapter
`
`Continued
`
`Command
`
`Move
`Copy
`
`name Here
`name Here
`
`as Icon
`as Icon
`
`Create Shortcut
`
`Here
`
`Function
`
`Moves or copies
`the selected
`OLE embedded object
`an icon
`
`object
`and displays
`
`as an
`
`it as
`
`Creates
`
`an OLE linked
`selected object displayed
`icon The representation
`
`object
`
`to the
`
`as
`
`shortcut
`
`is linked
`
`to the
`
`selected
`
`original
`
`so that any changes
`object
`object will be reflected in the
`
`to the
`
`destination
`
`and appropriately display one of the commands in the pop-up
`Define
`This is the com
`menu to be the default drag and drop command
`mand that corresponds
`and dropping with
`to the effect of dragging
`mouse button
`
`about
`For more
`information
`how to display default menu
`see Chapter 13 Visual
`commands
`Design
`
`Canceling
`
`Drag and Drop Transfer
`
`the
`
`cancel
`
`the transfer
`
`When
`an object back on itself
`user drags and drops
`interpret
`transfer Similarly
`action as cancellation of
`direct manipulation
`if the user presses the ESC key during
`drag trans
`command in the pop-up menu of
`include
`Cancel
`fer In addition
`this com
`nondefault drag and drop action When
`the user chooses
`mand cancel
`the operation
`
`Differentiating
`
`Transfer and Selection When Dragging
`
`Because
`
`performs both selection and transfer
`operations
`dragging
`between
`convention
`that allows the user to differentiate
`provide
`is most
`The convention
`you use depends on what
`these operations
`appropriate in the current context of the object
`or you can provide
`for selection or transfer The most common tech
`specialized handles
`uses the location of the pointer at the beginning
`of the drag
`nique
`is within an existing selection
`operation If the pointer
`interpret
`drag to be
`If the drag begins outside of an exist
`transfer
`operation
`ing selection on the backgrounds white space interpret
`the drag as
`selection operation
`
`the
`
`The Windows Interface
`
`Guidelines
`
`for Software Design
`
`81
`
`103
`
`

`

`Chapter
`
`General
`
`Interaction Techniques
`
`Scrolling When Transferring by Dragging
`When the user drags and drops
`from one scrollable
`area
`an object
`such as window pane or list box to another
`some tasks may
`require transferring the object outside the boundary
`of the area
`tasks may involve dragging
`location not cur
`the object
`Other
`to
`in view In this latter case it is convenient
`the area also known as automatic
`scrolling or autoscroll
`when the user drags the object
`to the edge of that scrollable area
`You can accommodate
`both these behaviors
`by using the velocity of
`the object
`if tbe user is dragging
`action For example
`the dragging
`slowly at the edge of the scrollable
`the area if the
`area you scroll
`do not scroll
`
`rently
`
`scroll
`
`to automatically
`
`object
`
`is being
`
`dragged quickly
`
`Distance
`
`as
`
`this algorithm
`
`implemented
`true Car
`is not
`
`in
`
`tesian
`
`distance
`
`This
`
`implementation
`
`absyl
`
`uses
`
`during
`
`this technique
`
`To support
`drag operation you sample the
`time the mouse
`of the drag each
`position at the beginning
`pointers
`moves and on an application-set
`timer every 100 milliseconds
`rec
`ommended If you use OLE drag and drop support
`you need not set
`timer Store each
`enough
`to hold at
`value in an array large
`least
`three samples replacing existing samples with later ones Then cal
`on at least
`two locations
`the last
`culate the pointers
`velocity based
`
`of the pointer
`
`sum the distance between the points in
`To calculate the velocity
`sample and divide the total by the sum of the time
`each
`adjacent
`elapsed between samples Distance
`is the absolute value of the dif
`x2
`or absxl
`ference between the
`and
`locations
`y2 Multiply this by 1024 and divide it by the elapsed time to pro
`1024 multiplier prevents
`the loss of accuracy
`the velocity
`by integer division
`
`duce
`
`caused
`
`The
`
`You also predefine
`the edges of the scrollable
`hot zone
`along
`time-out value Use twice the width of
`and
`vertical
`scroll
`
`area
`
`scroll
`
`bar or height of
`hot zone
`
`horizontal
`
`scroll bar to determine
`
`the width of the
`
`scroll
`
`conditions
`
`the area if the following
`During the drag operation
`are met the user moves
`the pointer within the hot zone the current
`and the scrollable
`is below
`area
`threshold velocity
`it is in
`in the direction associated with the hot zone
`threshold velocity is 20 pixels per second These
`are illustrated in Figure 5.17
`
`velocity
`
`certain
`
`is able to scroll
`The recommended
`
`conventions
`
`82
`
`The Windows Interface
`
`Guidelines
`
`for Software Design
`
`104
`
`an approximation for purposes
`rather
`than
`the
`
`of efficiency
`
`root
`
`of
`
`the
`
`using
`sum of
`the
`square
`yl y2
`x2A2
`squares sqrtxl
`A2 which is more computationally
`expensive
`
`

`

`General
`
`Interaction Techniques Chapter
`
`Auto-scroll
`hot zone
`
`l\
`
`Figure
`
`5.17 Automatic
`
`scrolling
`
`based
`
`on velocity
`
`of draqqing
`
`and rea
`The amount you scroll depends on the type of information
`sonable
`distance For example for text you typically
`time Consider
`using the same scrolling
`one line at
`for the scroll bar arrows
`
`scrolling
`
`vertically
`
`granularity that
`
`is provided
`
`scroll
`
`what
`To support continuous
`the scroll
`scrolling determine
`frequency
`for example four lines per second After
`you want
`to support
`velocity check
`timer
`for
`to initiate auto-scrolling set
`using
`100 milliseconds When the timer expires
`how
`example
`long it has been since the last
`If the elapsed time
`time you scrolled
`frequency scroll another unit If not
`is greater than your scrolling
`again when the timer completes
`your timer and check
`reset
`
`determine
`
`Transfer Feedback
`
`Because
`
`providing
`
`transferring objects is one of the most common user tasks
`Incon
`factor
`appropriate feedback
`is an important
`sistent or insufficient
`feedback
`
`design
`
`can result
`
`in user confusion
`
`For more
`
`information
`
`about
`
`scrolling see Chapter
`Windows
`
`For more
`
`information
`
`about
`
`feedback
`designing
`see Chapter 13 Visual Design
`
`transfer
`
`Command Method Transfers
`
`command method transfer remove the selected object visually
`For
`the Cut command If there are special circum
`when the user chooses
`stances that make removing the objects
`you
`appearance
`instead display the selected object with
`special appearance
`can
`the Cut command was completed
`but
`inform the user that
`
`to
`
`that
`
`the
`
`impractical
`
`The Windows
`
`Interface
`
`Guidelines
`
`for Software Design
`
`83
`
`105
`
`

`

`Chapter
`
`General
`
`Interaction Techniques
`
`restore the visual
`
`objects
`
`transfer
`
`in
`
`checkerboard
`
`is pending For example
`the system displays icons
`dither to indicate this state You will also need to
`if the user chooses Cut or Copy
`state of the object
`Paste command
`for another object before choosing
`effectively
`the pending Cut command
`The user will expect Cut to
`canceling
`remove
`selected object
`the impact of incon
`so carefully consider
`sistency if you choose this alternate
`feedback
`
`The Copy command requires no special
`Paste operation
`also requires no further feedback
`than that already provided
`by the
`insertion of the transferred object However if you did not remove
`representation when
`the display of the object and used
`an alternate
`the Cut command you must remove it now
`the user chose
`
`feedback
`
`Direct Manipulation Transfers
`
`During
`direct manipulation
`back for the object
`
`the pointer
`
`provide visual
`transfer
`operation
`and the destination Specifically
`
`feed
`
`Display
`
`transfer
`
`the object with selected appearance while the view it
`in has the focus To indicate that
`appears
`the object
`is in
`transfer
`state you can optionally display the object with some additional
`for move operation
`characteristics
`For example
`appearance
`used by the
`you can use the checkerboard
`dithered appearance
`system to indicate ss hen an icon is Cut Change
`this visual
`state
`on the default completion
`based
`by the desti
`operation supported
`is currently over Retain
`nation the pointer
`the representation of
`the object at the original
`location until
`the user completes
`the
`operation This not only provides
`visual cue to the
`nature of the transfer
`
`operation
`
`it provides
`
`convenient
`
`visual
`
`reference point
`
`that moves with the pointer
`representation of the object
`Display
`Use
`presentation that provides the user with information
`about
`how the information will appear
`in the destination and that does
`not obscure
`the coni ext of the insertion location For example
`when transferring an object
`text context
`into
`it is important
`the insertion point not be obscured
`during the drag operation
`as shown
`translucent or outline representation
`in Figure 5.18
`
`that
`
`84
`
`The Windows
`
`Interface
`
`Guidelines
`
`for Software Design
`
`106
`
`

`

`General
`
`Interaction Techniques Chapter
`
`works well because
`
`it allows the underlying
`
`insertion location to
`
`information
`be seen while also providing
`and nature of the object being dragged
`
`about
`
`the size position
`
`LJ
`
`FoIdridj
`
`Figure
`
`5.18 Outline
`
`and translucent
`
`representations
`
`tor transfer operations
`
`object
`
`that
`
`The objects existing source location provides the transferred
`the
`initial appearance but any destination can change
`objects
`to provide feed
`appearance Design the presentation of the object
`as to how the object will be integrated by that destination
`back
`For example if an object will be embedded
`as an icon display the
`as an icon If the object will be incorporated as part of the
`native content
`of the destination
`then the presentation of the object
`that For example if
`the destination displays should
`reflect
`document will be incorporated as
`dragged
`being
`table
`into
`form of
`table the representation could be an outline or
`translucent
`the table On the other hand
`if the table