Step 4

DEVELOP SYSTEM MENUS

& NAVIGATION SCHEMES

• The Structures of Menus

• The Functions of Menus
• The Content of Menus
• Formatting Menus
• Writing Menus
• Navigation Using Menus
• Web Site Navigation, Links, Elements
• Maintaining a Sense of Place
• Types of Menus
 Step 4

MENUS & NAVIGATION

Structures of Menus
• Single Menus
• Sequential Linear Menus
• Simultaneous Menus
• Hierarchical Menus
• Connected Menus
• Event-Trapping Menus
 Step 4

MENUS & NAVIGATION

Functions of Menus
• Navigation to a New Menu
• Execute an Action or Procedure
• Displaying Information
• Data or Parameter Input

Content of Menus
• Context
• Title
• Choice Descriptions
• Completion Instructions
 Step 4

FORMATTING OF MENUS

Consistency
• Provide consistency with the user’s expectations
• Provide consistency in menus:
• Formatting, including organization, presentation,
and choice ordering
• Phrasing, including titles, choice descriptions,
and instructions
• Choice selection methods
• Navigation schemes
 Step 4

FORMATTING OF MENUS

Display
• If continual or frequent references to menu
options are necessary, permanently display
the menu in an area of the screen that will not
obscure other screen data
• If only occasional references to menu options
are necessary, the menu may be presented
on demand
• Critical options should be continuously displayed
 Step 4

FORMATTING OF MENUS

Presentation
• Ensure that a menu and its choices are obvious
to the user by presenting them with a unique
and consistent:
– Structure
– Location and/or
– Display technique
• Ensure that other system components do not
possess the same visual qualities as menu
choices
 Step 4

FORMATTING OF MENUS
Organization
• Provide a general or main menu
• Display:
– All relevant alternatives
– Only relevant alternatives
• Delete or gray-out inactive choices
• Match the menu structure to the structure of the task
– Organize to reflect the most efficient sequence of steps to
accomplish frequent or likely goals
• Minimize number of menu levels within limits of clarity
– For Web sites, restrict to two levels (requiring two mouse
clicks) for fastest performance
 Step 4

FORMATTING OF MENUS

Organization (Continued)
• Be conservative in the number of menu choices
presented on a screen:
– Without logical groupings of elements, limit choices to 4 to 8
– With logical groupings of elements, limit choices to 18 to 24
• Provide decreasing direction menus, if sensible
• Never require menus to be scrolled
 Step 4

FORMATTING OF MENUS

Complexity
• Provide both simple and complex menus
– Simple: a minimal set of actions and menus
– Complex: a complete set of actions and menus

Item Arrangement
• Align alternatives or choices into single columns
whenever possible
– Orient for top-to-bottom reading
– Left-justify descriptions
• If a horizontal orientation of descriptions must be
maintained, organize for left-to-right reading
 Step 4

FORMATTING OF MENUS
Ordering
• Order lists of choices by their natural order, or
– For lists associated with numbers, use numeric order
– For textual lists with a small number of options (seven or less), order by:
• Sequence of occurrence
• Frequency of occurrence
• Importance
• Semantic similarity
• Use alphabetic order:
– For long lists (eight or more options)
– For short lists with no obvious pattern or frequency
– To separate potentially destructive actions from frequently chosen items
• Maintain a consistent ordering of options on all related menus
– Variable length menus, maintain relative positions
– Fixed-length menus, maintain absolute positions
 Step 4

FORMATTING OF MENUS
Groupings
• Create groupings of items that are logical, distinctive, meaningful,
and mutually exclusive
• Categorize them in such a way as to:
– Maximize the similarity of items within a category
– Minimize the similarity of items across categories
• Present no more than 6 or 7 groupings on a screen
• Order categorized groupings in a meaningful way
• If meaningful categories cannot be developed and more than eight
options must be displayed on a screen, create arbitrary visual
groupings that:
– Are of about 4 or 5 but never more than 7 options
– Are of equal size
• Separate groupings created through either wider spacing, or thin
ruled line
• Provide immediate access to critical or frequently chosen items
 Step 4

FORMATTING OF MENUS
Line Separators
• Separate vertically arrayed groupings with subtle
solid lines
• Separate vertically arrayed subgroupings with
subtle dotted or dashed lines
• For subgroupings within a category:
– Left-align the lines under the first letter of the columnized
choice descriptions
– Right-align the lines under the last character of the longest
choice description
• For independent groupings, extend the line to the left
and right menu borders
 Step 4

SELECTION SUPPORT MENUS

Changeable or Adaptive Menus

• More frequently chosen options are positioned at the
menu’s top based upon the menu’s use
• Traditional Menu
– Items are always arranged and presented in a pre-established
order
• Split Menu
– Frequently chosen items are duplicated at the top of the menu
• Folded Menu
– Frequently chosen items appear first and alone in their normal
menu positions
– The complete menu appears after a time delay
 Step 4

SELECTING SUPPORT MENUS

