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.
1. Tiled Windows
Tiled windows 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.
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.
advantages of Tiled Windows
 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 fewer complexes 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 of Tiled Windows

• 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.
• 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.
• The possibility exists for less visual crowding and complexity. Larger borders can be maintained
around window information, and the window is more clearly set off against its background.
Windows can also be expanded to fill the entire display.
• They yield better user performance for tasks where the data requires much window manipulation
to complete the task.
• Disadvantages
• They are operationally much more complex than tiled windows. More control functions require
greater user attention and manipulation.
• Information in windows can be obscured behind other windows.
• Windows themselves can be lost behind other windows and be presumed not to exist.
•
• That overlapping windows represent a three-dimensional space is not always realized by the user.
• Control freedom increases the possibility for greater visual complexity and crowding. Too many
windows, or improper offsetting, can be visually overwhelming.
 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 Figure
Advantages
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 necessitating a greater amount of window manipulation. o Expert or
experienced users.
• · Unpredictable display contents.
 Types of Windows

• Primary Window
Proper usage:
· Should represent an independent function or application.
· Use to present constantly used window components and controls.
o Menu bar items that are:

· Used frequently.
· Used by most, or all, primary or secondary windows.
o Controls used by dependent windows.
· Use for presenting information that is continually updated.
o For example, date and time.
· Use for providing context for dependent windows to be created.
· Do not:
o Divide an independent function into two or more primary windows.
o Present unrelated functions in one primary window.

It has also been variously referred to as the application window or the main window. In
addition, it may be referred to as the parentwindow if one or more child windows exist
Secondary Windows
Proper usage:
· For performing subordinate, supplemental, or ancillary actions that are:
o Extended or more complex in nature.
o Related to objects in the primary window.
· For presenting frequently or occasionally used window components.
Important guidelines:
· Should typically not appear as an entry on the taskbar.
· A secondary window should not be larger than 263 dialog units x 263 dialog units.
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.
 Cascading and Unfolding

Cascading:
· Purpose:
o To provide advanced options at a lower level in a complex dialog.

Guidelines:
o Provide a command button leading to the next dialog box with a “To a Window” indicator, an ellipsis (. . . ).

o Present the additional dialog box in cascaded form.

o Provide no more than two cascades in a given path.
o Do not cover previous critical information.

· Title Bar.

· Relevant displayed information.

o If independent, close the secondary window from which it was opened.

Unfolding:
· Purpose:

o To provide advanced options at the same level in a complex dialog.

· Guidelines:
o Provide a command button with an expanding dialog symbol (>>).
o Expand to right or downward.
 Dialog Boxes
Use for presenting brief messages.
Use for requesting specific, transient actions.
Use for performing actions that:
· Take a short time to complete.
· Are not frequently changed.
Command buttons to include:
· OK.
· Cancel.
· Others as necessary.
 Property Sheets
• Use for presenting the complete set of properties for an object.
 Property Inspectors
• Use for displaying only the most common or
frequently accessed objects properties.
• Make changes dynamically.
 Message Boxes

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

Command buttons to include:
· OK.
· Cancel.
· Help.
· Yes and 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
 Palette Windows
• Use to present a set of controls.
• Design as resizable.
• Alternately, design them as fixed in size.
 Pop-up Windows

• Use pop-up windows to display:

• Additional information when an abbreviated form of the information is the main
presentation.
• Textual labels for graphical controls.
• Context-sensitive Help information
 Components of a Window

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.
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 X 16 version of the icon of the object being viewed.
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.
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.
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.
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. It is also referred to by other platforms as a message
area or message 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
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
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 to as ribbons, toolboxes,
rulers, or palettes.
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.

When the grip is dragged the window resizes, following the same conventions
as the sizing border. Three angled parallel lines in the lower-right corner of a
window designate the size grip.
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 also be referred to as the client area.

 Write Clear Text and Message
Words Do not use technical words, made-up words or terms file spec,
abed, or spool, Ungroup or dear chive

Do not use abbreviations or acronyms – Always use the fully spelled-out

form the first time it is encountered in the interface
• Consider the usage of contradictions or short forms (won’t vs. will not,
un- - nests), Complete words is preferred
• Positive terms (avoid the prefix “ire-” “in-” “dies-” adnoun-”)
• Simple action words (“Project status listing” “List”)
• Consistency
• Multiple-word phrases are more readable if the entire phrase is on one
line
• Abbreviation, mnemonics, and acronyms should not include punctuation
 Sentences and Messages
