Step 10
INTERNATIONALIZATION &
ACCESSIBILITY
Step 10 Overview
• International Considerations
–
–
–
–
–
Localization
Cultural Considerations
Writing Text
Using Images and Symbols
Requirements Determination and Testing
• Accessibility
–
–
–
–
–
–
Visual Disabilities
Hearing Disabilities
Physical Movement Disabilities
Speech or Language Disabilities
Cognitive Disabilities
Seizure Disorders
Step 10
INTERNATIONALIZATION
Internationalization
• The process of isolating culturally specific
elements from a product
Localization
• The process of infusing a specific cultural
context into a previously internationalized
product
Step 10
INTERNATIONALIZATION
Localization
• When to do it:
– When the market includes few or no English speakers
– When translation is required by law or by custom
– When the widest possible market is desired
• When not to do it:
– When the audience already reads English
– When the cost of retrofitting or rewriting the software
is prohibitive
Step 10
INTERNATIONALIZATION
Cultural Dimensions
•
•
•
•
•
Power distance
Individualism (versus collectivism)
Masculinity (versus feminity)
Uncertainty avoidance
Long-term orientation (versus short term)
Step 10
INTERNATIONALIZATION
Words and Text
• Use simple English
– Develop a restricted vocabulary
– Restrict the sentence structure using: noun-verb-object
• Avoid:
–
–
–
–
–
–
–
–
Acronyms and abbreviations
Slang or obscure phrasing
Stringing three nouns together
Local or computer jargon
A telegraphic writing style
An over-friendly writing style
Culturally specific examples
References to national, racial, religious, and sexist stereotypes
• Adhere to local user language idioms and cultural contexts
Step 10
INTERNATIONALIZATION
Words and Text (Continued)
• Keep the original term for words that cannot be translated
• Allow additional screen space for the translation
– Horizontally, using Table 10.1
– Vertically
• When translating to other languages, first do:
– European: German
– Middle East: Arabic
– Far East: Japanese
• Position icon captions outside of the graphic
• Modify mnemonics for keyboard access
• Adhere to local formats for date, time, money, measurements,
addresses, and telephone numbers
Step 10
INTERNATIONALIZATION
Besturingselement
Olvadaci prvek
Ohjausobjekti
Steuerelement
(Dutch)
(Czech)
(Finnish)
(German)
Step 10
INTERNATIONALIZATION
Images and Symbols
• Adhere to local cultural and social norms
• Use internationally accepted symbols
• Develop generic images
• Be particularly careful with:
–
–
–
–
–
–
Religious symbols (crosses and stars)
The human body
Women
Hand gestures
Flags
The cross and check for check boxes
• Review proposed graphical images early in the
design cycle
Step 10
INTERNATIONALIZATION
Color, Sequence, and Functionality
•
•
•
•
Adhere to local color connotations and conventions
Provide the proper information sequence
Provide the proper functionality
Remove all references to features not supported
Requirements Determination and Testing
• Establish international requirements at the beginning
of product development
• Establish a relationship within the target culture
• Test the product as if it were new
Step 10
ACCESSIBILITY
Definition
• Providing easy access to a system for people
with disabilities
Objective
• Minimize all barriers that make a system
difficult, or impossible, to use
Step 10
ACCESSIBILITY
Accessibility Design
• Consider accessibility issues during system
planning, design, and testing
• Provide compatibility with installed accessibility
utilities
• Provide a customizable interface
• Follow standard Windows conventions
• Use standard Windows controls
• Assure online forms can be easily completed
Step 10
ACCESSIBILITY
Visual Disabilities Guidelines
• Utilities
– Ensure compatibility with screen-review utilities
– Ensure compatibility with screen-enlargement utilities
• Screen Components
– Include meaningful screen and window titles
– Provide associated captions or labels for all controls, objects,
icons, and graphics, including graphical menu choices
– Provide a textual summary for each statistical graphic
– Allow for screen element scalability
– Support system settings for high contrast for all user interface
controls and client area content
• When “high contrast” setting is established, hide any images
drawn behind text to maintain screen information legibility
Step 10
ACCESSIBILITY
Visual Disabilities Guidelines (Continued)
• Screen Components (Continued)
– Avoid displaying or hiding information based on the
movement of the pointer
• Exception: Unless part of the standard interface (ToolTips,
for example)
• Keyboard
– Provide a complete keyboard interface
– Provide a logical order of screen navigation
Step 10
ACCESSIBILITY
Visual Disabilities Guidelines (Continued)
• Color
– Use color as an enhancing design characteristic
– If used:
• Select color combinations that can be discriminated
• Ensure the lightness contrast between foreground and
background color is high
• Increase the lightness contrast between colors at each end
of the color spectrum (blues and reds)
• Avoid combining dark colors from the middle of the
spectrum with light colors at either end
• Create the color combinations based on the system colors
for window components
• Do not define specific colors
• Use tools to verify what colors will look like when seen by
color-deficient people
Step 10
ACCESSIBILITY
Hearing Disabilities
•
•
•
•
•
Provide captions or transcripts of important audio content
Provide an option to display a visual cue for all audio alerts
Provide an option to adjust the volume
Use audio as an enhancing design characteristic
Provide a spell-check or grammar-check utility
Physical Movement Disabilities
•
•
•
•
•
Provide voice-input systems
Provide a complete and simple keyboard interface
Provide a simple mouse interface
Provide on-screen keyboards
Provide keyboard filters
Step 10
ACCESSIBILITY
Speech or Language Disabilities
• Provide a spell-check or grammar-check utility
• Limit the use of time-based interfaces
– Never briefly display critical feedback or messages and then
automatically remove them
– Provide an option to permit the user to adjust the length of the
time-out
Cognitive Disabilities
• Permit modification and simplification of the interface
• Limit the use of time-based interfaces
– Do not briefly display critical feedback or messages and then
automatically remove them
– Provide an option to permit the user to adjust the length of the
time-out
Step 10
ACCESSIBILITY
Seizure Disorders
• Use elements that do not blink or flicker at rates
between frequency ranges of 2 Hz and 55 Hz
• Minimize the area of the screen that is flashing
• Avoid flashing that has a high level of contrast
between states
• Provide an option to enable users to slow down
or disable screen
Step 10
ACCESSIBILITY
Web Page Accessibility Design
• Pages
– Provide a simple and consistent layout
– Place important information at page top
– Provide simple backgrounds contrasting well with text
– Provide a “Skip to Main Content” link at the top of each
page
– Structure articles with two or three levels of headings
– End sentences, headings, and list items with
punctuation
– Provide frame titles
– Provide user adjustable font sizes and styles, colors,
graphical attributes, and volume
– Avoid blinking or constantly changing elements
Step 10
ACCESSIBILITY
Web Page Accessibility Design (Continued)
• Controls
– Provide large buttons
• Links
– Provide fully descriptive headings
– Separate consecutive links with a dividing character
• Tables, Frames, and Columns
– Use sparingly
– Provide alternate ways to access items contained
within tables
Step 10
ACCESSIBILITY
Web Page Accessibility Design (Continued)
• Images
– Provide associated text
• Audio
– Include one or more of the following:
• Caption or pop-up text window
• Textual transcript
• Textual description
– For lengthy descriptions or transcripts, provide a link
to a separate page
Step 10
ACCESSIBILITY
Web Page Accessibility Design (Continued)
• Video
– Include one or more of the following in both a textual
and audio format:
• Transcript
• Description
• For lengthy descriptions or transcripts, provide a link to a separate
page
• Image Maps
– Provide equivalent text menus
Step 10
ACCESSIBILITY
Web Page Accessibility Design (Continued)
• Animation
– Provide an option to display in a nonanimated
presentation mode
• Plug-ins and applets
– Use sparingly
Step 10
ACCESSIBILITY
Web Page Accessibility Design (Continued)
• General
– Synchronize multimedia elements
– Test for accessibility
– For online forms that cannot be read by utilities
• Provide alternate method of communication
– If accessability cannot be accomplished any other way:
• Provide equivalent text-only page
• Follow WWW and Section 508 guidelines
Step 10
ACCESSIBILITY
Usability for Lower-Literacy
To aid lower-literacy Web users:
–
–
–
–
–
Prioritize information
Avoid moving or changing text
Streamline page design
Simplify navigation
Optimize search
Step 10
ACCESSIBILITY
Usability for Senior Citizens
• Provide large targets
• Reduce the number of clicks
– Do not require double-clicks
– Do not use pull-down menus
– Do not have a deep page hierarchy
• Concentrate important information at page top
• Avoid the need to scroll
• Place most links in bulleted, not tightly clustered
list
• Clearly differentiated visited/non-visited links
Step 10
ACCESSIBILITY
Usability for Senior Citizens (Continued)
• Use few colors, avoiding blue and green tones
• For text to be read or scanned, use:
–
–
–
–
–
–
12- to 14-point sans serif font (Helvetica, Arial)
Black text on white background
Left alignment
Increased spacing (leading) between lines
Sentence style mixed-case letters
Appropriate large headings in a 14- to 16-point
sans serif font
Step 10
ACCESSIBILITY
Documentation
• Provide documentation on all accessible features
• Provide documentation in alternate formats
• Provide online documentation for people who
have difficulty reading or handling printed material
Testing
• Test all aspects of accessibility as part of the
normal system testing process
Step 11
CREATE MEANINGFUL GRAPHICS,
ICONS & IMAGES
Step 11 Overview
• Icons
–
–
–
–
Kinds of Icons
Characteristics of Icons
Influences on Icon Usability
Choosing Icons
–
–
–
–
Creating Images
Drawing Images
Icon Animation and Audition
The Design Process
• Multimedia
–
–
–
–
Images
Photographs/Pictures
Diagrams
Drawings
– Video
– Animation
– Audition
Step 11
ICONS
Kinds of Icon
• 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
— Marcus (1984)
• Resemblance—An image that looks like what it means
• Symbolic—An abstract image representing something
• Exemplar—An image illustrating an example or characteristic
of something
• Arbitrary—An image completely arbitrary in appearance whose
meaning must be learned
• Analogy—An image physically or semantically associated with
something
— Rogers (1989)
Step 11
ICONS
Characteristics of Icons
• Syntactics is an icon’s physical structure
– Square, round, red, green, big, small?
• Semantics is the icon’s meaning
– To what does it refer?
• Pragmatics is how the icon is physically
produced
– Can it be illustrated clearly?
Step 11
ICONS
Influences on Icon Usability
• Provide icons that are:
–
–
–
–
–
–
–
Familiar
Clear and legible
Simple
Consistent
Direct
Efficient
Discriminable
• Also consider the:
– Context in which the icon is used
– Expectancies of users
– Complexity of task
Step 11
CHOOSING ICONS
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
• Looks as good in black and white as
in color
Step 11
CHOOSING ICONS
Size
• Supply in all standard sizes.
– 16 x 16 pixels
• 16- and 256-color versions
– 32 x 32 pixels
• 16- and 256-color versions
• Effective: 24 x 24 or 26 x 26 in 32 x 32 icon
– 48 x 48 pixels
• 16- and 256-color versions
• Use colors from the system palette
• Use an odd number of pixels along each side
– Provides center pixel around which to focus design
• Minimum sizes for easy selection:
– With stylus or pen: 15 pixels square
– With mouse: 20 pixels square
– With finger: 40 pixels square
• Provide as large a hot zone as possible
Step 11
ICONS
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 objects represented
• Simply reflect objects represented, avoiding 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
Step 11
ICONS
Drawing Images
• Provide 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 those attributes as meaningfully as possible
• Provide proper scale and orientation
• Use perspective and dimension whenever possible
• Accompany icons with labels to ensure intended
meaning
Step 11
ICONS
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 or more frames
per second
• Audition
– Consider auditory icons
Step 11
ICONS
The Design Process
•
•
•
•
•
Define the icon’s purpose and use
Collect, evaluate, and sketch ideas
Draw in black and white
Draw using an icon-editing utility or drawing package
Test for user:
– Expectations
– Recognition
– Learning
• Test for legibility
• Register new icons in the system’s registry
Step 11
ICONS
Screen Presentation
• Follow all relevant general guidelines for screen design
• Limit the number of symbols to 12, if possible, and at most 20
• Arrange icons
– In a meaningful way, reflecting the organization of the real world
– To facilitate visual scanning
– Consistently
•
•
•
•
•
Place object and action icons in different groups
Present an interactive icon as a raised screen element
Ensure that a selected icon is differentiable from unselected icons
Permit arrangement of icons by the user
Permit the user to choose between iconic and text display of
objects and actions
Step 11
MULTIMEDIA
Purpose of Graphics
• Navigational
– To identify links that may be followed
• Representational
– To illustrate items mentioned in text
• Organizational
– To depict relationships among items mentioned in text
• Explanative
– To show how things or processes work
• Decorative
– To provide visual appeal and emphasis
Step 11
MULTIMEDIA
Graphics
• Use graphics to
– Supplement the textual content, not as a substitute for it
– Convey information that can’t be effectively expressed
using text
– Enhance navigation through
• Presenting a site overview
• Identifying site pages
• Identifying content areas
• Limit the use of graphics that take a long time to load
• Coordinate the graphics with all other page elements
• Graphics should not look like gratuitous decorations or
banner ads
Step 11
MULTIMEDIA
Images
• Insure images convey their intended message
• General:
–
–
–
–
–
–
Use standard images
Use images consistently
Produce legible images
Provide descriptive text or labels with all images
Distinguish navigational from decorative images
Minimize:
• The number of presented images
• The size of presented images
– Restrict single images to 5K
– Restrict page images to 20K
– Provide thumbnail size images
• Image animation
– Avoid extraneous or gratuitous images
Step 11
MULTIMEDIA
Images (Continued)
• Color
– Minimize the number of colors in an image
• Format
– Produce images in the most appropriate format
• GIF or JPEG
• Internationalization:
– Provide for image internationalization
• Screen design:
– Limit large images above the page fold
– Use simple background images
– Reuse images on multiple pages
Step 11
MULTIMEDIA
Image Maps
• Use
– Provide navigation links to other content
• Advantages
– Can be arrayed in a meaningful and obvious structure
– Faster to load than separate images
• Disadvantages
– Consume a significant amount of screen space
– “Hot spots” not always obvious
– One’s location within map is not always obvious
• Guidelines
– Use with caution
– Provide effective visual cues and emphasis to make it easy
to identify link boundaries
– Ensure image maps are accessible to the vision impaired
Step 11
MULTIMEDIA
Photographs/Pictures
• Use when every aspect of the image is relevant
• Guidelines:
– Use JPEG format
– On the initial page:
• Display a small version
– A thumbnail-size image
– Zoom-in on most relevant detail
• Link to larger photos showing as much detail as needed
– Include fewer people and objects in less complicated settings
than in photos for print
– Emphasize close-up shots with clean backgrounds
Step 11
MULTIMEDIA
Video
• Uses:
–
–
–
–
–
–
Show things that move or change over time
Show the proper way to perform a task
Show events that cannot be seen directly
Convey human behavior and emotions
Provide a personal message
Grab attention
• Disadvantages:
– Expensive to produce
– Slow to download
– Small and difficult to discern detail
• Guidelines:
–
–
–
–
Never automatically download a video into a page
Create short segments
Provide controls: playing, pausing, and stopping
Consider using:
• Existing video
• Audio only
• A slide show with audio
Step 11
MULTIMEDIA
Diagrams
• Uses:
–
–
–
–
Show the structure of objects
Show the relationship of objects
Show the flow of a process or task
Reveal a temporal or spatial order
• Kinds:
–
–
–
–
–
–
Flow charts
Cause and effect charts
Gantt charts
Entity relationship charts
Organization charts
Network diagrams
Step 11
MULTIMEDIA
Diagrams (Continued)
• Parts:
– Shapes
– Labels
– Lines
• Guidelines:
– Provide simple diagrams
– Provide cutaway diagrams or exploded views to illustrate
key points
Step 11
MULTIMEDIA
Drawings
• Use when some parts need emphasize
or representation
• Guidelines:
– Provide simple drawings showing minimal
detail
– Provide a link to a complete drawing
Step 11
MULTIMEDIA
Animation
• Uses:
–
–
–
–
–
–
–
Explain ideas involving a change in time or position
Illustrate the location or state of a process
Provide feedback
Show continuity in transitions
Enrich graphical representations
Aid visualization of 3-D structures
Attract attention
• Disadvantages:
– Very distracting
– Can potentially create problems for people with some disabilities
– Slow loading
• Guidelines:
–
–
–
–
–
Use only when an integral part of the content
Introduce animation
Create short segments
Provide a freeze frame and stop mode
Avoid distracting animation
Step 11
MULTIMEDIA
Audition
• Uses:
–
–
–
–
–
–
Supplement to text and graphics
Establish atmosphere
Create a sense of place
Teach
Sample
For users:
• With disabilities
• In eye-busy and hands-busy situations
• Without access to keyboard and/or monitor
• Advantages:
– Does not obscure information on the screen
– Shorter downloading time than video
Step 11
MULTIMEDIA
Audition (Continued)
• Disadvantages:
– Annoying to many people in the vicinity
– Easily overused and ignored
– Not reliable because:
• Some people are hard of hearing
• Leaves no permenant record
• The user can turn it off
• Audio capability may not exist
• Guidelines:
– When words are spoken:
• Content should be simple
• Narration speed should be about 160 WPM
– When used to introduce new ideas or concepts the narration should
be slowed
– Off-screen narration should be used rather than on-screen
• Unless narrator is recognized authority
– Create short segments
– Provide high-quality segments
– Provide audio controls
– Play background audio softly
Step 11
MULTIMEDIA
Interactive Voice Response (IVR)
• Limit to three or four levels
• Limit to four or fewer choices per level
Step 11
MULTIMEDIA
Combining Mediums
• Combinations
– Use sensory combinations that work best together:
• Auditory text with visual graphics
• Screen text with visual graphics
• Integration
– Closely integrate screen text with graphics
• Relevance
– Both the visual and auditory information should be
totally relevant to the task being performed
Step 11
MULTIMEDIA
Combining Mediums (Continued)
• Presentation:
– Visual and auditory textual narrative should be presented
simultaneously, or the visuals should precede the narrative by
no more than 7 seconds
– To control attention, reveal systematically
• Limit elements revealed to one item at a time
• For related elements reveal sequentially
– Show action initiation as well as result
– Avoid animation that distracts from other more important
information
• Consider download times when choosing media
• Testing
– Thoroughly test all graphics for:
• Legibility
• Comprehensibility
• Acceptance
Step 12
CHOOSE THE PROPER COLORS
Step 12 Overview
• Color’s characteristics
–
–
–
–
–
–
What color is
Uses of color
Possible problems and cautions
Color connotations
Results of color research
Color and human vision
• How to use color
• How to choose the proper colors for:
– Textual graphic screens
– Statistical graphics screens
– Web screen text and images
Step 12
COLOR
Color—What Is It?
• Results from the stimulation of the proper receptor in the eye by a
received light wave
• A color name is a learned phenomenon based on previous
experiences and associations
• The visual spectrum of wavelengths to which the eye is sensitive
ranges from about 400 to 700 millimicrons
• Three properties:
– Hue—Spectral wavelength composition of a color such as green or red
– Chroma or saturation—Purity of a color in a scale from gray to the
most vivid version of the color
– Value or intensity—Relative lightness or darkness of a color in a range
from black to white
• Primary colors: red, green, and blue
– Their wavelengths additively combine in pairs to produce magenta,
cyan, and yellow, and all the other visible colors in the spectrum
Step 12
COLOR USES
• Use color to assist in formatting a screen:
–
–
–
–
Relating or tying elements into groupings
Breaking apart separate groupings of information
Associating information that is widely separated
Highlighting or calling attention to important information by
setting off from other information
• Use color as a visual code to identify
–
–
–
–
Screen components
Logical structure of ideas, processes, sequences
Sources of information
Status of information
• Use color to
– Realistically portray natural objects
– Increase screen appeal
Step 12
POSSIBLE COLOR PROBLEMS
• High attention-getting capacity
• Interference with use of other screens
• Varying sensitivity of the eye to different colors
– More sensitive to those in the middle of the visual spectrum:
Yellow and green
– Combinations of screen colors can strain the eye’s
accommodation mechanism: Blue and red
• Color-viewing deficiencies
– 8 percent of males
– 0.4 percent of females
• Cross-disciplinary and cross-cultural differences
– Colors can have different meanings in different situations to
different people
Step 12
COLOR RESEARCH
Conclusions
• For simple displays, color may have no
dramatic impact
• As display complexity increases so does the
value of color
• People like using color and think it has a
positive influence on their productivity, even
though it may not
Step 12
COLOR AND HUMAN VISION
Lens
• Muscles that focus wavelengths of light on the
retina
• Different wavelengths are focused at different
distances behind the lens
– Longer wavelengths (red) are focused farther back
than the shorter wavelengths (blue)
– Colors of a different wavelength from the color actually
being focused will appear out of focus
– To create a sharp image of the out-of-focus colors
requires a refocusing of the eye
– Excessive refocusing (such as between red and blue)
can lead to eye fatigue
Step 12
COLOR AND HUMAN VISION
Retina
• Light-sensitive surface of the eye
• Rods
– Sensitive to lower light levels and function primarily at night
• Cones
– Stimulated by higher light levels and react to color
– Different cones possess maximum sensitivity to different wavelengths of
light
– Two-thirds (64 percent) maximally sensitive to longer light wavelengths
• Referred to as “red” sensitive cones
• However, peak sensitivity is in the yellow portion of the visual spectrum
– One-third (32 percent) maximally sensitive to medium wavelengths
• Referred to as “green” sensitive cones
– 2 percent primarily react to short light wavelengths
• Referred to as “blue” sensitive cones
Step 12
CHOOSING COLORS
Choosing Colors for Categories of Information
• Requires a clear understanding of how the information will be used
• Some examples:
– If different parts of the screen are attended to separately, color-code
the different parts to focus selective attention on each in turn
– If decisions are made based on the status of certain types of
information on the screen, color-code the types of status
– If screen searching is performed to locate information of a particular
kind or quality, color-code these kinds for contrast
– If the sequence of information use is ordered, use color to identify the
sequence
– If the information displayed on a screen is packed or crowded, use
color to provide visual groupings
• Use color as a redundant code
Step 12
COLORS IN CONTEXT
Usage
• Design for monochrome first
– Useful:
• For people with a color-viewing deficiency
• On monochrome displays
• In conditions where ambient lighting distorts the
perceived color
• If the color ever fails
• Use colors conservatively
– Do not use color where other identification
techniques, such as location, are available
Step 12
COLORS IN CONTEXT
Discrimination and Harmony
• For best absolute discrimination, select no more than four
or five colors widely spaced on the color spectrum.
– Good colors: red, yellow, green, blue, and brown
• For best comparative discrimination, select no more than
six or seven colors widely spaced on the color spectrum.
– Other acceptable colors: orange, yellow-green, cyan, violet, and
magenta
• Choose harmonious colors
– One color plus two colors either side it's complement
– Three colors equidistant points around color circle
• For extended viewing or for older viewers, use brighter
colors.
Step 12
COLORS IN CONTEXT
Emphasis
• To draw attention or to emphasize elements, use bright
or highlighted colors.
• To de-emphasize elements:
• Use less bright colors
• The perceived brightness of colors from most to least is white,
yellow, green, blue, red
• To emphasize separation, use contrasting colors
•
•
•
•
•
Red and green
Blue and yellow
To convey similarity, use similar colors
Orange and yellow
Blue and violet
Step 12
COLORS IN CONTEXT
Common Meanings
• To indicate that actions are necessary, use warm colors:
– Red
– Orange
– Yellow
• To provide status or background information, use cool
colors:
–
–
–
–
Green
Blue
Violet
Purple
• Conform to human expectations
– In the job
– In the world at large
Step 12
COLORS IN CONTEXT
Location
• In the center of the visual field, use, red and green
• For peripheral viewing, use blue, yellow, black, and white
• Use adjacent colors that differ by hue and value or
lightness
Ordering
• Order colors by their spectral position:
–
–
–
–
–
–
–
Red
Orange
Yellow
Green
Blue
Indigo
Violet
Step 12
COLORS IN CONTEXT
Foregrounds
• Use colors that highly contrast with background color
• For text or data, use:
– Black
– Desaturated or spectrum center colors: white, yellow, or green
– Warmer more active colors
• Use colors that possess the same saturation and
lightness
• To emphasize an element, highlight it in a light value of
the foreground color, pure white, or yellow
• To de-emphasize an element, lowlight it in a dark value
of the foreground color
Step 12
COLORS IN CONTEXT
Backgrounds
• Use a background color to organize a group of
elements into a unified whole
• Use colors that do not compete with the
foreground
• Use:
– Light-colored backgrounds of low intensity: off-white
or light gray
– Desaturated colors
– Cool, dark colors such as blue or black
– Colors on the spectral extremes
Step 12
COLORS IN CONTEXT
Three-Dimensional Look
• Use at least five colors or color values to create a 3-D look on
a screen.
– Background:
• Control itself and window on which it appears
– Foreground:
• Captions and lines for buttons, icons, and other objects (usually black
or white)
• Selected mode:
– Color used when the item is selected
• Top shadow:
– Bezel on the top and left of the control
• Bottom shadow:
– Bezel on the bottom and right of the control
Step 12
COLORS IN CONTEXT
Color Palette, Defaults, and Customization
• Permit users to customize their colors
• Provide a default set of colors for all screen
components
• Provide a palette of six or seven foreground
colors
– Provide 2 to 5 values or lightness shades for each
foreground color
• Provide a palette of six or seven background
colors
• Never refer to a screen element by its color
Step 12
COLORS IN CONTEXT
Gray Scale
• For fine discriminations use a black-gray-white scale
– Recommended values are white, light gray, medium gray,
dark gray, black
Text in Color
• When switching text from black to color:
• Double the width of lines
• Use bold or larger type:
– If originally 8 to 12 points, increase by 1 to 2 points
– If originally 14 to 24 points, increase by 2 to 4 points
• Check legibility by squinting at text
– Too-light type will recede or even disappear
Step 12
COLORS IN CONTEXT
Monochromatic Screens
• At the standard viewing distance, white,
orange, or green are acceptable colors
• At a far viewing distance, white is the best
choice
• Over all viewing distances, from near to far,
white is the best choice
Step 12
COLORS IN CONTEXT
Consistency
• Be consistent in color use
Considerations for People with Color-Viewing
Deficiencies
• Use color combinations that can be easily discriminated
• Ensure lightness contrast between foreground and
background is high
• Increase lightness contrast between colors on either
end of visual spectrum (blues and reds)
• Avoid combining light colors from either end of spectrum
with dark colors from middle
• Use tools to see what screen/pages will look like to
color deficient viewers
Step 12
COLORS IN CONTEXT
Cultural, Disciplinary, and Accessibility
Considerations
• Consider the impact of specific colors on
– Users of various cultures
– Users of various disciplines
– Users relying on accessibility utilities
Step 12
TEXTUAL GRAPHIC SCREENS
Choosing Colors for Textual Graphic Screens
• Overview
–
–
–
–
–
–
Use effective foreground/background combinations
Use effective foreground combinations
Choose the background color first
Display no more than four colors at one time
Use colors in toolbars sparingly
Test the chosen colors
Step 12
TEXTUAL GRAPHIC SCREENS
Effective Foreground/Background Combinations
• The majority of good combinations possess a bright or
high-intensity color as the foreground color
• The majority of poor combinations are those with low
contrast
• The best overall color is black
• The poorest overall color is brown
• Maximum flexibility and variety in choosing a foreground
color exists with black or blue backgrounds
• Brown and green are the poorest background choices
— Lalomia and Happ (1987)
Step 12
TEXTUAL GRAPHIC SCREENS
For dark on light polarity
• Any foreground color is acceptable if the background color is chosen
properly
• Increased saturation of the foreground only marginally affected
ratings, implying that any dark, saturated, foreground color is
satisfactory
• Saturated backgrounds yield unsatisfactory ratings
• Less saturated backgrounds generally receive high ratings with any
foreground color
For light on dark polarity
• Combinations involving saturated colors tend to be unsatisfactory
• As foreground color saturation increases, the number of background
colors yielding high ratings diminishes
• Generally, desaturated foreground/background color combinations
yielded the best ratings
• Short wavelength, cool colors were preferred for backgrounds (blue,
bluish cyan, cyan)
— Pastoor (1990)
Step 12
TEXTUAL GRAPHIC SCREENS
• Choose the Background First
– Then, choose acceptable foreground colors
• Maximum of Four Colors
– Displaying more than four colors at one time on a textual
screen gives rise to a feeling of “too much”
• Use Colors in Toolbars Sparingly
– Use color in toolbar icons simply and conservatively, and only
if the color:
• Aids icon identification
• Makes it easier to distinguish icons
• Adds meaning
• Test the Colors
– Always test all chosen colors
Step 12
STATISTICAL GRAPHIC SCREENS
Choosing Colors
• Emphasize the graphic’s data
• Number of Colors
– Use no more than six colors at one time
– Use one color of five values or lightness
• Backgrounds
– Surround images
• In a neutral color
• In a color complementary to the main image
Step 12
STATISTICAL GRAPHICS
Choosing Colors
• Size
– Provide images of an adequate size for the task
– If the image changes in size, use colors that exhibit
a minimum shift in hue or lightness
• White, yellow, and red on dark backgrounds
• Status
– To indicate a status, use the following colors:
• Proper, normal, or OK: Green, white, or blue
• Caution: Yellow or gold
• Emergency or abnormal: Red
Step 12
STATISTICAL GRAPHICS
Choosing Colors
• Measurements and Area-Fill Patterns
– Display measurements in the following colors:
•
•
•
•
•
Grids:
Data points:
Variance or error bars:
Out of specified range data:
Captions / labels:
Gray
Yellow
Blue
Red
Lavender
Lime green
Cyan
– Display area-fill patterns in the following colors:
•
•
•
•
•
•
Widely spaced dots:
Closely spaced dots:
Wide dashed lines:
Narrow dashed lines:
Wide crosshatch:
Narrow Crosshatch:
Red
Green
Magenta
Cyan
Blue
Yellow
Step 12
STATISTICAL GRAPHICS
Choosing Colors
• Physical Impressions
– Size
• To convey an impression of:
– Larger: Use bright or saturated colors
– Smaller: Use dark or desaturated colors
– Similar: Use colors of equal lightness
– Weight
• To convey an impression of:
– Heavy: Use dark, saturated colors
– Light: Use light, desaturated colors
– Distance
• To convey an impression of:
– Close: Use saturated, bright, long-wavelength (red) colors
– Far: Use saturated, dark, short-wavelength (blue) colors
Step 12
STATISTICAL GRAPHICS
Choosing Colors
• Physical Impressions (Continued)
– Height
• To convey an impression of height, use desaturated, light colors
– Depth
• To convey an impression of depth, use saturated, dark colors
– Concentration level
• To convey an impression of concentration level:
– High: Saturated colors
– Low: Desaturated colors
– Magnitude of change:
• To convey an impression of magnitude of change:
– Lowest: Short-wavelength (blue) colors
– Highest: Long-wavelength (red) colors
Step 12
STATISTICAL GRAPHICS
Choosing Colors
• Physical Impressions (Continued)
– Actions:
• To convey an impression of action:
– Required: Long-wavelength (red) colors
– Not required: Short-wavelength (blue) colors
– Order:
• To convey an impression of order with color:
– Low end of continuum: Short-wavelength (blue)
– High end of continuum: Long-wavelength (red)
• When displaying an array of ordered colors, position:
– Short-wavelength colors at left side or bottom
– Long-wavelength colors at right side or top
• To convey impression of order with value or lightness, use the
lightness order of a color (darkest to lightest or vice versa)
– Neutrality:
• To convey impression of neutrality, use black, gray, and white
Step 12
WEB PAGES
Choosing Colors
• Purpose
– Color must always have a meaningful purpose
• Palette
– Use the browser 216-color palette
• Presentation
– Minimize the number of presented colors
– Always consider color in context
– Use similar or the same color schemes throughout
• For foregrounds: Use black or strong colors for text and headings
• For backgrounds: Use weaker contrasting colors such as off-white
or light gray
– Use a uniform color in large areas
– The smaller the element, the more contrast is required
between it and its background
Step 12
WEB PAGES
Choosing Colors
• Presentation (Continued)
– Larger images should use
• Flat, Web-safe colors
• Fewer colors than small images
– Select colors easily reproduced in black and white
– Links
• Use default colors for links
– Make unselected/unvisited links blue
– Make selected/visited links purple
• Do not display non-link text in link colors
– Test all colors
Step 12
USES OF COLOR TO AVOID
• Relying exclusively on color
• Too many colors at one time
• Highly saturated, spectrally extreme colors together:
– Red and blue
– Yellow and purple
• Low-brightness colors for extended viewing or older
viewers
• Colors of equal brightness
• Colors lacking contrast:
– Yellow and white
– Black and brown
– Reds, blues, and browns against light background
Step 12
USES OF COLOR TO AVOID
(Continued)
• Fully saturated colors for text or other frequently read
screen components
• Pure blue for text, thin lines, and small shapes
• Colors in small areas
• Color for fine details
• Non-opponent colors
• Red and green in the periphery of large-scale displays
• Adjacent colors that only differ in the amount of blue
they possess
• Single-color distinctions for color-deficient users
• Using colors in unexpected ways
• Using color to improve legibility of densely packed text
Step 13
ORGANIZE AND LAYOUT
WINDOWS AND PAGES
Step 13 Overview
• Organizing and laying out graphical and Web
screens to encourage accurate:
– Information comprehension
– Control execution
• Organizing for meaningfulness and efficiency
• Creating groupings
• Providing alignment and balance
Step 13
ORGANIZATION AND LAYOUT
General Guidelines
• Amount of information
– Present the proper amount of information on each screen
• Too little is inefficient
• Too much is confusing
– Present all information necessary for performing an action or
making a decision on one screen, whenever possible
• Organization and flow
– Divide information into units that are logical, meaningful, and
sensible
– Provide an ordering that:
•
•
•
•
•
Is prioritized according to the user's expectations and needs
Is logical and sequential
Is rhythmic, guiding a person’s eye
Encourages natural movement sequences
Minimizes pointer and eye movement distances
Step 13
ORGANIZATION AND LAYOUT
General Guidelines (Continued)
• Control placement
– Position the most important and frequently used controls at the top
left
– Maintain a top-to-bottom, left-to-right flow
– If one control enables or affects another, the enabling control
should be above or to the left
– Place the command buttons that affect the entire window
horizontally, and centered, at bottom
• Navigation
– The flow of interaction should:
• Require minimal cursor and pointer travel
• Minimize the number of times a person’s hand has to travel between
keyboard and mouse
– Assist users in navigating through a screen by:
• Aligning elements
• Grouping elements
• Including line borders
Step 13
ORGANIZATION AND LAYOUT
General Guidelines (Continued)
• Aesthetics: Provide a visually pleasing composition
through
–
–
–
–
Adequate use of white space
Balance
Groupings
Alignment of elements
• Avoid visual clutter by maintaining
– Low screen density levels
– Distinctiveness of elements
Step 13
ORGANIZATION AND LAYOUT
General Guidelines (Continued)
•
Focus and emphasis
– Provide visual emphasis to the most important screen elements,
its data, or information
– Sequentially, direct attention to items that are:
1.
2.
3.
4.
•
Critical
Important
Secondary
Peripheral
Consistency
– Provide consistency
•
•
•
•
With a person’s experiences and cultural conventions
Internally within a system
Externally across systems
Visual identity or theme
Step 13
ORGANIZATION AND LAYOUT
Creating Groupings
•
General
– Provide groupings of associated elements
•
•
Elements of a radio button or check box
Two or more related fields or controls
– Create groupings of 5 degrees of visual angle
•
White space
– Provide adequate separation of groupings through the liberal
use of white space
– Leave adequate space:
•
•
Around groups of related controls
Between groupings and window borders
– The space between groupings should be greater than the
space between fields within a grouping
•
Headings
– Provide grouping headings that meaningfully and concisely
describe the nature of the group
Step 13
ORGANIZATION AND LAYOUT
Creating Groupings (Continued)
•
Borders
– Enhance groupings through incorporation of borders around
•
•
Elements of a single control
Groups of related controls or fields
– Individual control borders should be visually differentiable from
borders delineating groupings
•
•
Provide a border consisting of a thin line around single controls
Provide a border consisting of slightly thicker line around groups
of fields or controls
– Do not place individual borders around single
•
•
•
•
•
Entry fields
List boxes
Combination boxes
Spin boxes
Sliders
– Do not place borders around command buttons
Step 13
ORGANIZATION AND LAYOUT
Control Borders
• Incorporate a thin single-line border around
the elements of a selection control
Section Borders
• Incorporate a thicker single-line border around
groups of related entry or selection controls
Step 13
ORGANIZATION AND LAYOUT
Dependent Controls
• Position a conditional control or controls
– To the right of the control to which it relates
– Alternatively, position it below the control to which it
relates
• Either:
– Display these conditional controls in a subdued or
grayed out manner
• When a control is relevant, return it to normal intensity
– Do not display a conditional control until the
information to which it relates is set
• Inscribe a filled-in arrow between the selected
control and its dependent controls to visually
relate them to each other
Step 13
ORGANIZATION AND LAYOUT
Aligning Screen Elements
• Minimize alignment points on a window
– Vertically
– Horizontally
Balancing Screen Elements
• Create balance by
– Equally distributing controls,spatially, within a window
– Aligning borders whenever possible
Step 13
ORGANIZATION AND LAYOUT
Control Navigation
• Tab/arrow keys
– Use the Tab key to move between operable window controls, in
the logical order of the controls
•
Do not tab to field captions/labels
• Radio buttons
– Use arrow keys to move through radio buttons within a single
control
• Check boxes
– Use the Tab key to move between check boxes, when they are
independent controls
– Within a border or group box, use arrow keys to move between
the check boxes since they appear as a logical group
• List boxes
– Use arrow keys to navigate within list box choices
Step 13
ORGANIZATION AND LAYOUT
Control Navigation (Continued)
•
Command buttons
– For exiting or expanding/feature dialog command buttons, tab
to it at the end of the screen control tabbing sequence
– For a command button with a contingent relationship to a
control in the window body, tab to it at the logical point in the
tabbing sequence within the window
•
Keyboard equivalents
– Use keyboard equivalents (mnemonics) for direct access to
each control, whenever possible
•
Mnemonic designations must be unique within a window
Step 13
ORGANIZATION AND LAYOUT
Window Guidelines
•
Organization
– Organize windows to support user tasks
– Present related information in a single window
– Support the most common tasks in the most efficient
sequence of steps
– Use:
•
Primary windows to:
– Begin an interaction and provide top- level context for dependent
windows
– Perform a major interaction
•
Secondary windows to:
– Extend the interaction
– Obtain or display supplemental information for primary window
•
Dialog boxes for:
– Infrequently needed information
– “Nice-to-know” information
Step 13
ORGANIZATION AND LAYOUT
Window Guidelines (Continued)
•
•
Minimize the number of windows needed to
accomplish an objective
Size
– Provide large enough windows to:
•
•
•
•
•
Present all relevant and expected information for the task
Not hide important information
Not cause crowding or visual confusion
Minimize the need for scrolling
Less than the full size of the entire screen
– If a window is too large, determine:
•
•
Is all the information needed?
Is all the information related?
Step 13
WEB PAGE GUIDELINES
Page Layout
•
General
– Provide a layout that is:
• Efficient
• Logical
• Consistent
• Self-explanatory
• Scannable
– Strike a proper balance between:
•
•
•
Textual information
Graphics
Links
– Create and use a layout grid
Step 13
WEB PAGE GUIDELINES
Layout Grid
•
Gather representative samples of the contents of site pages
–
•
Experiment with various arrangements for all kinds of pages
–
•
•
•
•
Navigation pages, content pages, simple pages, and complex
pages
Paint or sketch patterns of organization on sample pages
Follow all layout guidelines and evolving page organizational
standards in the sketching process
Maintain as much consistency between pages types as possible
Establish a design grid (or grids) for the identified page types
Plug in content (navigational components, text, and graphics) for
each page
Step 13
WEB PAGE GUIDELINES
Page Layout (Continued)
•
Size
– Restrict the number of elements per page
– Minimize page length
•
Generally, use shorter pages for:
– Home and navigation pages
– Pages needing to be quickly browses or read online and information
quickly found
– Situations where the pages will be loading over slow modems and all
pages are not needed
•
Generally, use longer pages for:
– Content pages:
» Where uninterrupted reading is desirable
» In which an entire concept must be understood without interruption.
– To match the structure of a paper counterpart
– To make pages more convenient to download and print
– To simplify page maintenance
Step 13
WEB PAGE GUIDELINES
Page Layout (Continued)
• Organization
– Place critical or important information at the very top
so it is always viewable at page opening
• Within top 4 inches of page
– Limit large images above the fold
– Position remaining elements according to importance
– Reduce graphic complexity and textual density toward
the page bottom
Step 13
WEB PAGE GUIDELINES
Page Layout (Continued)
• Formatting
– Provide sufficient but moderate amount of white space
• Minimum of 30 percent
– Keep length of textual lines short
• Fast reading – 75-100 characters
• User preference important – 50-60 characters
• Avoid very narrow columns
– Keep text and related graphics close together
– Provide adequate horizontal spacing
– Use horizontal rules sparingly
Step 13
WEB PAGE GUIDELINES
Page Layout (Continued)
•
•
If multiple audiences exist, provide information
formatted for each audience
Platforms
– Design for different platforms and screens
– Specify an image-safe area
•
Frames
– Use frames with caution
– Consider for global elements
•
•
Use fluid layout (not fixed)
Change organization and structure only when
significant benefits exist
Step 13
WEB PAGE GUIDELINES
Navigation Elements
•
•
•
Differentiate and group navigation elements
Provide global at page top
Provide local or topical on left side
– For long lists, consider placing in frame
•
•
Optionally, provide secondary on right side
Provide explicit or embedded links in content area
– Consider duplicating embedded links in left navigation bar
•
For long pages provide:
– “List of Contents” links
– Important global and local links repeated at page bottom
•
•
Create common, consistent theme
Never create pages without navigational options
Step 13
WEB PAGE GUIDELINES
Homepage
•
Limit to one screen
•
•
Clearly identify the Web site’s content and purpose
Elements to include:
–
–
–
–
–
–
–
–
Masthead, name, logo of owner and tagline
Web site name
Brief Web site description
Summary of key information content
Site overview or map
Navigation links to most (if not all) of the site or major sections
Summary of latest news or promotions
Search facility
Step 13
WEB PAGE GUIDELINES
Possible Page Components (Table 13.1)
•
•
•
•
•
•
•
•
•
Page title
Navigation bar
Table of contents
Site identifier
Search facility
Page’s author or
contact person
Contact e-mail address
Comment facility
Other contact details
•
•
•
Copyright
Date of creation
Links to:
– Skip to main content
– Other major sections of
site
– Home Page
– Index Page
– Site Map or Directory
– Next Page
– Previous Page
Step 14
TEST, TEST, AND RETEST
Step 14 Overview
•
•
•
•
•
•
•
•
•
•
•
•
Identifying the purpose and scope of testing
Understanding the importance of testing
Developing a prototype
Developing the right kind of test plan
Designing a test to yield relevant data
Soliciting, selecting, and scheduling participants
Providing the proper test facility
Conducting tests and collecting data
Analyzing the data and generating recommendations
Modifying the prototype as necessary
Testing the system again
Evaluating the working system
Step 14
USABILITY
Dimensions
•
•
•
•
•
Effective
Efficient
Engaging
Error tolerant
Easy to learn
Step 14
PURPOSE OF USABILITY TESTING
1.
Establish communication bridge between developers
and users
•
•
2.
Developer learns about user’s goals, perceptions,
questions, and problems
User exposed to capabilities of system early on, before
design is solidified
Evaluate a product
•
•
•
•
•
Validate design decisions
Identify potential problems early in design
Enable comparison of alternate versions of a design
element
Assess how well user needs and expectations are met
Prevent embarrassment resulting from things “slipping
through the cracks”
Step 14
IMPORTANCE OF USABILITY
TESTING
•
•
•
•
•
•
•
•
•
•
Developers and users possess different models
Developer’s intuitions are not always correct
There is no average user
It’s impossible to predict usability from appearance
Design standards and guidelines are not sufficient
Informal feedback is inadequate
Products’ built-in pieces almost always have system-level
inconsistencies
Problems found late more difficult and expensive to fix
Problems fixed during development mean reduced support
costs later
Advantages over a competitive product can be achieved
Step 14
SCOPE OF TESTING
Types of Tests
•
Exploratory Evaluations
– Explore prototype interface design features
– Gather feedback on preliminary designs
– Verify assumptions derived during requirements
determination
•
Assessment Evaluations
– Establish how well user tasks are supported
– Determine what usability problems may exist
•
Comparative Evaluations
– Compare two or more design alternatives
•
Validation Evaluations
– Ascertain whether a usability objective is achieved
Step 14
PROTOTYPES
•
Vehicles for
– Exploration
– Communication
– Evaluation
•
Purpose
– Obtain user input in design
– Provide feedback to designers
•
Roles
–
–
–
–
Communication not accuracy or thoroughness
Enables design to be better visualized
Provides insights into how the software will look and work
Aids in defining tasks, their flow, the interface itself, and
its screens
Step 14
PROTOTYPES
Kinds
•
Hand sketches and scenarios
– Screen sketches created by hand
•
Interactive paper prototypes
– Interface components constructed of common
paper technologies
•
Programmed facades
– Examples of finished dialogs and screens for some
important aspects of the system
•
Prototype-oriented languages
– An example of finished dialogs and screens for some
important aspects of the system
Step 14
PROTOTYPES
Hand Sketches and Scenarios
•
Description
–
–
–
•
Screen sketches created by hand
Focus is on design, not interface mechanics
A low-fidelity prototype
Advantages
–
–
–
–
–
–
–
–
–
Can be used very early in the development process
Suited for use by entire design team
No large investment of time and cost
No programming skill needed
Easily portable
Fast to modify and iterate
A rough approximation often yields more substantive critical comments
Easier to comprehend than functional specifications
Can be used to define requirements
Step 14
PROTOTYPES
Hand Sketches and Scenarios (Continued)
•
Disadvantages
–
–
–
–
–
–
–
Only a rough approximation
Limited in providing an understanding of navigation and flow
A demonstration, not an exercise
Driven by a facilitator, not the user
Limited usefulness for a usability test
A poor detailed specification for writing the code
Usually restricted to most common tasks
Step 14
PROTOTYPES
Hand Sketch Creation Process
•
Sketch (storyboard) the screens while determining:
–
–
–
•
•
•
•
Use an erasable medium
Sketch the screens needed to complete each task
Try selected metaphors and change as necessary
Storyboard common/critical/frequent scenarios first
–
–
•
•
•
The source of the screen’s information
The content and structure of individual screens
The overall order of screens and windows
Follow from beginning to end
Then, go back and build in exceptions
Don’t get too detailed; exact control positioning is not important,
just overall order and flow
Sketch storyboard as a team, including at least one user
Develop online prototypes only when everyone agrees that a
complete set has been satisfactorily sketched
Step 14
PROTOTYPES
Interactive Paper Prototypes
•
Description
–
–
–
•
Advantages:
–
–
–
•
Interface components (menus, windows, and screens) constructed of
common paper technologies (Post-It notes, transparencies)
Components are manually manipulated to reflect the dynamics of the
software
A low-fidelity prototype
More illustrative of program dynamics than sketches
Can be used to demonstrate the interaction
Otherwise, generally the same as for hand-drawn sketches and
scenarios
Disadvantages:
–
–
–
–
Only a rough approximation
A demonstration, not an exercise
Driven by a facilitator, not the user
Limited usefulness for usability testing
Step 14
PROTOTYPES
Programmed Facades
•
Description
–
–
–
•
Advantages
–
–
•
Examples of finished dialogs and screens for some important
aspects of the system
Created by prototyping tools
Medium-fidelity to high-fidelity prototypes
Provide detailed specification for writing code
A vehicle for data collection
Disadvantages
–
–
–
–
–
–
–
May solidify the design too soon
May create the false expectation that the “real thing” is only a short
time away
More expensive to develop
More time-consuming to create
Not effective for requirements gathering
Not all of the functions demonstrated may be used
Not practical for investigating more than two or three approaches
Step 14
PROTOTYPES
Prototype-Oriented Languages
•
Description
– An example of finished dialogs and screens for some important
aspects of the system
– Created through programming languages that support the actual
programming process
– A high-fidelity prototype
•
Advantages
– May include the final code
– Otherwise, generally the same as those of programmed facades
•
Disadvantages
– Generally the same as for programmed facades
Step 14
PROTOTYPES
Fidelity
• Prototype fidelity seems to have no impact on
the identification of usability problems
• Combinations of these prototypes should be
used throughout the entire system
development cycle
Step 14
TESTS
A tool to measure something, including:
•
•
•
•
•
•
•
•
•
Conformance with a requirement
Conformance with guidelines for good design
Identification of design problems
Ease of system learning
Retention of learning over time
Speed of task completion
Speed of need fulfillment
Error rates
Subjective user satisfaction
Step 14
KINDS OF TESTS
•
•
Guidelines and standards review
–
Heuristic evaluation
–
•
•
•
•
•
A review of the interface in terms of an organization’s standards and design
guidelines
A detailed evaluation of a system by interface design specialists to identify
problems
Cognitive walkthroughs
–
Reviews of the interface in the context of tasks users perform
Think-aloud evaluations
–
Users perform specific tasks while thinking aloud
Usability test
–
An interface evaluation under real-world conditions
Classic experiments
–
An objective comparison of two or more prototypes identical in all aspects
except for one design issue
Focus groups
–
A discussion with users about interface design prototypes or tasks
Step 14
KINDS OF TESTS
Guidelines and Standards Review
•
Description:
– A review of the interface in terms of an organization’s
standards and design guidelines
•
Advantages:
–
–
–
–
•
Can be performed by developers
Low cost
Can identify general and recurring problems
Particularly useful for identifying screen design and layout
problems
Disadvantages:
– May miss severe conceptual, navigation, and operational
problems
Step 14
KINDS OF TESTS
Heuristic Evaluation
•
•
•
Description:
–
A detailed evaluation of a system by interface design specialists to
identify problems
Advantages:
–
–
–
–
Easy to do
Relatively low cost
Does not waste user’s time
Can identify many problems
Disadvantages:
–
–
–
Evaluators must possess interface design expertise
Evaluators may not possess an adequate understanding of the tasks
and user communities
Difficult to:
–
Does not provide systematic way to generate solutions to problems
• Identify systemwide structural problems
• Uncover missing exits and interface elements
• Identify most important of all identified problems
Step 14
KINDS OF TESTS
Heuristic Evaluation Process
•
Guidelines:
– Use 3 to 5 expert evaluators
– Choose knowledgeable people
•
•
•
•
Familiar with the project situation
Possessing a long-term relationship with the organization
Experienced
Preparing the session:
– Select evaluators
– Prepare or assemble:
•
•
Project overview
Checklist of heuristics
– Provide briefing to evaluators to:
•
•
•
•
•
Review the purpose of the evaluation session
Preview the evaluation process
Present the project overview and heuristics
Answer any evaluator questions
Provide any special evaluator training that may be necessary
Step 14
KINDS OF TESTS
Heuristic Evaluation Process (Continued)
•
Conducting the session:
– Have each evaluator review the system alone
– The evaluator should:
•
•
•
•
Establish own process or method of review
– Provide usage scenarios, if necessary
Compare findings with usability principles list
Identify any other relevant problems / issues
Make at least two passes through the system
– Detected problems should be related to the specific
heuristics they violate
– Comments are recorded either:
•
•
By evaluator
By observer
– The observer may answer questions and provide hints
– Restrict the length of the session to 2 hours
Step 14
KINDS OF TESTS
Heuristic Evaluation Process (Continued)
•
After the session:
– Hold a debriefing session including observers and design
team members where:
•
•
•
Each evaluator presents problems detected and the heuristic it
violated
A composite problem listing is assembled
Design suggestions for improving the problematic aspects of
system are discussed
– After the debriefing session:
•
•
•
Generate a composite list of violations as a ratings form
Request evaluators to assign severity ratings to each violation
Analyze results and establish a program to correct violations
and deficiencies
Step 14
KINDS OF TESTS
Research-Based Set of Heuristics (Table 14.3)
1.
Automate unwanted workload
•
•
2.
Reduce uncertainty
•
3.
Reduce cognitive load by bringing together lower-level data
into a higher-level summation
Present new information with meaningful aids to interpretation
•
•
5.
Display data in a manner that is clear and obvious
Fuse data
•
4.
Free cognitive resources for high-level tasks
Eliminate mental calculations, estimations, comparisons,
and unnecessary thinking
Use a familiar framework, making easier to absorb
Use everyday terms, metaphors, and so on
Use names that are conceptually related to functions
•
•
Context-dependent
Attempt to improve recall and recognition
Step 14
KINDS OF TESTS
Research-Based Set of Heuristics (Table 14.3) (Continued)
6.
7.
Group data in consistently meaningful ways to decrease
search time
Limit data-driven tasks
•
•
8.
Include in the displays only that information needed by a user
at a given time
•
•
9.
10.
Reduce the time needed to assimilate raw data
Make appropriate use of color and graphics
Allow users to remain focused on critical data
Exclude extraneous information that is not relevant
to current tasks
Provide multiple coding of data where appropriate
Practice judicious redundancy
•
To resolve the conflict between heuristics 6 and 8
From Gerhardt-Powals (1996)
Step 14
KINDS OF TESTS
Possible Web Page Heuristics (Table 14.4)
1.
Speak the user’s language
•
•
2.
Be consistent
•
•
3.
Use familiar words, phrases, and concepts
Present information in a logical and natural order
Indicate similar concepts through identical terminology
and graphics
Adhere to uniform conventions for layout, formatting,
typefaces, labeling, and so on
Minimize the user’s memory load
•
•
Take advantage of recognition rather than recall
Do not force users to remember key information across
documents
Step 14
KINDS OF TESTS
Possible Web Page Heuristics (Table 14.4) (Continued)
4.
Build flexible and efficient systems
•
•
•
5.
Design aesthetic and minimalist systems
•
•
6.
Accommodate a range of user sophistication and diverse
user goals
Provide instructions where useful
Lay out screens so that frequently accessed information
is easily found
Create visually pleasing displays
Eliminate irrelevant or distracting information
Use chunking
•
•
Write materials so that documents are short and contain
only one topic
Do not force the user to access multiple documents to
complete a single thought
Step 14
KINDS OF TESTS
Possible Web Page Heuristics (Table 14.4) (Continued)
7.
Provide progressive levels of detail
•
•
8.
Give navigational feedback
•
•
•
9.
Organize information hierarchically, with more general
information appearing before more specific
Encourage the user to delve as deeply as needed, but to
stop whenever sufficient information has been obtained
Facilitate jumping between related topics
Allow the user to determine current position in document
structure
Make it easy to return to an initial state
Don’t lie to the user
•
•
Eliminate erroneous or misleading links
Do not refer to missing information
From Levi and Conrad (1996)
Step 14
KINDS OF TESTS
Cognitive Walkthroughs
•
Description:
•
Advantages:
•
Disadvantages:
– Reviews of the interface in the context of tasks users perform
– Allow a clear evaluation of the task flow early in the design
process
– Do not require a functioning prototype
– Low cost
– Can be used to evaluate alternate solutions
– Can be performed by developers
– More structured than a heuristic evaluation
– Useful for assessing “exploratory learning”
– Tedious to perform
– May miss inconsistencies and general and recurring problems
Step 14
KINDS OF TESTS
Cognitive Walkthroughs (Continued)
•
Guidelines:
– Needed to conduct the walkthrough are:
•
•
•
General description of proposed system users and their relevant
knowledge
Specific description of one or more core or representative tasks
to be performed
List of correct actions to complete each task
– Review:
•
•
Several core or representative tasks across a range of functions
Proposed tasks of particular concern
– Developers must be assigned roles of:
•
•
Scribe to record results of the action
Facilitator to keep the evaluation moving
– Start with simple tasks
– Don’t get bogged down demanding solutions
– Limit session to 60 to 90 minutes
Step 14
KINDS OF TESTS
Think-Aloud Evaluations
•
Description:
– Users perform specific tasks while thinking aloud
– Comments are recorded and analyzed
•
Advantages:
– Utilizes actual representative tasks
– Provides insights into the user’s reasoning
•
Disdvantages:
– May be distracting and unnatural for participants
– Can slow participants thought processes
– Can be exhausting for participant
•
Guidelines:
– Develop:
•
•
Several core or representative tasks
Tasks of particular concern
– Limit session to 60 to 90 minutes
Step 14
KINDS OF TESTS
Usability Test
•
Description:
•
Advantages:
•
Disadvantages:
– An interface evaluation under real-world or controlled conditions
– Measures of performance are derived for specific tasks
– Problems are identified
– Utilizes an actual work environment
– Identifies serious or recurring problems
–
–
–
–
High cost for establishing facility
Requires test conductor with interface expertise
Emphasizes first-time system usage
Poorly suited for detecting inconsistency problems
Step 14
KINDS OF TESTS
Performance and Process Measures
• Performance Data
– Focuses on how well users can do their tasks
• Completion rates
• Completion times
• Error rates
• Process Data
– Comprised of measures about what users are doing
during task completion
• Participant's self reports
• Observation of participant behavior
• Eye movement tracking
Step 14
KINDS OF TESTS
Classic Experiments
•
Description:
– An objective comparison of two or more prototypes identical
in all aspects except for one design issue
•
Advantages:
– Objective measures of performance are obtained
– Subjective measures of user satisfaction may be obtained
•
Disadvantages:
– Requires a rigorously controlled experiment to conduct the
evaluation
– The experiment conductor must have expertise in setting up,
running, and analyzing data collected
– Requires creation of multiple prototypes
Step 14
KINDS OF TESTS
Classic Experiments (Continued)
•
Guidelines:
– State a clear and testable hypothesis
– Specify a small number of independent variables to be
manipulated
– Carefully choose the measurements
– Judiciously select study participants and carefully or randomly
assign them to groups
– Control for biasing factors
– Collect the data in a controlled environment
– Apply statistical methods to data analysis
– Resolve the problem that led to conducting the experiment
Step 14
KINDS OF TESTS
Focus Groups
•
Description:
– A discussion with users about interface design prototypes
or tasks
•
Advantages:
– Useful for:
•
•
Obtaining initial user thoughts
Trying out ideas
– Easy to set up and run
– Low cost
•
Disadvantages:
– Requires experienced moderator
– Not useful for establishing:
•
•
How people really work
What kinds of usability problems people have
Step 14
KINDS OF TESTS
Focus Groups (Continued)
•
Guidelines:
– Restrict group size to 8 to 12
– Limit to 90 to 120 minutes in length
– Record session for later detailed analysis
Step 14
CHOOSING A TESTING METHOD
Usability Test vs. Heuristic Evaluation
•
Research concludes that both are effective
at different times in the design process and
should be utilized
– Heuristic reviews should be applied first or early
in the design process to identify simpler problems
– Usability testing should be applied later in the design
process to identify more complex problems
Step 14
CHOOSING A TESTING METHOD
Concurrent vs. Retrospective User Comments
•
Concurrent
– Participants verbalize their observations and comments during the test
•
Retrospective
– Participants verbalize their observations and comments after test
completion
•
Study Results
– There are no differences in the majority of the comments using
either method
– Concurrent does not appear to slow down the participants or
cause more errors
– Valid comments can be collected up to 24 hours after the test
– Participants tend to comment on successes, not “struggles”
– Concurrent are better for certain design problems such as link naming
– Retospective are more valuable for helping resolve complex issues
Step 14
DEVELOPING & CONDUCTING A TEST
TheTest Plan
•
•
Define the scope of the test
Define the purpose of the test
– Performance goals
– What the test is intended to accomplish
•
•
Create a test timetable
Define the test methodology
– Type of test to be performed
– Test limitations
– Developer participants
•
•
•
•
Develop scenarios to satisfy the test’s purpose
Select test Participants
Identify and schedule the test facility or location
Run a pilot test
Step 14
DEVELOPING & CONDUCTING A TEST
Things to Test in Web Site Design (Table 14.6)
•
•
•
•
•
•
•
•
•
•
All the browsers, servers, and monitors used
Different dial-up speeds
Navigation design
Visual design style
Content legibility and readability
Backgrounds and color
Graphics and icons
Page breaks
Page printing
Accessibility
Step 14
DEVELOPING & CONDUCTING A TEST
Test Participants
•
•
•
•
Assemble the proper people to participate
Consider allowing users to work in pairs
Select the proper number of participants
Consider providing compensation or incentives
Step 14
DEVELOPING & CONDUCTING A TEST
Test Facility or Location
• In a formal environment
– Usability laboratory
• In an informal environment
– Office or conference room
• In the field at the actual work location
• Unmoderated remote testing
Step 14
DEVELOPING & CONDUCTING A TEST
Pilot Test
•
•
•
•
Choose a participant
Design and assemble the test environment
Run the pilot test
Analyze and interpret the data to see whether
anything important has been overlooked
• Recruit test participants at conclusion of
the pilot test
Step 14
TEST CONDUCT & DATA COLLECTION
Usability Test Guidelines
•
Before starting the test:
– Ensure that all test materials and equipment are available
– Explain that the objective is to test the software, not the
participants
– Explain how test materials and records will be used
– If a consent agreement is to be signed, explain all
information on it
– If verbal protocols will be collected, let participants practice
thinking aloud
– Ensure that:
•
•
All participants’ questions are answered
All participants are comfortable with all procedures
Step 14
TEST CONDUCT & DATA COLLECTION
UsabilityTest Guidelines (Continued)
•
During the test:
– Minimize the number of people who will interact with the
participants
– If observers will be in the room, limit them to two or three
– Provide a checklist for recording:
•
•
•
•
•
•
Times to perform tasks
Errors made in performing tasks
Unexpected user actions
System features used/not used
Difficult/easy-to-use features
System bugs or failures
– Record techniques and search patterns that participants
employ when attempting to work through a difficulty
– If participants are thinking aloud, record assumptions and
inferences being made
Step 14
TEST CONDUCT & DATA COLLECTION
Usability Test Guidelines (Continued)
•
During the test (Continued):
– Record the session with a tape recorder or video camera
– Do not interrupt participants unless absolutely necessary
– If participants need help, provide some response
•
•
•
Provide encouragement or hints
Give general hints before specific hints
Record the number of hints given
– Watch carefully for signs of stress in participants:
•
•
•
Sitting for long times doing nothing
Blaming themselves for problems
Flipping through documentation without really reading it
– Provide short breaks when needed
– Maintain a positive attitude, no matter what
Step 14
TEST CONDUCT & DATA COLLECTION
Usability Test Guidelines (Continued)
•
After the test:
– Hold a post-session interview with participants
•
Inform what has been learned in the test
– Provide a follow-up questionnaire that asks participants
to evaluate the product or tasks performed
– If videotaping, use tapes only in proper ways
•
•
Respect participants’ privacy
Get written permission to use tapes
Step 14
ANALYZE, MODIFY, AND RETEST
•
•
•
•
•
•
Compile the data from all test participants
List the problems the participants had
Sort the problems by priority and frequency
Develop solutions for the problems
Modify the prototype as necessary
Test the system again and again
Step 14
EVALUATE THE WORKING SYSTEM
• Collect information on actual system usage
through:
–
–
–
–
–
–
–
Interviews and focus group discussions
Surveys
Support line
Online suggestion box or trouble reporting
Online bulletin board
User newsletters and conferences
User performance data logging
• Respond to users who provide feedback