• When a small, discrete set of functions is

accessed 90% or more of the time, use folded
menus
• When a small set of items is selected between
31 and 89% of the time and the other items are
selected with lower frequencies, use split
menus
• If there is no small, discrete set of items that is
used 30% of the time or more, use traditional
menus
• Do not dynamically reorder menus
 Step 4

PHRASING THE MENU

A menu must communicate information about:

• The nature and purpose of the menu itself
• The nature and purpose of each presented choice
• How the proper choice or choices may be selected
 Step 4

PHRASING THE MENU

Menu Titles
• Main menu:
– Create a short, simple, clear, and distinctive title,
describing the purpose of the entire series of choices
• Submenus:
– Submenu titles must be worded exactly the same as
the menu choice previously selected to display them
• General:
– Locate the title at the top of the listing of choices
– Spell out the title fully using either:
• Uppercase font
• Mixed-case font in the headline style
– Superfluous titles may be omitted
 Step 4

PHRASING THE MENU

Menu Choice Descriptions
• Create meaningful choice descriptions that are:
– Familiar
– Fully Spelled Out
– Concise
– Distinctive
• Descriptions may be single words, compound words,
multiple words, or phrases
– Exception: Menu bar items should be a single word (if possible)
• Place the keyword (usually a verb) first
• Use sentence or headline style
• Use task-oriented not data-oriented wording
• Use parallel construction
 Step 4

PHRASING THE MENU

Menu Choice Descriptions (Continued)
• A menu choice must never have the same wording as
its menu title
• Identical choices on different menus should be
worded identically
• Choices should not be numbered
– Exception: If the listing is numeric in nature, graphic, or a list
of varying items, it may be numbered
• If menu options will be used in conjunction with a
command language, the capitalization and syntax of
the choices should be consistent with the language
• Word choices as commands to the computer
 Step 4

PHRASING THE MENU

Menu Instructions
• For novice or inexperienced users, provide
menu completion instructions
– Place the instructions in a position just preceding the
part, or parts, of the menu to which they apply
– Present instructions in a mixed-case font in the
sentence style
– For expert users, make these instructions easy to
ignore by:
• Presenting them in a consistent location
• Displaying them in a unique type style and/or color
 Step 4

PHRASING THE MENU

Intent Indicators
• Cascade Indicator:
– To indicate that selection of an item will lead to a submenu,
place a triangle or right-pointing solid arrow following the choice
– A cascade indicator must designate every cascaded menu
• To a Window Indicator:
– For choices that result in displaying a window to collect more
information, place an ellipsis (...) immediately following the
choice
• Exceptions—do not use when an action:
– Displays a warning window
– May or may not lead to a window
• Direct Action Items:
– For choices that directly perform an action, no special indicator
should be placed on the menu
 Step 4

PHRASING THE MENU

Keyboard Equivalents
• To facilitate keyboard selection of a menu choice, each
menu item should be assigned a keyboard equivalent
mnemonic
• The mnemonic should be the first character of the menu
item’s description
• If duplication exists in first characters, use another
character in the duplicated item’s description, preferably
the first succeeding consonant
• Designate the mnemonic character by underlining it
• Use industry-standard keyboard access equivalents
when they exist
 Step 4

PHRASING THE MENU

Keyboard Accelerators
• For frequently used items, provide a keyboard
accelerator to facilitate keyboard selection
• The accelerator may be one function key or a
combination of keys
– Function key shortcuts are easier to learn than modifier plus
letter shortcuts
• Pressing no more than two keys simultaneously is
preferred
– Do not exceed three simultaneous keystrokes
• Use a plus (+) sign to indicate that two or more keys
must be pressed at the same time
• Accelerators should have some associative value to the
item
• Identify the keys by their actual key top engraving
 Step 4

PHRASING THE MENU

Keyboard Accelerators (Continued)

• If keyboard terminology differences exist, use:
– The most common keyboard terminology
– Terminology contained on the newest PCs
• Separate the accelerator from the item description
by three spaces
• Right-align the key descriptions
• Do not use accelerators for:
– Menu items that have cascaded menus
– Pop-up menus
• Use industry-standard keyboard accelerators when
they exist
 Step 4

SELECTING MENU CHOICES

Initial Cursor Positioning

• If one option has a significantly higher probability
of selection, position the cursor at that option
• If repeating the previously selected option has
the highest probability of occurrence, position
the cursor at that option
• If no option has a significantly higher probability
of selection, position the cursor at the first option
 Step 4

SELECTING MENU CHOICES

Choice Selection
• Pointers:
– Select the choice by directly pointing at it with a mechanical
device or with one’s finger
– Visually indicate:
• Which options can be selected
• When the option is under the pointer and selectable
– Visually distinguish single- and multiple-choices
– If pointing with a mechanical device is used:
• The selectable target area should be at least twice the size of the
active area of the pointing device, but not less than 6 mm square
• Adequate separation must be provided between adjacent target
areas
– If finger pointing is the selection method used:
• Touch area must be 20 to 30 mm square
• The touch area must encompass the entire caption plus one
character around it
 Step 4

