COSC 3461 S04 Module 4

1. COSC 3461 S04Module 4 Windows-Icon-Menus-Pointers (WIMP) Elements

2. Types of Interactions • Command-based • Natural language based (written, spoken) • Menu-based • Question-asking/answering (query dialog) • Field Completion • Windows-Icons-Menus-Pointers (WIMP) • Point-and-click

3. Point-and-Click • Point-and-click: • Interaction that requires only single clicks of a mouse button • Common in multimedia systems (e.g., web browsers) • Popularized by WWW pages • Also used for systems based on touch screens, such as information kiosks • Interaction style closely tied to hypertext

4. WIMP-based Interaction • Windows Icons Menus Pointers • Windows, Icons, Mice, Pull-down menus (according to some) • Currently the most common environment for interactive computing • Examples: • Microsoft Windows, Apple MacOS, X-Windows (for unix)

5. WIMP-based Interaction • A user should be able to interact using… • only the mouse • only the keyboard • combination of mouse and keyboard • Combination of mouse and keyboard is most convenient • text input via a mouse is difficult (but not impossible!) • clicking and selection actions with the keyboard are more difficult than with mouse (but not impossible!)

6. Comparison to Point-and-Click • Both point-and-click and WIMP interfaces have buttons • Point-and-click philosophy is simpler • WIMP-based interaction not limited to mouse

7. Outline • Windows • Icons • Menus • Pointers

8. Windows • Windows have an appearance and a behaviour • Appearance • occupy an area of the screen • can contain text, graphics, menus, toolbars, and so on… • Behaviour • they act like individual terminals for applications • can be moved, resized, closed, minimized, maximized • can accept focus • What is it about their appearance that signals their behaviour?

9. Windows • How is behaviour of windows determined? • By the system’s window manager • aka windowing system, user interface management system (UIMS)

10. Window Managers • How essential is a window manager? • When user opens a new window, how is its position on the screen determined? • Application-specific decisions could lead to chaos on the screen • Instead, layout policy of window manager used • Layout policy may be fixed or may be selected by user

11. Anatomy of a Window indicator of focus (blue) size controls title bar menu bar contents scroll bar feedback size control

12. System for Organizing Windows • The display of multiple windows constrained by screen real-estate • Multiple windows may exist simultaneously, but they might not all be fully shown • Possible layouts include: • Overlapping – One window partially obscures another • Tiled – Adjoin, but don’t overlap • Cascading – A sequence of overlapping windows, each offset from the preceding according to a rule (e.g., 10 pixels to the right and below)

13. Overlapping Windows

14. Tiled Windows

15. Cascading Windows

16. The Notion of “Focus” • Scenario: multiple windows are open • input action that users performs is applied to window that has focus • What are the visual clues of focus? • the colour of the title bar of active window can signify focus • Blue or some other colour indicates focus; Grey or some other colour indicate window is inactive • What other attribute? (hint: it may require redrawing) • To change focus: • mouse: click in it (note that “in” needs to be defined somewhere) • keyboard: system-dependent

17. Resizing a Window • What has changed? • scrollbar added • menu has wrapped • toolbar modified (buttons lost)

18. Window Size • Size of window is considered a state of the window • What other type of states do windows have? • Windows have three size states: • Maximized • Fills available space • Can’t resize the window • Minimized/Iconified • Reduced to a title bar or icon • Can’t resize (icon?) • Normal/Restored • Window occupies a region • Can resize representation of window: the window width and height may be adjusted

19. Size State Transitions b1=minimizeb2=maximizeb3=restore down St St+1 St-1  { Maximized, Normal/Restored } b2 Minimized Minimized b1 Maximized Maximized b3 b1 b2 Normal/Restored Normal/Restored a=resize

20. Control of Window Size State Minimize Restore Close Minimize Maximize Close Restore Maximize Close • Buttons in upper-right corner of window are context sensitive: MaximizedRestoredMinimized • Why isn’t this at odds with the design principle of consistency?

21. Control of Window Size State • Resize - what visual clues are provided? Handle in lower-right corner of window (what signals that this is a handle?) Drag to resize

22. Control of Window Size State Handle on edges (what signals that this is a handle?) Drag either edge to resize height Drag either edge to resize width

23. Outline • Windows • Icons • Menus • Pointers

24. What is an Icon? • Webster’s dictionary defines an icon as a pictorial representation • An icon is one type of sign • A sign is: • something that “stands for” or “represents” another thing • the other thing is called the referent

