1 / 105

COSC 3461 S04 Module 4

COSC 3461 S04 Module 4. Windows-Icon-Menus-Pointers (WIMP) Elements. 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. Point-and-Click.

elias
Télécharger la présentation

COSC 3461 S04 Module 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related