SELECTING MENU CHOICES

Choice Selection (Continued)

• Keyboard:
– If moving the cursor to a menu choice:
• The up and down arrow keys should move the cursor up or down
vertically oriented menu options
• The left and right cursor keys should move the cursor left or right
between horizontally oriented menu options
– If keying a choice identifier value within an entry field:
• Locate the entry field at the bottom of the last choice in the array
of choices
• Uppercase, lowercase, and mixed-case typed entries should be
acceptable
 Step 4

SELECTING MENU CHOICES

Choice Selection (Continued)
• Selection/Execution:
– Provide separate actions for selecting and executing menu
options
– Indicate the selected choicethrough either:
• Highlighting it with a distinctive display technique
• Modifying the shape of the cursor
– Permit unselecting the choice before execution
• If a menu is multiple choice, permit all options to be selected before
execution
• Combining Techniques:
– Permit alternative selection techniques, to provide flexibility
 Step 4

SELECTING MENU CHOICES

Defaults
• Provide a default whenever possible
• Display as bold text
Unavailable Choices
• Unavailable choices should be dimmed or
“grayed out”
• Do not add or remove items from a menu unless
the user takes explicit action to so through the
application
 Step 4

SELECTING MENU CHOICES

Mark Toggles or Settings

• Purpose:
– Use to designate that an item or feature is active or
inactive over a relatively long period of time
– Use to provide a reminder that an item or feature is
active or inactive
• Guidelines:
– Position the indicator directly to the left of the option
– For situations where several nonexclusive choices
may be selected:
• Consider including one alternative that deselects all the items
and reverts the state to the “normal” condition
 Step 4

SELECTING MENU CHOICES

Toggled Menu Items
• Purpose:
– Use to designate two opposite commands that are
accessed frequently
– Use when the menu item displayed will clearly
indicate that the opposite condition currently exists
• Guidelines:
– Provide a meaningful, fully spelled-out description of
the action
– Begin with a verb that unambiguously represents the
outcome of the command
– Use mixed-case letters, with the first letter of each
word capitalized
 Step 4

WEB SITE NAVIGATION

Navigation
• The method people use to find what they want
• Efficient navigation is an important element in usability
Wayfinding
• Orientation
– One's current location relative to objects and the destination
• Route decision
– The path chosen to get to the destination
• Route monitoring
– Monitoring of the path to confirm it is leading to the destination
• Destination recognition
– The destination must be recognized when encountered
 Step 4

WEB SITE NAVIGATION

Navigation Problems
• Technical Issues
– Open-ended with many paths
– Multiple different systems encountered
– Rapid system evolvement and expansion
• Usage Issues
– Heavy mental overhead
– Feelings of spatial disorientation

Navigation Goals
• Must be obvious:
– Where am I now?
– Where did I come from?
– Where can I go from here?
– How can I get there quickly?
 Step 4

WEB SITE NAVIGATION

Menu Navigation Aids

• To aid navigation and learning:
– Provide a map or overview of the menu hierarchy
– Provide “clickability” cues
– A “look ahead” at the next level of choices,
alternatives that will be presented when a currently
viewed choice is selected
• Provide feedback concerning one's current
location
– Navigation history
– Link text (or label) matched to the destination page
heading
 Step 4

WEB SITE NAVIGATION

Web Site Organization

• Divide content into logical fragments, units, or
chunks
• Establish a hierarchy of generality or importance
• Structure the relationships among content
fragments, units, or chunks
– Establish global or site-wide navigation requirements
• Create a well-balanced hierarchical tree
– Restrict to two levels requiring no more than two
clicks to reach deepest content, whenever possible
 Step 4

WEB SITE NAVIGATION

Navigation Page Design

• Use appropriate menu types
– Sequential menus for simple forward-moving tasks
– Simultaneous menus for tasks that would otherwise require
extensive Back button use
• Keep navigation-only pages short
• Limit prose text
• Scrolling
– Never require scrolling of navigation-only pages
– Minimize the need for scrolling to view all links on pages
containing content
– Never require horizontal scrolling
 Step 4

COMPONENTS OF A WEB
NAVIGATION SYSTEM
• All navigation controls must:
– Make sense in the absence of site context
– Be continually available
– Be obvious and distinctive
– Be consistent in appearance, function, and
ordering
– Possess a textual label or description
– Offer multiple navigation paths
 Step 4

WEB NAVIGATION ELEMENTS

• Differentiate and group navigation elements
– Provide a global navigation bar at the top of each page
– Provide a local category or topical links navigation bar on the left
side of a page
• For long lists consider placing within a frame
– Optionally, provide a secondary navigation column on the right
side of the page
– Place explicit or embedded textual within the contents area
• Consider duplicating embedded links in the left side navigation bar
– Place minor illustrative, parenthetical, or footnote links at the end
of the page
– For long pages provide:
• “List of Content” links
• A navigation bar repeating important global or local links at the page
bottom
• Create a common and consistent theme
• Never create pages without navigational options
 Step 4