25. What is an Icon? • How are icons used? • Representation of windows that are minimized • What other uses have we already discussed? • The act of reducing a window to an icon is called iconifying or minimizing • A window may be restored by clicking on its icon • If not with an icon, how else might a minimized window be represented?

26. Examples of Icons • Disk drives • Available applications • Miminized applications • Minimized windows • Folders • Files • Commands • States

27. Tradeoffs for Icons Advantages: • small (use small amount of screen space) • can be intuitive • can persist • serve as reminders of available dialogs, applications, or commands that may be restored or invoked Disadvantages: • How strong does the perceptual resemblance need to be for iconic representations of minimized windows? • Can minimized windows get lost? • Can minimized windows get confused with other minimized windows?

28. Outline • Windows • Icons • Menus • Pointers

29. What is a Menu? • A menu is an organizational device for presenting a set of buttons • buttons correspond to imperative commands • represent operations that can be performed by the application at a given time • A toolbar is also an organizational device for presenting a set of buttons • Menus vs. toolbars • Recognition vs. Recall (which ability do humans find easier?) • Cost of navigation (input actions) • Review: what input actions are used with menus? • Keyboard • Pointing device

30. Location of Menus • Menu bar located directly below the title bar • Optional, but most application windows have them • Why this location as opposed to other ones? title bar menu bar

31. Location of Menus • Hidden Menu • called popup menus • right mouse click to access • context sensitive

32. Menu Design Techniques • Why are menus difficult to design? • Need an understanding of users’ mental model • Need to manage tradeoff between space constraints and cognitive burden

33. Features of Menus • Cascades (sub-menus) • Groupings • Dialog boxes • Icons/Textual Elements • Support for keyboard input • Mnemonics • Accelerators

34. Cascades • Design technique: • Group associated buttons together, then place in a sub-menu • When submenu is selected: • The submenu “cascades” • Several layers of cascading menus may be used • Why do we want this? • How is this behaviour signalled? Example

35. Example File menu File menu with focus on Preferences Visual indicator for cascading menu

36. Cascades • Submenus form a hierarchy • What are the tradeoffs? • Each level in the hierarchy requires more input actions from user, greater cognitive load/burden

37. Groupings • Similar items are grouped together in a menu • How is the grouping signalled? • negative space (empty space), or • separator (horizontal line) Example

38. Example Color menu Image adjust group Visual indicator for group Channel group Palette group Color depth group

39. Dialog Boxes • Recall that imperative control hasa <verb> <noun> structure • The specification of the <noun> may require additional input from the user

40. Dialog Boxes • A menu choice may trigger a dialog box • The dialog box may contain: • messages • editable fields • buttons, etc. • Types of dialog boxes • File (open, new, save as) • Print • Color chooser • How are such application functions triggered? Why do we want to signal this? Example

41. Example Visual indicator for dialog box File menu “New” dialog box

42. Icons in Menus • Recall: menus are collections of buttons • How might these buttons be labelled? • Text • Icons • Text and Icons Example

43. Example Format menu Font icon Paragraph icon

44. Keyboard Access to Menus • Menus need to support access by a pointing device and a keyboard • Why? • Who might use the keyboard instead of the pointing device? • Those interested in speed (expert/frequent users) • Those who cannot use the pointing device

45. Mnemonics and Accelerators • A chord is a combination of key presses • e.g., shift-f12, ctrl-P, alt-F, ctrl-shift-x, meta-x • the initial key is typically a function/modifier keys (shift, control, alt) • the final key is usually an alphanumeric key

46. Mnemonics and Accelerators • A mnemonic is a keyboard shortcut to a visible button • Convention: Alt-letter chord, with underlined single letter • The full menu hierarchy may be accessed using only the keyboard, but it may require a sequence of mnemonics • An accelerator is a keyboard shortcut to a button that is not visible • Convention: Ctrl-letter or Shift-letter chord • Shortcuts to bypass the menu hierarchy and directly invoke a menu option Example

47. Example To invoke the “Full Screen Preview” command in the “View” menu Technique 2: Using accelerator: Shift-Ctrl-A Technique 1: Using mnemonics: Alt-v + p View menu

48. Popup Menus • Many menus accessed from menu bar • invocation action: left mouse-click • left mouse-clicks on non-menu regions associated with other application functions • What does right mouse-click do? • invokes pop-up menu • type of menu depends on context of the click • popup menu is sensitive to context

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

50. Example DemoMenu.java