Variety of distractions

Numerous visual and auditory interruptions.

- Pop ups
Extensive visual clutter.
- No white spaces.
Poor information readability.

Poor information legibility.

Incomprehensible screen components.
Confusing and inefficient navigation.
Inefficient operations and extensive waste of
user time.
Excessive or inefficient page scrolling.
Information overload.
Design inconsistency.
Outdated information.
Stale design caused by emulation of printed
documents and past systems.

Goals of interface design

Reduce visual work

Reduce intellectual work.
Reduce memory work.
Reduce motor work.
Minimize or eliminate any burdens or instructions
imposed by technology

What Users Do
When interacting with a computer, a person
1.

Identifies a task to be performed or a need to be

fulfilled.

2. Decides how the task will be completed or the need

fulfilled.
3. Manipulates the computers controls.
4. Gathers the necessary data or content while filtering out
meaningless data or
content.
5. Forms judgments resulting in decisions relevant to the
task or need.

Screen and Web Page Meaning and

Purpose
Each

element
Every control
All text

The

screen organization
All emphasis
Each color
Every graphic
All screen animation
Each message
All forms of feedback
Must
Have meaning to users.
Serve a purpose in performing tasks.

Consistency
Provide

real-world consistency. Reflect a persons

experiences, expectations, work conventions, and
cultural conventions.
Provide internal consistency. Observe the same
conventions and rules for all aspects of an
interface screen, and all application or Web site
screens, including
Operational and navigational procedures.
Visual identity or theme.

Component
Organization.
Presentation.
Usage.
Locations.
Follow the same conventions and rules across all

related interfaces.

Deviate

only when there is a clear benefit for the

user.

consistency leads to :reduction in task completion times

increase in user satisfaction, reduction in
learning time.
consistency greatly aids learning

Starting Point
Provide

an obvious starting point in the

screens upper-left corner.
Focus user attention on the most important
parts of a screen or page.

Ordering of Data and Content

Divide

information into units that are logical,

meaningful, and sensible.
Organize by the degree of interrelationship
between data or information.
Provide an ordering of screen units of
information and elements that is prioritized
according to the users expectations and needs.
Possible ordering schemes include

 Conventional. Examples are by days of the week, by

months of the
year, by ones name and address, or along a timeline.
These elements should always be ordered in the customary
way.

Sequence of use. Sequence of use grouping involves

arranging information items in the order in which they are

commonly received or transmitted, or in natural groups. An
address, for example, is normally given by street, city, state,
and zip code.
Frequency of use. Frequency of use is a design
technique based on the principle that information items used
most frequently should be grouped at the beginning, the second
most frequently used items grouped next,

Function. Information items are grouped according to

their purpose or
by some common parameter. All items pertaining to
insurance coverage, for example, may be placed in one
location

Importance.

Importance grouping is based on the

informations importance to the users task or need. Important items
are placed first or in the most prominent
position. Items may be organized from best to worst or largest to
smallest.

General to specific. If some data is more general than

others, the general elements should precede the specific elements.
This will usually occur when there is a hierarchical relationship
among data elements.

Ordering normally reflects a combination of these techniques.

Information may be organized functionally but, within each
function, individual items may be arranged by sequence or
importance. Numerous permutations are possible. The ordering
scheme established must encompass all the information.
Ensure that information that must be compared is always
visible to the user at the same time.

Form groups that cover all possibilities.

Ensure that information that must be compared

is visible at the same time.

Ensure that only information relative to the
users tasks or needs is presented on the screen.

organizational schemes goal is to keep to a

minimum the number of information variables

Ordering Web Pages

Establish levels of importance.

Place critical information near the top of the
Place important items at the top of a page.
Organize information clearly.
Place important items consistently.
Facilitate scanning.
Structure for easy comparison.

Web site.

Navigation and Flow

Provide

an ordering of screen information and elements

that
Is rhythmic, guiding a persons eye through the display.
Encourages natural movement sequences.
Minimizes pointer and eye movement distances.
Locate the most important and most frequently used
elements or controls at the top