OTHER NAVIGATION ELEMENTS

Overview

• Provide:
– Executive Summary
• Providing a preview of the site and contains links
to all major concepts
– Site Map
• Illustrating the site’s hierarchical structure and the
relationships of components
– Global and Local Maps
– Alphabetized Site Index
– Table of Contents
• Allow accessibility from any point in the Web site
 Step 4

OTHER NAVIGATION ELEMENTS

Historical Trails
• Provide:
– Breadcrumb Trails
• Locate at the top of the page below the navigation links
– History Lists
– History Trees
– Footprints
– Bookmarks
Search Facility
• Provide a search facility
 Step 4

LINKS and ACTIONS

Kinds of Links
• Internal
• Anchor
• External

Textual Phrase Links

• Provide a mixture of textual phrase links
– In explicit menus
– Embedded within page text
 Step 4

LINKS and ACTIONS

Presenting Links
• Provide consistent clickability cues
– Avoid misleading cues to click
• Use Textual links
– Underline all link text, including that:
• Embedded in page content
• Contained in explicit menu listings
• Contained in headings
• Used as graphical labels
– Exceptions:
• Links in navigation-only menus and in lists do not necessarily need
underlining
– Do not underline any text that is not a link
– Distinguish between unselected/unvisited links and selected/visited links
• Make unselected/unvisited links blue
• Make selected/visited links purple
• Never show other text in these colors
 Step 4

LINKS and ACTIONS

Presenting Links (Continued)

• Distinguish internal, external, anchor links
– Identify external links by:
• Including destination URL address below
• Including “exit disclaimer” adjacent
• Providing an interim page after clicking external
– Identify anchor link with Page Contents heading
• Graphical links:
– Clearly identify clickable regions of images
– Distinguish graphical links from decorative graphics by
underlining text labels
 Step 4

LINKS and ACTIONS

Presenting Links (Continued)

• Graphical Links:
– Distinguish graphical links from decorative graphics through:
– Underlining graphical text labels
• Links in Toolbars:
– Distinguish links in toolbars through:
• Presenting in consistent locations
• Using different colored backgrounds
• Fat Links:
– Consider, if appropriate
 Step 4

LINKS and ACTIONS

Types of Links
• Internal Links Within a Page:
– For long pages, include anchor links to internal page content
• Internal Links Within a Web Site:
– On all pages include links to:
• The Web site home page
• Global Web site features
• Other main pages, navigation points, or categories
• The likely Web site starting point
• Main pages with links to the page
• On sequential pages, include links to the:
– Next page
– Previous page
 Step 4

LINKS and ACTIONS

Types of Links (Continued)
• Also consider including links to:
– Places of related interest
– Important pages
– Background or explanatory information
– Supplemental information
– New or changed content
– Web site Quit or Exit
• External Links:
– Most appropriate for informational sites
– Provide links to relevant information on other sites
• Related content
• Reference information
• Background reading
– Place external links on a separate page
– Provide an indication when a link goes outside the current site
 Step 4

LINKS and ACTIONS

Writing Link Labels
• Create meaningful labels:
– Containing action words
– Positioning keywords at the beginning
– Long enough to be understood
– Clearly indicating destination or action
– Matching link name with destination page
• Ensure that embedded links are descriptive
• Provide glosses or link labels to aid understanding
Number of Links
• Every page should contain at least one link
• Be conservative in total number of links presented
– Restrict embedded links to most important, pertinent, interesting
– Place less relevant links in a listing
 Step 4

LINKS and ACTIONS

Other Link Guidelines
• Grouping:
– Group links by the most relevant menu-grouping scheme
– Separate visually the following types of navigation:
• Upward to the immediate parent page
• Upward to the beginning of the section or category of information
• Across to main sections or categories of information
• To basic utilities
• Ordering
– Order links by the most relevant menu choice-ordering scheme
• Multi-level pages
– Provide one simple action to:
• Return to next higher-level page
• Return to the homepage
 Step 4

LINKS and ACTIONS

Other Link Guidelines (Continued)

• Heading:
– Where appropriate, provide a listing heading describing the
organizing category, principle, or theme
• Size:
– Provide graphical images and command buttons of sufficient and
equal size
• Spacing:
– Create equal spacing between choices graphical image and
textual listing toolbars
• Inapplicability:
– Disable and display dimmed links conditionally not applicable
 Step 4

Links and Actions

Link Maintenance
• Maintain correct internal links
• Frequently check and correct external links
 Step 4

MAINTAINING A SENSE OF PLACE

Design Characteristics That Aid in Maintaining a

Sense of Place
• To assist maintaining a sense of place within a Web site:
– Provide a simple hierarchical tree structure
– Provide ease of movement to important site features
• To assist maintaining a sense of place across multiple
Web sites:
– Provide consistency in all Web site design elements, including:
• Graphical identity schemes
• Component presentation
• Component organization and location
 Step 4

