![Page 1: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/1.jpg)
Oct 02 1
OutlineOutline
What is a widget?ButtonsCombo boxesText componentsMessage boxes
![Page 2: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/2.jpg)
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
![Page 3: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/3.jpg)
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
![Page 4: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/4.jpg)
Oct 02 4
Label ExampleLabel Example
Label Combo box
Modal button
Label
![Page 5: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/5.jpg)
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
![Page 6: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/6.jpg)
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
![Page 7: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/7.jpg)
Oct 02 7
Labeled BordersLabeled Borders
Labeled border
This group pertains to Colors
Labeled border
This group pertains to Links
![Page 8: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/8.jpg)
Oct 02 8
Design OpportunityDesign Opportunity
Could the organization of these option widgets be improved using borders to create groups?
![Page 9: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/9.jpg)
Oct 02 9
OutlineOutline
What is a widget?ButtonsCombo boxesText componentsMessage boxes
![Page 10: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/10.jpg)
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
![Page 11: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/11.jpg)
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
![Page 12: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/12.jpg)
Oct 02 12
Dialog box Invalid input
Message box
ExampleExample
![Page 13: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/13.jpg)
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)
![Page 14: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/14.jpg)
Oct 02 14
Hitting ENTER produces…
Button positions change from one invocation to next
ExampleExample
![Page 15: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/15.jpg)
Oct 02 15
Example ProgramExample Program
DemoMessageBox.java
![Page 16: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/16.jpg)
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
![Page 17: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/17.jpg)
WIMP ElementsWIMP Elements
More GUI goo
![Page 18: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/18.jpg)
Oct 02 18
OutlineOutline
WindowsIconsMenusPointers
![Page 19: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/19.jpg)
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
![Page 20: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/20.jpg)
Oct 02 20
Menu LocationMenu Location
Most application windows include a menu bar directly below the title bartitle bar
menu bar
![Page 21: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/21.jpg)
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
![Page 22: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/22.jpg)
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
![Page 23: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/23.jpg)
Oct 02 23
File menu with focus on PreferencesFile menu
Visual indicator for cascading menu
ExampleExample
![Page 24: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/24.jpg)
Oct 02 24
GroupingsGroupings
Similar items are grouped together in a menuVisual indicator: separator (i.e., line)
Example
![Page 25: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/25.jpg)
Oct 02 25
Visual indicator for group
Image adjust group
Channel group
Palette group
Color depth group
Color menu
ExampleExample
![Page 26: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/26.jpg)
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
![Page 27: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/27.jpg)
Oct 02 27
File menu
Visual indicator for dialog box
“New” dialog box
ExampleExample
![Page 28: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/28.jpg)
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
![Page 29: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/29.jpg)
Oct 02 29
Format menu
Font icon
Paragraph icon
ExampleExample
![Page 30: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/30.jpg)
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
![Page 31: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/31.jpg)
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
![Page 32: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/32.jpg)
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
![Page 33: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/33.jpg)
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)
![Page 34: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/34.jpg)
Oct 02 34
Context sensitive popup menus on Windows 98 desktop
Right-click on Start button
Right-click on background
ExampleExample
![Page 35: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/35.jpg)
Oct 02 35
Example ProgramExample Program
DemoMenu.java
![Page 36: Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes](https://reader036.vdocument.in/reader036/viewer/2022062518/5697bf8a1a28abf838c8a678/html5/thumbnails/36.jpg)
Oct 02 36
Example ProgramExample Program
DemoMenu2.java
Note: uses Win32 Look and Feel