left.
Maintain a top-to-bottom, left-to-right flow.
Assist in navigation through a screen by
Aligning elements.
Grouping elements.
Using line borders.
Through focus and emphasis, sequentially, direct attention
to items that are
1. Critical.
2. Important.
3. Secondary.
4. Peripheral.
Tab through windows in logical order of displayed
information.
Locate command buttons at end of the tabbing order
sequence.
When groups of related information must be broken and
displayed on separate screens, provide breaks at logical or
natural points in the information flow.

Focus and Emphasis

Visually

emphasize components such as

Most prominent elements.
Most important elements.
Central idea or focal point.
Changing elements.
Most critical elements.
To provide emphasis use techniques such as
Higher brightness.
Reverse polarity or inverse video.
Distinctive Typeface.

 Bold.
Italics.
Underlining.
Blinking.
Line rulings and surrounding boxes or frames.
Color.
Larger size.
Animation.
Positioning.
Distinctive or unusual shape.
Isolation.
De-emphasize less important elements.
To ensure that emphasized screen elements stand out,
avoid
Emphasizing too many screen elements.
Using too many emphasis techniques.
Minimize screen clutter.
In Web page design
Call attention to new or changed content.
Ensure that page text is not overwhelmed by page
background.
Apply

Techniques for emphasis

Brightness. Abrighter element has a good attentiongetting quality and no disturbing features.
Reverse polarity- lighter text on darker background and vice
versa.
Distinctive typeface. Differences in fonts have a moderate
attention-getting capability. Their varying sizes and shapes can

be used to differentiate screen components. Larger, bolder

letters can be used to designate higher-level screen pieces,
such as different levels of headings, if the headings are used to
search for something.

Bolding, Italics, and Underlining. These techniques can be

used to provide subtle differences in screen elements. Bolding
adds minimal noise to a design and highlights important
elements and is generally the preferred technique. Italics, while
adding minimum noise, is less detectable and legible.
Underlining is a moderate attention-getting mechanism, but it
adds noise and can reduce legibility, so it should be used
conservatively and carefully.
Blinking. Blinking has a very high attention-getting capability,
but it reduces text
readability and is disturbing to most people. It often causes
visual fatigue if used
excessively. Therefore, it should be reserved for urgent
situations and times when
a quick response is necessary.
Line rulings and surrounding boxes or frames. Use lines
to emphasize and guide the users eye through the screen. Use
horizontal rulings as a substitute for
spaces when breaking a screen into pieces. Use vertical rulings
to convey to the
screen viewer that a screen should be scanned from top to
bottom.
Colors. Use color to emphasize and assist in the identification
of screen components. Some colors appear brighter than
others. Parts of images or text comprised of brighter colors
seem to gain focus first. Presenting some elements in brighter
colors and others in darker colors aids people in determining

their relative importance. Display no more than four colors at

one time.
Size. Larger objects draw attention before smaller ones. People will
fixate on larger
items first, but may skip certain kinds of images that are thought to
be advertisements
or decoration.
Animation. Movement is the most effective attention-getter. It
draws ones eyes.
However, movement can be very annoying if it is not relevant or
useful. Movement can also distract from other information if it
continues after the users attention is captured.

Positioning. Placing an element in a position where the eye

first meets the screen can capture attention.
Distinctive or unusual shape. The eye is also drawn to
distinctive or unusual
shapes.
Isolation. White space around the highlighted items tends to
increase their prominence. Ones eyes will also be drawn to the
start of any text following
white space.
De-emphasize less important elements. To designate an
element as not applicable or not active, dim it or gray it out.

Presenting Information Simply and

Meaningfully
Provide

legibility.
Information is noticeable and distinguishable.
Provide readability.
Information is identifiable, interpretable, and attractive.
Present information in usable form.

 Translations, transpositions, and references to