• Brief and simple
• Directly and immediately usable (Should not
search through reference)
• Affirmative statement is easier to understand
than negative statements
• Active voice is usually easier to understand
than passive voice
• Main topic at the beginning.
• Use the same grammatical structure for elements of
sentences
• Imply that the system is awaiting the user’s
direction, not that the system is directing the user
• Negative tones or actions, or threats are not very
friendly (“Numbers are illegal” vs. “Months must be
entered by name”)
• Encouraging message would be better than
insulting message
• Should remain factual and informative, and should
not attempt humor or punishment
 Messages
• Screen messages is classified into two categories
–
1. System messages
2. Instructional messages
1. System messages Generated by the system to
keep the user informed of the system’s state and
activities
2. Instructional messages (prompting message):
tell the user how to work with, or complete the
screen displayed
 System Messages
Status messages – Providing information concerning the
progress of a lengthy operation – Usually contains a
progress indicator and a short message •
Informational messages (notification messages) – This kind
of message is usually identified by an “I” icon to the left of
the message
Warning messages – They are usually identified by an“!” –
The user must determine whether the situation is in fact
a problem and may be asked to advise the system
whether or not to proceed (A deletion request by a user is
any action that commonly generates a warning messages)
 System Messages
Critical messages (Action messages)
– Call attention to conditions that require a user action
before the system can proceed
– Some products use a “Do Not” symbol while others use a
“Stop” sign. An X in a circle used by Microsoft Windows
Question messages –
--A question message asks a question and offers a choice of
options for selection
– It is designated by a “?” icon proceeding the message text
 Writing Message Box Text
Title bar: Clearly identify the source of the message
– The name of the object to which it refers
– The name of the application to which it refers
– Do not include an indication of message type
– Use mixed case in the headline style
• Message box: Provide a clear and concise description of the condition of the
condition causing the message box to be displayed
– Use complete sentences with ending punctuation
– Show only message box about the cause of condition in single message
– Make the solution an option offered in the message
– Use the word “Please “conservatively
• Do not exceed two or three lines
• Center the message text in window
• Include the relevant icon identifying the type of message
 Message Box Controls
• Command Buttons:
– If a message requires no choices to be made, include an OK button
– If a message requires a choice to be made
• OK and Cancel buttons only when the user has the options continue or
cancel
• Yes and No buttons when the user must decide how to continue
• If these choices are too ambiguous, label with the name of specific
actions
– If a message describes an interrupted process, provide Stop button
– If a message offer a chance to cancel a process, provide a Cancel button – If
more details about a message must be presented, provide a Help button
– Display only one message box for a specific condition •
• Close Box: – Enable the title bar Close only if the message includes a
Cancel button
 Instructional Messages
Provide instructional information at the depth of
detail needed by the user
– Accessing instruction through a Help function is
the best solution
• Location it at strategic position on the screen
• Display it in a manner that visually
differentiates it from other screen elements
• In writing, follow all relevant writing guideline
for words, sentences, and messages
 Create Meaningful Graphics, Icons and
Images
Creating Images
 Create familiar and concrete shapes
 Create visually and conceptually distinct shapes
 Incorporate unique features of an object
 Do not display within a border
 Clearly reflect object represented
 Simple reflect object represented, avoiding excessive detail
 Create as a set, communicating relationships to one another
through common shapes
 Provide consistency in icon type
 Create shapes of the proper emotional tone
 Icons

• Icons are most often used to represent objects

and actions with which users can interact
• Icons may stand alone on a desktop or in a
window, or be grouped together in a toolbar
• A secondary use of a icon is to reinforce
important information, a warning icon in a
dialog message box
 Type of icons
• Marcus (1984) suggests icons fall into these
categories.
• Icon something that looks like what it means.
• Index A sign that was caused by the thing to
which it refers.
• Symbol. A sign that may be completely
arbitrary in appearance.
• Rogers(1989) provided an expanded definition for
icon kinds.
• Resemblance- An image that looks like what it mean.
• Symbolic-an abstract image representing something.
• Exemplar- An image illustrating an example or
characteristic of some thing.
• Arbitrary An image completely arbitrary in
appearance whose meaning must be learned.
• Analogy- An image physically or semantically
associated with some thing.
 Characteristics of Icons
• Syntactic refers to a icon’s physical structure
– Shape, Color, Size
– Similar shapes and colors can be used to classify a group of
related icons
• Semantics is the icon’s meaning
– What does it refer – a file, a waste basket, or some other
objects?
• Pragmatics is how the icons are physically produced and
depicted
– Is the screen resolution enough to illustrate?
• Syntactic, semantics and pragmatics determine an icon’s
effectiveness and usability
 Influences on Icon Usability
