HUMAN-COMPUTER INTERACTION

Contents

A window’s characteristics

A window’s components

A window’s presentation style

The types of windows available

Organizing window system functions

A window’s operations

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.

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.

A display may contain one, two, or more windows within its boundaries.

Window’s characteristics

A name or title, allowing it to be identical.

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 (tiled, overlapping, and 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.

Components of a window

A typical window may be composed of many elements.

Some 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.

We can distinguish between three basic types of windows:

primary windows

secondary windows

dialog boxes

Components of a window (continued)

Frame

Title bar (Alt+Spacebar for menu)

Title bar icon

Window sizing buttons

“What’s this?” button

Menu bar

Status bar

Scroll bar

Toolbar

Split

Size grip

Work area

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

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.

In early windowing days, most systems commonly used one or the other style exclusively, seldom using both at the same time.

Now, the user is usually permitted to select the style to be presented on the display.

Tiled windows

Advantages:

Open windows are always and completely visible.

They are perceived less complex than overlapping windows.

They are easier for novice people to learn and use.

Disadvantages:

Only a limited number can be displayed.

As the number of windows increases, each window can get very small.

They are perceived as crowded and more visually complex.

Overlapping windows

Advantages:

Visually, their look is three-dimensional.

Greater control allows the user to organize the windows to meet his or her needs.

Can maintain larger sizes and consistent positions.

Less pressure to close windows no longer needed.

Disadvantages:

Operationally much more complex than tiled ones.

Can be lost behind other windows.

That overlapping windows represent three-dimensional space is not always realized by users.

Cascading Windows

A special type of overlapping window has the windows automatically arranged in a regular progression.

Each window is slightly offset from others.

Advantages of this approach are:

No window is ever completely hidden.

Bringing any window to the front is easier.

It provides simplicity in visual presentation and cleanness.

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

Types of windows

People’s tasks must be structured into a series of windows.

The type of window used will depend on the nature and flow of the task.

Defining standard window types is difficult across platforms because of the varying terminology and definitions used by different windowing systems.

The Microsoft Windows windowing schema includes: primary window, secondary window, and dialog box.

Primary window

Represents an independent function or application. Present constantly used components and controls:

menu bars that are used frequently, used by primary or secondary windows.

controls used by dependent windows. Use for presenting information that is continually

updated (e.g., data and time).

Providing context for dependent windows. Do not:

Divide an independent function into two or more primary windows.

Present unrelated functions in one primary window.

Secondary window

Performing subordinate, supplemental, or auxiliary actions that are:

Extended or more complex in nature

Related to objects in the primary window

Presenting frequently or occasionally used window components.

Dialog boxes

Dialog boxes are used to extend and complete an interaction within a limited context.

Dialog boxes are always displayed from another window.

Use dialog boxes for:

presenting brief messages

presenting specific, transient actions

performing actions that:

take a short time to complete

are not frequently changed

Command buttons include: OK, Cancel, others as necessary.

Message boxes

Use for displaying a message about a particular situation or condition.

Command buttons include: OK, Cancel, Help, Yes, No, Stop, buttons to correct the action that caused the message box to be displayed.

Enable the title bar close box only if the message includes a cancel button.

Designate the most frequent or least destructive option as the default command button.

Window management

There are several window management schemas (not the only schemas but most frequently used):

Single-document interface (SDI)

Multiple-document interface (MDI)

Workbooks

To choose the right schema you should consider a number of design factors:

Intended users and their skill level

Application and its objects or tasks

Most effective use of display space

SDI

It is a single primary window with a set of secondary windows.

Proper usage:

Where object and window have a simple, one-to-one relationship.

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.

Advantages: most common usage, window manipulation is easier and less confusing, and data-centered approach.

Disadvantage: information is displayed or edited in separate windows.

MDI

Contains a single primary (parent) window and a set of child windows (each one could also be a primary window).

The primary window provides a visual and operational framework for its child windows.

Each child window is constrained to appear only within the parent window. The child windows share the parent window’s operational elements.

Proper usage:

To present multiple occurrences of an object

To compare data within two or more windows

To present multiple parts of the application

MDI (continued)

Advantages:

Very space-efficient interface (child windows share the parent window’s interface components, e.g., menus, toolbars, and status bar).

Useful for managing a set of objects.

Disadvantages:

Reinforces an application as the primary focus.

More challenging for novice users (relationship between files and their windows is abstract).

Workbooks

A window or task management technique that consists of a set of views like a tabbed notebook.

It is based upon the metaphor of a book or notebook.

Views of objects are presented as sections within the workbook’s primary windows; child windows do not exist.

Each section represent a view of data.

Tabs can be included and used to navigate between sections.

Otherwise, its characteristics and behavior are similar to those of the MDI with all child windows maximized.

Workbooks

Proper usage: To manage a set of views of an object. To optimize quick navigation of multiple views. For content where the order of the sections is

significant. Advantages:

Provides a grouping and focus for a set of activities within the environment of the desktop.

Provides the greater simplicity of the SDI and by eliminating child window management.

Preserves some man-t capabilities of the MDI. Disadvantage: cannot present simultaneous views

Window organization

Organize windows to 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.

Number of windows

Minimize the number of windows needed to accomplish an objective!

Users don’t work with windows for the joy, but to get their work done.

Environment is simply a means to accomplish an objective, and therefore should facilitate the process.

Multiple windows on a display can be confusing, and can increase the load on the human visual system.

The mean number of windows maintained for experienced users is 3.7.

More realistically, try not to display more than 2 or 3 windows at one time.

Active window

A window should be made active with as few steps as possible.

Visually differentiate the active window from other windows (by e.g., contrasting window title bar, border, or background color).

Single vs. multiple open windows.

Opening a window

Provide an iconic representation or textual list of available windows.

When opening a window: Position it in the most forward plane of the screen. Adapt the window to the size of the monitor. Designate it as the active window. Ensure that its title bar is visible.

When a primary window is opened position it on top. When a secondary window is open position it on top of

its associated primary window. When a dependent secondary window is activated, its

primary window should also be positioned on top.

Sizing windows

Provide large-enough windows Advantages of large windows:

Allow displaying more info Facilitate learning

Disadvantages of large windows: Longer pointer movements are requires Windows are more crowded More visual scanning is required

If a window is too large, determine: 1) Is all the information needed? 2) Is all the information related?

Otherwise, make the window as small as possible

Window placement

In placing a window on the display, consider: The use of the window The overall display dimensions The reason for the window’s appearance

Position the window so it is entirely visible. If the window is being restored, place the window where

it last appeared. Dialog boxes:

If the dialog box relates to the entire system, center it on screen.

Keep key information on the underlying screen visible. If one dialog box calls another, make the new one

movable whenever possible.

Moving a window

Allow the user to change the position of all windows.

Change the pointer shape to indicate that the move selection is successful.

Move the entire window as the pointer moves:

If it is impossible to move the entire window, move the window outline while leaving the window displayed in its original position.

Allow the moving of a window without its being active.

Resizing a window

Allow the user to change the size of primary windows.

Change the pointer shape to indicate that the resizing selection is successful.

Show the changing window as the pointer moves.

You can anchor left-upper corner and resize from the lower-right corner.

Allow resizing a window without its being active.

Other operations

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.

Minimizing a window reduces it to its smallest size.

Restoring returns a window to its previous size and position after the user has maximized or minimized it.

Closing a window

Close a window when:

The user requires that it be closed

The user performs the action required in the window

The window has no further relevance

If a primary window is closed, also close all of its secondary windows.

When a window is closed, save its current state, including size and position, for use when the window is opened again.