chapter 5: doing things

Tidwell Course NotesCS 275

Chapter 5: Doing ThingsSeveral screen components and interactions have been developed to facilitate user actions within an application...

Traditional Visible Components

ButtonsMenu Bars

Context MenusDropdown Menus

ToolbarsLinks

Traditional Invisible Actions

Double ClickingKeyboard ActionsDrag-And-Drop


Buttons

To start an action

To change properties

To open a pop-up menu

PROS:• More convenient than pulling

down a menu and making a selection.

• Fast means of performing common actions.

• Highly visible mechanism for seeing what can be done.

• When 3-D in appearance, aesthetically pleasing feedback for acknowledging that an action is being taken.CONS:

• Screen space consumption.• Phrasing of button text may not

be clear or concise.• Due to space and potential

confusion, number of buttons must be limited.


Menu Bars

Cascading Sub-Menu

Menu Bar

Menu Items

PROS:• Easily accessible.• Little wasted space.• Cascading facilitates

implementing a hierarchical command structure.

• Promotes both mouse and keyboard access to commands when supplemented with keyboard selection of menu items.

CONS:• Functionality is rather hidden.• Covers active screen elements when opened.• Cascading menu items can cause extra mental and physical

labor for users.• Phrasing of menu header and item text may not be clear or

concise.• Requires extra program logic to handle disabled menu

commands.


Context Menus

Cascaded Sub-Menu

Context Menu,

Opened Via Right-

Button Click

PROS:• Provides easy access

to context-specific functionality.

• Uses screen real estate on an as-needed basis.

CONS:• Availability might be unknown to

users.• Obscures active screen elements

when opened.


Dropdown Menus

Drop-Down List: Permits selection of one of several

mutually exclusive choices

Combo Box:

Allows user to type

entry or select

from list

PROS:• Combo boxes provide

flexibility (either text entry or list selection).

• Conserves screen space by using significant space only when activated.

• When obvious default value exists and is used, requires little or no user effort.

CONS:• Displaying the list

requires extra work on the user’s part.

• Small size may make control difficult to locate.


Toolbars

Iconic Button

s

PROS:• Extremely space-

saving.• Facilitates user

customization of interface.

• Work well when associated functionality possesses an obvious visual rendering.

CONS:• Icons often have obscure meaning; tooltips are pretty

much required.• Must be grouped logically to facilitate user

comprehension.• Can overwhelm users if employed excessively.


LinksPROS:• Traditional blue text

is reminiscent of Web hyperlinks, providing familiarity to users.

• Essentially equivalent to text-based buttons.CONS:

• Might be read as colored text instead of control widgets.

• Web interaction often causes users to mistakenly expect full Web functionality (e.g., back buttons, separate pages, search capabilities).

Link to local

application

Link to external

site


Double-Clicking

Double-clicking to activate an application

Double-clicking to make a selection

Double-

clicking to

open a folder

Double-Clicking DrawbackFine motor skills are needed

to double-click, and new users often have problems

clicking fast enough or keeping the mouse still while

double-clicking.


Keyboard ActionAction Windows XP Mac OS Action Windows XP Mac OS Action Windows XP Mac OS

Quit the application Cmd-Q Find the next match F3 Cmd-G Minimize all Win-M

File menu Alt-F Find and replace matches Cmd-F Undo minimize all Win-Shift-M

Create a new document Ctrl-N Cmd-N View menu Alt-V Switch fullscreen/normal size F11

Open a document Ctrl-O Cmd-O Zoom in on the document Ctrl-Click Wheel (Scroll)

Cmd-Shift-= (Cmd-Plus) Show / hide desktop Win-d

Save the current document Ctrl-S Cmd-S Zoom out of the document Ctrl-Click Wheel (Scroll) Cmd-Minus Kill window Alt-F4

Print the current document Ctrl-P Cmd-P Redraw current view of document, w/o checking if content has changed Cmd-R Close dialog Esc Esc

Close the current document Cmd-W Reload current document, updating content from source if necessary Cmd-R Give focus to window's menu bar F10

Edit menu Alt-E Display the selected object's Properties window. Cmd-I Pop up contextual menu for currently-

selected objects Shift-F10

Undo the last operation Ctrl-Z Cmd-Z Bookmarks menu Alt-B Create new tab Cmd-T

Redo the last operation Ctrl-Y Cmd-Shift-Z Add a bookmark for the current location Ctrl-D Cmd-D Go to next/previous tab Ctrl+Tab, Ctrl+Shift+Tab

Cut the selected area and store it in the clipboard Ctrl-X Cmd-X Open a window in which the user can edit

and organize saved bookmarksCmd-Option-

B Run new application Win+R

Copy the selected area into the clipboard Ctrl-C Cmd-C Make selected text bold/regular Ctrl-B Open new internet window with same

page as current Ctrl+N

