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