Windows

Navigation Schemes
Window
A window is a separate viewing area on
a computer display screen in a system that allows
multiple viewing areas as part of a graphical user
interface ( GUI ).
window is a graphical control element.
Menu
A menu is a set of options presented to the user of
a computer application to help the user find
information or execute a program function. 
Menus are common in graphical user interfaces
( GUI s) such as Windows or the Mac OS .
A menu is used to perform tasks of a system.
Menu provides the desired choices to the user.
There are different types of menus and to use the
best type of menu, following factors must be
considered.

1) The items that are available in menu.

2) The menu that is used frequently.

3) The content of menu that is frequently changed.

Menus are a major form of navigation through a
system and if properly designed, assist the user in
developing a mental model of the system.
In this step, the following menu topics will be
addressed:
1) Structure of menus
2) The functions of menus
3) The content of menus
4) Formatting menus
5) Writing menus
6) Navigation using menus
7) Website navigation and links
8) Types of graphical menus

Working with menus reminds people of available

options and information that they may not be aware
of or have forgotten.
1) Menu’s Structure:
The structure of menus explain the level of control
given to the user in performing a particular task.
Menus basically consists of small dialog boxes in
which the user is allowed to choose from a set of
alternatives.
The commonly used structures are:
i) Single Menus ii) Sequential Menus
iii) Parallel Menus iv) Hierarchical Menus
v) Interconnected Menus vi) Event-Driven Menus
Single Menu
In this, a single window is displayed to obtain the
users input.
For example:
While playing a game, the different choices are
simple, intermediate or difficult.
The user is concerned only with the immediate
consequences of selected item from this single menu
and need not be concerned with any additional
system menus require user choices.
Simple

Intermediate

Difficult
Sequential Menus
The goal of sequential menu is for specifying a
parameter or for entering data.
All menus in a sequential menu must be displayed
in a series of screens whose order is set in advance.
Menu 3
Menu 2
Menu 1
Choice 1

Choice 2

Choice 3
Parallel Menus
These are presented on the same screen with all the
menu options available parallel.
The disadvantage of a parallel menu is confusion
arises when a number of groups of menus are
available on one screen.
Hence, it is necessary to have screen paging or
scrolling to view all the choices of menus.
Hierarchical Menus
A hierarchical menu is presented when various
menu alternatives are interrelated and only some of
the menu options are dependable on a previous
menu selection.
Example: Menu present in Ms-Word application.
For example, ‘File’ menu has a pull down through
another pull down appears on screen if ‘print’
choice is selected. This is nothing but the
hierarchical representation of menus.
Example of Hierarchical Menus
Interconnected Menus
All menus in the network are connected with each
other in some fashion.
Advantage:
The network provides complete control over
navigation flow.
Disadvantage:
The network has complex structure.
Menu 1 Menu 2 Menu 3

Menu 4 Menu 5 Menu 6

Menu 7 Menu 8 Menu 9

 Event-Driven Menus
When user is operating on a foreground task, the
event-driven menus give a control representation of
1
the condition and parameters of systems state.
User interacts with page 2 An ‘event’ is triggered

EVENT!

4 The page’s appearance is 3 A code handler runs in response

updated/modified as a result
2)Functions of Menus:
The important functions of menus are:

i) Navigation
ii) Execution
iii) Displaying
iv) Defining input data
Navigation
The user’s selection causes another new menu to be
displayed on the screen in the form of a hierarchical
menu.
The goal of navigation is to move the user towards
his destined option.
Execution
Based on the user’s selection, an action or event
such as closing or opening a file, copying a text or
transmitting a text file is executed.
Displaying
The objective of selecting a menu is to display
some information, searching from a database or
browsing internet.
The primary attention of the user is on the desired
information and the secondary attention is on the
selection operation.
Defining input data
A user selection defines an input data or a parameter
value, which is presented on a single menu or a
hierarchical menu of the system.
The primary attention
is again on the desired
information and the
secondary attention is
on selection operation.
3) The Content of Menus
There are four distinct contents of menus:

i) Context
ii) Title
iii) Alternative
iv) Explicit instructions
Context
The user positioned based on the information
is
provided by the menus context.
Title
A menus context for a group of present selected
options can be simply described by a menu’s title.
Alternative Descriptions
The user have different descriptions of choices on
the menu screen.
These descriptions vary from mnemonic,
alphabetical or numeric using of choices to single
words or phrases.
The selected style will illustrate the users
experience, the nature of selection mechanism i.e.,
keyboard or mouse, the nature of choice i.e.,
efficient or not and the quality of the system i.e., a
web application or business application.
Explicit Instructions

These instructions ask users how to indicate their