MAINTAINING A SENSE OF PLACE

Design Elements That Aid in Maintaining a Sense

of Place
• Provide a home base
• Use recurring navigation tools on all pages
• Use recurring elements on all pages
• Provide page numbers for sequential pages
• Provide ongoing feedback that shows where users are in
a site
• Provide on-demand aids that illustrate the user’s location
within a site
– Site maps
– Table of contents
• Provide clearly written link labels
 Step 4

KINDS OF GRAPHICAL MENUS

Considerations in Choosing a Menu

• The number of items to be presented in the menu
• How often the menu is used
• How often the menu contents may change

Overview of Menu Kinds

• Menu Bar
• Pull-Down Menu
• Cascading Menus
• Pop-Up Menus
• Tear-Off Menus
• Iconic Menus
• Pie Menus
 Step 4

MENU BARS
Proper Usage
• To identify and provide access to:
– Common and frequently used application actions
– Actions that take place in a wide variety of different windows
• A menu bar choice by itself should not initiate an action

Design Guideline Overview

• Advantages & Disadvantages
• Item Descriptions
• Organization
 Step 4

PULL-DOWN MENUS

Proper Usage
• To initiate frequently used application actions that take
place on a wide variety of different windows
• For a small number of items
• For items best represented textually
• For items whose content rarely changes

Design Guideline Overview

• Advantages & Disadvantages
• Display
• Size
• Organization
• Groupings
 Step 4

CASCADING MENUS
Proper Usage
• To reduce the number of choices presented together for selection
(reduce menu breadth)
• When a menu specifies many alternatives and the alternatives can
be grouped in meaningful related sets on a lower-level menu
• When a choice leads to a short, fixed list of single-choice properties
• When there are several fixed sets of related options
• To simplify a menu
• Avoid using for frequent, repetitive commands

Design Guideline Overview

• Advantages & Disadvantages
• Cascade Indicator
• Levels
 Step 4

POP-UP MENUS

Proper Usage
• To present alternatives or choices within the context of
the task

Design Guideline Overview

• Advantages & Disadvantages
• Display
• Location
• Size
 Step 4

TEAR-OFF MENUS

Proper Usage
• A pull-down menu can be positioned anywhere on the
screen for continuing referral
• For Items:
– Sometimes frequently selected
– Sometimes infrequently selected
– Small in number (5-10)
– Rarely changing in content

Design Guideline Overview

• Follow all relevant guidelines for pull-down menus
 Step 4

ICONIC MENUS

Proper Usage
• To remind users of the functions, commands, attributes,
or application choices available

Design Guideline Overview

• Create icons that:
– Help enhance recognition and hasten option selection
– Are concrete and meaningful
– Clearly represent choices
 Step 4

PIE MENUS

Proper Usage
• Consider using for:
– Mouse-driven selections, with one- or two-level
hierarchies
– Short lists
– Choices conducive to format
 Step 5

SELECT THE PROPER KINDS

OF WINDOWS

Step 5 Overview
• A window’s characteristics
• A window’s components
• A window’s presentation styles
• The types of windows available
• Organizing window system functions
• A window’s operations
• Web frames and pop-up windows
 Step 5

WINDOW CHARACTERISTICS

• A name or title, allowing it to be identified

• A size in height and width
• 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
• Its highlight, that is, the part that is selected
• The function, task, or application to which it is dedicated
 Step 5

WINDOW CHARACTERISTICS

The Attraction of Windows

• Presentation of different levels of information
• Presentation of multiple kinds of information
• Sequential presentation of levels or kinds of information
• Access to different sources of information
• Combining multiple sources of information
• Performing More than one task
• Reminding
• Monitoring
• Multiple representations of the same task
 Step 5

WINDOW CHARACTERISTICS

Constraints in Window System Design

• Historical Considerations
• Hardware Limitations
• Human Limitations
• Other Limitations
• Where To?
 Step 5

COMPONENTS OF A WINDOW

• Frame • Scroll Bars

• Title Bar • Split Box
• Title Bar Icon • Toolbar
• Window Sizing Buttons • Command Area
• What’s This? Button • Size Grip
• Menu Bar • Work Area
• Status Bar
 Step 5

WINDOW PRESENTATION STYLES

• 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
– Expert or experienced users
– Unpredictable display contents
• Cascading windows
 Step 5

TYPES OF WINDOWS

Primary Window
• Proper Usage:
– Represent an independent function or application
– Present constantly used window components and controls
• Menu bar items that are:
– Used frequently
– Used by most, or all, primary or secondary windows
• Controls used by dependent windows
– Presenting information that is continually updated
– Providing context for dependent windows
– Do not:
• Divide an independent function into two or more primary windows
• Present unrelated functions in one primary window
 Step 5

TYPES OF WINDOWS

