User Interface Design-Module 4 Windows
- 1. Referred Text Book: The Essential Guide to User Interface Design (Second Edition) Author:Wilbert O. Galitz Subject Code:15CS832 USER INTERFACE DESIGN VTU UNIVERSITY BNMIT, Bengaluru
- 2. WINDOW ▪ A window is an area of the screen, 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. Primary Window of Microsoft’s Window
- 3. 1. A window’s characteristics. 2. A window’s components. 3. A window’s presentation styles. 4. The types of windows. 5. Window management. 6. Organizing window’s functions. 7. Window operations. 8. Web system. 9. Characteristics of device based controls.
- 4. 1. A WINDOW’S CHARACTERISTICS A window is seen to possess the following characteristics: • A name or title, allowing it to be identified. • A size in height and width (which can vary). • A state, accessible or active, or not accessible. (Only active windows can have their contents altered.) • Visibility—the portion that can be seen. (A window may be partially or fully hidden behind another window, or the information within a window may extend beyond the window’s display area.) • A location, relative to the display boundary. • Presentation, that is, its arrangement in relation to other windows. • It may be tiled, overlapping, or cascading. • Management capabilities, methods for manipulation of the window on the screen. • Its highlight, that is, the part that is selected. • The function, task, or application to which it is dedicated.
- 5. Windows are useful in the following ways: I. Presentation of Different Levels of Information • Deeper levels are possible in additional windows. • A document table of contents can be presented in a window II. Presentation of Multiple Kinds of Information • Variable information needed to complete a task can be displayed simultaneously in ad- jacent windows. • Example: An order-processing system window could collect a customer account number in one window and retrieve the customer’s name and shipping address in another window. A third window could collect details of the order, so on. III. Sequential Presentation of Levels or Kinds of Information • Steps to accomplish a task can be sequentially presented through windows. Successive windows are presented until all the required details are collected. • Example: A requested type of coverage in an insurance application might require the collection of specific details about that type of coverage. This information can be entered into a window presented to collect the unique data. The windows disappear after data entry, and additional windows appear when needed.
- 6. IV. Access to Different Sources of Information • Independent sources of information may have to be accessed at the same time from different host computers, operating systems, applications, files, or areas of the same file. • Example: A writer may have to refer to several parts of a text being written at the same time. V. Combining Multiple Sources of Information • Text from several documents may have to be reviewed and combined into one. • Pertinent information is selected from one window and copied into another. VI. Performing More Than One Task • While waiting for a long, complex procedure to finish, another can be performed. • Tasks of higher priority can interrupt less important ones. The interrupted task can then be resumed without the necessity to “close down” and “restart.” VII. Reminding • Windows can be used to remind the viewer of things likely to be of use in the near future. • Examples: A history of the path followed or the command choices to that point, or the time of an important meeting, etc.
- 7. VIII. Monitoring • Changes, both internal and external, can be monitored. • Data in one window can be modified and its effect on data in another window can be studied. • External events, such as changes in stock prices, out of normal range conditions, or system messages can be watched while another major activity is carried out. IX. Multiple Representations of the Same Task • The same thing can be looked at in several ways—Example: A maintenance procedure may be presented in the form of textual steps and illustrated graphically at the same time.
- 8. 2. A WINDOW’S COMPONENTS Following are the different components of Windows: 1. Frame 2. Title Bar 3. Title Bar Icon 4. Windows Sizing Button 5. Menu Bar 6. Status Bar 7. Scroll Bars 8. Split Box 9. Toolbar 10. Command Area 11. Size Grip 12. Work Area
- 9. 1. Frame • Also called as border. It’s a boundary usually rectangular in shape, that distinguish it from other windows. • Windows filling an entire screen may use the screen edge as the border. • If a window is resizable, it may contain control points for sizing it. If the window cannot be resized, the border coincides with the edge of the window. 2. Title Bar • Also referred to by some platforms as the caption, caption bar, or title area. • The title bar contains a descriptive title, identifying the purpose or content of the window. • The title bar also serves as a control point for moving the window and as an access point for commands that apply to a window. For example: As an access point, when a user clicks on the title bar using the secondary mouse button, the pop-up or shortcut menu for the window appears.
- 10. 3. Title Bar Icon • Located at the left corner of the title bar in a primary window, this button is used in Windows to retrieve a pull-down menu of commands that apply to the object in the window. • Microsoft suggests that: • If the window contains a tool or utility, a small version of the application’s icon should be placed. • If the application creates, loads, and saves documents, a small version of the icon that represents its document or data file type should be placed. • Even if the user has not yet saved the file, display the data file icon rather than the application icon, and again display the data file icon after the user saves the file. 4. Window Sizing Buttons • Located at the right corner of the title bar, these buttons are used to manipulate the size of a window. • The minimize button • The maximize button • The restore button—typically inscribed with a pair overlapping boxes. It replaces the maximize but- ton, since the window can no longer be increased in size • A close button
- 11. 5. Menu Bar • A menu bar is used to organize and provide access to actions, so some times also referred as action bar. • It is located horizontally at the top of the window, just below the title bar. • A menu bar contains a list of topics or items that, when selected, are displayed on a pull-down menu beneath the choice. 6. Status Bar • Information of use to the user can be displayed in a designated screen area called as status bar also referred as a message area or message bar. • Microsoft Windows suggests using the status bar in the bottom location. 7. Scroll Bars • A scroll bar is an elongated rectangular container consisting of a scroll area , a slider box and anchors at each end. • Vertical scrolling : The scroll bar is positioned at the far right side of the work area, extending its entire length. • Horizontal scrolling : It is accomplished through a scroll bar located at the bottom of the work area.
- 12. 8. Split Box • A window can be split into two or more pieces or panes by manipulating a split box located above a vertical scroll bar or to the left of a horizontal scroll bar. • A split window allows the user to: • Examine two parts of a document at the same time. • Display different, yet simultaneous, views of the same information. 9. Toolbar • They are sometimes called command bars. Toolbars are designed to provide quick access to specific commands or options. • Specialized toolbars are sometimes referred as ribbons, toolboxes, rulers, or palettes. 10. Command Area • In situations where it is useful for a command to be typed into a screen, a command area can be provided. • The desired location of the command area is at the bottom of the window. • If a horizontal scroll bar is included in the window, position the command area just below it. If a message area is included on the screen, locate the command area just above it..
- 13. 11. Size Grip • A size grip is a Microsoft Windows special handle included in a window to permit it to be resized. • If the window possesses a status bar, the grip is positioned at the bar’s right end. Otherwise, it is located at the bottom of a vertical scroll bar, the right side of a horizontal scroll bar. 12. Work Area • The work area is the portion of the screen where the user performs tasks. • The work area may consist of an open area for typing, or it may contain controls (such as text boxes and list boxes) or customized forms (such as spreadsheets). • The work area may also be referred to as the client area.
- 14. 3. A WINDOW’S PRESENTATION STYLES The presentation style of a window refers to its spatial relationship to other windows. There are two basic styles: 1. Tiled Windows 2. Overlapping Windows Picking a Presentation Style
- 15. 1. Tiled Windows • Tiled windows appear in one plane on the screen and expand or contract to fill up the display surface, as needed. • Most systems provide two-dimensional tiled windows, adjustable in both height and width. Examples General Structure of Tiled Window
- 16. Advantage’s of Tiled Windows: i. The system usually allocates and positions windows for the user, eliminating the necessity to make positioning decisions. ii. Open windows are always visible, eliminating the possibility of them being lost and forgotten and also information being hidden. iii. They are easier, according to studies, for novice or inexperienced people to learn and use. iv. They yield better user performance for tasks where the data requires little window manipulation to complete the task. v. They are less complex than overlapping windows Disadvantage's of Tiled Windows: i. Only a limited number of windows can be displayed in the screen area available. ii. When a single window is opened or closed, existing windows size changes. The movement can be disconcerting. iii. As the number of displayed windows increases, each window can get very tiny. iv. The changes in sizes and locations made by the system are difficult to predict. v. The configuration of windows provided by the system may not meet the user’s needs. vi. They are perceived as crowded and more visually complex because window borders are flush against one another, and they fill up the whole screen. vii. They permit less user control because the system actively manages the windows.
- 17. 2. Overlapping Windows • Overlapping windows may be placed on top of one another like papers on a desk. • They possess a three-dimensional quality, appearing to lie on different planes. • Users can control the location of these windows, sizes of the windows as well as the plane in which they appear. Example General Structure of Overlapping Window
- 18. Advantage’s of Overlapping Windows: i. Visually, their look is three-dimensional, resembling the desktop that is familiar to the user. ii. Greater control allows the user to organize the windows to meet his or her needs as a result screen space conservation is not a problem, because windows can be placed on top of one another. iii. Windows can maintain larger sizes. iv. Windows can maintain consistent sizes and positions. v. There is less pressure to close or delete windows no longer needed. vi. Larger borders can be maintained around window information, and the window is more clearly set off against its background vii. They yield better user performance for tasks where the data requires much window manipulation to complete the task Disadvantage's of Overlapping Windows: i. More control functions require greater user attention and manipulation. ii. Information in windows can be obscured behind other windows. iii. Windows themselves can be lost behind other windows and be presumed not to exist. iv. Overlapping windows represent a three-dimensional space is not always realized by the user. v. Control freedom increases the possibility for greater visual complexity and crowding.
- 19. Cascading Windows • It is a special type of overlapping window where the windows are automatically arranged in a regular progression. • Each window is slightly offset from others, as illustrated. • Advantages of this approach include the following: i. No window is ever completely hidden. ii. Bringing any window to the front is easier. iii. It provides simplicity in visual presentation and cleanness. Example
- 20. 4. TYPES OF WINDOW’S • The type of window used will depend on the nature and flow of the task. • The Microsoft Windows windowing scheme has two basic windows: 1. Primary Windows 2. Secondary Windows i. Dialog Boxes ii. Property Sheets iii. Property Inspectors iv. Message Boxes v. Palette Windows vi. Pop-up Windows
- 21. 1. Primary Window • The primary window is the first one that appears on a screen when an activity or action is started. Example: Microsoft Windows Primary Window
- 22. Components of Primary Windows
- 23. 2. Secondary Window • Secondary windows are supplemental windows. Secondary windows may be dependent upon a primary window or displayed independently of the primary window. Example: Microsoft Windows Secondary Window
- 24. Components of Secondary Windows
- 26. Example for Modeless Secondary Window: Google Mail uses nonmodal windows as the default method for composing new email messages. Users can continue working with this window open, minimize the composed email without losing it. Example for Modal Secondary Window: Walmart.com using the modal windows which requires users to have an account for checking out.
- 27. 1. Dialog Boxes 2. Property Sheets
- 28. 3. Property Inspectors 4. Message Boxes
- 29. 5. Palette Windows 6. Pop-up Windows
- 30. 5. WINDOW MANAGEMENT • The right way to present an application’s collection of related tasks or processes are decided by windows management scheme. • It includes considering a number of design factors, such as the intended users and their skill level, the application and its objects or tasks, and the most effective use of display space. • There are four window management schemes: 1. Single- document interface 2. Multiple-document interface 3. Workbooks 4. Projects
- 33. 3. Workbooks
- 34. 4. Projects
- 35. 6. ORGANIZING WINDOW FUNCTIONS Poor functional organization usually occurs because of one of, or a combination of, these factors: i. Emphasis on technical ease of implementation rather than proper analysis of user tasks. ii. Focus on applications, features, functions, or data types instead of tasks. iii. Organization of the design team into applications, with little cross-team communication. iv. Blindly mimicking the manual world and carrying over manual inefficiencies to the computer system.
- 36. Recommendations for organizing windows include : • Organize windows to support user tasks. • Minimize the number of windows needed to accomplish an objective. • Support the most common tasks in the most efficient sequence of steps. • Use primary windows to: • Begin an interaction and provide a top-level context for dependent windows. • Perform a major interaction. • Use secondary windows to: • Extend the interaction. • Obtain or display supplemental information related to the primary window. • Use dialog boxes for: • Infrequently used or needed information. • “Nice-to-know” information.
- 38. Different Window operations and the guidelines for each are discussed below: 1. Active Window 2. Opening a Window 3. Sizing Windows 4. Window Placement 5. Window Separation 6. Moving a Window 7. Resizing a Window 8. Window Shuffling 9. Keyboard Control/Mouseless Operation 10. Closing a Window 11. Other Operations
- 39. 1. Active Window 2. Opening a Window 3. Sizing Windows
- 40. 4. Window Placement 5. Window Separation 6. Moving a Window
- 41. 7. Resizing a Window 8. Window Shuffling 9. Keyboard Control/Mouseless Operation
- 42. 10. Closing a Window 11. Other Operations
- 43. 8. WEB SYSTEM • Web systems have limited windowing capabilities. • The “Frame” concept does provide window-like ability, and JavaScript does provide “Pop-up windows” 1. Frames: Example
- 44. Advantages of Frames: 1. They decrease the user’s need to jump back and forth between screens, thereby reducing navigation- related cognitive overhead. 2. They increase the user’s opportunity to request, view, and compare multiple sources of information. 3. They allow content pages to be developed independently of navigation pages. Disadvantages of Frames: 1. The difference between a single Web page and a page with frames is not always obvious to the user. 2. Frames will not work on older browsers. 3. Frames-based pages behave differently from regular Web pages. ▪ Page-printing difficulties and problems can exist. ▪ Page interaction can be clumsy. ▪ URLs cannot be e-mailed to other users 4. They suffer some of the shortcomings of tiled screens: ▪ Only a limited number can be displayed in the available screen area. ▪ They are perceived as crowded and more visually complex because frame borders are flush against one another and they fill up the whole screen.
- 45. 2. Pop-Up Windows : â–Ş JavaScript pop-up windows began appearing on the Web in 1996 in the form of advertising pop- ups, polluting web screens of almost all the web users. â–Ş Anecdotal evidence suggests that when a pop-up window begins to appear, most people close them before they are rendered. â–Ş So, if a pop-up window is used, it may never be completely seen or read by the user. Use them with extreme caution Example
- 46. 9. CHARACTERISTICS OF DEVICE BASED CONTROLS • Device-based controls, often called input devices, are the mechanisms through which people communicate their commands to the system. • Following are the various devices providing device-based controls: i. Trackball ii. Joystick iii. Graphic tablet iv. Light pen v. Touch screen vi. Voice vii. Mouse viii. Keyboard
- 47. i. Trackball
- 48. ii. Joystick
- 50. iv. Light Pen
- 51. v. Touch Screen
- 52. vi. Voice
- 53. vii. Mouse
- 54. viii. Keyboard End of Module 4