17CS832

USER INTERFACE DESIGN

Mr. Karthik S Referred Text Book:

Assistant Professor, The Essential Guide to User Interface Design (Second Edi
Dept. of CSE, Author: Wilbert O. Galitz
BNMIT.
BNM INSTITUTE OF
TECHNOLOGY
VISION
To be one of the premier Institutes of Engineering and Management
education in the country.
MISSION
To provide Engineering and Management education that meets the
needs of human resources in the country.
To develop leadership qualities, team spirit and concern for
environment in students.
DEPARTMENT OF COMPUTER
SCIENCE
VISION
To be a premier Department for Education in Computer Science and
Engineering in Karnataka State, moulding students into professional
engineers.
MISSION
To provide teaching/ learning facilities in Computer Science and
Engineering better than prescribed by University for easy
adaptation to industry and higher learning.
Provide a platform for self learning to meet the challenges of
changing technology and inculcate team spirit and leadership
qualities to succeed in professional career.
Comprehend the societal needs and environmental concerns in the
MODULE 4: WINDOWS
 MODULE-4 SYLLABUS

Windows - Characteristics, Components of

window, Window presentation styles, Types of
window, Window management, Organizing
window functions, Window operations, Web
systems, Characteristics of device based
controls.
 WINDOW
 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.

Primary Window of Microsoft’s Window

 CONTENTS
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.
 1. 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. (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.
 THE ATTRACTION OF
WINDOWS
Windows are useful in the following ways:
I. Presentation of Different Levels of Information
• Information can be examined in increasing levels of detail
• 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 adjacent
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.
• Significant windows could remain displayed so that details may be modified
as needed prior to order completion
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.
• Key windows may remain displayed, but others appear and disappear as
necessary.
• This sequential preparation is especially useful if the information-
collection process leads down various paths.
• 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.
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.
• It may be presented on the screen alongside the problem, greatly
facilitating its solution.
• Example: A writer may have to refer to several parts of a text being written at the same time
• a travel agent may have to compare several travel destinations for a
particularly demanding client.
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.
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: alternate drafts of a speech, different versions of a screen, or
different graphical representations of the same data.
• A maintenance procedure may be presented in the form of textual steps and illustrated
graphically at the same time.
 CONSTRAINTS IN WINDOW SYSTEM
DESIGN
 Historical Considerations
 lack of guidelines makes it difficult to develop acceptable and agreeable window standards.
 Standardization is also made more difficult by the complexity and range of alternatives available
to the designer
 Standardization of the interface is also inhibited by other factors : Some companies are wary of
standards because they fear that other companies are promoting standards that reflect their own
approach
 Hardware Limitations
 Many of today’s screens are not large enough to take full advantage of windowing capabilities
 Either seeing all the contents of one window is prefer- able to seeing small parts of many
windows or the operational and visual complexity of multiple windows is not wanted
 the slower processing speeds, poor screen resolution & graphic capabilities and smaller memory
sizes of some computers may inhibit the use of windows
 CONSTRAINTS IN WINDOW SYSTEM
DESIGN
 Human Limitations
 A windowing system, because it is more complex, requires the learning and using of more
operations
 In one study comparing full screens with screens containing overlapping windows, task
completion times were longer with the window screens, but the non-window screens
generated more user errors.
 Window manipulation must occur implicitly as a result of user task actions, not as a result
of explicit window management actions by the user.
 2. COMPONENTS OF A WINDOW
Following are the different components of Windows:
1. Frame
2. Title Bar
3. Title Bar Icon
4. Windows Sizing Button
5. What's this(?)
6. Menu Bar
7. Status Bar
8. Scroll Bars
9. Split Box
10. Toolbar
11. Command Area
12. Size Grip
13. Work Area
1. Frame
• A window will have a frame or border, usually rectangular in shape, to define its bound- aries
and distinguish it from other windows.
• The border comprises a line of variable thickness and color.
• 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
• The title bar is the top edge of the window, inside its border and extending its entire width

• 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.
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
 Sizing buttons are included on primary windows only. All buttons on a primary window’s title bar
must have equivalent commands on the pop-up or shortcut menu for that window.
When these buttons are displayed, use the following guidelines:
 When a window does not support a command, do not display its command button.

 The Close button always appears as the rightmost button. Leave a gap between it and any other
buttons.
 The Minimize button always precedes the Maximize button.

 The Restore button always replaces the Maximize button or the Minimize button when that
command is carried out.
5. What’s This? Button
The What’s This? Button, which appears on secondary windows and dialog boxes, is used to
invoke the What’s This?
Windows command to provide contextual Help about objects displayed within a secondary
window.
6. 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.
7. Status Bar
• Information of use to the user can be displayed in a designated screen area
• They may be located at the top of the screen in some platforms and called a status area, or at the screen’s
bottom
• Microsoft Windows suggests using the status bar to display information about the current state of what is
being viewed in the window, descriptive messages about a selected menu or toolbar button, or other non-
interactive information.
8. Scroll Bars
• When all display information cannot be presented in a window, the additional information must be found and
made visible.
• This is accomplished by scrolling the display’s contents through use of a scroll bar.
• 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.
 9. 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 box is some- times referred to as a split bar. A window can be split into two or more separate viewing
areas that are called panes
• 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.

10. Toolbar
• Toolbars are permanently displayed panels or arrays of choices or commands that must be accessed quickly
• 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. Toolbars may occupy a fixed
position or be movable

11. 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
12. 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.

13. Work Area

• The work area is the portion of the screen where the user performs tasks.
• It is the open area inside the window’s border and contains relevant peripheral screen components
such as the menu bar, scroll bars, or message bars
• 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.
 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
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.

General Structure of Tiled Window

Examples
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:

vi. Only a limited number of windows can be displayed in the screen area available.
vii. When a single window is opened or closed, existing windows size changes. The movement can be
disconcerting.
viii. As the number of displayed windows increases, each window can get very tiny.
ix. The changes in sizes and locations made by the system are difficult to predict.
x. The configuration of windows provided by the system may not meet the user’s needs.
xi. They are perceived as crowded and more visually complex because window borders are flush against one
another, and they fill up the whole screen.
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.

General Structure of Overlapping Window

Example
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:

viii. More control functions require greater user attention and manipulation.
ix. Information in windows can be obscured behind other windows.
x. Windows themselves can be lost behind other windows and be presumed not to exist.
xi. Overlapping windows represent a three-dimensional space is not always realized by the user.
xii. Control freedom increases the possibility for greater visual complexity and crowding.
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.

Example

• 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.
 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
 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
 It is required for every function or application, possessing a menu bar and some basic action
controls
 It should present the framework for the function’s commands and data, and provide top-level
context for dependent windows.
 It has also been variously referred to as the application window or the main window.

 In addition, it may be referred to as the parent window if one or more child windows exist

 The primary window is the main focal point of the user’s activities and should represent an
independent function
 Independent functions should begin in a primary window.

 A primary window should contain constantly used window components such as frequently used
menu bar items and controls (for example, control bars) used by dependent windows
Components of Primary Windows
 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
 A dependent secondary window is one common type.
 It can only be displayed from a command on the interface of its primary window.
 It is typically associated with a single data object, and appears on top of the active window
when requested.
 It is movable, and scrollable.
 An independent secondary window can be opened independently of a primary window—for
example, a property sheet displayed when the user clicks the Properties command on the menu
of a desktop icon.
 An independent secondary window can typically be closed without regard to the state of any
primary window unless there is an obvious relationship to the primary window.
Components of Secondary Windows
SECONDARY WINDOWS CAN BE MODAL OR MODELESS
 Most secondary windows will be modal.
 Modal windows will not permit interaction with another window until the current dialog is
completed
 It remains displayed until the appropriate action is taken, after which it is removed from the
screen.
 Modal dialog boxes typically request critical information or actions that must be reacted to
before the dialog can continue
 A modeless dialog box permits the user to engage in parallel dialogs.
 Switching between the box and its associated window is permitted.
 Other tasks may be performed while a modeless dialog box is displayed, and it may be left on
the screen after a response has been made to it.
Example for Modal Secondary Window:

Walmart.com using the modal windows which requires

users to have an account for checking out.

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.
1. Dialog Boxes 2. Property Sheets
3. Property Inspectors

4. Message Boxes
5. Palette Windows

6. Pop-up Windows
 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
1. Single-Document Interface
 The window interface can be established using a single primary window
 A single-document window design is sufficient when the object’s primary presentation or use
is as a single unit, such as a folder or document, even when the object contains different types.
 In a single-document window design, the primary window provides the primary view or work
area
 . Secondary windows can be used for supplemental forms of input, and to view information
about objects presented in the primary window
1. Single-Document Interface
 2. Multiple-Document Interface
 A multiple-document interface (MDI) may be used when multiple views of an object, or
multiple documents, must be looked at simultaneously.
 The purpose of this scheme of windows is to provide multiple views of the same object, to
permit comparisons among related objects, and to present multiple parts of an application.
 An MDI interface consists of multiple document windows that are easy to move between,
essentially primary windows constrained to appear only within the parent windows boundary
(instead of on the desktop).
 These windows may be referred to by a name that describes their contents, such as “Main” in
Windows Program Manager.
 With MDI, the parent window provides a visual and operational framework for its child
windows.
 Child windows typically share the menu bar of the parent window and can also share other
parts of the parent’s interface, such as a toolbar or status bar
2. Multiple-Document Interface
 3. Workbooks

 A workbook is a scheme for managing a set of views that uses the metaphor of a book or
notebook.
 Within the workbook, views of objects, in the form of sections, are presented within the
workbook’s primary window, rather than in individual child windows.
 Tabs are used as a navigational interface to move between different sections
 Each tabbed section represents a view of data.
 One section can be used to list the workbook’s table of contents
3. Workbooks
 4. Projects
 A project is similar to a multiple-document interface (MDI), but does not visually contain the
child windows.
 Objects represented by icons contained within it can be opened into primary windows that are
peers with the parent window.
 Opened peer windows in the project do not share the menu bar or other areas contained with
the parent window.
 Each opened peer window within the project must possess its own menu bar and other
interface elements.
4. Projects
 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.
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.
7. WINDOW OPERATIONS
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
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

 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
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:
4. The difference between a single Web page and a page with frames is not always obvious to the user.
5. Frames will not work on older browsers.
6. 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

7. 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.
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
 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
i. Trackball
ii. Joystick
iii. Graphic Tablet
iv. Light Pen
v. Touch Screen
vi. Voice
vii. Mouse
viii. Keyboard
!!!THANK YOU !!!