Secondary Windows
• Proper Usage:
– Performing subordinate, supplemental, or ancillary actions
that are:
• Extended or more complex in nature
• Related to objects in the primary window
– 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 x 263
dialog units
 Step 5

TYPES OF WINDOWS
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
 Step 5

TYPES OF WINDOWS

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
– If independent, close the secondary window from which it was
opened
 Step 5

TYPES OF WINDOWS

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
 Step 5

TYPES OF WINDOWS

Dialog Boxes
• Purpose:
– For presenting brief messages
– For requesting specific, transient actions
– For performing actions that:
• Take a short time to complete
• Are not frequently changed
• Guidelines:
– Command buttons to include:
• OK
• Cancel
• Others as necessary
 Step 5

TYPES OF WINDOWS
Property Sheets
• Purpose:
– Use for presenting the complete set of properties for an object
• Guidelines:
– Categorize and group within property pages
• Use tabbed property pages for grouping peer-related property sets
– 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 pages
 Step 5

TYPES OF WINDOWS

Property Inspectors
• Purpose:
– Use for displaying only the most common or
frequently accessed object properties
• Guideline:
– Make changes dynamically
 Step 5

TYPES OF WINDOWS
Message Boxes
• Purpose:
– Use for displaying a message about a particular situation or
condition
• Guidelines:
– 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 button
 Step 5

TYPES OF WINDOWS

Palette Windows
• Purpose:
– Use to present a set of controls
• Guidelines:
– Design as resizable
• Alternatively, design as fixed in size
 Step 5

TYPES OF WINDOWS
Pop-up Windows
• Use pop-up windows to display:
– Additional information when an abbreviated form is the main
presentation
– Collect secondary information
– Textual labels for graphical controls
– Context-sensitive Help information
• Guidelines:
– Present at front of screen
– One-quarter to one-third window size
– OK, Cancel, and Save buttons
– Never display unsolicited pop-up
 Step 5

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
– “Nice-to-know” information
 Step 5

ORGANIZING WINDOW FUNCTIONS

• Poor functional organization is often a result of:
– Emphasis on technical ease of implementation rather
than proper analysis of user tasks
– Focus on applications, features, functions, or data
types instead of tasks
– Organization of the design team into applications, with
little cross-team communication
– Blindly mimicking the manual world and carrying over
manual inefficiencies to the computer system
• Number of Windows
– Minimize the number of windows needed to
accomplish an objective
 Step 5

WINDOW OPERATIONS
Sizing Windows
• Provide large-enough windows to:
– Present all relevant and expected information for the task
– Avoid hiding important information
– Avoid crowding or visual confusion
– Minimize the need for scrolling
• But use less than the full size of the screen
• If a window is too large, determine:
– Is all the information needed?
– Is all the information related?
• Otherwise, make the window as small as possible
– Optimum window sizes:
• For text, about 12 lines
• For alphanumeric information, about 7 lines
 Step 5

WINDOW OPERATIONS
• Advantages of larger windows
– Permit displaying of more information
– Facilitate learning: Data relationships and groupings are more
obvious
– Less window manipulation requirements exist
– Breadth is preferred to depth (based on menu research)
– More efficient data validation and data correction can be
performed
• Disadvantages of larger windows
– Longer pointer movements are required
– Windows are more crowded
– More visual scanning is required
– Other windows more easily obscure parts of the window
– Not as easy to hide inappropriate data
 Step 5

WINDOW OPERATIONS
Window Placement
• Considerations:
– In placing a window on the display, consider:
• The use of the window
• The overall display dimensions
• The reason for the window’s appearance
• General:
– Position the window so it is entirely visible
– If the window is being restored, place the window where it last appeared
– If the window is new, and a location has not yet been established, place
it:
• At the point of the viewer’s attention, usually the location of the pointer or
cursor
• In a position convenient to navigate to
• So that it is not obscuring important or related underlying window information
 Step 5

WINDOW OPERATIONS
Window Placement (Continued)
• For multiple windows, give each additional window its own unique
and discernible location
– A cascading presentation is recommended
• In a multiple-monitor configuration, display the secondary window on
the same monitor as its primary window
• If none of the above location considerations apply, then:
– Horizontally center a secondary window within its primary window just
below the title bar, menu bar, and any docked toolbars
• If the user then moves the window, display it at this new location the
next time the user opens the window
– Adjust it as necessary to the current display configuration
• Do not let the user move a window to a position where it cannot be
easily repositioned
 Step 5

WINDOW OPERATIONS
Window Placement (Continued)
• 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
 Step 5

WEB SYSTEMS

Browser Components
• Back
• Forward
• Stop
• Refresh
• Home
• Search
• Favorites
• History
 Step 5

WEB SYSTEMS
Frames
• Description:
– Multiple Web screen panes that permit the displaying of multiple
documents on a page
– These documents can be independently viewed, scrolled, and updated
– The documents are presented in a tiled format
• Proper usage:
– For content expected to change frequently
– To allow users to change partial screen content
– To permit users to compare pieces of information
• Guidelines:
– Use only a few frames (three or less) at a time
– Choose sizes based upon the type of information to be presented
– Never force viewers to resize frames to see information
– Never use more than one scrolling region on a page
 Step 5

