IT703: Directed Readings

(Usability Engineering)

Lecture 6
Select the Proper
Kinds of Windows

March 30, 2019 Prof. Abdelaziz Khamis 1

Lecture 6 Topics
 Window Characteristics
 Window Components
 Window Presentation Styles
 Types of Windows
 Organizing Window Functions
 Browser Components

March 30, 2019 Prof. Abdelaziz Khamis 2

Window 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
 Visibility - the portion that can be seen
 A location, relative to the display boundary
 Presentation, that is, its arrangement in relation to other
windows
 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

March 30, 2019 Prof. Abdelaziz Khamis 3

Window Components
 A typical window may be composed of up to a dozen or
so elements.
 Some elements appear on all windows, others only on certain
kinds of windows, or under certain conditions.
 For consistency purposes, these elements should always be
located in the same position within a window.
 What follows is a description of window components and
their purposes, with emphasis on the most popular
windowing system, Microsoft Windows.
 Specifically reviewed will be primary windows, secondary
windows, and a form of secondary window called the dialog box.
 An illustration of a primary window is found in Figure 5.1.
 An illustration of secondary windows and dialog boxes are found in
Figures 5.8 and 5.13.
 A summary of window components for these types of windows is
found in Table 5.1.

March 30, 2019 Prof. Abdelaziz Khamis 4

Window Components (Continued)
 Frame:
 A window has a frame or border to define its boundaries and
distinguish it from other windows.
 Title Bar:
 The top edge of the window, inside its border.
 It contains a descriptive title identifying the purpose of the window.
 Title Bar Icon:
 Located at the left corner of the title bar in a primary window.
 Used to retrieve a pull-down menu of commands that apply to the
object in the window.
 Window Sizing Buttons:
 Located at the right corner of the title bar.
 They are used to manipulate the size of a window.

March 30, 2019 Prof. Abdelaziz Khamis 5

Window Components (Continued)
 What’s This? Button
 Used to invoke the What’s This? Windows command to provide
contextual Help
 On a secondary window this button is located in the upper-right
corner of the title bar, just to the left of the close button.
 On a primary window this command is accessed from the Help
drop-down menu.
 Menu Bar
 Used to organize and provide access to actions.
 Located horizontally at the top of the window, just below the title
bar.
 Status Bar
 Used to display information about the current state of what is
being viewed in the window.
 Located at the bottom of the window.

March 30, 2019 Prof. Abdelaziz Khamis 6

Window Components (Continued)
 Scroll Bars
 Provides the end user with a way to control the portion of data that
is displayed when there is too much data to fit in the display area
 A scroll bar consists of a rectangular container consisting of a
scroll area, a slider bar, and arrows at each end.
 Split Box
 A window can be split into two or more separate viewing areas by
manipulating a split box
 Splitting a window enables the user to:
 Examine two parts of a document at the same time.
 Display different, yet simultaneous, views of the same information
 Toolbar
 Illustrated in Figure 5.3.
 Used to provide quick access to specific commands.

March 30, 2019 Prof. Abdelaziz Khamis 7

Window Components (Continued)
 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.
 Size Grip
 A size grip is a Microsoft Windows special handle included in a
window to permit it to be resized.
 A size grip is shown in the lower-right corner of Figure 5.1.
 Work Area
 The portion of the screen where the user performs tasks.

March 30, 2019 Prof. Abdelaziz Khamis 8

Window Presentation Styles
 The presentation style of a window refers to its spatial
relationship to other windows.
 There are two basic styles, commonly called tiled or
overlapping.
 Tile windows, illustrated in Figure 5.4, appear in one plane
on the screen and expand or contract to fill up the display
surface.
 Overlapping windows, illustrated in Figure 5.5, may be
placed on top of one another. They possess a three-
dimensional quality, appearing to lie on different planes.
 A special type of overlapping windows, called cascading
windows, has the windows automatically arranged in a
regular progression as illustrated in Figure 5.6.
March 30, 2019 Prof. Abdelaziz Khamis 9
Window Presentation Styles (Continued)
 Picking a Presentation Style
 Use tiled windows for:
 Single-task activities
 Data that needs to be seen simultaneously
 Tasks requiring little window manipulation
 Novice or inexperienced users

 Use overlapping windows for:

 Switching between tasks
 Tasks requiring a greater amount of window manipulation
 Expert or experienced users
 Unpredictable display contents

March 30, 2019 Prof. Abdelaziz Khamis 10

Types of Windows
Primary Window
(The first window to appear when an application is started)
 Proper Usage:
 Represent an independent function or application.
 Present constantly used window components such as frequently
used menu bar items
 Presenting information that is continually updated (such as date
and time)
 Providing context for dependent windows to be created.
 Avoid presenting unrelated functions in one primary window.
 Avoid dividing an independent function into two or more
primary windows.
 The components of a primary window are summarized in
table 5.2

March 30, 2019 Prof. Abdelaziz Khamis 11

Types of Windows (Continued)
Secondary Windows
 Secondary windows may be dependent upon a primary
window or displayed independently of the primary window.
 Proper Usage:
 Performing secondary, supplemental, or auxiliary actions