Paste contents of clipboard at mouse/cursor position Ctrl-V Cmd-V Underline/remove underline from selected

text Ctrl-U Start menu/Applications menu Win, Ctrl-Esc

Select everything in focused control or window Ctrl-A Cmd-A Make selected text italic/regular Ctrl-I Take a screenshot Ctrl-Print Screen Ctrl-Shift-3

Delete selection Del Delete (Backspace)

Show help contents page for the current application F1 F1 Take a screenshot of window Alt-Print Screen Ctrl-Shift-4,

SpaceFind matches in current document,

highlighting them in-place Ctrl-F Cmd-F Switch focus to next or previous window on desktop

Alt-Tab, Shift-Alt-Tab Task manager Ctrl-Shift-Esc

Search for matches in multiple documents Cmd-Space Pop up window menu Alt-Space Lock desktop Win-L

Close the focused window Alt-F4 Alt-F4 Show desktop Win-D F11

Keyboard Action DrawbackMany such “shortcuts” have no mnemonic

assistance, so they’re often strictly for experienced users.


Drag-And-Drop

Dragging a file onto an application

Dragging an

application onto a

file Drag-And-Drop DrawbackImprecise movement can cause a

dragging when the user merely intends to select; if the drop target is hidden from

view, the user is inconvenienced.


Non-Traditional Interaction: VRMLOther, non-traditional approaches to interaction are, of course,

possible, but they should possess an intuitive aspect that facilitates their use by the intended users.

Using a special plug-in for Web

browsers, VRML, the Virtual Reality

Modeling Language, makes

it possible to create

applications in which every 3D graphical object

serves as a control (e.g., the volcanoes in this

example).


Pattern #44: Button GroupsWhen there are a small number of related actions that a user can perform, cluster the associated buttons into a self-contained unit.

Example: The three buttons in the left tabbed form all relate to the data sources; the pair clustered at the top of the right tabbed form involves tracing; and the group of four buttons on the bottom sits outside the tabs, relating to the application as a whole.


Pattern #45: Action PanelWhen there are a large number of actions that a user can perform - actions that should always be visible - a panel containing a list of links is a good option.

Example: The Slide Design

panel in Microsoft

PowerPoint allows the user

to edit the design template, color

scheme, and animation

scheme of a slide presentation.


Pattern #46: Prominent “Done” ButtonThe visual flow of the page should lead to a

prominently displayed button that allows the user to exit the page or complete an action.Example: The CSU application

at right relegates the Exit button to the rightmost position, while Macromedia’s Dreamweaver goes further and physically separates the Done button from the others on the form at left.

Example: This PDA baseball game groups the game state in the upper left, the baseball field in the upper

right, and the player action buttons along the bottom, leaving the middle

left open for buttons to undo or complete particular plays.


Pattern #47: Smart Menu ItemsDynamically adjust menu items to clarify exactly what

invoking them will cause to happen.

Example: In Microsoft Word, the Edit menu has

different enabled items when no text has been selected (top), when a

passage of text has been selected (middle), and

after a passage has been cut from the document.


Pattern #48: PreviewWhen the user is about to perform an expensive or time-consuming task, provide an opportunity to see what the effects will be.

Example: The software for HP’s Precisionscan

Pro scanner provides a preview of the scanned

image, allowing the user to alter the quality and size of the scanned

image before it is output.


Pattern #49: Progress IndicatorWhen a time-consuming operation is being performed,

provide the user with an animated indicator of how that operation is progressing, in order to prevent the user from getting impatient or confused.

Example: Because decompressing a zipped folder might take a few

seconds, the application form displays a progress bar to

reassure the user that the task is indeed being

performed.

CS 275 Tidwell Course Notes

Pattern #50: CancelabilityWhen a time-consuming operation is being performed, provide the user with the means to cancel the operation without side effects.

Example: In the “County

Demographics” application, the user

may cancel any of the time-consuming

statewide displays by clicking on a county or

one of the menu headers.

Execute


Pattern #51: Multi-Level UndoWhen the use of an application involves extensive

user interactions, provide a mechanism through which the user can reverse an entire sequence of operations.

Example: Microsoft Visio’s

Edit menu shows the user the last undoable action

that was performed.


Pattern #52: Command HistoryWhen the sequence of actions taken by a user is

important, keep a record of that information for potential retrieval later.

Example: RelyTec’s All-in-One Keylogger allows an employer to monitor every keystroke or Web access made by an employee.


Pattern #53: MacrosWhen the sequence of actions taken by a user is likely to be performed repeatedly, provide a mechanism for recording that sequence and performing it in a simple manner.

Example: Microsoft Word allows users to

record command macros, in this case one

that will convert the font for selected text at the push of a keyboard

command.

chapter 5: doing things

Documents

tidwell course notespage

conserves screen space

screen space consumption

disabled menu

text entry

textbased buttons

cascading menu items

item text