cs 275tidwell course notespage 70 chapter 5: doing things several screen components and interactions...
TRANSCRIPT
Tidwell Course NotesCS 275 Page 1
Chapter 5: Doing ThingsSeveral screen components and interactions have been developed to facilitate user actions within an application...
Traditional Visible Components
Buttons
Menu Bars
Context Menus
Dropdown Menus
Toolbars
Links
Traditional Invisible Actions
Double Clicking
Keyboard Actions
Drag-And-Drop
Tidwell Course NotesCS 275 Page 2
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.
Tidwell Course NotesCS 275 Page 3
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.
Tidwell Course NotesCS 275 Page 4
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.
Tidwell Course NotesCS 275 Page 5
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.
Tidwell Course NotesCS 275 Page 6
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.
Tidwell Course NotesCS 275 Page 7
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
Tidwell Course NotesCS 275 Page 8
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.
Tidwell Course NotesCS 275 Page 9
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 documentCtrl-Click Wheel
(Scroll)Cmd-Shift-= (Cmd-Plus)
Show / hide desktop Win-d
Save the current document Ctrl-S Cmd-S Zoom out of the documentCtrl-Click Wheel
(Scroll)Cmd-Minus Kill window Alt-F4
Print the current document Ctrl-P Cmd-PRedraw current view of document, w/o
checking if content has changedCmd-R Close dialog Esc Esc
Close the current document Cmd-WReload current document, updating content
from source if necessaryCmd-R Give focus to window's menu bar F10
Edit menu Alt-EDisplay 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 tabCtrl+Tab,
Ctrl+Shift+TabCut the selected area and store it in
the clipboardCtrl-X Cmd-X
Open a window in which the user can edit and organize saved bookmarks
Cmd-Option-B
Run new application Win+R
Copy the selected area into the clipboard
Ctrl-C Cmd-C Make selected text bold/regular Ctrl-BOpen new internet window with same
page as currentCtrl+N
Paste contents of clipboard at mouse/cursor position
Ctrl-V Cmd-VUnderline/remove underline from selected
textCtrl-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 DelDelete
(Backspace)Show help contents page for the current
applicationF1 F1 Take a screenshot of window Alt-Print Screen
Ctrl-Shift-4, Space
Find matches in current document, highlighting them in-place
Ctrl-F Cmd-FSwitch focus to next or previous window on
desktopAlt-Tab, Shift-
Alt-TabTask 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.
Tidwell Course NotesCS 275 Page 10
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.
Tidwell Course NotesCS 275 Page 11
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).
Tidwell Course NotesCS 275 Page 12
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.
Tidwell Course NotesCS 275 Page 13
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.
Tidwell Course NotesCS 275 Page 14
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.
Tidwell Course NotesCS 275 Page 15
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.
Tidwell Course NotesCS 275 Page 16
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.
Tidwell Course NotesCS 275 Page 17
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 Page 18
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
Tidwell Course NotesCS 275 Page 19
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.
Tidwell Course NotesCS 275 Page 20
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.
Tidwell Course NotesCS 275 Page 21
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.