that are extended or more complex in nature
 Presenting frequently or occasionally used window components
 Important Guidelines:
 Should typically not appear as an entry on the taskbar. Secondary
windows obtain or display supplemental information that is usually
related to the objects that appear in a primary window
 A secondary window should not be larger than 263x263 dialog units
The size and location of UI elements are defined not in pixels but in
dialog units (DLUs), a device-independent unit of measure.

March 30, 2019 Prof. Abdelaziz Khamis 12

Types of Windows (Continued)
Modal Secondary Windows
 Use when interaction with any other window must not
be permitted. Use for:
 Presenting information
 For example, messages (sometimes called a message box)
 Receiving user input
 For example, data or information (sometimes called a prompt box)
 Asking questions
 For example, data, information, or directions (sometimes called a
question box)
 Use carefully because it constrains what the user can do
Modeless Secondary Windows
 Use when interaction with other windows:
 Must be permitted
 Must be repeated
March 30, 2019 Prof. Abdelaziz Khamis 13
Types of Windows (Continued)
Cascading Secondary Windows
 Purpose:
 To provide advanced options at a lower level in a complex
dialog
 Guidelines:
 Provide a command button leading to the next dialog box
with a “To a Window” indicator
 An ellipsis (...)
 Present the additional dialog box in cascaded form
 Provide no more than two cascades in a path
 Do not cover previous critical information
 Title Bar
 Relevant displayed information
 A cascade window is illustrated in Figures 5.9 and 5.10
March 30, 2019 Prof. Abdelaziz Khamis 14
Types of Windows (Continued)
Unfolding Secondary Windows
 Purpose:
 To provide advanced options at the same level in a complex
dialog
 Guidelines:
 Provide a command button with an expanding dialog
symbol (>>)
 Expand to right or downward

 An unfolding window is illustrated in Figures 5.11 and 5.12

March 30, 2019 Prof. Abdelaziz Khamis 15

Types of Windows (Continued)
Dialog Boxes
 Purpose:
 To extend and complete an interaction
 For presenting brief amounts of information
 For requesting specific transient (lasting only a short time) actions
 Guidelines:
 Command buttons to include:
 OK
 Cancel
 Others as necessary
 A dialog box is illustrated in Figure 5.13

March 30, 2019 Prof. Abdelaziz Khamis 16

Types of Windows (Continued)
Property Sheets
 Purpose:
 Use for presenting the complete set of properties for an object
 Guidelines:
 Categorize and group within property pages as necessary.
 Command buttons to include:
 OK
 Cancel
 Apply
 Reset
 Others as necessary
 For single property sheets:
 Place commands on the sheet
 For tabbed property pages:
 Place commands outside the tabbed page (Figure 5.15)

March 30, 2019 Prof. Abdelaziz Khamis 17

Types of Windows (Continued)
Message Boxes
 Purpose:
 Use for displaying a message about a particular situation or
condition
 Guidelines:
 Command buttons to include:
 OK
 Cancel
 Buttons to correct the action that caused the message box to
be displayed
 Designate the most frequent or least destructive option as
the default command button

March 30, 2019 Prof. Abdelaziz Khamis 18

Types of Windows (Continued)
Pop-up Windows
 Use pop-up windows to:

 Display additional information when an abbreviated form is

the main presentation
 Display textual labels for graphical controls
 Display Context-sensitive Help information
 Guidelines:
 Present at the front of the screen
 Never display unsolicited pop-up. Wait for users to take
actions necessitating the pop-up

March 30, 2019 Prof. Abdelaziz Khamis 19

Organizing Window Functions
Window Organization
 Organize windows to support user tasks
 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
 “good-to-know” information

March 30, 2019 Prof. Abdelaziz Khamis 20

Browser Components
 A browser is a user interface for the World Wide Web.
 The most popular browser is Microsoft’s Internet Explorer.
 The second most popular is Mozilla’s Firefox.
 In appearance, Internet Explorer presents the same visual
style found in Windows.
 It also contains many of the same standard components,
including a title bar, menu bar, toolbar, sizing buttons,
command field (called URL address bar), status bar,
frame border, and if necessary, a scroll bar.
 It also includes a content area for displaying information,
buttons, data fields, and so forth.

March 30, 2019 Prof. Abdelaziz Khamis 21

Browser Components (Continued)
 Standard toolbar actions include the following:
 Back - Displays the previous page viewed
 Forward - Display the next page if already viewed
 Stop - Stop page from being loaded
 Refresh - refreshes and redisplay the page being viewed
 Home - Displays the Web site homepage
 Search - Displays a search field
 Favorites - Displays a listing of favorite URLs that have been saved
 History - Displays a history of viewed pages.

March 30, 2019 Prof. Abdelaziz Khamis 22

Browser Components (Continued)
 Frames.
 A frame is an independent pane of information presented in a
Web page.
 Frames are presented as tiled, with no overlapping capability.
 Frames allow the displaying of multiple documents on a
single Web page. These multiple documents can be
independently viewed, scrolled, and updated.
 Frames are useful in situations where portions of the page
content are expected to change frequently.
 Frames allow users to change partial screen content.
 Frames permit users to compare pieces of information.

March 30, 2019 Prof. Abdelaziz Khamis 23