Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 2. Contents <ul><li>A window’s characteristics </li></ul><ul><li>A window’s components </li></ul><ul><li>A window’s presentation style </li></ul><ul><li>The types of windows available </li></ul><ul><li>Organizing window system functions </li></ul><ul><li>A window’s operations </li></ul>
  2. 3. Window <ul><li>A window is an area of the screen, usually rectangular in shape, defined by a border that contains a particular view of some area of the computer or some portion of a person’s dialog with the computer. </li></ul><ul><li>A window may be small, containing a short message or a single field, or it may be large, consuming most or all of the available display space. </li></ul><ul><li>A display may contain one, two, or more windows within its boundaries. </li></ul>
  3. 4. Window’s characteristics <ul><li>A name or title, allowing it to be identical. </li></ul><ul><li>A size in height and width (which can vary). </li></ul><ul><li>A state, accessible or active, or not accessible. </li></ul><ul><li>Visibility – the portion that can be seen. </li></ul><ul><li>A location, relative to the display boundary. </li></ul><ul><li>Presentation, that is, its arrangement in relation to other windows (tiled, overlapping, and cascading). </li></ul><ul><li>Management capabilities, methods for manipulation of the window on the screen. </li></ul><ul><li>Its highlight, that is, the part that is selected. </li></ul><ul><li>The function, task, or application to which it is dedicated. </li></ul>
  4. 5. Components of a window <ul><li>A typical window may be composed of many elements. </li></ul><ul><li>Some appear on all windows; others only on certain kinds of windows, or under certain conditions. </li></ul><ul><li>For consistency purposes, these elements should always be located in the same position within a window. </li></ul><ul><li>We can distinguish between three basic types of windows: </li></ul><ul><ul><li>primary windows </li></ul></ul><ul><ul><li>secondary windows </li></ul></ul><ul><ul><li>dialog boxes </li></ul></ul>
  5. 6. Components of a window (continued) <ul><li>Frame </li></ul><ul><li>Title bar (Alt+Spacebar for menu) </li></ul><ul><li>Title bar icon </li></ul><ul><li>Window sizing buttons </li></ul><ul><li>“ What’s this?” button </li></ul><ul><li>Menu bar </li></ul><ul><li>Status bar </li></ul><ul><li>Scroll bar </li></ul><ul><li>Toolbar </li></ul><ul><li>Split </li></ul><ul><li>Size grip </li></ul><ul><li>Work area </li></ul>
  6. 7. Components Primary Secondary Dialog Box Frame/Border X X X Title bar text X X X Title bar icon X Title bar buttons X X X Close X X X Minimize/Maxi-mize/Restore X “ What’s this?” X X Menu bar X Status bar X Scroll bar X Size grip X
  7. 8. Window presentation styles <ul><li>The presentation style of a window refers to its spatial relationship to other windows. </li></ul><ul><li>There are two basic styles, commonly called tiled or overlapping. </li></ul><ul><li>In early windowing days, most systems commonly used one or the other style exclusively, seldom using both at the same time. </li></ul><ul><li>Now, the user is usually permitted to select the style to be presented on the display. </li></ul>
  8. 9. Tiled windows <ul><li>Advantages: </li></ul><ul><ul><li>Open windows are always and completely visible. </li></ul></ul><ul><ul><li>They are perceived less complex than overlapping windows. </li></ul></ul><ul><ul><li>They are easier for novice people to learn and use. </li></ul></ul><ul><li>Disadvantages: </li></ul><ul><ul><li>Only a limited number can be displayed. </li></ul></ul><ul><ul><li>As the number of windows increases, each window can get very small. </li></ul></ul><ul><ul><li>They are perceived as crowded and more visually complex. </li></ul></ul>
  9. 10. Overlapping windows <ul><li>Advantages: </li></ul><ul><ul><li>Visually, their look is three-dimensional. </li></ul></ul><ul><ul><li>Greater control allows the user to organize the windows to meet his or her needs. </li></ul></ul><ul><ul><li>Can maintain larger sizes and consistent positions. </li></ul></ul><ul><ul><li>Less pressure to close windows no longer needed. </li></ul></ul><ul><li>Disadvantages: </li></ul><ul><ul><li>Operationally much more complex than tiled ones. </li></ul></ul><ul><ul><li>Can be lost behind other windows. </li></ul></ul><ul><ul><li>That overlapping windows represent three-dimensional space is not always realized by users. </li></ul></ul>
  10. 11. Cascading Windows <ul><li>A special type of overlapping window has the windows automatically arranged in a regular progression. </li></ul><ul><li>Each window is slightly offset from others. </li></ul><ul><li>Advantages of this approach are: </li></ul><ul><ul><li>No window is ever completely hidden. </li></ul></ul><ul><ul><li>Bringing any window to the front is easier. </li></ul></ul><ul><ul><li>It provides simplicity in visual presentation and cleanness. </li></ul></ul>
  11. 12. Picking a presentation style <ul><li>Use tiled windows for: </li></ul><ul><ul><li>Single-task activities </li></ul></ul><ul><ul><li>Data that needs to be seen simultaneously </li></ul></ul><ul><ul><li>Tasks requiring little window manipulation </li></ul></ul><ul><ul><li>Novice or inexperienced users </li></ul></ul><ul><li>Use overlapping windows for: </li></ul><ul><ul><li>Switching between tasks </li></ul></ul><ul><ul><li>Tasks requiring a greater amount of window manipulation </li></ul></ul><ul><ul><li>Expert or experienced users </li></ul></ul><ul><ul><li>Unpredictable display contents </li></ul></ul>
  12. 13. Types of windows <ul><li>People’s tasks must be structured into a series of windows. </li></ul><ul><li>The type of window used will depend on the nature and flow of the task. </li></ul><ul><li>Defining standard window types is difficult across platforms because of the varying terminology and definitions used by different windowing systems. </li></ul><ul><li>The Microsoft Windows windowing schema includes: primary window, secondary window, and dialog box. </li></ul>
  13. 14. Primary window <ul><li>Represents an independent function or application. </li></ul><ul><li>Present constantly used components and controls: </li></ul><ul><ul><li>menu bars that are used frequently, used by primary or secondary windows. </li></ul></ul><ul><ul><li>controls used by dependent windows. </li></ul></ul><ul><li>Use for presenting information that is continually updated (e.g., data and time). </li></ul><ul><li>Providing context for dependent windows. </li></ul><ul><li>Do not: </li></ul><ul><ul><li>Divide an independent function into two or more primary windows. </li></ul></ul><ul><ul><li>Present unrelated functions in one primary window. </li></ul></ul>
  14. 15. Secondary window <ul><li>Performing subordinate, supplemental, or auxiliary actions that are: </li></ul><ul><ul><li>Extended or more complex in nature </li></ul></ul><ul><ul><li>Related to objects in the primary window </li></ul></ul><ul><li>Presenting frequently or occasionally used window components. </li></ul>
  15. 16. Dialog boxes <ul><li>Dialog boxes are used to extend and complete an interaction within a limited context. </li></ul><ul><li>Dialog boxes are always displayed from another window. </li></ul><ul><li>Use dialog boxes for: </li></ul><ul><ul><li>presenting brief messages </li></ul></ul><ul><ul><li>presenting specific, transient actions </li></ul></ul><ul><ul><li>performing actions that: </li></ul></ul><ul><ul><ul><li>take a short time to complete </li></ul></ul></ul><ul><ul><ul><li>are not frequently changed </li></ul></ul></ul><ul><li>Command buttons include: OK, Cancel, others as necessary. </li></ul>
  16. 17. Message boxes <ul><li>Use for displaying a message about a particular situation or condition. </li></ul><ul><li>Command buttons include: OK, Cancel, Help, Yes, No, Stop, buttons to correct the action that caused the message box to be displayed. </li></ul><ul><li>Enable the title bar close box only if the message includes a cancel button. </li></ul><ul><li>Designate the most frequent or least destructive option as the default command button. </li></ul>
  17. 18. Window management <ul><li>There are several window management schemas (not the only schemas but most frequently used): </li></ul><ul><ul><li>Single-document interface (SDI) </li></ul></ul><ul><ul><li>Multiple-document interface (MDI) </li></ul></ul><ul><ul><li>Workbooks </li></ul></ul><ul><li>To choose the right schema you should consider a number of design factors: </li></ul><ul><ul><li>Intended users and their skill level </li></ul></ul><ul><ul><li>Application and its objects or tasks </li></ul></ul><ul><ul><li>Most effective use of display space </li></ul></ul>
  18. 19. SDI <ul><li>It is a single primary window with a set of secondary windows. </li></ul><ul><li>Proper usage: </li></ul><ul><ul><li>Where object and window have a simple, one-to-one relationship. </li></ul></ul><ul><ul><li>Where the object’s primary presentation or use is as a single unit (e.g., a document or a folder) even when the object contains different types. </li></ul></ul><ul><li>Advantages: most common usage, window manipulation is easier and less confusing, and data-centered approach. </li></ul><ul><li>Disadvantage: information is displayed or edited in separate windows. </li></ul>
  19. 20. MDI <ul><li>Contains a single primary (parent) window and a set of child windows (each one could also be a primary window). </li></ul><ul><li>The primary window provides a visual and operational framework for its child windows. </li></ul><ul><li>Each child window is constrained to appear only within the parent window. The child windows share the parent window’s operational elements. </li></ul><ul><li>Proper usage: </li></ul><ul><ul><li>To present multiple occurrences of an object </li></ul></ul><ul><ul><li>To compare data within two or more windows </li></ul></ul><ul><ul><li>To present multiple parts of the application </li></ul></ul>
  20. 21. MDI (continued) <ul><li>Advantages: </li></ul><ul><ul><li>Very space-efficient interface (child windows share the parent window’s interface components, e.g., menus, toolbars, and status bar). </li></ul></ul><ul><ul><li>Useful for managing a set of objects. </li></ul></ul><ul><li>Disadvantages: </li></ul><ul><ul><li>Reinforces an application as the primary focus. </li></ul></ul><ul><ul><li>More challenging for novice users (relationship between files and their windows is abstract). </li></ul></ul>
  21. 22. Workbooks <ul><li>A window or task management technique that consists of a set of views like a tabbed notebook. </li></ul><ul><li>It is based upon the metaphor of a book or notebook. </li></ul><ul><li>Views of objects are presented as sections within the workbook’s primary windows; child windows do not exist. </li></ul><ul><li>Each section represent a view of data. </li></ul><ul><li>Tabs can be included and used to navigate between sections. </li></ul><ul><li>Otherwise, its characteristics and behavior are similar to those of the MDI with all child windows maximized. </li></ul>
  22. 23. Workbooks <ul><li>Proper usage: </li></ul><ul><ul><li>To manage a set of views of an object. </li></ul></ul><ul><ul><li>To optimize quick navigation of multiple views. </li></ul></ul><ul><ul><li>For content where the order of the sections is significant. </li></ul></ul><ul><li>Advantages: </li></ul><ul><ul><li>Provides a grouping and focus for a set of activities within the environment of the desktop. </li></ul></ul><ul><ul><li>Provides the greater simplicity of the SDI and by eliminating child window management. </li></ul></ul><ul><ul><li>Preserves some man-t capabilities of the MDI. </li></ul></ul><ul><li>Disadvantage: cannot present simultaneous views </li></ul>
  23. 24. Window organization <ul><li>Organize windows to support the most common tasks in the most efficient sequence of steps. </li></ul><ul><li>Use primary windows to: </li></ul><ul><ul><li>Begin an interaction and provide a top-level context for dependent windows. </li></ul></ul><ul><ul><li>Perform a major interaction. </li></ul></ul><ul><li>Use secondary windows to: </li></ul><ul><ul><li>Extend the interaction. </li></ul></ul><ul><ul><li>Obtain or display supplemental information related to the primary window. </li></ul></ul><ul><li>Use dialog boxes for: </li></ul><ul><ul><li>Infrequently used or needed information. </li></ul></ul><ul><ul><li>“ Nice-to-know” information. </li></ul></ul>
  24. 25. Number of windows <ul><li>Minimize the number of windows needed to accomplish an objective! </li></ul><ul><li>Users don’t work with windows for the joy, but to get their work done. </li></ul><ul><li>Environment is simply a means to accomplish an objective, and therefore should facilitate the process. </li></ul><ul><li>Multiple windows on a display can be confusing, and can increase the load on the human visual system. </li></ul><ul><li>The mean number of windows maintained for experienced users is 3.7. </li></ul><ul><li>More realistically, try not to display more than 2 or 3 windows at one time. </li></ul>
  25. 26. Active window <ul><li>A window should be made active with as few steps as possible. </li></ul><ul><li>Visually differentiate the active window from other windows (by e.g., contrasting window title bar, border, or background color). </li></ul><ul><li>Single vs. multiple open windows. </li></ul>
  26. 27. Opening a window <ul><li>Provide an iconic representation or textual list of available windows. </li></ul><ul><li>When opening a window: </li></ul><ul><ul><li>Position it in the most forward plane of the screen. </li></ul></ul><ul><ul><li>Adapt the window to the size of the monitor. </li></ul></ul><ul><ul><li>Designate it as the active window. </li></ul></ul><ul><ul><li>Ensure that its title bar is visible. </li></ul></ul><ul><li>When a primary window is opened position it on top. </li></ul><ul><li>When a secondary window is open position it on top of its associated primary window. </li></ul><ul><li>When a dependent secondary window is activated, its primary window should also be positioned on top. </li></ul>
  27. 28. Sizing windows <ul><li>Provide large-enough windows </li></ul><ul><ul><li>Advantages of large windows: </li></ul></ul><ul><ul><ul><li>Allow displaying more info </li></ul></ul></ul><ul><ul><ul><li>Facilitate learning </li></ul></ul></ul><ul><ul><li>Disadvantages of large windows: </li></ul></ul><ul><ul><ul><li>Longer pointer movements are requires </li></ul></ul></ul><ul><ul><ul><li>Windows are more crowded </li></ul></ul></ul><ul><ul><ul><li>More visual scanning is required </li></ul></ul></ul><ul><li>If a window is too large, determine: </li></ul><ul><ul><li>1) Is all the information needed? </li></ul></ul><ul><ul><li>2) Is all the information related? </li></ul></ul><ul><li>Otherwise, make the window as small as possible </li></ul>
  28. 29. Window placement <ul><li>In placing a window on the display, consider: </li></ul><ul><ul><li>The use of the window </li></ul></ul><ul><ul><li>The overall display dimensions </li></ul></ul><ul><ul><li>The reason for the window’s appearance </li></ul></ul><ul><li>Position the window so it is entirely visible. </li></ul><ul><li>If the window is being restored, place the window where it last appeared. </li></ul><ul><li>Dialog boxes: </li></ul><ul><ul><li>If the dialog box relates to the entire system, center it on screen. </li></ul></ul><ul><ul><li>Keep key information on the underlying screen visible. </li></ul></ul><ul><ul><li>If one dialog box calls another, make the new one movable whenever possible. </li></ul></ul>
  29. 30. Moving a window <ul><li>Allow the user to change the position of all windows. </li></ul><ul><li>Change the pointer shape to indicate that the move selection is successful. </li></ul><ul><li>Move the entire window as the pointer moves: </li></ul><ul><ul><li>If it is impossible to move the entire window, move the window outline while leaving the window displayed in its original position. </li></ul></ul><ul><li>Allow the moving of a window without its being active. </li></ul>
  30. 31. Resizing a window <ul><li>Allow the user to change the size of primary windows. </li></ul><ul><li>Change the pointer shape to indicate that the resizing selection is successful. </li></ul><ul><li>Show the changing window as the pointer moves. </li></ul><ul><li>You can anchor left-upper corner and resize from the lower-right corner. </li></ul><ul><li>Allow resizing a window without its being active. </li></ul>
  31. 32. Other operations <ul><li>Maximizing a window increases the size of the window to its largest optimum size. The system default settings for the maximum size is as large as the display. </li></ul><ul><li>Minimizing a window reduces it to its smallest size. </li></ul><ul><li>Restoring returns a window to its previous size and position after the user has maximized or minimized it. </li></ul>
  32. 33. Closing a window <ul><li>Close a window when: </li></ul><ul><ul><li>The user requires that it be closed </li></ul></ul><ul><ul><li>The user performs the action required in the window </li></ul></ul><ul><ul><li>The window has no further relevance </li></ul></ul><ul><li>If a primary window is closed, also close all of its secondary windows. </li></ul><ul><li>When a window is closed, save its current state, including size and position, for use when the window is opened again. </li></ul>