documentation should not be required to interpret and
understand information.
Utilize contrasting display features.
To attract and call attention to different screen elements.
Create visual lines.
Implicit and explicit, to guide the eye.
Be consistent.
In appearance and procedural usage.
Legibility. Legibility is distinguishableness. Computer
technology today presents a seemingly endless array of choices
in such aspects as font styles, sizes, and weights.
Readability. Readability is the degree to which prose can be
understood. It is based on the complexity of words and
sentences. Readability is established by factors like the length
and commonality of words used, sentence length, and the
number of syllables and clauses contain within a sentence.
Usability. Screen information should be presented in a directly
usable form.
Reference to documentation or other extra steps for
interpretation should never
be required. In graphical system design, content consisting of
words and text is
much faster to comprehend and use than content in a graphical
form.
Contrasting display features. Use contrasting display features to
call attention to
different screen components, items being operated upon, or urgent
items. Usable
features include such things as letter style, size, and color. Features
chosen
should provide perceptual cues to aid in screen component
identification so that

attention may be quickly and accurately focused. Perceptual cues

clarify structure
and relationships, and give hints to the reader. Good readers make
great use
of the typographic and semantic cues found in well-presented text.
Visual lines. The eye should be guided vertically or horizontally
implicitly through
the screen through the use of white space and content, typefaces,
and control and
text alignments. In situations where a large amount of information
must be presented
on one screen, eye movement direction may also be communicated
to the
viewer explicitly, through the drawing of actual vertical or horizontal
rules.
Purposeless, unfettered wandering of the eye should be
discouraged.
Consistency. Methods chosen to present information must, of
course, always be
consistent in visual appearance and procedural usage

Font Size
Use no more than three sizes.
Consider x height.
For graphical systems use
12 point for menus.
10 point for windows.
For Web pages use
12 to 14 points for body text.
18 to 36 points for titles and headings.

For

line spacing use one to one and one-half times font

size.
Never change established type sizes to squeeze in
more text.
Font Styles and Weight
Use no more than
Two styles of the same family.
Standard and italic.
Italic is best presented in a serif font.
Two weights.
Regular and bold.
Bold is best presented in a sans serif font.
Use italics when you want to call attention.
Use bold when you want to call attention or create a
hierarchy.
In Web pages, use an underline only to indicate a
navigation link.

Information retrieval on web

The magnitude and structure of the Web seems to be creating a
user-interaction pattern with these characteristics:
The

most sought-after Web commodity is information content.

Behavior is often goal-driven.
Reading is no longer a linear activity.
People scan and select.
Impatience.
Frequent switching of purpose.
Web users access a site for different reasons: a focused search
for a piece of information or an answer, a less focused

browsing, or simply to surf. But information content is what

most people come to see.
High-tech capabilities, fancy graphics, and a rainbow of colors
do not compensate for insufficient or poor content.

Page Perusal
The most frequent method used in perusing a page is
scanning or skimming,
Concentrating less on detail and word-for-word reading.
Rarely are articles read fully.

Scanning Guidelines (pg. 269)

I.

Organize content in a logical, systematic and obvious way.

Guide a persons eye in a systematic way through
alignment, columnization, and proper use of white spaces.
Order information to be consistent with the viewers
expected scanning path.

II.

Highlight and emphasize important information.

Use of varying font sizes and boldness.
Use links- Underlining makes them standout

III.

Use clear, well-located headings and subheadings.

Distinct and obvious headings are often targets for
scanning

 Helps people to classify and organize page

information, understand page structure, and
maintain orientation.
Headings should relate to information or functions
that follow.
IV.

Use short phrases, sentences, and paragraphs.

Concise and well-written phrases, sentences for easy
scanning.

V.

Include bulleted and numbered lists.

Lists draw attention to important points.
Lists also lend themselves to linking.

VI.

Array information in tables.

Present information in tables for easier scanning and
comparing.

Browsing Guidelines
Facilitate scanning.
Provide multiple layers of structure.
Make navigation easy so that users can concentrate on
content rather than moving around.
Freely use links to encourage browsing.
Respect the users desire to leave.
Upon returning, help the users reorient themselves

 Provide signposts, meaningful page titles, headings,

and summaries. Place keywords at the start of all page
titles.

Problems with searching

Not understanding the user.

There can never be a single ideal search interface.

Too often, the level of searching expertise f the user is
not determined.
The nature of every possible query or the type of
information being searched for is not anticipated.