WEB SYSTEMS
Pop-Up Windows
• Be extremely cautious in the use of pop-up
windows
 Step 6

SELECT THE PROPER

INTERACTION DEVICES
Step 6 Overview
• Input Devices
– Trackball
– Joystick
Graphic tablet
– Light pen
– Touch screen
– Voice
– Mouse
– Keyboard
– Selecting Devices
– Pointers
• Output Devices
– Screens
– Speakers
 Step 6

CHARACTERISTICS OF
INPUT DEVICES
Tasks:
• Point at an object on the screen
• Select the object or identify it as the focus of
attention
• Drag an object across the screen
• Draw something free form on the screen
• Track or follow a moving object
• Orient or position an object
• Enter or manipulate data or information
 Step 6

CHARACTERISTICS OF
INPUT DEVICES
Types:
• Direct
– Operated on screen itself
• Indirect
– Operated in location other than on screen
• Discrete
– Enter individual bits of information
• Continuous
– Operate sequentially
 Step 6

CHARACTERISTICS OF
INPUT DEVICES
Device-pointer relationship
• Direction
• Distance
• Speed
 Step 6

TRACKBALL
• Description:
– A spherical object (ball) that rotates freely in all directions in its socket
– Direction and speed is tracked and translated into cursor movement
• Advantages:
– Direct relationship between hand and pointer movement in terms of
direction and speed
– Does not obscure vision of screen
– Does not require additional desk space (if mounted on KB)
• Disadvantages:
– Movement is indirect, in a plane different from the screen
– No direct relationship exists between hand and pointer movement in
terms of distance
– Requires a degree of eye-hand coordination
– Requires hand to be removed from keyboard keys
– Requires different hand movements
– Requires additional desk space (if not mounted on keyboard)
– May be difficult to control
– May be fatiguing to use over extended time
 Step 6

JOYSTICK
Description:
• A stick or bat-shaped device anchored at the bottom
• Variable in size, smaller ones being operated by fingers, larger ones requiring the
whole hand
• Variable in cursor direction movement method, force joysticks respond to pressure,
movable to movement
• Variable in degree of movement allowed, from horizontal-vertical only to continuous
Advantages:
• Direct relationship between hand and pointer movement in terms of direction
• Does not obscure vision of screen
• Does not require additional desk space (if mounted on KB)
Disadvantages:
• Movement indirect, in plane different from screen
• Indirect relationship between hand and pointer in terms of speed and distance
• Requires a degree of eye-hand coordination
• Requires hand to be removed from keyboard keys
• Requires different hand movements to use
• Requires hand to be removed from keyboard (if not on KB)
• Requires additional desk space (if not on KB)
• May be fatiguing to use over extended time
• May be slow and inaccurate
 Step 6

GRAPHIC TABLET TRACKPAD

Description:
• Pressure-, heat-, light-, or light-blockage-sensitive horizontal surfaces that lie on the
desktop or keyboard
• May be operated with fingers, light pen, or objects like a stylus or pencil
• Pointer imitates movements on tablet
Advantages:
• Direct relationship between touch movements and pointer movements in terms of
direction, distance, and speed
• More comfortable horizontal operating plane
• Does not obscure vision of screen
Disadvantages:
• Movement is indirect, in a plane different from screen
• Requires hand to be removed from keyboard
• Requires hand to be removed from keyboard keys
• Requires different hand movements to use
• Requires additional desk space
• Finger may be too large for accuracy with small objects
 Step 6

TOUCH SCREEN
Description:
• A special surface on the screen sensitive to finger or stylus
Advantages:
• Direct relationship between hand and pointer location in terms of direction, distance,
and speed
• Movement is direct, in the same plane as screen
• Requires no additional desk space
• Stands up well in high-use environments
Disadvantages:
• Finger may obscure part of screen
• Finger may be too large for accuracy with small objects
• Requires moving the hand far from the keyboard to use
• Very fatiguing to use for extended period of time
• May soil or damage the screen
Design Guidelines:
• Screen objects should be at least 3/4" x 3/4" in size
• Object separation should be at least 1/8"
• Provide visual feedback in response to activation
– Auditory feedback may also be appropriate
• When the consequences are destructive, require confirmation to eliminate
inadvertent selection
• Provide an instructional invitation to begin using
 Step 6

LIGHT PEN
Description:
• A special surface on a screen sensitive to the touch of a special stylus
or pen
Advantages:
• Direct relationship between hand and pointer movement in terms of
direction, distance, and speed
• Movement is direct, in the same plane as screen
• Requires minimal additional desk space
• Stands up well in high-use environments
• More accurate than finger touching
Disadvantages:
• Hand may obscure part of screen
• Requires picking it up to use
• Requires moving the hand far from the keyboard to use
• Very fatiguing to use for extended period of time
 Step 6