choices.
Casual users require explicit instructions for
making choices whereas experienced users doesn’t
require any verbose directions.
4)Formatting of menus
The following are the guidelines for menu
formatting:
1) Consistent
i. Formatting menus must be consistent in order to
fulfill the user’s expectation.
ii. Formatting menus should follow consistent
phrasing, formatting, choice selection and
navigation methods.
2) Display output

i. The menu should be displayed permanently in

an area of the screen when menu options are
referred continuously or repeatedly on the
screen.
ii. Themenu on the screen must be displayed in
such a way that it will not hide the other screens
data.
iii. The menu must be displayed only if necessary
when options of menu are referred very rarely.
3) Presentation style

i. The menu and its related choices should be

very clear to the user which is possible by
providing unique and consistent display
methods.

ii. The quality of other system elements should

not have the same usual qualities as menu
choices.
4) Menu management
Formatting menus should have a general or main
menu on the screen.
i. The menu management should reflect the
relevant steps of menus structure in order to
fulfill the objectives of a user.
ii. The menus should be restricted to a few
number of levels so as to improve the clarity.
iii. The menu choices should be conservative.
iv. The menu choices should not be scrolled.
5) Complexity
Formatting menus should be capable of displaying
both simple and complex menus structure.

6) Simple Menus
Only a limited number of events and menus are
provided.
7) Complex menus
Entire set of events and menus are provided.
8) Separation

i. The groups and subgroups that are arranged in

columns should be separated with the help of
dashed or dotted line respectively.
ii. Left and right justification should be provided
under column and row choice option of different
subgroups respectively.
iii.Individual groups should have an extended line
from left-to-right menu borders.
Fig : Line seperators
5) Phrasing the menus
A menu must describe the nature and purpose of
itself, the presented choices in it etc. these can be
done by phrasing the menus properly.
The following are the guidelines for menu phrasing:
1) Title
2) Choice Descriptions
3) Instructions
4) Indicators
5) Keyboard equivalent and mnemonic
6) Accelerator key
6) Selecting Menu choices
The following are the guidelines for menu choice
selection
1) Positioning a cursor
2) Selecting a choice
3) Default option
4) Unavailable choices
5) Marking a toggle
6) Toggled menu items
7) Navigating Menus
Navigation links are created to move among various
websites for extracting information.
These links are present inside a framework of tools
or controls, including browsers command buttons,
website navigation bars, website command buttons
and textual phrases.
All these components collectively are known as
links.
When link is selected, the related information is
displayed or a file is opened or downloaded.
8) Types of Graphical Menus
A systems success always depends on factors like
graphical menus that are provided properly and
according to the frequent usage of them.
The different kinds of graphical menus are as
follows:
1) Menu bars
2) Pull-down menus
3) Cascading menus
4) Pop-up menus
5) Tear-off menus
6) Iconic menus
1) Menu bars
A menu bar can be simply called as a “Menu” that
consists of group of titles arranged horizontally at
the top of screen.
 2) Pull-down menus(drop-down menu)
  Menu of commands  or options that appears when
you select an item with a mouse.
The item you select is generally at the top of
the display screen, and the menu appears just below
it, as if you had pulled it down.
3) Cascading menus
A menu system that displays submenus off to the
side when selected.
Pop-up menus
A context menu (also called contextual, shortcut,
and popup or pop-up menu) is a menu in a
graphical user interface (GUI) that appears upon
user interaction, such as a right-click mouse
operation.
Tear-off menu
A software menu capable of being moved to another
portion of the screen. Commonly, a tear-off menu is
moved from the top portion of the window to the
left, right, or bottom of the window.
Iconic Menu
An iconic menu display the menu items in a
graphical or pictorial way.
Their icon size is larger and hence they can easily
remind the users about the elements
Selection of windows
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.
It can be moved and rendered independently on the
screen.
A display may contain one, two, or more windows
within its boundaries. In this step the following is
addressed:
1. A window’s characteristics.
2. A window’s components.
3. A window’s presentation styles.
4. The types of windows available.
5. Organizing window system functions. In

6. A window’s operations. Next Class

7. Web system frames and pop-up windows.

 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.
 Window Components