Difficulties in formulating the search.

The users did not know what to type in or how to

format the query.
These problems can occur because of the diverse in
users search needs.
Interface differences.
Too literal search engine.
Irrelevant page titles.

Difficulties in presenting meaningful results.

Search parameters are too narrowly defined, no results or

irrelevant results.
If too broadly defined, the user is inundated with results
and the right answer is buried within.
No Matches Found result occurred because of a simple
keying typographical error.
Result descriptions consisting of a few words, urls often
make no sense to novice users.

 Goal-oriented users are only concern with the information

they need.
Purpose of the search facility is to return information and
not the data.

Know Your Search User

Identify the level of expertise of the user.
Identify the terms commonly used by people in searching.
Anticipate:
The nature of every possible query.
The kind of information desired.
The type of information being searched.
How much information will result from the search?
Plan for the users switching purposes during the search
process.
Plan for flexibility in the search process.

Statistical Graphics
A statistical graphic is data presented in a graphical format. A well-designed
statistical graphic, also referred to as a chart or graph, consists of complex
ideas communicated with clarity, precision, and efficiency.

Use of Statistical Graphics

Graphs are used for
Simple comparisons of data.
Presentation of changes over time.
Statistical analysis.
Illustration of proportions.
Reserve for material that is rich, complex, or difficult.
Less than or equal to 3 numbers use a sentence.
For 4 to 20 numbers use a table.
More than 20 numbers use a graph.

 Data sets may be compared using bar charts while changes over time
can be shown using line graphs. Statistical analysis can be
accomplished using histograms and scatterplots.
Graph types include surface charts and pie charts.

Types of Statistical Graphics

Curve and Line Graphs

Display data curves or lines that must be compared in a single graph.
Display no more than four or five curves in a single graph.
Identify each curve or line with an adjacent label whenever possible.
For tightly packed curves or lines, provide data differentiation with a
line-coding.
Technique, such as different colors or different line composition
types.
Highlight curves or lines representing important or critical data.
When comparing actual to projected data
Use solid curves or lines for actual data.
Use broken curves or lines for projected data.

Single graph.

Same as line or curve graph

Comparing actual and projected data: When a curve or line must be
compared to a standard or critical value, display a reference curve or line
reflecting that value.

Scatterplots
Two dimensions: Limit scatterplots to two dimensions. Three-dimensional
scatterplots, while possible, do not yield clear, unambiguous displays.
Consistent intervals: Maintain consistent scale size intervals. Inconsistent
spacing
size between scale ticks on the two axes will distort the displayed data.
Distinguishable plots: Construct the plot points of distinguishable, equalsized circles, squares, rectangles, or diamonds. These symbols may be filled
in or empty.

Bar Charts
Consistent orientation.
While bars may be oriented either horizontally or vertically,
Frequency counts are best displayed in vertical bars when the values
or count being displayed are of greatest interest.
Use horizontally arrayed bars for time durations. Also use this
orientation when the data labels are long and room is needed to
present them, and when the information categories must be
highlighted, rather than the count.

Bar spacing.
Space the bars for ease of visual comparison.
The spacing between bars should be one-half or less of the bar width.

Differentiation.
If different kinds of bars must be easily distinguished, provide
differentiation through a coding technique such as the use of color, texture,
or shading.

Related bar ordering.

Provide a consistent ordering for related groups of bars.

Pie Chart
Total 100 percent.
The parts must add up to 100 percent.
Five segments or fewer.
To minimize confusion, restrict pies to five segments or fewer.
Minimum five percent.
Avoid very small segments. Segments should take up at least 5 percent (18
degrees) of the circle in order to provide adequate segment differentiation.
Start at 12:00.
Start with the largest wedge at 12:00 (or a quarter hour)
Order rom largest to smallest in a clockwise order.
Segment coding.
The kinds of textures or colors selected for segments should not emphasize
one segment over another, unless this emphasis is intended.

Highlighting.
Highlight segments requiring emphasis. Use a contrasting display
technique or explode segments requiring emphasis. Exploding is
accomplished by slightly displacing a segment from the remainder of the
pie.