Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this


  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>