• A typical window may be composed of up to a
dozen or so elements. Some appear on all windows;
others only on certain kinds of windows, or under
certain conditions.
The following are some of the window components:
Frame
Title Bar
Title Bar Icon
Window Sizing Buttons
What’s This? Button
Menu Bar
Status Bar
Scroll Bars
Split Box
Toolbar
Command Area
Size Grip
Work Area
Frame
A window will have a frame or border, usually
rectangular in shape, to define its boundaries and
distinguish it from other windows.
While a border need not be rectangular, this shape is
a preferred shape for most people. Also, textual
materials, which are usually read from left to right,
fit most efficiently within this structure.
The border comprises a line of variable thickness
and color.
This variation can be used as an aid in identifying
the type of window being displayed.
Title Bar
The title bar is the top edge of the window, inside its
border and extending its entire width.
This title bar is 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.
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.
It is 16 × 16 version of the icon of the object being
viewed.
When clicked with the secondary mouse button, the
commands applying to the object are presented.
Window Sizing Buttons
Located at the right corner of the title bar, these
buttons are used to manipulate the size of a window.
The leftmost button, the minimize button inscribed
with a short horizontal line toward the bottom of the
button is used to reduce a window to its minimum
size, usually an icon.
It also hides all associated windows.
The maximize button typically inscribed with a
large box enlarges a window to its maximum size,
usually the entire screen.
When a screen is maximized, the restore button
replaces the maximize button, since the window can
no longer be increased in size.
The restore button typically inscribed with a pair
overlapping boxes returns a window to the size it
had before a minimize or maximize action was
performed.

A close button typically inscribed with an X closes

the window.
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. When provided, it is
located in the upper-right corner of the title bar, just
to the left of the close button. It is inscribed with a
question mark, as illustrated in the below Figure
Menu Bar
A menu bar is used to organize and provide access
to actions.
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.
Status Bar
Information of use to the user can be displayed in a
designated screen area or areas.
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 recommends the bottom location and
refers to this area as the status bar.
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 or shaft, a slider box or
elevator, and arrows or anchors at each end.
For vertical scrolling, the scroll bar is positioned at
the far right side of the work area, extending its
entire length.
Horizontal scrolling is accomplished through a
scroll bar located at the bottom of the work area.
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 sometimes referred to as a split
bar. A window can be split into two or more separate
viewing areas that are called panes.
Splitting a window permits multiple views of an
object.
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.
Toolbar
Toolbars, are permanently displayed panels or arrays
of choices or commands that must be accessed
quickly.
Toolbars are designed to provide quick access to
specific commands or options. Specialized toolbars
are sometimes referred to as ribbons, toolboxes,
rulers, or palettes.
To resize the toolbar to its maximum or minimum
size, the user clicks the grip.
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.
Size Grip
A size grip is a Microsoft Windows special handle
included in a window to permit it to be resized.
When the grip is dragged the window resizes,
following the same conventions as the sizing border.
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).
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
Tiled windows, illustrated in the following Figure,
derive their name from common floor or wall tile.
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.
Some less-powerful systems, however, are only one-
dimensional, the windows being adjustable in only
one manner (typically the height). Tiled windows,
the first and oldest kind of window, are felt to have
these advantages:
• The system usually allocates and positions windows
for the user, eliminating the necessity to make
positioning decisions.
• Open windows are always visible, eliminating the
possibility of them being lost and forgotten.
• Every window is always completely visible,
eliminating the possibility of information being
hidden.
• They are perceived as less complex than
overlapping windows, possibly because there are
fewer management operations or they seem less
“magical.”
• They are easier, according to studies, for novice or
inexperienced people to learn and use.
• They yield better user performance for tasks where
the data requires little window manipulation to
complete the task.
Disadvantages include the following:
Only a limited number can be displayed in the screen area available.
As windows are opened or closed, existing windows change in size. This
can be annoying.
As windows change in size or position, the movement can be
disconcerting.
As the number of displayed windows increases, each window can get very
tiny.
The changes in sizes and locations made by the system are difficult to
predict.
The configuration of windows provided by the system may not meet the
user’s needs.
They are perceived as crowded and more visually complex because
window borders are flush against one another, and they fill up the whole
screen. Crowding is accentuated if borders contain scroll bars or control
icons. Viewer attention may be drawn to the border, not the data.
They permit less user control because the system actively manages the
windows.
Overlapping Windows
Overlapping windows, illustrated in the following
Figure, 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, as
well as the plane in which they appear.
The sizes of some types of windows may also be
changed.
Most systems today normally use this style of
window. They have the following advantages:
• Visually, their look is three-dimensional, resembling
the desktop that is familiar to the user.
• Greater control allows the user to organize the
windows to meet his or her needs.
• Windows can maintain larger sizes.
• Windows can maintain consistent sizes.
• Windows can maintain consistent positions.
• Screen space conservation is not a problem, because
windows can be placed on top of one another.
• There is less pressure to close or delete windows no
longer needed.
Cascading Windows
A special type of overlapping window has the
windows automatically arranged in a regular
progression. Each window is slightly offset from
others, as illustrated in the following Figure.
Advantages of this approach include the following:
No window is ever completely hidden.
Bringing any window to the front is easier.
It provides simplicity in visual presentation and
cleanness.
Thank you