1. Oct 021 Outline What is a widget? Buttons Combo boxes Text components Message boxes

2. Oct 022 Types of Text Components Output (aka non-editable) Labels Labeled borders Tool tips Message Boxes Input/output (aka editable) Text fields Text areas Editable combo boxes Dialog boxes

3. Oct 023 Labels Placed near (above, below, left, or right) a widget to provide additional information on the purpose Advantage Aids in command recognition Disadvantage Uses display space Terse wording may be a poor indicator of command purpose

4. Oct 024 Label Example LabelCombo box Modal button Label

5. Oct 025 Borders and Labeled Borders Placed around a collection of widgets Used to create ‘groups’ Labels may be added to improve group identification

6. Oct 026 Borders and Labeled Borders Advantages Grouping reduces cognitive load E.g., 3 groups, each with 4 items With 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!) Disadvantages Uses display space Group ‘boundaries’ may not be obvious

7. Oct 027 Labeled Borders Labeled border This group pertains to Colors Labeled border This group pertains to Links

8. Oct 028 Design Opportunity Could the organization of these option widgets be improved using borders to create groups?

9. Oct 029 Outline What is a widget? Buttons Combo boxes Text components Message boxes

10. Oct 0210 Message 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

11. Oct 0211 Message Boxes (2) Advantage Comprehensive messages are possible (unlike tool tips) Disadvantage Slows interaction (because underlying thread is halted until confirmation is received) Example

12. Oct 0212 Dialog box Invalid input Message box Example

13. Oct 0213 Confirmation and Error Prevention Most dialog or message boxes require the user to make a choice or acknowledge a message Many 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)

14. Oct 0214 Hitting ENTER produces… Button positions change from one invocation to next Example

15. Oct 0215 Example Program DemoMessageBox.java

16. Oct 0216 Text Fields and Text Areas Text Field: single-line input/output of text Text Area: multi-line input/output of text Design challenges Validating input Navigating

17. WIMP Elements More GUI goo

18. Oct 0218 Outline Windows Icons Menus Pointers

19. Oct 0219 What is a Menu? A means of presenting a choice of operations that can be performed by the system at a given time Main advantage: Menu options are recognized rather than recalled Human ability to recognize is superior to ability to recall Menus typically navigated two ways Keyboard Pointing device

20. Oct 0220 Menu Location Most application windows include a menu bar directly below the title bar title bar menu bar

21. Oct 0221 Menu Design Techniques Numerous techniques are used to design effective menus Many are accompanied by visual indicators Serve as signal to the user Menus features Cascading menus Groupings Dialog boxes Icons Keyboard input Mnemonics Accelerators Popup menus

22. Oct 0222 Cascading Menus Menus are inefficient if they contain too many items One solution is to use cascading menus (aka submenus) Selecting an item opens up another menu adjacent to selected item Several layers of cascading menus may be used Visual indicator: triangle Example

23. Oct 0223 File menu with focus on PreferencesFile menu Visual indicator for cascading menu Example

24. Oct 0224 Groupings Similar items are grouped together in a menu Visual indicator: separator (i.e., line) Example

25. Oct 0225 Visual indicator for group Image adjust group Channel group Palette group Color depth group Color menu Example

26. Oct 0226 Dialog Boxes A menu choice that involves a collection of input parameters can use a dialog box May contain a message, editable fields, buttons, etc. Types of dialog boxes File (open, new, save as) Print Color chooser Visual indicator: Ellipses (…) Example

27. Oct 0227 File menu Visual indicator for dialog box “New” dialog box Example

28. Oct 0228 Icons in Menus Menu items typically contain words as labels Two problems with words as labels Culturally biased Often poorly express the purpose of the choice Icons are used to suggest purpose Example… Icons can be used as, or added to, menu items for the same reason Example

29. Oct 0229 Format menu Font icon Paragraph icon Example

30. Oct 0230 Keyboard Input for Menu Navigation Besides using a pointing device, most menus support keyboard input Best for expert/frequent users Typically 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

31. Oct 0231 Mnemonics vs. Accelerators Two techniques for keyboard menu navigation: mnemonics and accelerators Mnemonics The full menu hierarchy may be accessed using only the keyboard An underlined single letter serves as the mnemonic Alt-letter to initiate mnemonic access Accelerators Shortcuts to bypass the menu hierarchy and directly invoke a menu option Example

32. Oct 0232 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 Example

33. Oct 0233 Popup Menus Invoked anywhere by right-clicking on mouse button Menu that pops up is context sensitive (i.e., depends on where the mouse pointer is when the mouse button is clicked)

34. Oct 0234 Context sensitive popup menus on Windows 98 desktop Right-click on Start button Right-click on background Example

35. Oct 0235 Example Program DemoMenu.java

36. Oct 0236 Example Program DemoMenu2.java Note: uses Win32 Look and Feel