oct 021 outline what is a widget? buttons combo boxes text components message boxes
TRANSCRIPT
Oct 02 1
OutlineOutline
What is a widget?ButtonsCombo boxesText componentsMessage boxes
Oct 02 2
Types of Text Types of Text ComponentsComponents
Output (aka non-editable)LabelsLabeled bordersTool tipsMessage Boxes
Input/output (aka editable)Text fieldsText areasEditable combo boxesDialog boxes
Oct 02 3
LabelsLabels
Placed near (above, below, left, or right) a widget to provide additional information on the purposeAdvantage
Aids in command recognition
DisadvantageUses display spaceTerse wording may be a poor indicator of command purpose
Oct 02 4
Label ExampleLabel Example
Label Combo box
Modal button
Label
Oct 02 5
Borders and Labeled Borders and Labeled BordersBorders
Placed around a collection of widgetsUsed to create ‘groups’Labels may be added to improve group identification
Oct 02 6
Borders and Labeled Borders and Labeled BordersBorders
AdvantagesGrouping reduces cognitive load
E.g., 3 groups, each with 4 itemsWith borders around groups: user identifies 1 of 3 groups, then 1 of 4 items within group (two-step process)Without borders: user identifies 1 of 12 items (this is harder!)
DisadvantagesUses display spaceGroup ‘boundaries’ may not be obvious
Oct 02 7
Labeled BordersLabeled Borders
Labeled border
This group pertains to Colors
Labeled border
This group pertains to Links
Oct 02 8
Design OpportunityDesign Opportunity
Could the organization of these option widgets be improved using borders to create groups?
Oct 02 9
OutlineOutline
What is a widget?ButtonsCombo boxesText componentsMessage boxes
Oct 02 10
Message BoxesMessage Boxes
A message box is a popup window that presents a text message to the user Output only (except for confirmation to close the box)Purpose
Notify the user of a problem (e.g., invalid choice)Notify the user of potentially destructive outcome (e.g., overwrite a file)Provide information
Oct 02 11
Message Boxes (2)Message Boxes (2)
AdvantageComprehensive messages are possible (unlike tool tips)
DisadvantageSlows interaction (because underlying thread is halted until confirmation is received)
Example
Oct 02 12
Dialog box Invalid input
Message box
ExampleExample
Oct 02 13
Confirmation and Error Confirmation and Error Prevention Prevention
Most dialog or message boxes require the user to make a choice or acknowledge a messageMany don’t have close boxes (user cannot choose other widgets while dialog/alert box is active)Three error prevention techniques
1. Require an explicit button click or key press before proceeding (i.e., there is no default action by pressing Enter)
2. Sound an alarm tone for invalid input 3. Change the position of buttons from one invocation to the
next (prevents “errors due to habit!”)
E.g., Winzip (next slide)
Oct 02 14
Hitting ENTER produces…
Button positions change from one invocation to next
ExampleExample
Oct 02 15
Example ProgramExample Program
DemoMessageBox.java
Oct 02 16
Text Fields and Text Text Fields and Text AreasAreas
Text Field: single-line input/output of textText Area: multi-line input/output of textDesign challenges
Validating inputNavigating
WIMP ElementsWIMP Elements
More GUI goo
Oct 02 18
OutlineOutline
WindowsIconsMenusPointers
Oct 02 19
What is a Menu?What is a Menu?
A means of presenting a choice of operations that can be performed by the system at a given timeMain advantage:
Menu options are recognized rather than recalledHuman ability to recognize is superior to ability to recall
Menus typically navigated two waysKeyboard Pointing device
Oct 02 20
Menu LocationMenu Location
Most application windows include a menu bar directly below the title bartitle bar
menu bar
Oct 02 21
Menu Design Menu Design TechniquesTechniques
Numerous techniques are used to design effective menusMany are accompanied by visual indicators
Serve as signal to the user
Menus featuresCascading menusGroupingsDialog boxesIconsKeyboard input
MnemonicsAccelerators
Popup menus
Oct 02 22
Cascading MenusCascading Menus
Menus are inefficient if they contain too many itemsOne solution is to use cascading menus (aka submenus)
Selecting an item opens up another menu adjacent to selected itemSeveral layers of cascading menus may be used
Visual indicator: triangle Example
Oct 02 23
File menu with focus on PreferencesFile menu
Visual indicator for cascading menu
ExampleExample
Oct 02 24
GroupingsGroupings
Similar items are grouped together in a menuVisual indicator: separator (i.e., line)
Example
Oct 02 25
Visual indicator for group
Image adjust group
Channel group
Palette group
Color depth group
Color menu
ExampleExample
Oct 02 26
Dialog BoxesDialog Boxes
A menu choice that involves a collection of input parameters can use a dialog boxMay contain a message, editable fields, buttons, etc.Types of dialog boxes
File (open, new, save as)PrintColor chooser
Visual indicator: Ellipses (…) Example
Oct 02 27
File menu
Visual indicator for dialog box
“New” dialog box
ExampleExample
Oct 02 28
Icons in MenusIcons in Menus
Menu items typically contain words as labelsTwo problems with words as labels
Culturally biasedOften poorly express the purpose of the choice
Icons are used to suggest purposeExample…
Icons can be used as, or added to, menu items for the same reason
Example
Oct 02 29
Format menu
Font icon
Paragraph icon
ExampleExample
Oct 02 30
Keyboard Input for Menu Keyboard Input for Menu NavigationNavigation
Besides using a pointing device, most menus support keyboard inputBest for expert/frequent usersTypically use function keys or modifier keys (shift, control, alt)In many settings, systems are required to support full interaction using only a keyboard for input
The goal: Accessibility for people with disabilities
Oct 02 31
Mnemonics vs. Mnemonics vs. AcceleratorsAccelerators
Two techniques for keyboard menu navigation: mnemonics and accelerators
MnemonicsThe full menu hierarchy may be accessed using only the keyboardAn underlined single letter serves as the mnemonicAlt-letter to initiate mnemonic access
AcceleratorsShortcuts to bypass the menu hierarchy and directly invoke a menu option
Example
Oct 02 32
View menu
Two keyboard techniques to invoke the “Full Screen Preview” command in the “View” menu
Using mnemonics:
Alt-v
p
Using accelerator:
Shift-Ctrl-A
ExampleExample
Oct 02 33
Popup MenusPopup Menus
Invoked anywhere by right-clicking on mouse buttonMenu that pops up is context sensitive (i.e., depends on where the mouse pointer is when the mouse button is clicked)
Oct 02 34
Context sensitive popup menus on Windows 98 desktop
Right-click on Start button
Right-click on background
ExampleExample
Oct 02 35
Example ProgramExample Program
DemoMenu.java
Oct 02 36
Example ProgramExample Program
DemoMenu2.java
Note: uses Win32 Look and Feel