VOICE
Description:
• Automatic speech recognition by the computer
Advantages:
• Simple and direct
• Useful for people who cannot use a keyboard
• Useful when the user’s hands are occupied
Disadvantages:
• High error rates due to difficulties in:
– Recognizing boundaries between spoken words
– Blurred word boundaries due to normal speech patterns
• Slower throughput than with typing
• Difficult to use in noisy environments
• Impractical to use in quiet environments
 Step 6

MOUSE
Description:
• A rectangular or dome-shaped, movable, desktop control containing from one to
three buttons
• Movement of screen pointer mimics the mouse movement
Advantages:
• Direct relationship between hand and pointer movement in terms of direction,
distance, and speed
• Permits a comfortable hand resting position
• Selection mechanisms are included on mouse
• Does not obscure vision of the screen
Disadvantages:
• Movement is indirect, in a plane different from screen
• Requires hand to be removed from keyboard
• Requires additional desk space
• May require long movement distances
• Requires a degree of eye-hand coordination
Mouse Usage Guidelines:
• Provide a “hot zone” around small or thin objects
• Never use double-clicks or double-drags as the only means of carrying out essential
operations
• Do not use mouse plus keystroke combinations
• Do not require a person to point at moving target
 Step 6

KEYBOARD
Description:
• Standard typewriter keyboard and cursor movement keys
Advantages:
• Familiar
• Accurate
• Does not take up additional desk space
• Very useful for:
– Entering text and alphanumeric data
– Inserting in text and alphanumeric data
– Keyed shortcuts—accelerators
– Keyboard mnemonics—equivalents
• Advantageous for:
– Performing actions when less than three mouse buttons
– Use with very large screens
– Touch typists
Disadvantages:
• Slow for non-touch-typists
• Slower than other devices in pointing
• Requires discrete actions to operate
• No direct relationship between finger or hand movement on the keys and
cursor movement on screen in terms of speed and distance
 Step 6

KEYBOARD GUIDELINES
• Provide keyboard accelerators
– Assign single keys for frequently performed, small-scale tasks
– Use standard platform accelerators
– Assign Shift+key combinations for actions that extend or are
complementary to the actions of the key or key combination used
without the Shift key
– Assign Ctrl+key combinations for infrequent actions
– Tasks that represent larger-scale versions of the task assigned to the
unmodified key
• Provide keyboard equivalents
– Use standard platform equivalents
– Use the first letter of the item description
– If first letter conflicts exist, use:
• Another distinctive consonant in the item description
• A vowel in the item description
• Provide window navigation through use of KB keys
 Step 6

OTHER INPUT DEVICES

• Gesture
• Eye Tracking
• Iris Recognition
• Fingerprint Recognition
• Handwriting
 Step 6

SELECTING THE PROPER CONROLS

Keyboard Versus Mouse
• Mouse Pointing Speed: 1.5 to 2 seconds
• Typing Speeds in 1.5 to 2 seconds:
– Skilled typist - 13 to 15 characters
– Average typist - 4 to 6 characters

Control Research Example

• Pointing and Dragging:
– Pointing at stationary targets
• Direct devices
– Positioning speed and accuracy for stationary targets
• Indirect devices do not differ greatly
– Separate confirmation action following pointer positioning
• Increases pointing accuracy but reduces speed
– Tracking small, slowly moving targets
• Mouse, trackball, and graphic tablet preferred
 Step 6

GUIDELINES FOR SELECTING THE

PROPER CONROLS
• Consider the characteristics of the task
– Provide keyboards for tasks involving:
• Heavy text entry and manipulation
• Movement through structured array of objects
– Provide an alternative pointing device for graphical or drawing tasks
– Provide touch screens under the following conditions:
• The opportunity for training is minimal
• Targets are large, discrete, and spread out
• Frequency of use is low
• Desk space is at a premium
• Little or no text input requirement exists
• Consider user characteristics and preferences
– Provide keyboards for touch typists
• Consider the characteristics of the environment
• Consider the characteristics of the hardware
• Consider the characteristics of the application
• Provide flexibility
• Minimize device eye and hand movements
 Step 6

POINTER GUIDELINES
• The pointer:
– Should be visible at all times
– Should contrast well with its background
– Should maintain its size across all locations and movement
– The hotspot should be easy to locate and see
– Location should not warp (change position)
• The user should always position the pointer
• The shape of a pointer:
– Should clearly indicate its purpose and meaning
– Should be constructed of already defined shapes
– Should not be used for any other purpose other than its already defined
meaning
– Do not create new shapes for defined standard functions
• Use only as many shapes as necessary to inform the user about current
location and status. Too many confuse
• Be conservative in making changes as the pointer moves across the
screen
– Provide a short “time-out” before making non-critical changes on the screen
• Animation should not:
– Distract
– Restrict one’s ability to interact
 Step 6

OUTPUT DEVICES

• Screens
• Speakers