Provide icons that are
– Familiar
– Clarity
– Simple
– Consistent
– Directness of the meaning
– Efficient
– Discriminate able from others
• Also consider the
– Context in which the icon issued
– Expectancies of users
– Complexity of task Choosing Icons
 A successful icon
• A Successful Icon
– Looks different from all other icons
– Is obvious what it does or represents
– Is recognizable when no larger than 16 pixels square – Look as
good in black and white as in color
• Size
–16x16, 24x24, 26x26, 32x32, pixels 16-and-256 color version
– Use colors from the system palette
• Provide as large a hot zone as possible
– With stylus or pen: 15 pixels square
– With mouse: 20 pixels square
– With finger: 40 pixels square
 Choosing Images
• Use existing icons when available
• Use images for nouns, not verbs
• Use traditional images
• Consider user cultural and social norms
 Creating Images
• Create familiar and concrete shapes
• Create visually and conceptually distinct shapes
– Incorporate unique features of an object
– Do not display within a border
• Clearly reflect object represented
• Simple reflect object represented, avoiding excessive
detail
• Create as a set, communicating relationships to one
another through common shapes
• Provide consistency in icon type
• Create shapes of the proper emotional tone
 Drawing Images
• Providing consistency in shape over varying sizes
• Do not use triangular arrows in design to avoid
confusion with other system symbols
• When icons are used to reflect varying attributes,
express these attributes as meaning meaningfully as
possible
• Provide proper scale and orientation
• Use perspective and dimension whenever possible
• Accompany icon with a label to assure intended
meaning Icon Animation and Audition
 Icon animation and Audition
• Animation
– Use
• To provide feedback
• For visual interest
– Make it interruptible or independent of user’s primary
interaction
– Do not use it for decoration – Permit it to be turned off by
the user
– For fluid animation, present images at 16++ frames/second
• Auditions
– Consider auditory icons
 Multimedia
Graphics in Web
• Use Graphics to
– Supplements the textual content, not as a substitute for
it
– Convey information that can’t be effectively
accomplished using text
– Enhance navigation through
• Presenting a site overview
• Identifying site pages
• Identifying content areas
Images
– Limit the use of graphics that take long time to load
– Coordinate the graphics with all other page elements
• Use standard images, image internationalization
• Provide descriptive text or labels with all images
• Distinguish navigational images from decorative images
• Minimize
– The number of presented images
– The size of presented images
– Image animation
– Number of colors
• GIF, JPEG is preferred
Photographs/Pictures
• Use when every aspect of the images is relevant
• Use JPEG format
• On the initial page
– Display a small version
• A thumbnail
• Zoom-in on most relevant detail
– Link to larger photos showing as much detail as
needed
Video
• To show the proper way to perform a task
• To provide a personal message
To grab attention
• Never automatically download a video into a page
• Provide controls (playing, pausing, and stopping)
• Considering using
– Existing video
– Audio only
– A slide show with audio
Diagrams
• To show the structure of objects
• To show the relationship of objects
• To show the flow of a process or task
• To reveal a temporal or spatial order
Animation
• To explain ideas involving a change in
– Time
– Position
• To illustrate the location or state of a process
• • To show continuity in transitions
• • To enrich graphical representations
• • To aid visualization of 3-Dstructures
• • Provide a freeze frame and stop mode
 Choose the Proper Colors

Color Uses
• Use color to assist in formatting
– Relating elements into grouping
– Breaking apart separate groupings of information
– Highlighting or calling attention to important
information
• Use color as visual code to identify
– Screen captions and data
– Information from different sources
– Status of information
• Use color to
– Realistically portray natural objects
– Increase screen appeal Possible Problems with Color
• High Attention-Getting Capacity
– Viewer might associate, tie together, screen elements of same color
– Result in confusing, slower reading
• Interference with Use of Other Screens
• Varying Sensitivity of the Eye to Different Colors
– Viewing red and blue  Eye fatigue
• Color-Viewing Deficiencies
• Cross-Disciplinary and Cross-Cultural Differences
– For financial mangers - Corporate qualities or reliability
– For health care professionals –Death
– For nuclear reactor monitors – Coolness or water
– For American movie audiences – Tenderness or Pornography Choosing Colors
for Categories of Information
• Color chosen to organize information or data on a screen must aid the
transfer of
information from the display to the user, Some examples of using color code
– If decisions are made based on the status of information on the screen,
colorcode
the types of status the information
– Screen searching is performed to locate information of particular kind,
colorcode
for contrast
– If the sequence of information use is constrained or ordered, use color to
identify the sequence
– If the information on a screen is crowded, use color to provide visual
grouping
• Never rely on color as the only way of identifying a screen element
• Always consider how spatial formatting, highlighting, and messages may also
be
useful